• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# RelativeContainer
2
3The **\<RelativeContainer>** component is used for element alignment in complex scenarios.
4
5>  **NOTE**
6>
7> This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10
11## Rules
12
13 * Components in a container are aligned horizontally or vertically.
14   * Alignment modes in the horizontal direction can be left, middle, or right, achieved by the **HorizontalAlign.Start**, **HorizontalAlign.Center**, and **HorizontalAlign.End** attributes of the container, respectively.
15   * Alignment modes in the vertical direction can be top, center, or bottom, achieved by the **VerticalAlign.Top**, **VerticalAlign.Center**, and **VerticalAlign.Bottom** attributes of the container, respectively.
16 * A child component can set the container or another child component as the anchor.
17   * To show in the **\<RelativeContainer>**, child components must have an ID. The container ID is fixed at **__container__**.
18   * Three positions of the child component in a direction can use three positions of the container or another child components in the same direction as anchors. If anchors are set for more than two positions in a single direction, the third position is skipped.
19   * The child component size set on the frontend page is not affected by the **\<RelativeContainer>** rules. If two or more **alignRules** values are set for one direction of the child component, you are not advised to set the size for this direction.
20   * If offset is required after the alignment, it can be set through **offset**.
21 * Exceptions
22   * When a mutual or circular dependency occurs, none of the child components in the container are drawn.
23   * If anchors are set for more than two positions in a single direction but the anchor positions are reversed, the size of the child component is 0, which means that the child component is not drawn.
24
25## Child Components
26
27Multiple child components are supported.
28
29
30## APIs
31
32RelativeContainer()
33
34Since API version 9, this API is supported in ArkTS widgets.
35
36## Example
37
38```ts
39@Entry
40@Component
41struct Index {
42  build() {
43    Row() {
44
45      RelativeContainer() {
46        Row().width(100).height(100)
47          .backgroundColor("#FF3333")
48          .alignRules({
49            top: {anchor: "__container__", align: VerticalAlign.Top},
50            left: {anchor: "__container__", align: HorizontalAlign.Start}
51          })
52          .id("row1")
53
54        Row().width(100).height(100)
55          .backgroundColor("#FFCC00")
56          .alignRules({
57            top: {anchor: "__container__", align: VerticalAlign.Top},
58            right: {anchor: "__container__", align: HorizontalAlign.End}
59          })
60          .id("row2")
61
62        Row().height(100)
63          .backgroundColor("#FF6633")
64          .alignRules({
65            top: {anchor: "row1", align: VerticalAlign.Bottom},
66            left: {anchor: "row1", align: HorizontalAlign.End},
67            right: {anchor: "row2", align: HorizontalAlign.Start}
68          })
69          .id("row3")
70
71        Row()
72          .backgroundColor("#FF9966")
73          .alignRules({
74            top: {anchor: "row3", align: VerticalAlign.Bottom},
75            bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
76            left: {anchor: "__container__", align: HorizontalAlign.Start},
77            right: {anchor: "row1", align: HorizontalAlign.End}
78          })
79          .id("row4")
80
81        Row()
82          .backgroundColor("#FF66FF")
83          .alignRules({
84            top: {anchor: "row3", align: VerticalAlign.Bottom},
85            bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
86            left: {anchor: "row2", align: HorizontalAlign.Start},
87            right: {anchor: "__container__", align: HorizontalAlign.End}
88          })
89          .id("row5")
90      }
91      .width(300).height(300)
92      .margin({left: 100})
93      .border({width:2, color: "#6699FF"})
94    }
95    .height('100%')
96  }
97}
98
99```
100![relative container](figures/relativecontainer.png)
101