输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心

HarmonyOS

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
API参考
高级筛选
API version全部版本
设备全部
元服务API集不筛选

RelativeContainer

Phone12+PC/2in113+Tablet12+TV19+Wearable18+
更新时间: 2026-09-09 06:54
本文导读
展开章节

相对布局组件，用于复杂场景中元素对齐的布局。通过设置子组件的对齐规则，实现子组件相对于容器或其他子组件的对齐，适用于需要灵活布局、减少嵌套层级的复杂界面。

子组件可以通过设置alignRules来设置自身在相对容器中的对齐规则。

说明
  • 该组件从API version 9开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
  • 在RelativeContainer组件中，不设置width、height时，对应属性布局表现与设置为100%相同。
  • 从API version 11开始，在RelativeContainer组件中，width、height设置"auto"表示自适应子组件。当width设置"auto"时，如果水平方向上子组件以容器作为锚点，则"auto"不生效（即视为不设置width），垂直方向上同理。
  • 从API version 20开始，在RelativeContainer组件中，width、height设置LayoutPolicy.wrapContent表示自适应子组件且被祖先节点尺寸约束，设置LayoutPolicy.fixAtIdealSize表示自适应子组件且不被祖先节点尺寸约束。当width设置wrapContent或fixAtIdealSize时，如果水平方向上子组件直接或间接以容器作为锚点，则容器在该方向上的尺寸不自适应该组件，垂直方向上同理。
  • RelativeContainer中子组件的margin不同于通用属性margin，指子组件到该方向上锚点的距离。例如，当alignRules设置了left锚点时，margin.left表示子组件到left锚点的距离。若alignRules未设置某个边界方向的锚点（如未设置left或right锚点），则该方向的margin不生效。

子组件

支持多个子组件。

接口

Phone12+PC/2in113+Tablet12+TV19+Wearable18+

RelativeContainer()

相对布局组件，用于复杂场景中元素对齐的布局。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

属性

除支持通用属性外，还支持如下属性：

说明

RelativeContainer中子组件的margin属性有特殊生效条件，详见上方说明。

guideLine12+

Phone12+PC/2in113+Tablet12+TV19+Wearable18+

guideLine(value: Array<GuideLineStyle>)

设置RelativeContainer容器内的辅助线，数组中每个元素代表一条辅助线。典型使用场景：子组件基于虚拟参考线对齐、创建可灵活调整的参考线定位、多个子组件基于同一基准线布局。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开
参数名 类型 必填 说明
value Array<GuideLineStyle> 是 RelativeContainer容器内的辅助线，定义guideLine的id、方向和位置，用于辅助定位子组件。

barrier12+

Phone12+PC/2in113+Tablet12+TV19+Wearable18+

barrier(value: Array<BarrierStyle>)

设置RelativeContainer容器内的屏障，子组件可以以屏障为锚点进行对齐定位。数组中每个元素代表一条屏障。典型使用场景：避免子组件重叠、基于组件边缘创建虚拟边界、实现组件间自动间隔。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开
参数名 类型 必填 说明
value Array<BarrierStyle> 是 RelativeContainer容器内的屏障，用于定义屏障的id、方向和依赖组件，子组件可以以屏障为锚点进行对齐定位。

barrier12+

Phone12+PC/2in113+Tablet12+TV19+Wearable18+

barrier(barrierStyle: Array<LocalizedBarrierStyle>)

设置RelativeContainer容器内的屏障，子组件可以以屏障为锚点进行对齐定位，支持定义镜像模式的屏障线。数组中每个元素代表一条屏障。典型使用场景：RTL语言布局适配、镜像界面设计、根据阅读方向自动调整屏障位置。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开
参数名 类型 必填 说明
barrierStyle Array<LocalizedBarrierStyle> 是 RelativeContainer容器内的屏障，支持定义镜像模式的屏障线。

GuideLineStyle12+对象说明

Phone12+PC/2in113+Tablet12+TV19+Wearable18+

guideLine参数，用于定义一条guideLine的id、方向和位置，辅助子组件在RelativeContainer中进行定位和对齐。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

展开
名称 类型 只读 可选 说明
id string 否 否 guideLine的id，用于标识辅助线，子组件可通过此id引用该辅助线作为锚点。必须是唯一的并且不可与容器内组件重名。
direction Axis 否 否

