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

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

HarmonyOS
2024-03-17 14:29:38
浏览
收藏 0
回答 2
待解决
回答 2
按赞同
/
按时间
rhlee

方法一:可以通过getInspectorByKey获取指定id组件的所有属性,getInspectorByKey的返回结果是组件属性列表的JSON字符串,解析字符串后获取其rect属性,rect属性是一个长度为2的数组,数组的第一个值是组件左上角的坐标,第二个值是组件右下角的坐标,因此我们也可以获取组件的中心坐标和组件的长宽。例如:"$rect":"[648.00, 262.00][696.00,360.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的组件的所有属性组件区域变化事件

分享
微博
QQ
微信
回复
2024-03-18 17:13:22
克里斯蒂东

你可以通过调用getInspectorByKey来获取某个id组件的所有属性。这个方法会返回一个JSON字符串,里面就是组件的属性列表。把这个字符串解析一下,就能拿到组件的rect属性。这个rect属性是一个有两个元素的数组,第一个元素是组件左上角的坐标,第二个元素是组件右下角的坐标。所以,我们可以根据这个数组计算出组件的中心坐标和长宽。比如,"$rect":"[648.00,262.00][696.00,360.00]",这个表示组件左上角到屏幕左边的距离是648px,到屏幕顶部的距离是262px,组件的宽度是696-648=48px。

分享
微博
QQ
微信
回复
2024-08-05 14:17:13
相关问题
ArkTs如何获取组件
4516浏览 • 1回复 待解决
java如何获取屏幕。找不到api?
5428浏览 • 1回复 待解决
屏幕如何获取 ,求解决方法
1575浏览 • 1回复 待解决
如何获取屏幕,你知道吗?
2378浏览 • 1回复 待解决
HarmonyOS如何获取指定子组件
1084浏览 • 1回复 待解决
如何获取组件,你学会了吗?
2409浏览 • 1回复 待解决
求大佬告知如何获取组件
369浏览 • 1回复 待解决
如何获取窗口信息
2287浏览 • 1回复 待解决
获取Column最终
324浏览 • 1回复 待解决
如何测量获取控件
707浏览 • 1回复 待解决
鸿蒙如何获取Element图片
7823浏览 • 1回复 待解决
HarmonyOS 横屏状态下获取组件
251浏览 • 1回复 待解决
如何获取图片,你知道吗?
2231浏览 • 1回复 待解决
HarmonyOS photoAsset获取图片失败
256浏览 • 1回复 待解决
HarmonyOS获取相册视频问题
315浏览 • 1回复 待解决
鸿蒙js如何获取设备屏幕宽和
5164浏览 • 1回复 待解决