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

@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) 
      }) 
    } 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

// 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 }) 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.