【关键字】
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});
}
}