如何获取组件宽高和在屏幕上的位置?

Question

如何获取组件宽高和在屏幕上的位置

Answer 1

方法一：可以通过getInspectorByKey获取指定id组件的所有属性，getInspectorByKey的返回结果是组件属性列表的JSON字符串，解析字符串后获取其rect属性，rect属性是一个长度为2的数组，数组的第一个值是组件左上角的坐标，第二个值是组件右下角的坐标，因此我们也可以获取组件的中心坐标和组件的长宽。例如:"$rect":"648.00, 262.00" ,它代表组件左上角到屏幕左边的距离为648px，到屏幕顶部的距离为262px，组件的宽可以通过 696-648 = 48px得出。

具体可以参考如下代码：

@Entry 
@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: object = JSON.parse(getInspectorByKey('2')); 
        console.log("demoTest:" + JSON.stringify(obj)); 
        console.log("demoTest1:" + JSON.parse(JSON.stringify(obj)).$rect) 
      }) 
    } 
  } 
}

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

// xxx.ets 
@Entry 
@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 }) 
  } 
}

参考链接

获取指定id的组件的所有属性、组件区域变化事件