HarmonyOS RelativeContainer不能自适应高度问题？

Question

列表 item 布局比较复杂，使用了RelativeContainer，每个item不能根据内部组件自适应高度希望RelativeContainer的每一个item可以根据内部组件本身的高度自适应高度，有没有好的解决办法

Answer 1

可仔细阅读该组件的规则说明，链接：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-relativecontainer-V5\#规则说明

"当width设置auto时，如果水平方向上子组件以容器作为锚点，则auto不生效，垂直方向上同理"

可参考如下代码：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State person:Person = new Person()

  @Builder
  itemView2(item: Person) {
    RelativeContainer() {
      Text(item.name)
        .fontColor(Color.Black)
        .fontSize(15)
        // .alignRules({
        //   left: { anchor: '__container__', align: HorizontalAlign.Start },
        //   top: { anchor: '__container__', align: VerticalAlign.Top }
        // })
        .margin({ left: 10, top: 20 })
        .id('id_name')
      Text(item.sex)
        .fontColor(Color.Gray)
        .fontSize(13)
        .alignRules({
          top: { anchor: 'id_name', align: VerticalAlign.Bottom },
          // left: { anchor: '__container__', align: HorizontalAlign.Start }
        })
        .margin({ left: 10, top: 5 })
        .id('id_sex')
      Text(item.phone)
        .fontColor(Color.Red)
        .fontSize(12)
        .alignRules({
          top: { anchor: 'id_name', align: VerticalAlign.Bottom },
          left: { anchor: 'id_sex', align: HorizontalAlign.End }
        })
        .margin({ left: 5, top: 5 })
        .id('id_phone')
      Image($r('app.media.startIcon'))
        .width(40)
        .height(40)
        .objectFit(ImageFit.Cover)
        .alignRules({
          left: { anchor: 'id_phone', align: HorizontalAlign.End },
          center: { anchor: 'id_phone', align: VerticalAlign.Center },
        })
        .id('id_avatar')
    }
    //设置auto
    .width("auto")
    .height("auto")
    .borderColor(Color.Pink)
    .borderWidth(5)
  }

  build() {
    Column() {
    this.itemView2(this.person)
    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}

class Person {
  name: string = "John"
  sex: string = "男"
  phone: string = "8208208820"
  age: number = 18
}