arkUI：相对布局（RelativeContaine）

1 主要内容说明

ArkUI 中相对布局 RelativeContainer ，可以使用 alignRules 属性来定义组件之间的相对位置关系。定义组件相对其他组件或容器的对齐方式，包括横向 (HorizontalAlign) 和纵向 (VerticalAlign) 对齐。之后，也可以根据需要结合使用offset相对定位等属性，来对组件进行进一步的位置调整更改，当然本文未使用offset这些属性。

2 相关内容

2.1 相对布局（RelativeContaine）

在 ArkUI 中，alignRules 用于控制组件的对齐方式和相对位置。通过 alignRules 属性中的 anchor 和 align 参数，开发者可以定义组件相对于其他组件或容器的对齐方式。垂直向对齐垂直向，水平向对齐水平向。垂直向的，需要用垂直向的参数对齐，若使用水平向的参数会参数语法错误。
举例如

.alignRules({bottom: { anchor: "text1", align: VerticalAlign.Top }})

以id为"text1"的组件为参考，自己组件本身的下部bottom，与id为"text1"的组件头部top对齐，bottom为垂直向的参数，这里使用VerticalAlign。如果使用水平向的键值，如start，则需要水平向的HorizontalAlign参数设置对齐。

2.1.1 对齐方式键值对的键

• alignRules 使用键值对的形式指定对齐方式，常见的键包括：

2.1.2 常见的对齐参数和取值

• VerticalAlign (垂直对齐)，指定组件在垂直方向上的对齐方式，主要用于控制组件的顶部和底部位置。

• HorizontalAlign (水平对齐)，指定组件在水平方向上的对齐方式，主要用于控制组件的左边和右边位置。

2.1.3 锚点 (Anchor)

指定对齐的参考对象，可以是其他组件 ID 或 “_ _ container _ _”（表示容器）。

2.1.4 源码1的相关说明

源码1使用了 RelativeContainer 实现了 ArkUI 的相对布局。通过设置组件的 alignRules 属性，可以指定组件相对于容器或其他组件的位置。

• RelativeContainer：一个相对布局容器，允许内部组件根据指定规则进行相对定位。

• 组件1：使用 alignRules 设置在容器的正中间，横向和纵向都居中显示。

• 组件2：相对于组件1的顶部和水平中心进行对齐，放置在组件1上方且居中。

• 组件3：相对于组件1的左下方进行对齐，水平对齐在组件1的左边缘，垂直对齐在组件1的底部。

2.1.5 源码1 （push方法）

@Entry
@Component
struct PageRelative {

  build() {
    RelativeContainer() { // 创建一个相对布局容器
      Text("组件1")
        .width(80) // 设置组件宽度为 80
        .height(60) // 设置组件高度为 60
        .backgroundColor("#ffa") // 设置背景色为浅黄色
        .id("text1") // 为组件设置唯一标识符 "text1"
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center }, // 纵向居中对齐容器中心
          middle: { anchor: "__container__", align: HorizontalAlign.Center } // 横向居中对齐容器中心
        })

      Text("组件2")
        .width(80)
        .height(60)
        .backgroundColor("#eca") // 设置背景色为浅橙色
        .id("text2") // 为组件设置唯一标识符 "text2"
        .alignRules({
          bottom: { anchor: "text1", align: VerticalAlign.Top }, // 在组件1上方对齐
          start: { anchor: "text1", align: HorizontalAlign.Center } // 横向中心对齐组件1
        })

      Text("组件3")
        .width(80)
        .height(60)
        .backgroundColor("#eab") // 设置背景色为浅粉色
        .alignRules({
          middle: { anchor: "text1", align: HorizontalAlign.Start }, // 左对齐到组件1的左边
          center: { anchor: "text1", align: VerticalAlign.Bottom } // 纵向对齐到组件1的底部
        })

    }
    .width("100%") // 容器宽度为页面的 100%
    .height("45%") // 容器高度为页面的 45%
    .backgroundColor("#bac") // 设置容器背景色为浅灰绿色

  }
}

2.1.6 源码1运行效果

3.结语

RelativeContainer容器中的组件以堆叠的形式呈现，而不是像flex弹性布局中的组件以排序的方式呈现。相对布局容器RelativeContainer的组件排列方式，和堆叠布局stack中的组件类似，组件都是以堆叠的形式呈现。
由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！

4.定位日期

2024-11-10；
16:24；