HarmonyOS Next原生开发布局进阶--【保姆级教程】1 定位作用：改变组件位置分类：绝对定位：posit

环境及工具

HarmonyOS 5.0.0 Release
DevEcoStudio
适用于HarmonyOS Next原生开发

介绍

在鸿蒙（HarmonyOS Next）开发中，绝对定位、相对定位、z-index 和层叠布局是构建复杂且灵活用户界面的重要组成部分。这些概念帮助开发者精确控制UI组件的位置、层级关系以及如何处理重叠元素。下面我们详细探讨每个概念及其在鸿蒙中的应用方式。

1 定位

作用：改变组件位置

分类：

绝对定位：position，相对父组件左上角进行偏移
相对定位：offset，相对自身左上角进行偏移

1.1 绝对定位

绝对定位允许您将一个组件相对于其最近的已定位祖先组件进行精确定位。如果不存在这样的祖先，则相对于整个页面来定位。这意味着您可以自由地指定组件的具体坐标，而不受父容器布局模式的影响。

属性：position()

参数：{x: 水平偏移量, y: 垂直偏移量}

偏移量取值

数字，单位是vp
百分比，参照父组件尺寸计算结果

绝对定位特点：

参照父组件左上角进行偏移
绝对定位后的组件不再占用自身原有位置

Column() {
  Image($r('app.media.vph_1'))
    .width('100%')
    .height(170)
    .objectFit(ImageFit.Cover)
    .borderRadius(10)
  Image($r('app.media.vph_big'))
    .height(40)
    .position({
      x: 0,
      y: 0
    })
  Text('省薪开抢')
    .textAlign(TextAlign.Center)
    .width(100)
    .height(30)
    .backgroundColor('#b7919e')
    .borderRadius(15)
    .fontColor('#fff')
    .fontWeight(600)
    .position({
      x: 70,
      y: 50
    })
  Text('家电数码日')
    .fontSize(25)
    .fontWeight(900)
    .position({
      x: 60,
      y: 90
    })
  Text('美的电暖器低至99元')
    .fontSize(16)
    .fontWeight(700)
    .position({
      x: 48,
      y: 130
    })
}
.width('100%')
.margin({
  bottom: 10
})

1.2 相对定位

相对定位使得组件在其默认位置的基础上进行偏移，即相对于自身原本的位置移动。这通常用于微调组件的位置，而不会改变整体布局结构。属性：offset()

参数：{x: 水平偏移量, y: 垂直偏移量}

偏移量取值

数字，单位是vp
百分比，参照父组件尺寸计算结果

注意： 相对定位使用后原来的位置还继续占用空间，不会受到挤压，所以如图内容3在内容2离开后，位置没有变化

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('位置1')
        .width(80)
        .height(40)
        .backgroundColor(Color.Red)
      Text('内容2')
        .width(80)
        .height(40)
        .backgroundColor(Color.Yellow)
          // 占位
        .offset({
          x: 100,
          y: -30
        })
      Text('内容3')
        .width(80)
        .height(40)
        .backgroundColor(Color.Blue)
    }
    .width('100%')
    .height(200)
    .backgroundColor('#ccc')
  }
}

1.3 Z-index控制

定位后的组件，默认后定义的组件在最上面显示，可以通过 zIndex 属性调整显示层级 z-index 属性用于定义组件在Z轴方向上的堆叠顺序，即哪个组件应该出现在另一个组件之上。

属性：zIndex(数字)

特点：取值为整数数字，取值越大，显示层级越高

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('位置1')
        .width(200)
        .height(200)
        .backgroundColor(Color.Red)
        .zIndex(1)
      Text('内容2')
        .width(100)
        .height(100)
        .textAlign(TextAlign.End)
        .backgroundColor(Color.Yellow)
          // 占位
        .offset({
          x: 100,
          y: -100
        })
      Text('内容3')
        .width(100)
        .height(100)
        .offset({
          x: -100,
          y: -350
        })
        .backgroundColor(Color.Blue)
    }
    .width('100%')
    .height(200)
    // .backgroundColor('#ccc')
  }
}

2 层叠布局

2.1 基本使用

鸿蒙提供了 Stack 布局容器，它允许多个子组件共享相同的空间，并按照它们添加到容器中的顺序进行堆叠。最后一个添加的组件会位于最顶层，依次类推。

@Entry
@Component
struct Index {
  build() {
    Column() {
      Stack({
      //对齐方式
      alignContent:Alignment.Bottom
      }){
        Text('内容')
          .width('80%')
          .height('80%')
          .backgroundColor(Color.Yellow)
        // .zIndex(1)
        Button('按钮')
      }
      .height(200)
      .width(300)
      .backgroundColor(Color.Red)
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Pink)
  }
}

2.2 对齐方式

参数：alignContent

取值：枚举 Alignment

名称	描述
TopStart	顶部起始端
Top	顶部横向居中
TopEnd	顶部尾端
Start	起始端纵向居中
Center	居中（默认）
End	尾端纵向居中
BottomStart	底部起始端
Bottom	底部横向居中
BottomEnd	底部尾端

({alignContent:Alignment.Top})

顶部对齐

2.3 Z序控制

属性：zIndex(数字)

特点：取值为整数数字，取值越大，显示层级越高

@Entry
@Component
struct Index {
  build() {
    Column() {
      Stack({alignContent:Alignment.Top}){
        Text('内容')
          .width('80%')
          .height('80%')
          .backgroundColor(Color.Yellow)
          //按钮显示在下一层，黄色区域层级较高，覆盖掉按钮
        .zIndex(1)
        Button('按钮')
      }
      .height(200)
      .width(300)
      .backgroundColor(Color.Red)
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Pink)
  }
}

3 最佳实践与注意事项

避免过度使用绝对定位：虽然绝对定位提供了极大的灵活性，但它也可能导致布局难以维护和响应式设计困难。尽量只在必要时使用。
考虑屏幕尺寸差异：当使用绝对定位时，请务必考虑到不同设备屏幕尺寸带来的影响，确保关键内容不会因为屏幕大小的变化而变得不可见。
合理利用层叠布局：对于需要创建复杂视觉效果或交互体验的应用场景，如游戏界面、卡片式UI等，可以充分利用 Stack 布局来实现多层叠加的效果。
优先级管理：当多个组件可能相互重叠时，清晰地定义每个组件的 priority 属性可以帮助避免意外的覆盖问题，确保重要的UI元素总是可见。