【关键字】
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' })
【解决方案】
RelativeContainer容器的默认高度是根据其父容器的高度来确定的,当前还不支持自适应高度。如果RelativeContainer没有设置具体的高度值,它会自动继承父容器的高度。如果父容器的高度是100%屏幕高度,那么RelativeContainer的高度也会是100%屏幕高度。但是如果父容器的高度是固定值或者其他百分比值,RelativeContainer的高度也会相应地进行调整。
如果设置百分比无法满足您的需求,当前您可以使用其他组件实现,比如grid组件中maxCount可以实现自适应调节。
参考链接如下:
https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-grid-0000001821000901