HarmonyOS RelativeContainer容器如何自适应高度？

Question

目前需求是界面显示为list表，每个item上的子组件需要叠加覆盖显示，并且每个item高度需要根据内容来适应高度，不是固定高度，需要用到RelativeContainer布局，但是如果该容器不写高度的话，会默认占整屏幕，如何设置自适应子组件的高度？stack不符合场景

Answer 1

从API Version 11开始，在RelativeContainer组件中，width、height设置auto表示自适应子组件。当width设置auto时，如果水平方向上子组件以容器作为锚点，则auto不生效，垂直方向上同理

参考demo：

class SinglePlatformBean {
  title: string = ""
  sumary: string = ""
  is_completed: number = 0 //0不显示 1待办 2已办

  constructor(title: string, sumary: string, is_completed: number) {
    this.title = title
    this.sumary = sumary
    this.is_completed = is_completed
  }
}

@Entry
@Component
struct Page {
  build() {
    Column() {
      SinglePlatformList({ singlePlatfrom: new SinglePlatformBean("title11", "sumary1111111", 1), index: 0 })
      SinglePlatformList({ singlePlatfrom: new SinglePlatformBean("title22", "sumary222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222", 1), index: 1 })

    }.width('100%')

  }
}

@Component
export struct SinglePlatformList {
  @Prop singlePlatfrom: SinglePlatformBean
  @Prop index: number
  build() {
    Column() {

      RelativeContainer() {
        Column() {
          Text(this.singlePlatfrom.title)
            .fontSize(17)
            .maxLines(2)
            .margin({
              top: 15
            })
            .ellipsisMode(EllipsisMode.END)

          Text(this.singlePlatfrom.sumary)
            .fontSize(15)
            .margin({ top: 15 })

          //0不显示 1待办 2已办
          if (this.singlePlatfrom.is_completed == 1) {
            this.deletePlatBuilder()
          }
        }
        .alignItems(HorizontalAlign.Start)
        .borderRadius(10)
        .backgroundColor($r('app.color.start_window_background'))
        .width('100%')
        .padding(17)
        .height('auto')
        .id("singlePlatfrom" + this.index)

        if (this.singlePlatfrom.is_completed == 1) {
          Image($r('app.media.xxx'))
            .width(45)
            .alignRules({
              right: { anchor: "singlePlatfrom" + this.index, align: HorizontalAlign.End },
              top: { anchor: "singlePlatfrom" + this.index, align: VerticalAlign.Top }
            })
        } else if (this.singlePlatfrom.is_completed == 2) {
          Image($r('app.media.xxx'))
            .width(45)
            .alignRules({
              right: { anchor: "singlePlatfrom" + this.index, align: HorizontalAlign.End },
              top: { anchor: "singlePlatfrom" + this.index, align: VerticalAlign.Top }
            })
        }
      }
      .height('auto')
    }
    .margin({ bottom: 15 })
    .width('100%')
  }

  @Builder
  deletePlatBuilder() {
    // 虚线
    Column() {
      Divider().height(0)
        .borderWidth(0.8)
        .borderStyle(BorderStyle.Dashed)
        .margin({ top: 10, bottom: 10 })

      Image($r('app.media.xxx'))
        .width(20)
    }
    .alignItems(HorizontalAlign.Start)
  }
}