【HarmonyOS】鸿蒙横向 List 高度适配
作者：zhongcx
- 2024-10-11 广东
本文字数：747 字
阅读完需：约 2 分钟
当 list 设置横向布局时，list 高度默认撑满没有达到预期的高度自适应，可以通过 onAreaChange 动态修改高度。
【修改前】
@Entry@Componentstruct Page148 { build() { Column() { List() { ForEach(['北京', '杭州', '上海'], (item: string, index: number) => { ListItem() { Text(item).fontSize(24) .height(100 * (Math.floor(Math.random() * 3) + 1))//生成一个1到3 随机数，然后+100高度 测试 .backgroundColor(Color.Pink) .margin(10) } }) } .listDirection(Axis.Horizontal) .backgroundColor('#FFF1F3F5') }.width('100%') .height('100%') }}复制代码
【修改后】
@Entry@Componentstruct Page148 { @State maxItemHeight: number = -1
build() { Column() { List() { ForEach(['北京', '杭州', '上海'], (item: string, index: number) => { ListItem() { Text(item).fontSize(24) .height(100 * (Math.floor(Math.random() * 3) + 1))//生成一个1到3 随机数，然后+100高度 测试 .backgroundColor(Color.Pink) .margin(10) }.onAreaChange((oldArea: Area, newArea: Area) => { if (this.maxItemHeight < newArea.height) { this.maxItemHeight = newArea.height as number } }) }) } .listDirection(Axis.Horizontal) .backgroundColor('#FFF1F3F5') .height(this.maxItemHeight == -1 ? undefined : this.maxItemHeight) }.width('100%') .height('100%') }}复制代码
划线
评论
复制
发布于: 刚刚阅读数: 6
zhongcx
关注
还未添加个人签名 2024-09-27 加入
还未添加个人简介
评论