HarmonyOS鸿蒙Next中组件在其父视图上的位置

HarmonyOS鸿蒙Next中组件在其父视图上的位置

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

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鸿蒙Next中组件在其父视图上的位置的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

通过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动态获取组件区域变化后相对于父组件的位置信息
参考文档：组件区域变化事件-通用事件-组件通用信息-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者 (huawei.com)

更多关于HarmonyOS鸿蒙Next中组件在其父视图上的位置的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


const Offset = this.scroller.currentOffset().yOffset;

在HarmonyOS鸿蒙Next中，组件在其父视图上的位置主要通过布局管理器和组件的属性来控制。常用的布局管理器包括 DirectionalLayout、DependentLayout、StackLayout 和 TableLayout。每个布局管理器都有不同的定位方式。

  1. DirectionalLayout：组件按照水平或垂直方向排列。通过 alignment 属性可以设置组件在父视图中的对齐方式，如 Alignment.TOP、Alignment.BOTTOM、Alignment.START、Alignment.END 等。

  2. DependentLayout：组件的位置依赖于其他组件或父视图的边界。可以通过 align_parent_top、align_parent_bottom、align_parent_start、align_parent_end 等属性来设置组件相对于父视图的位置。

  3. StackLayout：组件可以堆叠在一起，通过 alignment 属性设置组件在父视图中的对齐方式，如 Alignment.CENTER、Alignment.TOP 等。

  4. TableLayout：组件按照表格形式排列，通过 row 和 column 属性设置组件在表格中的位置。

此外，还可以通过 margin 和 padding 属性调整组件与父视图或其他组件之间的间距。margin 控制组件外部的间距，padding 控制组件内部的间距。

通过合理使用这些属性和布局管理器，可以精确控制组件在父视图上的位置。

在HarmonyOS鸿蒙Next中，组件在其父视图上的位置可以通过布局属性和对齐方式来确定。常用的布局属性包括width、height、margin和padding，而align属性则用于控制组件的对齐方式。开发者可以通过设置这些属性来精确控制组件在父视图中的位置和大小。例如，使用margin可以调整组件与父视图边缘的距离，而align可以实现组件在父视图中的居中、左对齐或右对齐等效果。

回到顶部