arkUI：绝对定位、相对定位、Z序控制（position、offset、zIndex）

1 主要内容说明

绝对布局用于固定组件位置，相对布局用于偏移原始位置，zIndex 控制组件的堆叠顺序。

• 绝对定位 (position)：
  使用 position({ x, y }) 将组件精确定位到指定的 x 和 y 坐标位置，使组件脱离文档流，位置不受其他组件影响。
  示例：组件1 通过 position({ x: 100, y: 490 }) 被定位到距离容器左上角 (100, 490) 的位置。

• 相对定位 (offset)：
  使用 offset({ x, y }) 实现相对定位，相对于组件原始位置进行偏移，不脱离文档流，仍受容器和布局的排列影响。
  示例：组件2 通过 offset({ x: 120, y: 250 }) 相对于初始位置向右偏移 120px，向下偏移 250px。

• z序控制 (zIndex)：
  使用 zIndex(number) 控制组件的显示层级，数值越大，组件在堆叠时越靠上。
  示例：组件1 的 zIndex 为 6，位于其他组件之上；组件2 的 zIndex 为 3，位于 组件3 之上。未设置 zIndex 的组件按默认顺序显示。

2 相关内容说明和举例

2.1 绝对布局（position）

在 ArkUI 中，绝对布局允许将子组件精确定位在容器中的特定位置，通过 position 属性设置 x 和 y 坐标即可实现。常用于需要精确位置的界面元素，例如按钮、图标等。
绝对布局会脱离当前文档流，可以类比为一个画布，重新形成一个图层，根据x和y的定位重新设置位置。一旦组件通过 position 定位，它的显示位置与其他兄弟组件的排列无关。即使组件在视觉上与其他组件重叠或间隔，它的位置不会影响到其他组件的布局。

2.1.1 源码1的简单说明

源码1使用 Flex 布局，将子组件垂直排列 (direction: FlexDirection.Column)，并在主轴和交叉轴上都居中对齐 (justifyContent: FlexAlign.Center 和 alignItems: ItemAlign.Center)。每个 Text 组件调用自定义的 text_style 方法，统一设置宽高、圆角和文本居中等样式。
组件1脱离了文档流，那么组件2和组件3则继续在原文档流中遵循居中的属性。组件1脱离了原来的位置，那么后面的组件2、3就会占领它的位置。

2.1.2 源码1 （绝对布局）

