鸿蒙应用开发UI基础第十三节：RelativeContainer相对布局优势与实战演示

【学习目标】

• 理解 RelativeContainer 的核心定位与扁平化优势，掌握「参考边界 - 锚点 - 对齐方式」三大核心概念；
  
• 精通基于父容器、兄弟组件的基础定位用法，熟练配置 alignRules 核心属性；
  
• 掌握组件偏移微调、多组件联动对齐、链式布局等进阶能力，夯实复杂界面布局开发基础；
  
• 掌握辅助线（Guideline）、屏障（Barrier）等进阶能力，适配更复杂的对齐场景；
  
• 独立搭建专属工程，通过基础示例与实战案例落地核心用法，解决传统布局嵌套冗余、适配性差的问题。
  

一、RelativeContainer 核心基础

1.1 核心定位与核心优势

RelativeContainer 是为解决复杂界面多层嵌套性能问题设计的相对布局容器，支持容器内子组件通过「锚点+参考边界+对齐方式」设置相对位置关系，适用于处理界面复杂、多元素需要精准对齐排列的场景。
其核心优势体现在两方面：

• 性能优化：扁平化布局替代多层线性布局嵌套，减少布局层级与渲染性能开销；
  
• 灵活定位：子组件可指定父容器、兄弟组件、辅助线、屏障作为锚点，适配各类复杂对齐场景。
  

1.2 核心基础概念

所有布局能力均基于以下核心概念，是理解 RelativeContainer 的关键：

• 参考边界：设置当前组件的哪个边界对齐到锚点，分水平和垂直方向：
  
  
  
  • 水平方向：起始（left）、居中（middle）、尾端（right）；
    
  • 垂直方向：顶部（top）、居中（center）、底部（bottom）。
    生效规则：
    
  • 水平方向同时设置三个边界时，仅起始（left）、居中（middle）生效，尾端（right）配置会被忽略；
    
  • 垂直方向同时设置三个边界时，仅顶部（top）、居中（center）生效，底部（bottom）会被忽略。
    
  
  
• 锚点：组件定位的参考对象，支持四类核心类型：
  
  
  
  • 父容器：默认固定标识为 __container__；
    
  • 兄弟组件：需设置唯一 id 作为引用标识；
    
  • 辅助线（Guideline）：虚拟参考线，用于统一对齐到特定偏移位置；
    
  • 屏障（Barrier）：基于一组组件边界生成的动态锚点。
    
  
  
• 对齐方式：组件参考边界与锚点的匹配规则：
  
  
  
  • 水平方向：HorizontalAlign.Start/Center/End；
    
  • 垂直方向：VerticalAlign.Top/Center/Bottom。
    
  
  
• 链（Chain）：将一系列组件首尾相连形成的链式结构，通过 chainMode 可指定链内元素的排列方式。
  
• 辅助线（Guideline）：容器内虚拟的水平/垂直锚点，便于批量组件统一对齐到特定偏移位置。
  
• 屏障（Barrier）：一组指定组件在特定方向上的公共最远边界（如多个组件底部的最下边界），作为动态锚点使用。
  

1.3 核心示意图

依赖关系示意图
（展示组件锚点依赖逻辑）设置参考边界示意图
（展示参考边界配置规则）

1.4 核心适用场景

• 复杂表单：多元素不规则对齐，避免 Column/Row 多层嵌套；
  
• 卡片式布局：多组件联动定位，适配动态内容；
  
• 不规则元素排布：商品详情页、个性化主页等需要精准对齐的场景；
  
• 批量组件统一对齐：需辅助线/屏障实现的批量对齐场景。
  

1.5 与基础布局的核心区别

布局容器核心定位逻辑嵌套性核心适用场景核心短板性能评级Column垂直顺序排布易嵌套纯垂直单方向的简单布局复杂页面需多层嵌套高Row水平顺序排布易嵌套纯水平单方向的简单布局复杂页面需多层嵌套高StackZ轴层叠排布低嵌套多组件同一空间层叠（角标）无法实现平面多元素排布中RelativeContainer锚点+参考边界+对齐方式定位无嵌套复杂页面的多元素灵活排布简单单方向排布效率低于线性布局中高1.6 核心选型原则

• 纯垂直/纯水平单方向排布 → 用 Column/Row（简单高效）；
  
• 多组件同一空间层叠 → 用 Stack（唯一选择）；
  
• 多元素复杂排布、易产生深层嵌套 → 优先用 RelativeContainer（扁平化+性能优化）；
  
• 批量组件需统一偏移对齐 → 用 RelativeContainer + 辅助线/屏障。
  

1.7 重要注意事项

• 锚点标识规则：
  
  
  
  • 未设置 id 的组件可显示，但无法被引用为锚点；
    
  • 辅助线/屏障的 id 需唯一，避免与组件冲突，优先级：组件 > guideline > barrier。
    
  
  
