【HarmonyOS NEXT】使用RelativeContainer布局页面，如何实现height自适应

 【关键字】

RelativeContainer / height / 自适应 / API 11

【问题描述】

使用RelativeContainer布局页面，如何设置height才能使布局高度动态适应展示的内容？

【解决方案】

从API Version 11开始，在RelativeContainer组件中，width、height设置auto表示自适应子组件，具体请参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-relativecontainer-0000001820880933#ZH-CN_TOPIC_0000001820880933__规则说明

示例代码如下：

@Entry
@Component
struct Index {

build() {
Column() {

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},
//top:{anchor:"row1", align:VerticalAlign.Top}
})
.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"})
//.padding({left:10, top:10, right:30, bottom:30});
}
.height('100%')
//.padding({left:10, top:10, right:10, bottom:10});
}
}