We use essential cookies for the website to function, as well as analytics cookies for analyzing and creating statistics of the website performance. To agree to the use of analytics cookies, click "Accept All". You can manage your preferences at any time by clicking "Cookie Settings" on the footer. More Information.

Cookie Settings
Only Essential Cookies
Accept All
MaterialsConsole

HarmonyOS

输入关键字搜索
HMS Core
AppGallery Connect
HUAWEI HiAI
CTRL+K
Advanced filters
API versionAll
DeviceAll
Atomic service APIsNot filter by this
ReferencesApplication FrameworkArkUIArkTS ComponentsRow, Column, and StackRelativeContainer

RelativeContainer

Phone12+PC/2in113+Tablet12+TV19+Wearable18+
Last updated: 2026-09-04 06:52
Content overview
Expand

The RelativeContainer component is a container component used for relative layout of elements in complex scenarios.

Child components can define their alignment rules within the container using alignRules.

NOTE
  • This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
  • When width and height are not set, RelativeContainer defaults to 100% in both dimensions.
  • Since API version 11, setting width or height to "auto" enables child-adaptive sizing. However, if the child components use the container as an anchor in the horizontal direction, the auto value of width has no effect (equivalent to width not being set). The same rule applies to the vertical direction.
  • Since API version 20, the size adaptation behavior of child components in the RelativeContainer component follows the following rules, depending on the LayoutPolicy setting for width and height: LayoutPolicy.wrapContent: The child component adapts to its content size and is constrained by the size of the ancestor node. LayoutPolicy.fixAtIdealSize: The child component adapts to its ideal content size and is not constrained by the size of the ancestor node. If width is set to wrapContent or fixAtIdealSize, and the child component (in the horizontal direction) directly or indirectly uses the RelativeContainer as its anchor, the container's horizontal size will not adapt to the child component. The same rule applies to the vertical direction.
  • For a child component of the container, margin has a different meaning from the universal attribute margin. It indicates the distance to the anchor in the respective direction. If there is no anchor in the respective direction, margin in that direction does not take effect.

Child Components

Multiple child components are supported.

APIs

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

RelativeContainer()

The RelativeContainer component is a container component used for relative layout of elements in complex scenarios.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Attributes

In addition to the universal attributes, the following attributes are supported.

guideLine12+

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

guideLine(value: Array<GuideLineStyle>)

Sets the guidelines in the RelativeContainer component. The value is an array, each element of which is a guideline.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Expand
Name Type Mandatory Description
value Array<GuideLineStyle> Yes Guidelines in the RelativeContainer component.

barrier12+

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

barrier(value: Array<BarrierStyle>)

Sets the barriers in the RelativeContainer component. The value is an array, each element of which is a barrier.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Expand
Name Type Mandatory Description
value Array<BarrierStyle> Yes Barriers in the RelativeContainer component.

barrier12+

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

barrier(barrierStyle: Array<LocalizedBarrierStyle>)

Sets barriers in the RelativeContainer component. Each array element defines a barrier. Barriers can be defined in mirrored layout mode.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Expand
Name Type Mandatory Description
barrierStyle Array<LocalizedBarrierStyle> Yes Barriers in the RelativeContainer component.

GuideLineStyle12+

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

Defines the ID, direction, and position of a guideline.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Expand
Name Type Read-Only Optional Description
id string No No ID of the guideline, which must be unique and cannot be the same as the name of any component in the container.
direction Axis No No

Direction of the guideline.

A guideline in the vertical direction can only be used as the anchor of the component in the horizontal direction, and the value is 0 when it is used as the anchor in the vertical direction. A guideline in the horizontal direction can only be used as the anchor of the component in the vertical direction, and the value is 0 when it is used as the anchor in the horizontal direction.

Default value: Axis.Vertical

Invalid values are treated as the default value.
position GuideLinePosition No No

Position of the guideline.

If no value is specified or an invalid value (for example, undefined) is provided, the guideline position defaults to start: 0. Only start or end can be selected for the guideline position. If both are declared, only start takes effect. If the container size in a certain direction is set to "auto", the guideline position in that direction must be declared in start mode, and the value cannot be a percentage.

Default value:

{

start: 0

}

Invalid values are treated as the default value.

GuideLinePosition12+

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

Defines the position of a guideline.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Expand
Name Type Read-Only Optional Description
start Dimension No Yes Distance between the guideline and the left or top of the container.
end Dimension No Yes Distance between the guideline and the right or bottom of the container.

BarrierStyle12+

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

Defines the ID, direction, and referenced components of a barrier.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Expand
Name Type Read-Only Optional Description
id string No No ID of the barrier, which must be unique and cannot be the same as the name of any component in the container.
direction BarrierDirection No No