• 依赖循环约束：
  
  
  
  • 非链布局禁止组件循环依赖（A→B、B→A），会导致组件无法绘制；
    
  • 链布局通过 chainMode 声明后，容器自动解析链式循环依赖（唯一允许循环依赖的场景）。
    
  
  
• 尺寸渲染规则：
  
  
  
  • API Version 11及以后，组件自身 width/height 优先级高于布局规则；若要使子组件与锚点严格对齐，应仅使用 alignRules，避免使用尺寸设置。
    
  • 若无法通过约束条件+自身size确定组件大小，组件将不绘制；
    
  • 同一方向设置多个锚点时，若锚点位置顺序错误，组件视为尺寸0不绘制。
    
  
  
• 偏移优先级：
  
  
  
  • offset 为像素级偏移，当使用 offset 调整位置的组件作为锚点时，对齐位置为设置 offset 之前的位置；
    
  • 从 API Version 11 开始新增 Bias 对象，建议 API 11 及以后使用 bias 设置额外偏移；
    
  • bias 为比例偏移，取值 0–1；
    
  • 链内元素的 bias 属性全部失效，仅链头的 bias 作为整链的偏移生效。
    
  
  

二、核心属性与配置规则

2.1 标准配置格式

1. // 1. 父容器作为锚点（最基础的定位方式，依赖容器自身边界）
2. alignRules: {
3.   // 垂直方向：当前组件的顶部边界 → 对齐到父容器（__container__为父容器固定标识）的顶部
4.   top: { anchor: "__container__", align: VerticalAlign.Top },
5.   // 水平方向：当前组件的左侧边界 → 对齐到父容器的起始侧
6.   left: { anchor: "__container__", align: HorizontalAlign.Start }
7. }
9. // 2. 兄弟组件作为锚点（组件间联动定位，需先给兄弟组件设置唯一id）
10. alignRules: {
11.   // 垂直方向：当前组件的顶部边界 → 对齐到id为siblingId的兄弟组件的底部
12.   top: { anchor: "siblingId", align: VerticalAlign.Bottom },
13.   // 水平方向：当前组件的左侧边界 → 对齐到id为siblingId的兄弟组件的起始侧
14.   left: { anchor: "siblingId", align: HorizontalAlign.Start }
15. }
17. // 3. 辅助线/屏障作为锚点（批量组件统一对齐场景，需先定义辅助线/屏障并配置id）
18. alignRules: {
19.   // 水平方向：当前组件的左侧边界 → 对齐到id为guideline1的辅助线的结束侧
20.   left: { anchor: "guideline1", align: HorizontalAlign.End },
21.   // 垂直方向：当前组件的顶部边界 → 对齐到id为barrier1的屏障的底部
22.   top: { anchor: "barrier1", align: VerticalAlign.Bottom }
23. }
25. // 居中对齐配置（父容器锚点）
26. alignRules: {
27.   // 水平方向：当前组件的水平中轴 → 对齐到父容器的水平中轴
28.   middle: { anchor: "__container__", align: HorizontalAlign.Center },
29.   // 垂直方向：当前组件的垂直中轴 → 对齐到父容器的垂直中轴
30.   center: { anchor: "__container__", align: VerticalAlign.Center }
31. }
33. // 混合锚点配置（水平参考父容器，垂直参考兄弟组件）
34. alignRules: {
35.   // 水平方向：当前组件的水平中轴 → 对齐到父容器的水平中轴
36.   middle: { anchor: "__container__", align: HorizontalAlign.Center },
37.   // 垂直方向：当前组件的顶部边界 → 对齐到id为title的兄弟组件的底部
38.   top: { anchor: "title", align: VerticalAlign.Bottom },
39.   // 默认比例，水平居中、垂直居中 取值 0-1之间。
40.   bias: { horizontal: 0.5, vertical: 0.5 }
41. }

复制代码

2.2 硬性约束

• 锚点标识唯一：同一容器内所有 id（组件/辅助线/屏障）不可重复；
  
• 至少一个参考边界：alignRules 必须配置至少一个边界，否则相对定位失效；
  
• 锚点定义顺序：兄弟组件定位时，锚点组件必须先定义，依赖组件后定义；
  
• 链布局尺寸约束：若链内元素总尺寸超出锚点约束范围，超出部分会均匀分配到链的两侧（PACKED链可通过bias调整超出部分的分布）；
  
• 屏障使用规则：
  
  
  
  • 垂直屏障（TOP/BOTTOM）仅能作为水平方向锚点，用作垂直锚点时值为0；
    
  • 水平屏障（LEFT/RIGHT）仅能作为垂直方向锚点，用作水平锚点时值为0。
    
  
  

2.3 辅助属性

