HarmonyOS 鸿蒙Next 如何动态获取Column的高度呢

方法一：可以使用componentUtils.getRectangleById，根据组件ID获取组件实例对象，通过组件实例对象将获取的坐标位置和大小同步返回给开发者。getRectangleById的返回结果是ComponentInfo，包含组件大小、位置、平移缩放旋转及仿射矩阵属性信息。

具体可以参考如下代码：

1. import { componentUtils } from '[@kit](/user/kit).ArkUI';
2. [@Entry](/user/Entry)
3. [@Component](/user/Component)
4. struct Page {
5. [@State](/user/State) arr: Array<number> = [1, 2, 3, 4, 5];
6. build() {
7. Column() {
8. List() {
9. ForEach(this.arr, (item: number) => {
10. ListItem() {
11. Text(item.toString())
12. .fontSize(24)
13. .id(item.toString())
14. }
15. .height(100)
16. })
17. }
18. .height('50%')
19. .alignListItem(ListItemAlign.Center)
20. Button('获取组件位置').onClick(() => {
21. let obj: componentUtils.ComponentInfo = componentUtils.getRectangleById('2');
22. console.log("demoTest:" + JSON.stringify(obj));
23. })
24. }
25. }
26. }

方法二：在组件尺寸发生变化时，需要使用onAreaChange可以响应由布局变化所导致的组件大小、位置发生变化时的回调，其中newValue返回目标元素变化之后的宽高以及目标元素相对父元素和页面左上角的坐标位置。

1. // xxx.ets
2. [@Entry](/user/Entry)
3. [@Component](/user/Component)
4. struct AreaExample {
5. [@State](/user/State) value: string = 'Text';
6. [@State](/user/State) sizeValue: string = '';
7. build() {
8. Column() {
9. Text(this.value)
10. .backgroundColor(Color.Green).margin(30).fontSize(20)
11. .onClick(() => {
12. this.value = this.value + 'Text'
13. })
14. .onAreaChange((oldValue: Area, newValue: Area) => {
15. console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)
16. this.sizeValue = JSON.stringify(newValue)
17. })
18. Text('new area is: \n' + this.sizeValue).margin({ right: 30, left: 30 })
19. }
20. .width('100%').height('100%').margin({ top: 30 })
21. }
22. }

参考链接

@ohos.arkui.componentUtils (componentUtils)，组件区域变化事件

https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkui-9-V5