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

获取组件在父视图或是屏幕上的绝对位置。

List({space: 10, scroller: this.listScroller }){  
  ForEach(this.menuInfo.titles, (title: string, index: number) => {  
    ListItem() {  
      Column() {  
        Text(item)  
        ...  
      }  
    }  
    .onClick(() => {  
      //获取当前点击ListItem在List上的位置  
      //List滚动，使ListItem距离屏幕居中  
    })  
  }  
    , (item: number, index: number) => index + JSON.stringify(item)  
  )  
}  
.scrollBar(BarState.Off)  
.listDirection(Axis.Horizontal)

HarmonyOS

put_get

2024-10-22 09:41:55

浏览

回答 1

待解决

回答 1

按赞同

按时间

Heiang

可以通过组件ID 获取组件的属性信息：

示例代码：

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%')  
  }  
}

参考链接：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-component-id-V5

通过componentUtils可以获取组件大小，组件相对于父组件，屏幕的信息（单位px）

文档：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-componentutils-V5#scaleresult

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)  
  }  
}

也可使用onAreaChange动态获取组件区域变化后相对于父组件的位置信息。

参考文档：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-component-area-change-event-V5

2024-10-22 18:13:25

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

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

订阅鸿蒙技术特刊，精选内容抢先看