属性名类型核心作用适用场景注意事项idstring唯一标识所有需要被引用的组件/辅助线/屏障必须唯一，优先级：组件 > guideline > barrieroffset像素偏移精准位置校准、固定间距调整作为锚点时，取调整前的原始位置bias比例偏移适配性微调、响应式布局链内元素bias失效，仅链头bias生效chainMode(direction: Axis, style: ChainStyle)链式排布多组件链式排布仅链头配置，作用于整链；链头为水平链左侧（镜像语言右侧）/垂直链上方组件2.4 核心枚举

（1）HorizontalAlign（水平对齐方式）

• HorizontalAlign.Start：与锚点起始侧（左侧）对齐；
  
• HorizontalAlign.Center：与锚点水平居中对齐；
  
• HorizontalAlign.End：与锚点尾端（右侧）对齐。
  

（2）VerticalAlign（垂直对齐方式）

• VerticalAlign.Top：与锚点顶部对齐；
  
• VerticalAlign.Center：与锚点垂直居中对齐；
  
• VerticalAlign.Bottom：与锚点底部对齐。
  

（3）ChainStyle（链布局样式）

• ChainStyle.SPREAD：链内组件占满空间，剩余空间均分至组件间隙；
  
• ChainStyle.SPREAD_INSIDE：首尾组件贴锚点边界，中间组件均匀分布；
  
• ChainStyle.PACKED：组件无间隙紧密贴合，整体靠起始方向排列；
  

（4）Axis（链布局方向）

• Axis.Horizontal：水平链式排布（最常用）；
  
• Axis.Vertical：垂直链式排布。
  

（5）BarrierDirection（屏障方向）

• BarrierDirection.LEFT：左侧屏障（一组组件的最左边界）；
  
• BarrierDirection.RIGHT：右侧屏障（一组组件的最右边界）；
  
• BarrierDirection.TOP：顶部屏障（一组组件的最上边界）；
  
• BarrierDirection.BOTTOM：底部屏障（一组组件的最下边界）。
  

2.5 辅助线与屏障

（1）辅助线（Guideline）

核心作用：虚拟参考线，批量组件统一对齐到特定偏移位置，避免重复设置偏移。
配置方式：

1. RelativeContainer() {
2.     // 其他元素
3.   // 子组件配置：引用辅助线作为锚点
4.   Text("参考辅助线对齐")
5.     .alignRules({
6.       left: { anchor: "vGuide1", align: HorizontalAlign.End },
7.       top: { anchor: "hGuide1", align: VerticalAlign.Top }
8.     })
9.     .id("text1")
10. }
11. // 辅助线配置（容器属性）
12.     .guideLine([
13.     {
14.         id: "vGuide1", // 垂直辅助线唯一标识
15.         direction: Axis.Vertical, // 方向：垂直
16.         position: { start: 50 } // 距离父容器左侧50vp
17.     },
18.     {
19.         id: "hGuide1", // 水平辅助线唯一标识
20.         direction: Axis.Horizontal, // 方向：水平
21.         position: { start: 160 } // 距离容器顶部160vp
22.     }
23.   ])

复制代码

约束：

• 辅助线的position属性支持start（距离容器起始侧偏移）和end（距离容器结束侧偏移），两者冲突时仅start生效；
  
• 容器尺寸为 auto 时，仅支持 start 声明，不允许使用百分比。
  

辅助线示意图：
RelativeContainer组件从原点（0,0）坐标发出的两条虚拟辅助线，他们的焦点就是锚点。“参考辅助线对齐组件”的坐标起始点就是锚点。
如 RelativeContainer组件从0点x轴移动50个vp，从y轴0点移动160vp。

（2）屏障（Barrier）

核心作用：基于一组组件的最远边界生成动态锚点，避免组件重叠，适配动态内容。
配置方式：

1. RelativeContainer() {
2.       //   ... 元素组件
3.      // 参考屏障对齐的示例文本
4.         Text("参考屏障对齐")
5.           .backgroundColor("#2ca9e0")
6.           .fontColor(Color.White)
7.           .fontSize(14)
8.           .padding(5)
9.           .alignRules({
10.             left: { anchor: "rightBarrier", align: HorizontalAlign.End }, // 贴右侧屏障右边界
11.             top: { anchor: "bottomBarrier", align: VerticalAlign.Bottom } // 贴底部屏障下边界
12.           })
13.           .id("text2")
14.       }
15.        // 屏障配置：基于元素1/2/3生成边界锚点
16.       .barrier([
17.         {
18.           id: "rightBarrier",
19.           direction: BarrierDirection.RIGHT,
20.           referencedId: ["element2", "element3"] // 右侧屏障：取 element2、element3 的最右边界       
21.         },
22.         {
23.           id: "bottomBarrier",
24.           direction: BarrierDirection.BOTTOM,
25.           referencedId: ["element1","element3"] // 底部屏障：取 element1、element3 的最下边界       
26.         }
27.       ])

复制代码

约束：

• 垂直屏障（TOP/BOTTOM）：只能用于水平方向定位（left/middle/right）；
  
