当前位置：首页 > news >正文

arkUI：相对布局（RelativeContaine）

news 2024/11/13 12:07:41

相对布局

1 主要内容说明
2 相关内容
- 2.1 相对布局（RelativeContaine）
- - 2.1.1 对齐方式键值对的键
  - 2.1.2 常见的对齐参数和取值
  - 2.1.3 锚点 (Anchor)
  - 2.1.4 源码1的相关说明
  - 2.1.5 源码1 （push方法）
  - 2.1.6 源码1运行效果
3.结语
4.定位日期

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 使用键值对的形式指定对齐方式，常见的键包括：

方位	键	说明
垂直对齐	top	顶部
垂直对齐	center	垂直居中
垂直对齐	bottom	底部
水平对齐	start	左
水平对齐	middle	水平居中
水平对齐	end	右

2.1.2 常见的对齐参数和取值

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

值	内容说明
Top	与锚点的顶部对齐。
Bottom	与锚点的底部对齐。
Center	与锚点的中心对齐（垂直方向居中）。

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

值	内容说明
Start	与锚点的左边对齐。
End	与锚点的右边对齐。
Center	与锚点的中心对齐（水平方向居中）。

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中的组件类似，组件都是以堆叠的形式呈现。
由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！