【HarmonyOS NEXT】获取组件宽高和在屏幕上的位置

一、背景

在开发过程中，获取组件的宽高和位置信息是一个常见的需求。本文将介绍几种获取组件宽高和位置的方法，并通过代码示例详细说明如何使用这些方法。

二、获取方式

2.1、使用 getRectangleById

getRectangleById 方法可以获取组件的大小、位置、平移、缩放、旋转以及仿射矩阵等属性信息。使用该方法时，首先需要通过 UIContext 中的 getComponentUtils() 方法获取 ComponentUtils 对象，然后通过该对象调用 getRectangleById 方法。

代码示例

import { componentUtils } from '@kit.ArkUI'

@Entry
@Component
struct GetRectangleByIdPage {
  private arr: number[] = [0, 1, 2, 3, 4, 5]

  build() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text('' + item)
              .width('100%').height(100).fontSize(16)
              .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
              .id(item.toString())
          }
        }, (item: string) => item)
      }
      .listDirection(Axis.Vertical) // 排列方向
      .scrollBar(BarState.Off)
      .friction(0.6)
      .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
      .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring
      .width('90%')

      Button('获取点击组件的位置')
        .onClick(()=>{
          let obj = componentUtils.getRectangleById('4');
          console.log('lucy== obj',JSON.stringify(obj))
        })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 })
  }
}

输出结果

点击按钮后，控制台会输出对应组件的大小及位置信息： 

lucy== obj {"size":{"width":972,"height":312.5},"localOffset":{"x":0,"y":0},"windowOffset":{"x":54,"y":1636},"screenOffset":{"x":54,"y":1636},"translate":{"x":0,"y":0,"z":0},"scale":{"x":1,"y":1,"z":1,"centerX":15552,"centerY":5008},"rotate":{"x":0,"y":0,"z":0,"angle":0,"centerX":15552,"centerY":5008},"transform":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]}

2.2、使用 onAreaChange

onAreaChange 方法在组件区域变化时触发回调。该方法仅会响应由布局变化所导致的组件大小、位置发生变化时的回调。

代码示例

@Entry
@Component
struct GetRectangleByIdPage {

  build() {
    Text('哈咯呀')
      .onAreaChange((oldValue: Area, newValue: Area) =>{
        console.log('lucy== oldValue',JSON.stringify(oldValue))
        console.log('lucy== newValue',JSON.stringify(newValue))
      })
  }
}

输出结果

当组件区域发生变化时，控制台会输出变化前后的宽高及位置信息：

//其中newValue返回目标元素变化之后的宽高以及目标元素相对父元素和页面左上角的坐标位置。

 lucy== oldValue {"pos":{"x":0,"y":0},"position":{"x":0,"y":0},"globalPos":{"x":0,"y":0},"globalPosition":{"x":0,"y":0},"width":0,"height":0}


lucy== newValue {"pos":{"x":0,"y":0},"position":{"x":0,"y":0},"globalPos":{"x":0,"y":38.72},"globalPosition":{"x":0,"y":38.72},"width":48,"height":18.88}

2.3、使用 onSizeChange

onSizeChange 方法在组件区域变化时触发回调，主要用于获取组件的宽高信息。

代码示例

@Entry
@Component
struct GetRectangleByIdPage {

  build() {
    Text('哈咯呀')
      .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) =>{
        console.log('lucy== oldValue',JSON.stringify(oldValue))
        console.log('lucy== newValue',JSON.stringify(newValue))
      })
  }
}

输出结果

当组件大小发生变化时，控制台会输出变化前后的宽高信息：

lucy== oldValue {"width":0,"height":0}

lucy== newValue {"width":48,"height":18.88}

2.4、总结

• getRectangleById：适用于需要获取组件的详细属性信息，包括大小、位置、平移、缩放、旋转等。

• onAreaChange：适用于监听组件区域变化，获取变化前后的宽高及位置信息。

• onSizeChange：适用于监听组件大小变化，获取变化前后的宽高信息。

根据具体需求选择合适的方法，可以更高效地获取组件的宽高和位置信息。