• 水平屏障（LEFT/RIGHT）：只能用于垂直方向定位（top/center/bottom）；
  
• 方向不匹配时，锚点值视为0，组件定位失效。
  

虚拟屏障示意图：
虚拟屏障就是以某些元素组件的边缘（如元素1、元素3最下边，元素2和元素3的最右边）

三、工程结构

3.1 基础工程目录

1. RelativeContainerApp/
2. ├── AppScope/                # 应用全局配置目录
3. └── entry/                   # 主模块目录（核心代码）
4.     ├── src/
5.     │   ├── main/
6.     │   │   ├── ets/         # ETS代码核心目录
7.     │   │   │   ├── entryability/       # 应用入口能力（启动配置）
8.     │   │   │   ├── entrybackupability/ # 备份能力（可选）
9.     │   │   │   ├── pages/             # 页面存放目录（核心）
10.     │   │   │   │   ├── BasicParent.ets      # 4.1 基于父容器定位示例
11.     │   │   │   │   ├── BasicSibling.ets     # 4.2 基于兄弟组件定位示例
12.     │   │   │   │   ├── ChainLayout.ets      # 4.3 链式布局示例
13.     │   │   │   │   ├── GuidelineBarrier.ets # 4.4 辅助线+屏障示例
14.     │   │   │   │   ├── Index.ets            # 工程默认首页
15.     │   │   │   │   ├── LoginForm.ets     # 5.2 登录表单实战案例
16.     │   │   │   └── resources/          # 资源目录（图片/配置等）
17.     │   │   │       ├── media/          # 媒体资源（如logo图片、运行效果截图）
18.     │   │   │       └── rawfile/        # 原始文件（可选）
19.     │   │   ├── module.json5            # 模块配置文件（声明页面路由、权限等）
20.     │   ├── mock/            # 模拟数据目录（可选）
21.     │   ├── ohosTest/        # OHOS单元测试目录（可选）
22.     │   ├── test/            # 通用测试目录（可选）
23.     ├── .gitignore           # Git忽略配置
24.     ├── build-profile.json5  # 构建配置（编译选项、API版本等）
25.     └── hvigorfile.ts        # 构建工具配置

复制代码

3.2 能力演示首页

1. import { router } from '@kit.ArkUI';
3. // 1.数据接口
4. interface NavButtonItem {
5.   title: string; // 按钮文字
6.   path: string; // 跳转页面路径
7. }
9. @Entry
10. @Component
11. struct Index {
12.   // 2. 定义按钮数据源
13.   private navButtons: NavButtonItem[] = [
14.     { title: "1. 基础能力：基于父容器定位", path: "pages/BasicParent" },
15.     { title: "2. 基础能力：基于兄弟组件定位", path: "pages/BasicSibling" },
16.     { title: "3. 进阶能力：多组件链布局", path: "pages/ChainLayout" },
17.     { title: "4. 进阶能力：辅助线+屏障", path: "pages/GuidelineBarrier" },
18.     { title: "5. 实战案例：扁平化登录表单", path: "pages/LoginForm" }
19.   ];
21.   build() {
22.     Column({ space: 25 }) {
23.       // 标题
24.       Text("RelativeContainer 核心教程")
25.         .fontSize(30)
26.         .fontWeight(FontWeight.Bold)
27.         .margin({ top: 80, bottom: 40 });
29.       // 3. ForEach循环生成按钮
30.       ForEach(
31.         this.navButtons,
32.         (item: NavButtonItem) => {
33.           Button(item.title)
34.             .width('85%')
35.             .height(50)
36.             .backgroundColor("#1890FF")
37.             .fontColor(Color.White)
38.             .borderRadius(8)
39.             .onClick(() => router.pushUrl({ url: item.path }));
40.         },
41.         // 唯一key生成：基于title+path拼接
42.         (item: NavButtonItem) => `${item.title}-${item.path}`
43.       );
44.     }
45.     .width('100%')
46.     .height('100%')
47.     .backgroundColor("#F5F5F5");
48.   }
49. }

复制代码

运行效果

四、基础能力示例

4.1 基于父容器定位（BasicParent.ets）

