HarmonyOS 组件在其父视图上的位置

class Utils {  
  static rect_left: number  
  static rect_top: number  
  static rect_right: number  
  static rect_bottom: number  
  static rect_value: Record<string, number>  
  
  //获取组件所占矩形区域坐标  
  static getComponentRect(key:string):Record<string, number> {  
    let strJson = getInspectorByKey(key)  
    let obj:Record<string, string> = JSON.parse(strJson)  
    console.info("[getInspectorByKey] current component obj is: " + JSON.stringify(obj))  
    let rectInfo:string[] = JSON.parse('[' + obj.$rect + ']')  
    console.info("[getInspectorByKey] rectInfo is: " + rectInfo)  
    Utils.rect_left = JSON.parse('[' + rectInfo[0] + ']')[0]  
    Utils.rect_top = JSON.parse('[' + rectInfo[0] + ']')[1]  
    Utils.rect_right = JSON.parse('[' + rectInfo[1] + ']')[0]  
    Utils.rect_bottom = JSON.parse('[' + rectInfo[1] + ']')[1]  
    return Utils.rect_value = {  
      "left": Utils.rect_left, "top": Utils.rect_top, "right": Utils.rect_right, "bottom": Utils.rect_bottom  
    }  
  }  
}  
  
@Entry  
@Component  
struct IdExample {  
  @State text: string = 'hello'  
  
  build() {  
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {  
      Button() {  
        Text('click').fontSize(25).fontWeight(FontWeight.Bold)  
      }.margin({ top: 20 }).width(100)  
      .onClick(() => {  
        let rect = Utils.getComponentRect('text') // 获取id为"text"组件的矩形区域坐标  
        console.info('rect矩形区域坐标:::' + JSON.stringify(rect))  
      })  
      Text(this.text).fontSize(25).padding(15).id('text')  
    }  
    .width('100%').height('100%')  
  }  
}
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.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.

import componentUtils from '@ohos.arkui.componentUtils';  
@Entry  
@Component  
struct IdExample {  
  build() {  
    Column(){  
      Column() {  
        Row(){}.backgroundColor(Color.White).height('50%').width('50%').id('row')  
        .onClick(() => {  
          let modePosition:componentUtils.ComponentInfo = componentUtils.getRectangleById('row');  
          console.info('row坐标信息:::' + JSON.stringify(modePosition))  
          let colPosition:componentUtils.ComponentInfo = componentUtils.getRectangleById('col');  
          console.info('col坐标信息:::' + JSON.stringify(colPosition))  
        })  
      }.width('50%').height('50%').backgroundColor(Color.Gray).id('col').justifyContent(FlexAlign.Center)  
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.