指定guideLine的方向。Axis.Vertical表示垂直辅助线，仅能作为组件水平方向的锚点；Axis.Horizontal表示水平辅助线，仅能作为组件垂直方向的锚点。

默认值：Axis.Vertical

非法值：按默认值处理。
position GuideLinePosition 否 否

指定guideLine的位置。

当未声明或声明异常值（如undefined）时，guideLine的位置默认为start: 0。start和end两种声明方式选择一种即可。若同时声明，仅start生效。若容器的width被声明为"auto"，则Axis.Vertical类型guideLine的位置只能使用start方式声明（不允许使用百分比）；若容器的height被声明为"auto"，则Axis.Horizontal类型guideLine的位置只能使用start方式声明（不允许使用百分比）。

默认值：

{

start: 0

}

非法值：按默认值处理。

GuideLinePosition12+对象说明

Phone12+PC/2in113+Tablet12+TV19+Wearable18+

guideLine位置参数，用于定义guideLine的位置。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

展开
名称 类型 只读 可选 说明
start Dimension 否 是

guideLine距离容器左侧或者顶部的距离。单位：vp。

默认值：0。与end二选一，若同时声明则仅start生效。若容器的width被声明为"auto"，则Axis.Vertical类型的guideLine只能使用start方式声明（不允许使用百分比）；若容器的height被声明为"auto"，则Axis.Horizontal类型的guideLine只能使用start方式声明（不允许使用百分比）。
end Dimension 否 是 guideLine距离容器右侧或者底部的距离。单位：vp。与start二选一，若同时声明则仅start生效。若容器的width被声明为"auto"，则Axis.Vertical类型的guideLine不支持使用end方式声明；若容器的height被声明为"auto"，则Axis.Horizontal类型的guideLine不支持使用end方式声明。

BarrierStyle12+对象说明

Phone12+PC/2in113+Tablet12+TV19+Wearable18+

barrier参数，用于定义一条barrier的id、方向和生成时所依赖的组件，子组件可通过barrier的id引用屏障作为锚点进行对齐定位。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

展开
名称 类型 只读 可选 说明
id string 否 否 barrier的id，用于标识屏障，子组件可通过此id引用该屏障作为锚点。必须是唯一的并且不可与容器内组件重名。
direction BarrierDirection 否 否

指定barrier的方向。

水平屏障线（TOP/BOTTOM）仅能作为组件垂直方向锚点（top或bottom），用于水平方向锚点时位置视为0。垂直屏障线（LEFT/RIGHT）仅能作为组件水平方向锚点（left或right），用于垂直方向锚点时位置视为0。

默认值：BarrierDirection.LEFT

非法值：按默认值处理。
referencedId Array<string> 否 否 指定生成barrier所依赖的组件。将需要作为屏障基准的组件id放入数组，至少包含一个有效组件ID，不存在的ID会被忽略。barrier根据组件边界计算位置：LEFT取最左侧，RIGHT取最右侧，TOP取最上方，BOTTOM取最下方。

BarrierDirection12+枚举说明

Phone12+PC/2in113+Tablet12+TV19+Wearable18+

定义屏障线的方向。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

展开
名称 值 说明
LEFT 0 屏障在其所有referencedId的最左侧。
RIGHT 1 屏障在其所有referencedId的最右侧。
TOP 2 屏障在其所有referencedId的最上方。
BOTTOM 3 屏障在其所有referencedId的最下方。

LocalizedBarrierStyle12+对象说明

Phone12+PC/2in113+Tablet12+TV19+Wearable18+

barrier参数，用于定义一条支持镜像模式的barrier的id、方向和生成时所依赖的组件，子组件可通过barrier的id引用屏障作为锚点进行对齐定位。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

展开
名称 类型 只读 可选 说明
id string 否 否 barrier的id，用于标识屏障，子组件可通过此id引用该屏障作为锚点。必须是唯一的并且不可与容器内组件重名。
localizedDirection LocalizedBarrierDirection 否 否

指定barrier的方向。

水平屏障线（TOP/BOTTOM）仅能作为组件垂直方向锚点（top或bottom），用于水平方向锚点时位置视为0。垂直屏障线（START/END，支持LTR/RTL镜像）仅能作为组件水平方向锚点（start或end），用于垂直方向锚点时位置视为0。