1. @Entry
2. @Component
3. struct BasicParent {
4.   build() {
5.     Column() {
6.       Text("基于父容器定位")
7.         .fontSize(20)
8.         .fontWeight(FontWeight.Bold)
9.         .margin({ bottom: 20 })
11.       RelativeContainer() {
12.         // 左上角组件
13.         Text("左上角")
14.           .backgroundColor("#a3cf62")
15.           .padding(10)
16.           .alignRules({
17.             top: { anchor: "__container__", align: VerticalAlign.Top },
18.             left: { anchor: "__container__", align: HorizontalAlign.Start }
19.           })
20.           .id("text1")
22.         // 右上角组件
23.         Text("右上角")
24.           .backgroundColor("#00ae9d")
25.           .padding(10)
26.           .alignRules({
27.             top: { anchor: "__container__", align: VerticalAlign.Top },
28.             right: { anchor: "__container__", align: HorizontalAlign.End }
29.           })
30.           .id("text2")
32.         // 居中组件
33.         Text("居中")
34.           .backgroundColor("#0a59f7")
35.           .padding(10)
36.           .alignRules({
37.             middle: { anchor: "__container__", align: HorizontalAlign.Center },
38.             center: { anchor: "__container__", align: VerticalAlign.Center }
39.           })
40.           .id("text3")
42.         // 底部居中组件
43.         Text("底部居中")
44.           .backgroundColor("#2ca9e0")
45.           .padding(10)
46.           .alignRules({
47.             middle: { anchor: "__container__", align: HorizontalAlign.Center },
48.             bottom: { anchor: "__container__", align: VerticalAlign.Bottom }
49.           })
50.           .id("text4")
51.       }
52.       .width(300)
53.       .height(300)
54.       .border({ width: 2, color: "#6699FF" })
55.     }
56.     .width("100%")
57.     .height("100%")
58.     .justifyContent(FlexAlign.Center)
59.     .padding(20)
60.   }
61. }

复制代码

运行效果

4.2 基于兄弟组件定位（BasicSibling.ets）

1. @Entry
2. @Component
3. struct BasicSibling {
4.   build() {
5.     Column() {
6.       Text("基于兄弟组件定位")
7.         .fontSize(20)
8.         .fontWeight(FontWeight.Bold)
9.         .margin({ bottom: 20 })
11.       RelativeContainer() {
12.         // 基准组件
13.         Text("基准组件")
14.           .backgroundColor("#a3cf62")
15.           .padding(10)
16.           .width(100)
17.           .height(60)
18.           .alignRules({
19.             top: { anchor: "__container__", align: VerticalAlign.Top },
20.             left: { anchor: "__container__", align: HorizontalAlign.Start }
21.           })
22.           .id("base")
24.         // 基准组件右侧
25.         Text("右侧")
26.           .backgroundColor("#00ae9d")
27.           .padding(10)
28.           .alignRules({
29.             top: { anchor: "base", align: VerticalAlign.Top },
30.             left: { anchor: "base", align: HorizontalAlign.End },
31.             bottom: { anchor: "base", align: VerticalAlign.Bottom }
32.           })
33.           .id("right")
35.         // 基准组件下方
36.         Text("下方")
37.           .backgroundColor("#0a59f7")
38.           .padding(10)
39.           .alignRules({
40.             top: { anchor: "base", align: VerticalAlign.Bottom },
41.             left: { anchor: "base", align: HorizontalAlign.Start },
42.             right: { anchor: "right", align: HorizontalAlign.End }
43.           })
44.           .id("bottom")
46.         // 基准组件右下角
47.         Text("右下角")
48.           .backgroundColor("#2ca9e0")
49.           .padding(10)
50.           .alignRules({
51.             top: { anchor: "bottom", align: VerticalAlign.Top },
52.             left: { anchor: "right", align: HorizontalAlign.Start },
53.             bottom: { anchor: "bottom", align: VerticalAlign.Bottom },
54.             right: { anchor: "__container__", align: HorizontalAlign.End }
55.           })
56.           .id("rightBottom")
57.       }
58.       .width(300)
59.       .height(200)
60.       .border({ width: 2, color: "#6699FF" })
61.     }
62.     .width("100%")
63.     .height("100%")
64.     .justifyContent(FlexAlign.Center)
65.     .padding(20)
66.   }
67. }

复制代码

运行效果

4.3 链式布局（ChainLayout.ets）

