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

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

HarmonyOS
2024-03-17 14:29:38
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
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
相关问题
ArkTs如何获取组件
2499浏览 • 1回复 待解决
java如何获取屏幕。找不到api?
3801浏览 • 1回复 待解决
如何获取屏幕,你知道吗?
396浏览 • 1回复 待解决
如何获取组件,你学会了吗?
532浏览 • 1回复 待解决
如何获取窗口信息
324浏览 • 1回复 待解决
鸿蒙如何获取Element图片
5662浏览 • 1回复 待解决
如何获取图片,你知道吗?
231浏览 • 1回复 待解决
鸿蒙js如何获取设备屏幕宽和
3462浏览 • 1回复 待解决
属性动画如何实现动画效果
119浏览 • 1回复 待解决
JS UI框架中canvas如何动态指定
4757浏览 • 1回复 待解决
ArkTS获取组件位置和大小接口
765浏览 • 1回复 待解决
鸿蒙harmony栅格化,适应不同屏幕
6404浏览 • 1回复 待解决
如何获取系统屏幕固定。
1708浏览 • 0回复 待解决
Scroll组件展示位置如何调整
272浏览 • 1回复 待解决
如何获取元素位置和大小
358浏览 • 1回复 待解决
鸿蒙如何调整组件位置
5921浏览 • 1回复 待解决
鸿蒙响应屏幕触摸事件如何获取
5601浏览 • 1回复 已解决