默认值：LocalizedBarrierDirection.START

非法值：按默认值处理。
referencedId Array<string> 否 否 指定生成barrier所依赖的组件。将需要作为屏障基准的组件id放入数组，至少包含一个有效组件ID，不存在的ID会被忽略。支持镜像模式的屏障根据LTR/RTL模式下的实际位置计算屏障位置。

LocalizedBarrierDirection12+枚举说明

Phone12+PC/2in113+Tablet12+TV19+Wearable18+

定义支持镜像模式的屏障线的方向。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

展开
名称 值 说明
START 0 屏障在其所有referencedId的起始侧，LTR模式时为最左侧，RTL模式时为最右侧。
END 1 屏障在其所有referencedId的结束侧，LTR模式时为最右侧，RTL模式时为最左侧。
TOP 2 屏障在其所有referencedId的最上方。
BOTTOM 3 屏障在其所有referencedId的最下方。

事件

支持通用事件。

示例

示例1（以容器和容器内组件作为锚点进行布局）

本示例通过alignRules接口实现了以容器和容器内组件作为锚点进行布局的功能。

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct Index {
  4.   build() {
  5.     Row() {
  6.       RelativeContainer() {
  7.         Row() {
  8.           Text('row1')
  9.         }
  10.         .justifyContent(FlexAlign.Center)
  11.         .width(100)
  12.         .height(100)
  13.         .backgroundColor('#a3cf62')
  14.         .alignRules({
  15.           top: { anchor: "__container__", align: VerticalAlign.Top },
  16.           left: { anchor: "__container__", align: HorizontalAlign.Start }
  17.         })
  18.         .id("row1")
  19. 

  20.         Row() {
  21.           Text('row2')
  22.         }
  23.         .justifyContent(FlexAlign.Center)
  24.         .width(100)
  25.         .height(100)
  26.         .backgroundColor('#00ae9d')
  27.         .alignRules({
  28.           top: { anchor: "__container__", align: VerticalAlign.Top },
  29.           right: { anchor: "__container__", align: HorizontalAlign.End }
  30.         })
  31.         .id("row2")
  32. 

  33.         Row() {
  34.           Text('row3')
  35.         }
  36.         .justifyContent(FlexAlign.Center)
  37.         .height(100)
  38.         .backgroundColor('#0a59f7')
  39.         .alignRules({
  40.           top: { anchor: "row1", align: VerticalAlign.Bottom },
  41.           left: { anchor: "row1", align: HorizontalAlign.End },
  42.           right: { anchor: "row2", align: HorizontalAlign.Start }
  43.         })
  44.         .id("row3")
  45. 

  46.         Row() {
  47.           Text('row4')
  48.         }.justifyContent(FlexAlign.Center)
  49.         .backgroundColor('#2ca9e0')
  50.         .alignRules({
  51.           top: { anchor: "row3", align: VerticalAlign.Bottom },
  52.           bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
  53.           left: { anchor: "__container__", align: HorizontalAlign.Start },
  54.           right: { anchor: "row1", align: HorizontalAlign.End }
  55.         })
  56.         .id("row4")
  57. 

  58.         Row() {
  59.           Text('row5')
  60.         }.justifyContent(FlexAlign.Center)
  61.         .backgroundColor('#30c9f7')
  62.         .alignRules({
  63.           top: { anchor: "row3", align: VerticalAlign.Bottom },
  64.           bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
  65.           left: { anchor: "row2", align: HorizontalAlign.Start },
  66.           right: { anchor: "__container__", align: HorizontalAlign.End }
  67.         })
  68.         .id("row5")
  69.       }
  70.       .width(300).height(300)
  71.       .margin({ left: 50 })
  72.       .border({ width: 2, color: "#6699FF" })
  73.     }
  74.     .height('100%')
  75.   }
  76. }

示例2（子组件设置外边距）