1. @Entry
2. @Component
3. struct ChainLayout {
4.   build() {
5.     Column() {
6.       Text("链式布局示例")
7.         .fontSize(20)
8.         .fontWeight(FontWeight.Bold)
9.         .margin({ bottom: 20 })
11.       RelativeContainer() {
12.         // SPREAD链 - 均匀分布
13.         Text("SPREAD-1")
14.           .backgroundColor("#a3cf62")
15.           .padding(10)
16.           .alignRules({
17.             left: { anchor: "__container__", align: HorizontalAlign.Start },
18.             right: { anchor: "spread2", align: HorizontalAlign.Start },
19.             top: { anchor: "__container__", align: VerticalAlign.Top }
20.           })
21.           .id("spread1")
22.           .chainMode(Axis.Horizontal, ChainStyle.SPREAD)
24.         Text("SPREAD-2")
25.           .backgroundColor("#00ae9d")
26.           .padding(10)
27.           .alignRules({
28.             left: { anchor: "spread1", align: HorizontalAlign.End },
29.             right: { anchor: "spread3", align: HorizontalAlign.Start },
30.             top: { anchor: "spread1", align: VerticalAlign.Top }
31.           })
32.           .id("spread2")
34.         Text("SPREAD-3")
35.           .backgroundColor("#0a59f7")
36.           .padding(10)
37.           .alignRules({
38.             left: { anchor: "spread2", align: HorizontalAlign.End },
39.             right: { anchor: "__container__", align: HorizontalAlign.End },
40.             top: { anchor: "spread1", align: VerticalAlign.Top }
41.           })
42.           .id("spread3")
44.         // SPREAD_INSIDE链 - 首尾贴边
45.         Text("INSIDE-1")
46.           .backgroundColor("#a3cf62")
47.           .padding(10)
48.           .alignRules({
49.             left: { anchor: "__container__", align: HorizontalAlign.Start },
50.             right: { anchor: "inside2", align: HorizontalAlign.Start },
51.             center: { anchor: "__container__", align: VerticalAlign.Center }
52.           })
53.           .id("inside1")
54.           .chainMode(Axis.Horizontal, ChainStyle.SPREAD_INSIDE)
56.         Text("INSIDE-2")
57.           .backgroundColor("#00ae9d")
58.           .padding(10)
59.           .alignRules({
60.             left: { anchor: "inside1", align: HorizontalAlign.End },
61.             right: { anchor: "inside3", align: HorizontalAlign.Start },
62.             top: { anchor: "inside1", align: VerticalAlign.Top }
63.           })
64.           .id("inside2")
66.         Text("INSIDE-3")
67.           .backgroundColor("#0a59f7")
68.           .padding(10)
69.           .alignRules({
70.             left: { anchor: "inside2", align: HorizontalAlign.End },
71.             right: { anchor: "__container__", align: HorizontalAlign.End },
72.             top: { anchor: "inside1", align: VerticalAlign.Top }
73.           })
74.           .id("inside3")
76.         // PACKED链 - 紧密贴合
77.         Text("PACKED-1")
78.           .backgroundColor("#a3cf62")
79.           .padding(10)
80.           .alignRules({
81.             left: { anchor: "__container__", align: HorizontalAlign.Start },
82.             right: { anchor: "packed2", align: HorizontalAlign.Start },
83.             bottom: { anchor: "__container__", align: VerticalAlign.Bottom }
84.           })
85.           .id("packed1")
86.           .chainMode(Axis.Horizontal, ChainStyle.PACKED)
88.         Text("PACKED-2")
89.           .backgroundColor("#00ae9d")
90.           .padding(10)
91.           .alignRules({
92.             left: { anchor: "packed1", align: HorizontalAlign.End },
93.             right: { anchor: "packed3", align: HorizontalAlign.Start },
94.             top: { anchor: "packed1", align: VerticalAlign.Top }
95.           })
96.           .id("packed2")
98.         Text("PACKED-3")
99.           .backgroundColor("#0a59f7")
100.           .padding(10)
101.           .alignRules({
102.             left: { anchor: "packed2", align: HorizontalAlign.End },
103.             right: { anchor: "__container__", align: HorizontalAlign.End },
104.             top: { anchor: "packed1", align: VerticalAlign.Top }
105.           })
106.           .id("packed3")
107.       }
108.       .width(300)
109.       .height(300)
110.       .border({ width: 2, color: "#6699FF" })
111.     }
112.     .width("100%")
113.     .height("100%")
114.     .justifyContent(FlexAlign.Center)
115.     .padding(20)
116.   }
117. }

复制代码

运行结果

4.4 辅助线+屏障示例（GuidelineBarrier.ets）

