HarmonyOS RelativeContainer组件缺陷无法实现ui效果？

Question

RelativeContainer组件缺陷无法实现ui效果

Answer 1

1、左侧占满剩余宽度：可未左侧设置layoutWeight属性；

2、B高度依赖A高度，A高度自适应：可使用onAreaChange事件动态获取A高度，然后为B设置高度；

3、indicator默认边距无法消除：目前swiper内置indicator样式有宽高，不支持修改，可通过调整组件的margin值来适应，也可以自定义indicator;

4、获取swiper组件内容的最大高度：目前没有获取swiper未展示的组件的宽高属性，无法自适应最大子组件的高度，建议设置最大高度来实现。以下是参考demo：

@Entry
@Component
struct Index {
  private swiperController: SwiperController = new SwiperController()
  @State rightHeight: Length = 80
  @State swiperData: string[] = ['',''];
  @State currentIndex: number = 0;
  build() {
    Column() {
      Text('近期需关注')
        .textAlign(TextAlign.Start)
        .fontSize(20)
        .width('100%')
      Text('宝宝能独坐啦').margin({bottom:10})
        .textAlign(TextAlign.Start)
        .width('100%')
      Row(){
        Column(){
          Swiper(this.swiperController){
            Column(){
              Text('疫苗对比1')
                .fontSize('20')
              Text('#流感疫苗选三价还是四价？')
                .textAlign(TextAlign.Start)
                .width('100%')
            }
            Column(){
              Text('疫苗对比2')
                .fontSize('20')
              Text('#2流感疫苗选三价还是四价？流感疫苗选三价还是四价？流感疫苗选三价还是四价？2')
            }
          }
          .indicator(false)
          .onChange(index => {
            this.currentIndex = index;
          })
          // 自定义indicator
          Row({ space: 20 }) {
            ForEach(this.swiperData, (item: string, index: number) => {
              Shape() {
                Rect().width(12).height(5).radius(5).fill(index !== this.currentIndex ? Color.Black : Color.Red)
                  .fillOpacity(0.6)
              }
            })
          }
          .margin({ top: 10 })
        }
        .layoutWeight(1) //占用剩余的宽度
        .backgroundColor(Color.Green)
        .onAreaChange((newA:Area,oldA:Area)=>{
          this.rightHeight = oldA.height;
        })
        .padding(10)

        Row(){
          Column(){
            Image($r('app.media.app_icon'))
              .width(30)
              .height(30)
            Text("记头围")
          }
          Column(){
            Image($r('app.media.app_icon'))
              .width(30)
              .height(30)
            Text("记体重")
          }
          .margin({left:10})
        }
        .backgroundColor(Color.Green)
        .padding({ top: '20.00vp', right: '10.00vp', bottom: '20.00vp', left: '10.00vp' })
        .margin({left:10})
        .height(this.rightHeight)
      }
      .margin({bottom:10})
    }
    .width('100%')
    .padding(10)
    .backgroundColor(Color.Gray)
  }
}