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 on the child component in a specific direction can use as anchors three positions on the container or another child component in the same direction. If anchors are set for more than two positions in a single direction, then: Start and Center are preferred in the horizontal direction, and Top and Center are preferred in the vertical direction. 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 * If the component's child component uses it as the anchor in the horizontal direction, the **auto** value of **width** has no effect. The same rule applies to the vertical direction. 22 * Exceptions 23 * When a mutual or circular dependency occurs, none of the child components in the container are drawn. 24 * If anchors are set for two or more 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. 25 26## Child Components 27 28Multiple child components are supported. 29 30 31## APIs 32 33RelativeContainer() 34 35Since API version 9, this API is supported in ArkTS widgets. 36 37## Example 38 39```ts 40@Entry 41@Component 42struct Index { 43 build() { 44 Row() { 45 46 RelativeContainer() { 47 Row().width(100).height(100) 48 .backgroundColor("#FF3333") 49 .alignRules({ 50 top: {anchor: "__container__", align: VerticalAlign.Top}, 51 left: {anchor: "__container__", align: HorizontalAlign.Start} 52 }) 53 .id("row1") 54 55 Row().width(100).height(100) 56 .backgroundColor("#FFCC00") 57 .alignRules({ 58 top: {anchor: "__container__", align: VerticalAlign.Top}, 59 right: {anchor: "__container__", align: HorizontalAlign.End} 60 }) 61 .id("row2") 62 63 Row().height(100) 64 .backgroundColor("#FF6633") 65 .alignRules({ 66 top: {anchor: "row1", align: VerticalAlign.Bottom}, 67 left: {anchor: "row1", align: HorizontalAlign.End}, 68 right: {anchor: "row2", align: HorizontalAlign.Start} 69 }) 70 .id("row3") 71 72 Row() 73 .backgroundColor("#FF9966") 74 .alignRules({ 75 top: {anchor: "row3", align: VerticalAlign.Bottom}, 76 bottom: {anchor: "__container__", align: VerticalAlign.Bottom}, 77 left: {anchor: "__container__", align: HorizontalAlign.Start}, 78 right: {anchor: "row1", align: HorizontalAlign.End} 79 }) 80 .id("row4") 81 82 Row() 83 .backgroundColor("#FF66FF") 84 .alignRules({ 85 top: {anchor: "row3", align: VerticalAlign.Bottom}, 86 bottom: {anchor: "__container__", align: VerticalAlign.Bottom}, 87 left: {anchor: "row2", align: HorizontalAlign.Start}, 88 right: {anchor: "__container__", align: HorizontalAlign.End} 89 }) 90 .id("row5") 91 } 92 .width(300).height(300) 93 .margin({left: 50}) 94 .border({width:2, color: "#6699FF"}) 95 } 96 .height('100%') 97 } 98} 99 100``` 101 102