本示例展示容器内子组件设置外边距的方法。

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct Index {
  4.   build() {
  5.     Row() {
  6.       RelativeContainer() {
  7.         Row() {
  8.           Text('row1')
  9.         }
  10.         .justifyContent(FlexAlign.Center)
  11.         .width(100)
  12.         .height(100)
  13.         .backgroundColor('#a3cf62')
  14.         .alignRules({
  15.           top: { anchor: "__container__", align: VerticalAlign.Top },
  16.           left: { anchor: "__container__", align: HorizontalAlign.Start }
  17.         })
  18.         .id("row1")
  19.         .margin(10)
  20. 

  21.         Row() {
  22.           Text('row2')
  23.         }
  24.         .justifyContent(FlexAlign.Center)
  25.         .width(100)
  26.         .height(100)
  27.         .backgroundColor('#00ae9d')
  28.         .alignRules({
  29.           left: { anchor: "row1", align: HorizontalAlign.End },
  30.           top: { anchor: "row1", align: VerticalAlign.Top }
  31.         })
  32.         .id("row2")
  33. 

  34.         Row() {
  35.           Text('row3')
  36.         }
  37.         .justifyContent(FlexAlign.Center)
  38.         .width(100)
  39.         .height(100)
  40.         .backgroundColor('#0a59f7')
  41.         .alignRules({
  42.           left: { anchor: "row1", align: HorizontalAlign.Start },
  43.           top: { anchor: "row1", align: VerticalAlign.Bottom }
  44.         })
  45.         .id("row3")
  46. 

  47.         Row() {
  48.           Text('row4')
  49.         }
  50.         .justifyContent(FlexAlign.Center)
  51.         .width(100)
  52.         .height(100)
  53.         .backgroundColor('#2ca9e0')
  54.         .alignRules({
  55.           left: { anchor: "row3", align: HorizontalAlign.End },
  56.           top: { anchor: "row2", align: VerticalAlign.Bottom }
  57.         })
  58.         .id("row4")
  59.         .margin(10)
  60.       }
  61.       .width(300).height(300)
  62.       .margin({ left: 50 })
  63.       .border({ width: 2, color: "#6699FF" })
  64.     }
  65.     .height('100%')
  66.   }
  67. }

示例3（设置容器大小自适应内容）

本示例展示了容器大小适应内容（声明width或height为"auto"）的用法。

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct Index {
  4.   build() {
  5.     Row() {
  6.       RelativeContainer() {
  7.         Row() {
  8.           Text('row1')
  9.         }
  10.         .justifyContent(FlexAlign.Center)
  11.         .width(100)
  12.         .height(100)
  13.         .backgroundColor('#a3cf62')
  14.         .id("row1")
  15. 

  16.         Row() {
  17.           Text('row2')
  18.         }
  19.         .justifyContent(FlexAlign.Center)
  20.         .width(100)
  21.         .height(100)
  22.         .backgroundColor('#00ae9d')
  23.         .alignRules({
  24.           left: { anchor: "row1", align: HorizontalAlign.End },
  25.           top: { anchor: "row1", align: VerticalAlign.Top }
  26.         })
  27.         .id("row2")
  28. 

  29.         Row() {
  30.           Text('row3')
  31.         }
  32.         .justifyContent(FlexAlign.Center)
  33.         .width(100)
  34.         .height(100)
  35.         .backgroundColor('#0a59f7')
  36.         .alignRules({
  37.           left: { anchor: "row1", align: HorizontalAlign.Start },
  38.           top: { anchor: "row1", align: VerticalAlign.Bottom }
  39.         })
  40.         .id("row3")
  41. 

  42.         Row() {
  43.           Text('row4')
  44.         }
  45.         .justifyContent(FlexAlign.Center)
  46.         .width(100)
  47.         .height(100)
  48.         .backgroundColor('#2ca9e0')
  49.         .alignRules({
  50.           left: { anchor: "row3", align: HorizontalAlign.End },
  51.           top: { anchor: "row2", align: VerticalAlign.Bottom }
  52.         })
  53.         .id("row4")
  54.       }
  55.       .width("auto").height("auto")
  56.       .margin({ left: 50 })
  57.       .border({ width: 2, color: "#6699FF" })
  58.     }
  59.     .height('100%')
  60.   }
  61. }

示例4（设置偏移）