@Entry
@Component
struct PageLocation {build() {Flex({direction: FlexDirection.Column, // 布局方向：列布局，从上到下排列子组件justifyContent: FlexAlign.Center, // 主轴（垂直方向）对齐方式：子组件在主轴居中排列alignItems: ItemAlign.Center, // 交叉轴（水平方向）对齐方式：子组件在交叉轴居中排列}) {Text("组件1").text_style()// 调用自定义的文本样式.backgroundColor("#fcc")// 设置背景色.position({ x: 0, y: 0 }) // 设置组件位置，当前为左上角// .position({x:100,y:490}) // 其他位置选项，可根据需求启用// .position({x:10,y:10}) // 其他位置选项，可根据需求启用Text("组件2").text_style()// 调用自定义的文本样式.backgroundColor("rgba(88, 224, 203, 1.00)") // 设置背景色Text("组件3").text_style()// 调用自定义的文本样式.backgroundColor(Color.Orange) // 使用系统预定义颜色}.height('100%') // 设置容器高度为页面高度.width('100%') // 设置容器宽度为页面宽度.backgroundColor("#ff82b352") // 设置整个Flex容器的背景色}
}// 扩展Text组件的方法，定义通用的样式
@Extend(Text)
function text_style() {.width(200) // 设置文本宽度.height(160) // 设置文本高度.borderRadius(40) // 设置圆角半径.textAlign(TextAlign.Center) // 文本居中对齐
}

2.1.3 源码1运行效果

2.1.3.1 默认情况，对照组

2.1.3.2 对组件1设置绝对布局position，坐标x:0,y:0

2.1.3.3 对组件1设置绝对布局position，坐标x:100,y:490

2.2 相对定位（offset）

offset 是一种相对定位，会基于组件原本位置进行偏移，而不是固定位置。例如，offset({ x: 120, y: 250 }) 表示将 组件2 相对于其原始位置向右偏移 120px，向下偏移 250px。使用 offset 不会脱离文档流，组件仍然按照 Flex 布局进行排列。offset 用于相对偏移，不脱离文档流，组件仍然受 Flex 布局的排列影响。

2.2.1 源码2的相关说明

在源码1使用了 position 定位方法的基础上，添加了 offset相对定位方法。这两种方法虽然都是用来定位组件，但它们的作用和效果有所不同。offset相对布局移动后的组件2，虽然位置变了，但原来所占位置没有变换，因为组件2未脱离文档流。

2.2.2 源码2（ 相对定位）

@Entry
@Component
struct PageLocation {build() {Flex({direction: FlexDirection.Column, // 垂直布局，组件从上到下排列justifyContent: FlexAlign.Center, // 主轴居中对齐alignItems: ItemAlign.Center, // 交叉轴居中对齐}) {Text("组件1").text_style() // 应用自定义的文本样式.backgroundColor("#fcc") // 设置背景色.position({ x: 100, y: 490 }) // 使用绝对定位，将组件1定位在距离容器左上角 (100, 490) 的位置Text("组件2").text_style() // 应用自定义的文本样式.backgroundColor("rgba(88, 224, 203, 1.00)") // 设置背景色.offset({ x: 120, y: 250 }) // 设置偏移，基于当前位置向右偏移 120px、向下偏移 250pxText("组件3").text_style() // 应用自定义的文本样式.backgroundColor(Color.Orange) // 设置背景色为橙色}.height('100%') // 设置容器高度为页面高度.width('100%') // 设置容器宽度为页面宽度.backgroundColor("#ff82b352") // 设置整个 Flex 容器的背景色}
}@Extend(Text)
function text_style() {.width(200) // 设置文本宽度.height(160) // 设置文本高度.borderRadius(40) // 设置圆角.textAlign(TextAlign.Center) // 文本居中对齐
}

2.2.3 源码2运行效果

2.2.3.1 未使用offset相对偏移时，对照组

2.2.3.2 使用offset相对偏移，x：120，y:250

2.3 Z序控制

zIndex 属性用于设置组件的堆叠层级，数值越大，组件越靠上显示。通过 .zIndex(number) 设置层级数值。较高的 zIndex 值会使组件在屏幕上位于较低值的组件之上。如果未指定 zIndex，组件将按默认的文档流顺序显示。默认情况下，越后面创建的组件堆叠于最上方。

2.3.1 源码3的相关说明

• 组件1 的 zIndex 为 6，因而显示在其他组件之上。
• 组件2 的 zIndex 为 3，显示在默认层级之上，但在 组件1 下方。
• 组件3 未设置 zIndex，因此按默认层级显示，位于最底层。

2.3.2 源码3（Z序控制）

@Entry
@Component
struct PageLocation {build() {Flex({direction: FlexDirection.Column, // 垂直布局，组件从上到下排列justifyContent: FlexAlign.Center, // 主轴居中对齐alignItems: ItemAlign.Center, // 交叉轴居中对齐}) {Text("组件1").text_style() // 应用自定义的文本样式.backgroundColor("#fcc") // 设置背景色.position({ x: 100, y: 490 }) // 使用绝对定位，将组件1定位在距离容器左上角 (100, 490) 的位置.zIndex(6) // 设置层级值为6，使组件1位于其他组件之上Text("组件2").text_style() // 应用自定义的文本样式.backgroundColor("rgba(88, 224, 203, 1.00)") // 设置背景色.offset({ x: 120, y: 250 }) // 设置偏移，基于当前位置向右偏移 120px、向下偏移 250px.zIndex(3) // 设置层级值为3，使组件2位于组件3下方但在默认层级上方Text("组件3").text_style() // 应用自定义的文本样式.backgroundColor(Color.Orange) // 设置背景色为橙色}.height('100%') // 设置容器高度为页面高度.width('100%') // 设置容器宽度为页面宽度.backgroundColor("#ff82b352") // 设置整个 Flex 容器的背景色}
}@Extend(Text)
function text_style() {.width(200) // 设置文本宽度.height(160) // 设置文本高度.borderRadius(40) // 设置圆角.textAlign(TextAlign.Center) // 文本居中对齐
}

2.3.3 源码3运行效果

2.3.3.1 默认情况下，对照组

2.3.3.2 使用zIndex时

3.结语

绝对布局使用后，相当于脱离了原来的图层，排布在新的图层上。既然它脱离了原图层，那么它的原位置也会被其他组件占领。有些一个萝卜一个坑的感觉，一个萝卜走了，是不是就有另一个萝卜占领它的坑。
由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！

4.定位日期

2024-11-9；
19:53；