HarmonyOS RelativeContainer容器如何根据子组件的高度进行自动设置高度？

Question

RelativeContainer容器内容有一个text组件，组件内容可不固定，所有高度也不固定，默认RelativeContainer组件的高度是屏幕高度，这个可以设置为自动高度吗？

Answer 1

从API Version 11开始，RelativeContainer组件的width、height设置auto表示自适应子组件的宽、高；但需要注意的是当width设置auto时，如果水平方向上子组件以容器作为锚点，则auto不生效，垂直方向上同理。

简单示例代码如下：

@Entry
@Component
struct Index3 {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('Index3HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          //当width设置auto时，如果水平方向上子组件以容器作为锚点，则auto不生效
          // middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .width('90%')
    }
    .height('100%')
    .width('auto')
    .backgroundColor(Color.Orange)
  }
}

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