本示例通过bias实现了子组件的位置在垂直方向的两个锚点间偏移的效果。

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct Index {
  4.   build() {
  5.     Row() {
  6.       RelativeContainer() {
  7.         Row()
  8.           .width(100)
  9.           .height(100)
  10.           .backgroundColor('#a3cf62')
  11.           .alignRules({
  12.             top: { anchor: "__container__", align: VerticalAlign.Top },
  13.             bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
  14.             left: { anchor: "__container__", align: HorizontalAlign.Start },
  15.             right: { anchor: "__container__", align: HorizontalAlign.End },
  16.             bias: { vertical: 0.3 }
  17.           })
  18.           .id("row1")
  19.       }
  20.       .width(300).height(300)
  21.       .margin({ left: 50 })
  22.       .border({ width: 2, color: "#6699FF" })
  23.     }
  24.     .height('100%')
  25.   }
  26. }

示例5（设置辅助线）

本示例展示了相对布局组件通过guideLine接口设置辅助线，子组件以辅助线为锚点的功能。

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct Index {
  4.   build() {
  5.     Row() {
  6.       RelativeContainer() {
  7.         Row()
  8.           .width(100)
  9.           .height(100)
  10.           .backgroundColor('#a3cf62')
  11.           .alignRules({
  12.             left: { anchor: "guideline1", align: HorizontalAlign.End },
  13.             top: { anchor: "guideline2", align: VerticalAlign.Top }
  14.           })
  15.           .id("row1")
  16.       }
  17.       .width(300)
  18.       .height(300)
  19.       .margin({ left: 50 })
  20.       .border({ width: 2, color: "#6699FF" })
  21.       .guideLine([{ id: "guideline1", direction: Axis.Vertical, position: { start: 50 } },
  22.         { id: "guideline2", direction: Axis.Horizontal, position: { start: 50 } }])
  23.     }
  24.     .height('100%')
  25.   }
  26. }

示例6（设置屏障）

本示例展示了相对布局组件通过barrier接口设置屏障，子组件以屏障为锚点的用法。

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct Index {
  4.   build() {
  5.     Row() {
  6.       RelativeContainer() {
  7.         Row() {
  8.           Text('row1')
  9.         }
  10.         .justifyContent(FlexAlign.Center)
  11.         .width(100)
  12.         .height(100)
  13.         .backgroundColor('#a3cf62')
  14.         .id("row1")
  15. 

  16.         Row() {
  17.           Text('row2')
  18.         }
  19.         .justifyContent(FlexAlign.Center)
  20.         .width(100)
  21.         .height(100)
  22.         .backgroundColor('#00ae9d')
  23.         .alignRules({
  24.           middle: { anchor: "row1", align: HorizontalAlign.End },
  25.           top: { anchor: "row1", align: VerticalAlign.Bottom }
  26.         })
  27.         .id("row2")
  28. 

  29.         Row() {
  30.           Text('row3')
  31.         }
  32.         .justifyContent(FlexAlign.Center)
  33.         .width(100)
  34.         .height(100)
  35.         .backgroundColor('#0a59f7')
  36.         .alignRules({
  37.           left: { anchor: "barrier1", align: HorizontalAlign.End },
  38.           top: { anchor: "row1", align: VerticalAlign.Top }
  39.         })
  40.         .id("row3")
  41. 

  42.         Row() {
  43.           Text('row4')
  44.         }
  45.         .justifyContent(FlexAlign.Center)
  46.         .width(50)
  47.         .height(50)
  48.         .backgroundColor('#2ca9e0')
  49.         .alignRules({
  50.           left: { anchor: "row1", align: HorizontalAlign.Start },
  51.           top: { anchor: "barrier2", align: VerticalAlign.Bottom }
  52.         })
  53.         .id("row4")
  54.       }
  55.       .width(300)
  56.       .height(300)
  57.       .margin({ left: 50 })
  58.       .border({ width: 2, color: "#6699FF" })
  59.       .barrier([{ id: "barrier1", direction: BarrierDirection.RIGHT, referencedId: ["row1", "row2"] },
  60.         { id: "barrier2", direction: BarrierDirection.BOTTOM, referencedId: ["row1", "row2"] }])
  61.     }
  62.     .height('100%')
  63.   }
  64. }

示例7（设置链）

