HarmonyOS 鸿蒙Next RelativeContainer 高度如何自适应子组件高度

【关键字】

RelativeContainer / GridItem子组件 / 自适应子组件高度

【问题描述】

使用alignRules参数会导致RelativeContainer填充了整个父组件的高度，如何实现自适应子组件高度呢？

Demo示例：

RelativeContainer() {
// Row() {
// }
// .margin({ bottom: ‘15lpx’ })
// .width(‘100%’)
// .height(‘0.5lpx’)
// .backgroundColor(’#D7DEE2’)
// .id(“line”)

Image($r(‘app.media.checkBoxSelected’))
.width(‘23lpx’)
.height(‘23lpx’)
.margin({ left: ‘16lpx’, right: ‘16lpx’ })
.alignRules({
center: { anchor: “container”, align: VerticalAlign.Center },
left: { anchor: “container”, align: HorizontalAlign.Start }
})
.id(‘img1’)
}
.width(‘100%’)
.height(‘auto’)
.margin({ bottom: ‘14lpx’ }).padding({ top: ‘15lpx’, bottom: ‘15lpx’ })<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

【解决方案】

RelativeContainer容器的默认高度是根据其父容器的高度来确定的，当前还不支持自适应高度。如果RelativeContainer没有设置具体的高度值，它会自动继承父容器的高度。如果父容器的高度是100%屏幕高度，那么RelativeContainer的高度也会是100%屏幕高度。但是如果父容器的高度是固定值或者其他百分比值，RelativeContainer的高度也会相应地进行调整。

如果设置百分比无法满足您的需求，当前您可以使用其他组件实现，比如grid组件中maxCount可以实现自适应调节。

参考链接如下：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-grid-0000001821000901