Direction of the barrier.

Vertical-direction barriers (including TOP and BOTTOM) can only serve as the horizontal anchor of a component. If they are used as a vertical anchor, the anchor value will be 0. Horizontal-direction barriers (including LEFT and RIGHT) can only serve as the vertical anchor of a component. If they are used as a horizontal anchor, the anchor value will be 0.

Default value: BarrierDirection.LEFT

Invalid values are treated as the default value.
referencedId Array<string> No No Referenced components of the barrier.

BarrierDirection12+

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

Defines the direction of a barrier.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Expand
Name Value Description
LEFT 0 The barrier is on the left side of all the referenced components specified by referencedId.
RIGHT 1 The barrier is on the right side of all the referenced components specified by referencedId.
TOP 2 The barrier is at the top of all the referenced components specified by referencedId.
BOTTOM 3 The barrier is at the bottom of all the referenced components specified by referencedId.

LocalizedBarrierStyle12+

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

Defines the ID, direction, and referenced components of a barrier.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Expand
Name Type Read-Only Optional Description
id string No No ID of the barrier, which must be unique and cannot be the same as the name of any component in the container.
localizedDirection LocalizedBarrierDirection No No

Direction of the barrier.

Vertical-direction barriers (including TOP and BOTTOM) can only serve as the horizontal anchor of a component. If they are used as a vertical anchor, the anchor value will be 0. Horizontal-direction barriers (including START and END) can only serve as the vertical anchor of a component. If they are used as a horizontal anchor, the anchor value will be 0.
referencedId Array<string> No No Referenced components of the barrier.

LocalizedBarrierDirection12+

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

Enumerates the directions of barriers with mirror mode support.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Expand
Name Value Description
START 0 The barrier is on the left (for left-to-right scripts) or right (for right-to-left scripts) side of all the referenced components specified by referencedId.
END 1 The barrier is on the right (for left-to-right scripts) or left (for right-to-left scripts) side of all the referenced components specified by referencedId.
TOP 2 The barrier is at the top of all the referenced components specified by referencedId.
BOTTOM 3 The barrier is at the bottom of all the referenced components specified by referencedId.

Events

The universal events are supported.

Example

Example 1: Implementing a Layout Using Containers and Components as Anchors

This example demonstrates how to use the alignRules API to implement a layout with containers and their internal components as anchors.

Collapse
Word wrap
Dark theme
Copy code
  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. }

Example 2: Setting Margins for Child Components

This example shows how to set margins for child components in the container.

Collapse
Word wrap
Dark theme
Copy code
  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. }

Example 3: Configuring the Container to Adapt Its Size to Content

This example shows how to configure the container to adapt its size to content by setting width or height to "auto".

Collapse
Word wrap
Dark theme
Copy code
  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. }

Example 4: Applying Vertical Offsets

This example uses the bias API to create a vertical offset for a child component between two anchors.

Collapse
Word wrap
Dark theme
Copy code
  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. }

Example 5: Setting Guidelines

This example demonstrates how to set guidelines in a relative layout using the guideLine API, with child components using these guidelines as anchors.

Collapse
Word wrap
Dark theme
Copy code
  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. }

Example 6: Implementing Barriers

This example shows how to set barriers in a relative layout using the barrier API, with child components using these barriers as anchors.

Collapse
Word wrap
Dark theme
Copy code
  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. }

Example 7: Creating Chains

This example uses the chainMode API to create horizontal chains, including SPREAD, SPREAD_INSIDE, and PACKED chains, from top to bottom.

Collapse
Word wrap
Dark theme
Copy code
  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. }

Example 8: Creating a Chain with Offsets

This example combines the chainMode and bias APIs to create a horizontal PACKED chain with offsets.

Collapse
Word wrap
Dark theme
Copy code
  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. }

Example 9: Implementing a Mirror Effect

This example demonstrates how to use LocalizedAlignRuleOptions and LocalizedBarrierDirection for alignment when using barriers as anchors in mirror mode (direction set to Direction.Rtl).

Collapse
Word wrap
Dark theme
Copy code
  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. }

Example 10: Setting Component Weights in a Chain

This example demonstrates how to use chainWeight to set the size weights of components in a chain.

Collapse
Word wrap
Dark theme
Copy code
  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. }

Stack
DynamicLayout
English
©2026 HUAWEI Developers. All rights reserved.
Terms of Use
Statement About HUAWEI Developers and Privacy
Cookies
Cookie Settings
Open-Source Software Notice
Search in References
Enter a keyword.