本示例通过chainMode接口从上至下分别实现了水平方向的SPREAD链、SPREAD_INSIDE链和PACKED链。

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct Index {
  4.   build() {
  5.     Row() {
  6.       RelativeContainer() {
  7.         Row() {
  8.           Text('row1')
  9.         }
  10.         .justifyContent(FlexAlign.Center)
  11.         .width(80)
  12.         .height(80)
  13.         .backgroundColor('#a3cf62')
  14.         .alignRules({
  15.           left: { anchor: "__container__", align: HorizontalAlign.Start },
  16.           right: { anchor: "row2", align: HorizontalAlign.Start },
  17.           top: { anchor: "__container__", align: VerticalAlign.Top }
  18.         })
  19.         .id("row1")
  20.         .chainMode(Axis.Horizontal, ChainStyle.SPREAD)
  21. 

  22.         Row() {
  23.           Text('row2')
  24.         }
  25.         .justifyContent(FlexAlign.Center)
  26.         .width(80)
  27.         .height(80)
  28.         .backgroundColor('#00ae9d')
  29.         .alignRules({
  30.           left: { anchor: "row1", align: HorizontalAlign.End },
  31.           right: { anchor: "row3", align: HorizontalAlign.Start },
  32.           top: { anchor: "row1", align: VerticalAlign.Top }
  33.         })
  34.         .id("row2")
  35. 

  36.         Row() {
  37.           Text('row3')
  38.         }
  39.         .justifyContent(FlexAlign.Center)
  40.         .width(80)
  41.         .height(80)
  42.         .backgroundColor('#0a59f7')
  43.         .alignRules({
  44.           left: { anchor: "row2", align: HorizontalAlign.End },
  45.           right: { anchor: "__container__", align: HorizontalAlign.End },
  46.           top: { anchor: "row1", align: VerticalAlign.Top }
  47.         })
  48.         .id("row3")
  49. 

  50.         Row() {
  51.           Text('row4')
  52.         }
  53.         .justifyContent(FlexAlign.Center)
  54.         .width(80)
  55.         .height(80)
  56.         .backgroundColor('#a3cf62')
  57.         .alignRules({
  58.           left: { anchor: "__container__", align: HorizontalAlign.Start },
  59.           right: { anchor: "row5", align: HorizontalAlign.Start },
  60.           center: { anchor: "__container__", align: VerticalAlign.Center }
  61.         })
  62.         .id("row4")
  63.         .chainMode(Axis.Horizontal, ChainStyle.SPREAD_INSIDE)
  64. 

  65.         Row() {
  66.           Text('row5')
  67.         }
  68.         .justifyContent(FlexAlign.Center)
  69.         .width(80)
  70.         .height(80)
  71.         .backgroundColor('#00ae9d')
  72.         .alignRules({
  73.           left: { anchor: "row4", align: HorizontalAlign.End },
  74.           right: { anchor: "row6", align: HorizontalAlign.Start },
  75.           top: { anchor: "row4", align: VerticalAlign.Top }
  76.         })
  77.         .id("row5")
  78. 

  79.         Row() {
  80.           Text('row6')
  81.         }
  82.         .justifyContent(FlexAlign.Center)
  83.         .width(80)
  84.         .height(80)
  85.         .backgroundColor('#0a59f7')
  86.         .alignRules({
  87.           left: { anchor: "row5", align: HorizontalAlign.End },
  88.           right: { anchor: "__container__", align: HorizontalAlign.End },
  89.           top: { anchor: "row4", align: VerticalAlign.Top }
  90.         })
  91.         .id("row6")
  92. 

  93.         Row() {
  94.           Text('row7')
  95.         }
  96.         .justifyContent(FlexAlign.Center)
  97.         .width(80)
  98.         .height(80)
  99.         .backgroundColor('#a3cf62')
  100.         .alignRules({
  101.           left: { anchor: "__container__", align: HorizontalAlign.Start },
  102.           right: { anchor: "row8", align: HorizontalAlign.Start },
  103.           bottom: { anchor: "__container__", align: VerticalAlign.Bottom }
  104.         })
  105.         .id("row7")
  106.         .chainMode(Axis.Horizontal, ChainStyle.PACKED)
  107. 

  108.         Row() {
  109.           Text('row8')
  110.         }
  111.         .justifyContent(FlexAlign.Center)
  112.         .width(80)
  113.         .height(80)
  114.         .backgroundColor('#00ae9d')
  115.         .alignRules({
  116.           left: { anchor: "row7", align: HorizontalAlign.End },
  117.           right: { anchor: "row9", align: HorizontalAlign.Start },
  118.           top: { anchor: "row7", align: VerticalAlign.Top }
  119.         })
  120.         .id("row8")
  121. 

  122.         Row() {
  123.           Text('row9')
  124.         }
  125.         .justifyContent(FlexAlign.Center)
  126.         .width(80)
  127.         .height(80)
  128.         .backgroundColor('#0a59f7')
  129.         .alignRules({
  130.           left: { anchor: "row8", align: HorizontalAlign.End },
  131.           right: { anchor: "__container__", align: HorizontalAlign.End },
  132.           top: { anchor: "row7", align: VerticalAlign.Top }
  133.         })
  134.         .id("row9")
  135.       }
  136.       .width(300).height(300)
  137.       .margin({ left: 50 })
  138.       .border({ width: 2, color: "#6699FF" })
  139.     }
  140.     .height('100%')
  141.   }
  142. }