1. @Entry
2. @Component
3. struct GuidelineBarrier {
4.   build() {
5.     Column() {
6.       Text("基于辅助线+屏障的不规则布局")
7.         .fontSize(20)
8.         .fontWeight(FontWeight.Bold)
9.         .margin({ bottom: 20 })
11.       // 核心RelativeContainer布局
12.       RelativeContainer() {
13.         // 元素1：左上角区域
14.         Text("元素1")
15.           .backgroundColor("#1879e6")
16.           .fontColor(Color.White)
17.           .fontSize(18)
18.           .textAlign(TextAlign.Center)
19.           .width(100)
20.           .height(120)
21.           .alignRules({
22.             top: { anchor: "__container__", align: VerticalAlign.Top },
23.             left: { anchor: "__container__", align: HorizontalAlign.Start }
24.           })
25.           .id("element1")
27.         Text("元素2")
28.           .backgroundColor("#1879e6")
29.           .fontColor(Color.White)
30.           .fontSize(18)
31.           .textAlign(TextAlign.Center)
32.           .width(100)
33.           .height(80)
34.           .alignRules({
35.             top: { anchor: "element1", align: VerticalAlign.Top },
36.             left: { anchor: "element1", align: HorizontalAlign.End }
37.           })
38.           .id("element2")
40.         Text("元素3")
41.           .backgroundColor("#1879e6")
42.           .fontColor(Color.White)
43.           .fontSize(18)
44.           .textAlign(TextAlign.Center)
45.           .width(80)
46.           .height(70)
47.           .alignRules({
48.             top: { anchor: "element2", align: VerticalAlign.Bottom },
49.             right: { anchor: "element2", align: HorizontalAlign.End },
50.           })
51.           .margin({top:10})
52.           .id("element3")
54.         // 参考屏障对齐的示例文本
55.         Text("参考屏障对齐")
56.           .backgroundColor("#2ca9e0")
57.           .fontColor(Color.White)
58.           .fontSize(14)
59.           .padding(5)
60.           .alignRules({
61.             left: { anchor: "rightBarrier", align: HorizontalAlign.End }, // 贴右侧屏障右边界
62.             top: { anchor: "bottomBarrier", align: VerticalAlign.Bottom } // 贴底部屏障下边界
63.           })
64.           .id("text2")
66.         // 参考屏障对齐的示例文本
67.         Text("参考辅助线对齐")
68.           .backgroundColor("#2ca9e0")
69.           .fontColor(Color.White)
70.           .fontSize(14)
71.           .padding(5)
72.           .alignRules({
73.             left: { anchor: "vGuide1", align: HorizontalAlign.End },
74.             top: { anchor: "hGuide1", align: VerticalAlign.Top }
75.           })
76.           .id("text1")
77.       }
78.       // 屏障配置：基于元素1/2/3生成边界锚点
79.       .barrier([
80.         {
81.           id: "rightBarrier", // 右侧屏障（元素3的右边界）
82.           direction: BarrierDirection.RIGHT,
83.           referencedId: ["element2", "element3"] // 关联元素3/4，取最右边界
84.         },
85.         {
86.           id: "bottomBarrier", // 底部屏障（元素元素1/3的最下边界）
87.           direction: BarrierDirection.BOTTOM,
88.           referencedId: ["element1","element3"] // 关联元素1/3，取最下边界
89.         }
90.       ])
91.       // 辅助线配置（容器属性）
92.       .guideLine([
93.         {
94.           id: "vGuide1", // 垂直辅助线唯一标识
95.           direction: Axis.Vertical, // 方向：垂直
96.           position: { start: 50 } // 距离父容器左侧50vp
98.         },
99.         {
100.           id: "hGuide1", // 水平辅助线唯一标识
101.           direction: Axis.Horizontal, // 方向：水平
102.           position: { start: 160 } // 距离容器顶部160vp
103.         }
104.       ])
105.       .width('100%') // 容器宽度适配元素总宽度
106.       .height(400) // 容器高度
107.       .backgroundColor("#a4c2f4") // 背景色区分容器区域
108.       .border({ width: 1, color: "#1879e6" })
109.     }
110.     .width("100%")
111.     .height("100%")
112.     .justifyContent(FlexAlign.Center)
113.     .padding(10)
114.   }
115. }

复制代码

运行效果

五、实战案例：扁平化登录表单

5.1 案例效果

实现一个无嵌套的登录表单，包含logo、账号输入框、密码输入框、记住密码复选框、登录按钮、注册入口，所有元素精准对齐，无多层 Column/Row 嵌套。
5.2 完整代码（LoginForm.ets）

