RelativeContainer容器无法高度自适应？

Question

elativeContainer容器默认是高度全屏的，不支持自适应，用的时候都需要写死容器高度，局限性明显

Answer 1

解决方案

使用API11，RelativeContainer支持宽高自适应子组件，将其设置为auto即可，但限制是当width设置auto时，如果水平方向上子组件以容器作为锚点，则auto不生效，垂直方向上同理，具体使用方法请参考文档。

文档链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-relativecontainer-0000001820880933

参考demo:

@Entry
@Component
struct MyRelativeContainer {
  build() {
    Column() {
      Row() {
        Text('宽度高度自适应')
      }
      .width("100%");

      RelativeContainer() {
        Row()
          .width(100)
          .height(100)
          .backgroundColor("#FF3333")
          .alignRules({})
          .id("row1")

        Row()
          .width(100)
          .height(100)
          .backgroundColor("#FFCC00")
          .alignRules({
            top: { anchor: "row1", align: VerticalAlign.Top },
            left: { anchor: "row1", align: HorizontalAlign.End },
          })
          .id("row2")

        Row()
          .height(100)
          .width(100)
          .backgroundColor("#FF6633")
          .alignRules({
            left: { anchor: "row1", align: HorizontalAlign.Start },
            top: { anchor: "row1", align: VerticalAlign.Bottom }
          })
          .id("row3")
      }
      .width("auto").height("auto")
      .margin({ left: 50 })
      .border({ width: 2, color: "#6699FF" })
    }
    .height('100%')
  }
}