示例8（链中设置偏移）

本示例通过chainMode和bias接口实现了水平方向的带偏移的PACKED链。

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct Index {
  4.   build() {
  5.     Row() {
  6.       RelativeContainer() {
  7.         Row() {
  8.           Text('row1')
  9.         }
  10.         .justifyContent(FlexAlign.Center)
  11.         .width(80)
  12.         .height(80)
  13.         .backgroundColor('#a3cf62')
  14.         .alignRules({
  15.           left: { anchor: "__container__", align: HorizontalAlign.Start },
  16.           right: { anchor: "row2", align: HorizontalAlign.Start },
  17.           center: { anchor: "__container__", align: VerticalAlign.Center },
  18.           bias: { horizontal: 0 }
  19.         })
  20.         .id("row1")
  21.         .chainMode(Axis.Horizontal, ChainStyle.PACKED)
  22. 

  23.         Row() {
  24.           Text('row2')
  25.         }
  26.         .justifyContent(FlexAlign.Center)
  27.         .width(80)
  28.         .height(80)
  29.         .backgroundColor('#00ae9d')
  30.         .alignRules({
  31.           left: { anchor: "row1", align: HorizontalAlign.End },
  32.           right: { anchor: "row3", align: HorizontalAlign.Start },
  33.           top: { anchor: "row1", align: VerticalAlign.Top }
  34.         })
  35.         .id("row2")
  36. 

  37.         Row() {
  38.           Text('row3')
  39.         }
  40.         .justifyContent(FlexAlign.Center)
  41.         .width(80)
  42.         .height(80)
  43.         .backgroundColor('#0a59f7')
  44.         .alignRules({
  45.           left: { anchor: "row2", align: HorizontalAlign.End },
  46.           right: { anchor: "__container__", align: HorizontalAlign.End },
  47.           top: { anchor: "row1", align: VerticalAlign.Top }
  48.         })
  49.         .id("row3")
  50.       }
  51.       .width(300).height(300)
  52.       .margin({ left: 50 })
  53.       .border({ width: 2, color: "#6699FF" })
  54.     }
  55.     .height('100%')
  56.   }
  57. }

示例9（设置镜像模式）