1. @Entry
2. @Component
3. struct LoginForm {
4.   build() {
5.     // 唯一根容器：RelativeContainer，承载所有元素
6.     RelativeContainer() {
7.       // 页面标题
8.       Text("登录表单实战")
9.         .fontSize(24)
10.         .fontWeight(FontWeight.Bold)
11.         .alignRules({
12.           // 水平居中：相对于根容器水平居中
13.           middle: { anchor: "__container__", align: HorizontalAlign.Center },
14.           // 垂直定位：距离根容器顶部40vp
15.           top: { anchor: "__container__", align: VerticalAlign.Top }
16.         })
17.         .margin({ top: 40 })
18.         .id("title")
20.       // ========== 表单核心元素：直接基于根容器/兄弟元素定位 ==========
21.       // Logo
22.       Image($r("app.media.startIcon"))
23.         .width(80)
24.         .height(80)
25.         .alignRules({
26.           // 水平居中：相对于根容器水平居中
27.           middle: { anchor: "__container__", align: HorizontalAlign.Center },
28.           // 垂直定位：在标题下方，间距20vp
29.           top: { anchor: "title", align: VerticalAlign.Bottom }
30.         })
31.         .margin({ top: 20 })
32.         .id("logo")
34.       // 账号输入框
35.       TextInput({ placeholder: "请输入账号" })
36.         .backgroundColor("#f5f5f5")
37.         .padding(10)
38.         .borderRadius(8)
39.         .alignRules({
40.           // 水平：左右边距20vp，相对于根容器左右边界
41.           left: { anchor: "__container__", align: HorizontalAlign.Start },
42.           right: { anchor: "__container__", align: HorizontalAlign.End },
43.           // 垂直：在Logo下方，间距30vp
44.           top: { anchor: "logo", align: VerticalAlign.Bottom }
45.         })
46.         .margin({ top: 30})
47.         .id("accountInput")
49.       // 密码输入框
50.       TextInput({ placeholder: "请输入密码" })
51.         .type(InputType.Password)
52.         .backgroundColor("#f5f5f5")
53.         .padding(10)
54.         .borderRadius(8)
55.         .alignRules({
56.           // 水平：与账号输入框左右对齐
57.           left: { anchor: "accountInput", align: HorizontalAlign.Start },
58.           right: { anchor: "accountInput", align: HorizontalAlign.End },
59.           // 垂直：在账号输入框下方，间距15vp
60.           top: { anchor: "accountInput", align: VerticalAlign.Bottom }
61.         })
62.         .margin({ top: 15 })
63.         .id("pwdInput")
65.       // 记住密码复选框
66.       Checkbox()
67.         .select(false)
68.         .alignRules({
69.           // 水平：与账号输入框左对齐
70.           left: { anchor: "accountInput", align: HorizontalAlign.Start },
71.           // 垂直：在密码输入框下方，间距15vp
72.           top: { anchor: "pwdInput", align: VerticalAlign.Bottom }
73.         })
74.         .margin({ top: 15 })
75.         .id("checkbox")
77.       // 记住密码文字
78.       Text("记住密码")
79.         .fontSize(14)
80.         .alignRules({
81.           // 水平：在复选框右侧，间距5vp
82.           left: { anchor: "checkbox", align: HorizontalAlign.End },
83.           // 垂直：与复选框垂直居中对齐
84.           center: { anchor: "checkbox", align: VerticalAlign.Center }
85.         })
86.         .margin({ left: 5 })
87.         .id("checkboxText")
89.       // 登录按钮
90.       Button("登录")
91.         .backgroundColor("#0a59f7")
92.         .fontColor(Color.White)
93.         .borderRadius(8)
94.         .alignRules({
95.           // 水平：与账号输入框左右对齐
96.           left: { anchor: "accountInput", align: HorizontalAlign.Start },
97.           right: { anchor: "accountInput", align: HorizontalAlign.End },
98.           // 垂直：在复选框下方，间距20vp
99.           top: { anchor: "checkbox", align: VerticalAlign.Bottom }
100.         })
101.         .margin({ top: 20 })
102.         .width("100%")
103.         .height(45)
104.         .id("loginBtn")
106.       // 注册入口
107.       Text("还没有账号？立即注册")
108.         .fontSize(14)
109.         .fontColor("#0a59f7")
110.         .alignRules({
111.           // 水平：相对于根容器水平居中
112.           middle: { anchor: "__container__", align: HorizontalAlign.Center },
113.           // 垂直：在登录按钮下方，间距20vp
114.           top: { anchor: "loginBtn", align: VerticalAlign.Bottom }
115.         })
116.         .margin({ top: 20 })
117.         .id("registerText")
118.     }
119.     .width("100%")
120.     .height("100%")
121.     .padding(20)
122.   }
123. }

复制代码

运行效果

六、内容总结

• 核心定位：RelativeContainer 是解决复杂界面多层嵌套性能问题的核心布局容器，通过「锚点+参考边界+对齐方式」实现扁平化布局；
  
• 核心概念：六大核心概念（参考边界、锚点、对齐方式、链、辅助线、屏障）覆盖基础到进阶能力，需熟练掌握参考边界生效规则、锚点优先级、链布局特殊约束等关键细节；
  
• 核心规则：锚点唯一、顺序约束、尺寸优先级（API 11+）、渲染规则是布局生效的关键，链布局和辅助线/屏障的方向/偏移约束是进阶使用的核心；
  
• 进阶能力：辅助线适配批量组件统一偏移对齐，屏障适配动态内容边界对齐，链布局实现多组件均匀/紧密排列，是复杂场景的核心解决方案；
  
• 实战价值：扁平化布局减少性能开销，灵活定位适配复杂界面，是复杂页面开发的最优选择。
  

七、代码仓库

• 工程名称：RelativeContainerApp
  
• 仓库地址：https://gitee.com/HarmonyOS-UI-Basics/harmony-os-ui-basics.git
  

八、下节预告

下一节我们将学习核心基础组件（一）文本显示组件 Text，从三大核心维度系统掌握文本展示全场景开发能力：

• 基础认知：明确Text组件只读展示的核心定位，掌握静态文本、多格式混排、长文本等典型场景的应用要点；
  
• 核心能力：掌握Text基础样式（字体、颜色、装饰线）、Span图文混排、排版溢出（maxLines/textOverflow）、交互事件（onClick/copyOption）、自适应字号等核心属性及底层规则；
  
• 实战落地：基于TextApplication工程，实现热搜榜、可复制文本、自定义选择菜单等实战需求，解决文本样式定制、溢出处理、交互绑定等高频开发问题。
  

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！