HarmonyOS 鸿蒙Next怎么获取List里所有内容撑满的高度

发布于 1周前 作者 songsunli 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next怎么获取List里所有内容撑满的高度

怎么获取List里所有内容撑满的高度

2 回复
您可也看一下 onAreaChange 能否满足您的需求。

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-component-area-change-event-V5#onareachange

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
[@State](/user/State) list: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];

build() {
Column() {
List() {
ForEach(this.list, (item: string) => {
ListItem() {
Text(item)
.width('100%')
.fontSize(16)
.textAlign(TextAlign.Center)
.onAreaChange((oldValue: Area, newValue: Area) => {
console.info(JSON.stringify(newValue.height))
})
}
}, (item: string) => item)
}
.width('100%')
.backgroundColor('#DCDCDC')
}
.width('100%')
.height('100%')
}
}

~~~
可以试一下获取List中每一个组件的高度进行相加。
~~~

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
[@State](/user/State) list: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
[@State](/user/State) isFlag: boolean = false

build() {
Column() {
List() {
ForEach(this.list, (item: string, index: number) => {
ListItem() {
Text(item)
.width('100%')
.fontSize(16)
.textAlign(TextAlign.Center)
.fontSize(30)
.onAreaChange((oldValue: Area, newValue: Area) => {
if (!this.isFlag) {
console.info(JSON.stringify(newValue.height))
console.info('length ' + this.list.length)
console.info('index ' + index + '-------' + JSON.stringify(newValue.height))
this.isFlag = !this.isFlag
console.info('sum: ' + Number(newValue.height) * this.list.length)
}
})
}
}, (item: string) => item)
}
.width('100%')
.backgroundColor('#DCDCDC')
.height(200)
}
.width('100%')
.height('100%')
}
}

更多关于HarmonyOS 鸿蒙Next怎么获取List里所有内容撑满的高度的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS(鸿蒙)开发中,如果你希望获取一个List(列表)中所有内容撑满后的高度,这通常涉及到测量(Measure)和布局(Layout)的过程。在鸿蒙系统的ArkUI(使用Java或Dart语言)中,可以通过以下几种方式来实现这一需求:

  1. 自定义组件:你可以创建一个自定义组件,在该组件的onMeasure方法中计算所有子组件的总高度。然后,通过重写onLayout方法确保这些子组件正确布局,并返回总高度。

  2. 使用ScrollView或NestedScroll:如果你正在使用ScrollViewNestedScroll来包裹列表,这些容器组件本身会处理内容的滚动和高度计算。你可以监听这些组件的滚动事件或布局变化,以获取内容的总高度。

  3. 遍历子元素:在列表中遍历所有子元素,并累加它们的高度以及可能的间距或边距,以手动计算总高度。

  4. 利用布局约束:使用ArkUI的布局约束系统(如FlexboxLayout、GridLayout等),可以设定列表组件的扩展属性,使其自动适应内容高度。

请根据你的具体场景选择合适的方法。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部