本示例展示了在镜像模式（direction声明Direction.Rtl）下以屏障为锚点时使用LocalizedAlignRuleOptions和LocalizedBarrierDirection设置对齐方式的用法。

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct Index {
  4.   build() {
  5.     Row() {
  6.       RelativeContainer() {
  7.         Row() {
  8.           Text('row1')
  9.         }
  10.         .justifyContent(FlexAlign.Center)
  11.         .width(100)
  12.         .height(100)
  13.         .backgroundColor('#a3cf62')
  14.         .id("row1")
  15. 

  16.         Row() {
  17.           Text('row2')
  18.         }
  19.         .justifyContent(FlexAlign.Center)
  20.         .width(100)
  21.         .height(100)
  22.         .backgroundColor('#00ae9d')
  23.         .alignRules({
  24.           middle: { anchor: "row1", align: HorizontalAlign.End },
  25.           top: { anchor: "row1", align: VerticalAlign.Bottom }
  26.         })
  27.         .id("row2")
  28. 

  29.         Row() {
  30.           Text('row3')
  31.         }
  32.         .justifyContent(FlexAlign.Center)
  33.         .width(100)
  34.         .height(100)
  35.         .backgroundColor('#0a59f7')
  36.         .alignRules({
  37.           start: { anchor: "barrier1", align: HorizontalAlign.End },
  38.           top: { anchor: "row1", align: VerticalAlign.Top }
  39.         })
  40.         .id("row3")
  41. 

  42.         Row() {
  43.           Text('row4')
  44.         }
  45.         .justifyContent(FlexAlign.Center)
  46.         .width(50)
  47.         .height(50)
  48.         .backgroundColor('#2ca9e0')
  49.         .alignRules({
  50.           start: { anchor: "row1", align: HorizontalAlign.Start },
  51.           top: { anchor: "barrier2", align: VerticalAlign.Bottom }
  52.         })
  53.         .id("row4")
  54.       }
  55.       .direction(Direction.Rtl)
  56.       .width(300)
  57.       .height(300)
  58.       .margin({ left: 50 })
  59.       .border({ width: 2, color: "#6699FF" })
  60.       .barrier([{ id: "barrier1", localizedDirection: LocalizedBarrierDirection.END, referencedId: ["row1", "row2"] },
  61.         { id: "barrier2", localizedDirection: LocalizedBarrierDirection.BOTTOM, referencedId: ["row1", "row2"] }])
  62.     }
  63.     .height('100%')
  64.   }
  65. }

示例10（设置链中节点权重）

本示例展示了链中节点使用chainWeight设置尺寸权重的用法。

必须先通过alignRules设置子组件的链式对齐规则（确保组件在水平或垂直方向形成链），再通过chainMode设置链样式（如SPREAD、SPREAD_INSIDE、PACKED），chainWeight仅在链模式下生效。

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct Index {
  4.   build() {
  5.     Row() {
  6.       RelativeContainer() {
  7.         Row() {
  8.           Text('row1')
  9.         }
  10.         .justifyContent(FlexAlign.Center)
  11.         .width(80)
  12.         .height(80)
  13.         .backgroundColor('#a3cf62')
  14.         .alignRules({
  15.           left: { anchor: "__container__", align: HorizontalAlign.Start },
  16.           right: { anchor: "row2", align: HorizontalAlign.Start },
  17.           center: { anchor: "__container__", align: VerticalAlign.Center },
  18.         })
  19.         .id("row1")
  20.         .chainMode(Axis.Horizontal, ChainStyle.PACKED)
  21. 

  22.         Row() {
  23.           Text('row2')
  24.         }
  25.         .justifyContent(FlexAlign.Center)
  26.         .width(80)
  27.         .height(80)
  28.         .backgroundColor('#00ae9d')
  29.         .alignRules({
  30.           left: { anchor: "row1", align: HorizontalAlign.End },
  31.           right: { anchor: "row3", align: HorizontalAlign.Start },
  32.           top: { anchor: "row1", align: VerticalAlign.Top }
  33.         })
  34.         .id("row2")
  35.         .chainWeight({ horizontal: 1 })
  36. 

  37.         Row() {
  38.           Text('row3')
  39.         }
  40.         .justifyContent(FlexAlign.Center)
  41.         .width(80)
  42.         .height(80)
  43.         .backgroundColor('#0a59f7')
  44.         .alignRules({
  45.           left: { anchor: "row2", align: HorizontalAlign.End },
  46.           right: { anchor: "__container__", align: HorizontalAlign.End },
  47.           top: { anchor: "row1", align: VerticalAlign.Top }
  48.         })
  49.         .id("row3")
  50.         .chainWeight({ horizontal: 2 })
  51.       }
  52.       .width(300).height(300)
  53.       .margin({ left: 50 })
  54.       .border({ width: 2, color: "#6699FF" })
  55.     }
  56.     .height('100%')
  57.   }
  58. }

相关推荐
文档相对布局 (RelativeContainer)
文档如何通过RelativeContainer实现列表的统一格式布局
文档如何解决分屏状态下页面滚动异常问题
文档Scroll容器嵌套RelativeContainer组件时无法滚动
文档Swiper组件如何实现子组件高度自适应
文档RelativeContainer组件height设置为auto，子组件以容器作为锚点，为什么auto不生效
文档Column
文档Row
文档GridContainer
文档DynamicLayout
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 API参考 中进行搜索
请输入您想要搜索的关键词