1# 相对布局 2 3 4## 概述 5 6[RelativeContainer](../reference/arkui-ts/ts-container-relativecontainer.md)为采用相对布局的容器，支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局。下图是一个RelativeContainer的概念图，图中的虚线表示位置的依赖关系。 7 8 9 **图1** 相对布局示意图 10 11 12 13 14子元素并不完全是上图中的依赖关系。比如，Item4可以以Item2为依赖锚点，也可以以RelativeContainer父容器为依赖锚点。 15 16 17## 基本概念 18 19- 锚点：通过锚点设置当前元素基于哪个元素确定位置。 20 21- 对齐方式：通过对齐方式，设置当前元素是基于锚点的上中下对齐，还是基于锚点的左中右对齐。 22 23 24## 设置依赖关系 25 26 27### 锚点设置 28 29锚点设置是指设置子元素相对于父元素或兄弟元素的位置依赖关系。在水平方向上，可以设置left、middle、right的锚点。在竖直方向上，可以设置top、center、bottom的锚点。为了明确定义锚点，必须为RelativeContainer及其子元素设置ID，用于指定锚点信息。ID默认为“container”，其余子元素的ID通过id属性设置。未设置ID的子元素在RelativeContainer中不会显示。 30 31>**说明：** 32> 33>在使用锚点时要注意子元素的相对位置关系，避免出现错位或遮挡的情况。 34 35- RelativeContainer父组件为锚点，__container__代表父容器的id。 36 37 ```ts 38 RelativeContainer() { 39 Row() 40 // 添加其他属性 41 .alignRules({ 42 top: { anchor: '__container__', align: VerticalAlign.Top }, 43 left: { anchor: '__container__', align: HorizontalAlign.Start } 44 }) 45 .id("row1") 46 47 Row() 48 ... 49 .alignRules({ 50 top: { anchor: '__container__', align: VerticalAlign.Top }, 51 right: { anchor: '__container__', align: HorizontalAlign.End } 52 }) 53 .id("row2") 54 } 55 ... 56 ``` 57 58  59 60- 以子元素为锚点。 61 62 ```ts 63 RelativeContainer() { 64 ... 65 top: { anchor: 'row1', align: VerticalAlign.Bottom }, 66 ... 67 } 68 .width(300).height(300) 69 .margin({ left: 20 }) 70 .border({ width: 2, color: '#6699FF' }) 71 ``` 72 73  74 75 76### 设置相对于锚点的对齐位置 77 78设置了锚点之后，可以通过align设置相对于锚点的对齐位置。 79 80在水平方向上，对齐位置可以设置为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End。 81 82 83 84在竖直方向上，对齐位置可以设置为VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom。 85 86 87 88 89## 场景实例 90 91相对布局内的子元素相对灵活，只要在RelativeContainer容器内，均可以通过alignRules进行相应相应的位置移动。 92 93 94```ts 95@Entry 96@Component 97struct Index { 98 build() { 99 Row() { 100 RelativeContainer() { 101 Row() 102 .width(100) 103 .height(100) 104 .backgroundColor('#FF3333') 105 .alignRules({ 106 top: { anchor: '__container__', align: VerticalAlign.Top }, //以父容器为锚点，竖直方向顶头对齐 107 middle: { anchor: '__container__', align: HorizontalAlign.Center } //以父容器为锚点，水平方向居中对齐 108 }) 109 .id('row1') //设置锚点为row1 110 111 Row() { 112 Image($r('app.media.icon')) 113 } 114 .height(100).width(100) 115 .alignRules({ 116 top: { anchor: 'row1', align: VerticalAlign.Bottom }, //以row1组件为锚点，竖直方向低端对齐 117 left: { anchor: 'row1', align: HorizontalAlign.Start } //以row1组件为锚点，水平方向开头对齐 118 }) 119 .id('row2') //设置锚点为row2 120 121 Row() 122 .width(100) 123 .height(100) 124 .backgroundColor('#FFCC00') 125 .alignRules({ 126 top: { anchor: 'row2', align: VerticalAlign.Top } 127 }) 128 .id('row3') //设置锚点为row3 129 130 Row() 131 .width(100) 132 .height(100) 133 .backgroundColor('#FF9966') 134 .alignRules({ 135 top: { anchor: 'row2', align: VerticalAlign.Top }, 136 left: { anchor: 'row2', align: HorizontalAlign.End }, 137 }) 138 .id('row4') //设置锚点为row4 139 140 Row() 141 .width(100) 142 .height(100) 143 .backgroundColor('#FF66FF') 144 .alignRules({ 145 top: { anchor: 'row2', align: VerticalAlign.Bottom }, 146 middle: { anchor: 'row2', align: HorizontalAlign.Center } 147 }) 148 .id('row5') //设置锚点为row5 149 } 150 .width(300).height(300) 151 .border({ width: 2, color: '#6699FF' }) 152 } 153 .height('100%').margin({ left: 30 }) 154 } 155} 156``` 157 158 159
