HarmonyOS 鸿蒙Next怎么在页面绘制完成后获取某个view的宽高和位置

发布于 1周前 作者 gougou168 来自 鸿蒙OS

HarmonyOS 鸿蒙Next怎么在页面绘制完成后获取某个view的宽高和位置 怎么在页面绘制完成后获取某个view的宽高和位置

Harmonyos Next教程
3 回复

使用组件区域变化事件来监控组件变化时组件的位置和宽高。参考链接：组件区域变化事件-通用事件-组件通用信息-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者 (huawei.com)

@Entry
@Component
struct a {
  @State value: string = 'Text142542535354'
  @State sizeValue: string = ''

  build() {
    Column() {
      Text(this.value)
        .backgroundColor(Color.Green)
        .margin(30)
        .fontSize(20)
        .onClick(() => {
          this.value = this.value + 'Text'
        })
        .onAreaChange((oldValue: Area, newValue: Area) => {
          console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)
          this.sizeValue = JSON.stringify(newValue)
        })
      Text('new area is: \n' + this.sizeValue).margin({ right: 30, left: 30 })
    }
    .width('100%').height('100%').margin({ top: 30 })
  }
}

更多关于HarmonyOS 鸿蒙Next怎么在页面绘制完成后获取某个view的宽高和位置的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


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

具体可以参考如下代码：

import { componentUtils } from '@kit.ArkUI';

@Component
struct Page {
@State arr: Array<number> = [1, 2, 3, 4, 5];

build() {
Column() {
List() {
ForEach(this.arr, (item: number) => {
ListItem() {
Text(item.toString())
.fontSize(24)
.id(item.toString())
}
.height(100)
})
}
.height('50%')
.alignListItem(ListItemAlign.Center)

Button('获取组件位置').onClick(() => {
let obj: componentUtils.ComponentInfo = componentUtils.getRectangleById('2');
console.log("demoTest:" + JSON.stringify(obj));
})
}
}
}

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

// xxx.ets
@Component
struct AreaExample {
@State value: string = 'Text';
@State sizeValue: string = '';

build() {
Column() {
Text(this.value)
.backgroundColor(Color.Green).margin(30).fontSize(20)
.onClick(() => {
this.value = this.value + 'Text'
})
.onAreaChange((oldValue: Area, newValue: Area) => {
console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)
this.sizeValue = JSON.stringify(newValue)
})
Text('new area is: \n' + this.sizeValue).margin({ right: 30, left: 30 })
}
.width('100%').height('100%').margin({ top: 30 })
}
}

参考链接

[@ohos.arkui.componentUtils (componentUtils)](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-componentutils-V5)，组件区域变化事件

在HarmonyOS（鸿蒙）系统中，要在页面绘制完成后获取某个View的宽高和位置，可以通过监听View的布局变化来实现。具体来说，可以利用Component类的onLayoutFinished方法或者通过自定义Layout来实现。以下是一个简要的实现思路：

  1. 使用onLayoutFinished方法（如果View本身支持该方法）：

    • 在你的View类中重写onLayoutFinished方法。
    • 在该方法内部，使用getLayoutParams或getMeasuredWidth/getMeasuredHeight等方法获取View的宽高。
    • 使用getBoundingRectOnScreen方法获取View在屏幕上的位置（注意，此方法可能需要API支持）。

  2. 自定义Layout：

    • 创建一个自定义Layout类，继承自现有的Layout类（如DirectionalLayout）。
    • 在自定义Layout类的onLayout方法中，遍历所有子View，对每个子View调用getMeasuredWidth/getMeasuredHeight来获取宽高。
    • 使用getLocationOnScreen或类似方法获取View的位置（同样注意API支持）。

请注意，由于鸿蒙系统的API可能与Android有所不同，上述方法的具体实现可能需要根据鸿蒙的API文档进行调整。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html

回到顶部