1# RelativeContainer 2 3相对布局组件，用于复杂场景中元素对齐的布局。 4 5> **说明：** 6> 7> 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 规则说明 10 11 * 容器内子组件区分水平方向，垂直方向： 12 * 水平方向为left， middle， right，对应容器的HorizontalAlign.Start， HorizontalAlign.Center， HorizontalAlign.End。 13 * 垂直方向为top， center， bottom，对应容器的VerticalAlign.Top， VerticalAlign.Center， VerticalAlign.Bottom。 14 * 子组件可以将容器、guideline、barrier或者其他子组件设为锚点： 15 * 参与相对布局的容器内组件，不设置id的组件能显示，但是不能被其他子组件作为锚点，相对布局容器会为其拼接id，此id的规律无法被应用感知；容器id固定为__container__；guideline和barrier的id不能与组件重复，重复的话按照组件 > guideline > barrier的优先级生效。 16 * 此子组件某一方向上的三个位置（水平方向为left、middle、right，垂直方向为top、center、bottom）可以指定容器或其他子组件同方向的三个位置（水平方向为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End，垂直方向为VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom）为锚点。若同方向上设置两个以上锚点，水平方向Start和Center优先，垂直方向Top和Center优先。例如，水平方向上指定了left以容器的HorizontalAlign.Start为锚点，middle以容器的HorizontalAlign.Center为锚点，又指定right的锚点为容器的HorizontalAlign.End，当组件的width和容器的width不能同时满足3条约束规则时，优先取Start和Center的约束规则。 17 * 当同时存在前端页面设置的子组件尺寸和相对布局规则时，子组件的绘制尺寸取决于约束规则。从API Version 11开始，该规则发生变化，子组件绘制尺寸取决于前端页面设置的尺寸。 18 * 对齐后需要额外偏移可设置offset(API Version 11上新增了[bias](ts-universal-attributes-location.md#bias对象说明)， 不建议再使用offset)。 19 * 从API Version 11开始，在RelativeContainer组件中，width、height设置auto表示自适应子组件。 20 * 当width设置auto时，如果水平方向上子组件以容器作为锚点，则auto不生效，垂直方向上同理。 21 * 相对布局容器内的子组件的margin含义不同于通用属性的margin，其含义为到该方向上的锚点的距离。若该方向上没有锚点，则该方向的margin不生效。 22 * guideline的位置在不声明或者声明异常值(如undefined)时，取start：0的位置；start和end两种方式声明一种即可，同时声明时仅start生效。 23 * 当容器在某个方向的size声明为“auto”时，该方向上guideline的位置只能使用start的方式声明(不可使用百分比)。 24 * 垂直方向的guideline和barrier只能作为组件水平方向的锚点，作为垂直方向的锚点时取0；水平方向的guideline和barrier只能作为组件垂直方向的锚点，作为水平方向的锚点时取0。 25 * 链的形成依靠组件间的依赖关系。以一个组件A、组件B组成的最小水平链为例，需要有锚点1 <-- 组件A <---> 组件B --> 锚点2的依赖关系，即A具有left锚点，B具有right锚点，同时A的right锚点是B的HorizontalAlign.Start，B的left锚点是A的HorizontalAlign.End。 26 * 链的方向和格式声明在链头组件的[chainMode](ts-universal-attributes-location.md#chainmode12)接口；链内元素的bias属性全部失效，链头元素的bias作为整个链的bias生效。 27 * 链内所有元素的size如果超出链的锚点约束，超出的部分将均分在链的两侧。在[Packed](ts-universal-attributes-location.md#chainstyle12)链中，超出部分的分布可以通过[bias](ts-universal-attributes-location.md#bias对象说明)来设置。 28 * 特殊情况 29 * 根据约束条件和子组件本身的size属性无法确定子组件大小，则子组件不绘制。 30 * 互相依赖、环形依赖时容器内子组件全部不绘制。 31 * 同方向上两个及以上位置设置锚点但锚点位置逆序时此子组件大小为0，即不绘制。 32 33## 子组件 34 35支持多个子组件。 36 37 38## 接口 39 40RelativeContainer() 41 42**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 43 44**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 45 46**系统能力：** SystemCapability.ArkUI.ArkUI.Full 47 48## 属性 49 50除支持[通用属性](ts-universal-attributes-size.md)外，还支持如下属性： 51 52### guideLine<sup>12+</sup> 53 54guideLine(value: Array<GuideLineStyle>) 55 56设置RelativeContainer容器内的辅助线，Array中每个项目即为一条guideline。 57 58**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 59 60**系统能力：** SystemCapability.ArkUI.ArkUI.Full 61 62**参数：** 63 64| 参数名 | 类型 | 必填 | 说明 | 65| ------ | ------------------------------------------ | ---- | --------------------------------- | 66| value | Array<[GuideLineStyle](#guidelinestyle12对象说明)> | 是 | RelativeContainer容器内的辅助线。 | 67 68### barrier<sup>12+</sup> 69 70barrier(value: Array<BarrierStyle>) 71 72设置RelativeContainer容器内的屏障，Array中每个项目即为一条barrier。 73 74**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 75 76**系统能力：** SystemCapability.ArkUI.ArkUI.Full 77 78**参数：** 79 80| 参数名 | 类型 | 必填 | 说明 | 81| ------ | -------------------------------------- | ---- | ------------------------------- | 82| value | Array<[BarrierStyle](#barrierstyle12对象说明)> | 是 | RelativeContainer容器内的屏障。 | 83 84### barrier<sup>12+</sup> 85 86barrier(barrierStyle: Array<LocalizedBarrierStyle>) 87 88设置RelativeContaine容器内的屏障，Array中每个项目即为一条barrier。 89 90**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 91 92**系统能力：** SystemCapability.ArkUI.ArkUI.Full 93 94**参数：** 95 96| 参数名 | 类型 | 必填 | 说明 | 97| ------ | -------------------------------------- | ---- | ------------------------------ | 98| barrierStyle | Array\<[LocalizedBarrierStyle](#localizedbarrierstyle12对象说明)\> | 是 | RelativeContaine容器内的屏障。 | 99 100## GuideLineStyle<sup>12+</sup>对象说明 101 102guideLine参数，用于定义一条guideline的id、方向和位置。 103 104**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 105 106**系统能力：** SystemCapability.ArkUI.ArkUI.Full 107 108| 名称 | 类型 | 必填 | 说明 | 109| ----- | ------- | ---- | --------------------- | 110| id | string | 是 | guideline的id，必须是唯一的并且不可与容器内组件重名。 | 111| direction | [Axis](ts-appendix-enums.md#axis) | 是 | 指定guideline的方向。<br />默认值：Axis.Vertical | 112| position | [GuideLinePosition](#guidelineposition12对象说明) | 是 | 指定guideline的位置。<br />默认值：<br />{<br />start: 0<br />} | 113 114## GuideLinePosition<sup>12+</sup>对象说明 115 116guideLine位置参数，用于定义guideline的位置。 117 118**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 119 120**系统能力：** SystemCapability.ArkUI.ArkUI.Full 121 122| 名称 | 类型 | 必填 | 说明 | 123| ----- | ------- | ---- | --------------------- | 124| start | [Dimension](ts-types.md#dimension10) | 否 | guideline距离容器左侧或者顶部的距离。 | 125| end | [Dimension](ts-types.md#dimension10) | 否 | guideline距离容器右侧或者底部的距离。 | 126 127## BarrierStyle<sup>12+</sup>对象说明 128 129barrier参数，用于定义一条barrier的id、方向和生成时所依赖的组件。 130 131**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 132 133**系统能力：** SystemCapability.ArkUI.ArkUI.Full 134 135| 名称 | 类型 | 必填 | 说明 | 136| ----- | ------- | ---- | --------------------- | 137| id | string | 是 | barrier的id，必须是唯一的并且不可与容器内组件重名。 | 138| direction | [BarrierDirection](ts-container-relativecontainer.md#barrierdirection12) | 是 | 指定barrier的方向。<br />默认值：BarrierDirection.LEFT | 139| referencedId | Array\<string> | 是 | 指定生成barrier所依赖的组件。 | 140 141## BarrierDirection<sup>12+</sup>枚举说明 142 143定义屏障线的方向。 144 145**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 146 147**系统能力：** SystemCapability.ArkUI.ArkUI.Full 148 149| 名称 | 说明 | 150| ------ | ----------------------------- | 151| LEFT | 屏障在其所有[referencedId](ts-container-relativecontainer.md#barrierstyle12对象说明)的最左侧。 | 152| RIGHT | 屏障在其所有[referencedId](ts-container-relativecontainer.md#barrierstyle12对象说明)的最右侧。 | 153| TOP | 屏障在其所有[referencedId](ts-container-relativecontainer.md#barrierstyle12对象说明)的最上方。 | 154| BOTTOM | 屏障在其所有[referencedId](ts-container-relativecontainer.md#barrierstyle12对象说明)的最下方。 | 155 156## LocalizedBarrierStyle<sup>12+</sup>对象说明 157 158barrier参数，用于定义一条barrier的id、方向和生成时所依赖的组件。 159 160**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 161 162**系统能力：** SystemCapability.ArkUI.ArkUI.Full 163 164| 名称 | 类型 | 必填 | 说明 | 165| ----- | ------- | ---- | --------------------- | 166| id | string | 是 | barrier的id，必须是唯一的并且不可与容器内组件重名。 | 167| localizedDirection | [LocalizedBarrierDirection](#localizedbarrierdirection12枚举说明) | 是 | 指定barrier的方向。 | 168| referencedId | Array\<string\> | 是 | 指定生成barrier所依赖的组件。 | 169 170## LocalizedBarrierDirection<sup>12+</sup>枚举说明 171 172定义屏障线的方向。 173 174**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 175 176**系统能力：** SystemCapability.ArkUI.ArkUI.Full 177 178| 名称 | 值 | 说明 | 179| ------ | -- | ----------------------------- | 180| START | 0 |屏障在其所有[referencedId](#localizedbarrierstyle12对象说明)的最左/右侧，LTR模式时为最左侧，RTL模式时为最右侧。 | 181| END | 1 | 屏障在其所有[referencedId](#localizedbarrierstyle12对象说明)的最左/右侧, LTR模式时为最右侧，RTL模式时为最左侧。 | 182| TOP | 2 | 屏障在其所有[referencedId](#localizedbarrierstyle12对象说明)的最上方。 | 183| BOTTOM | 3 | 屏障在其所有[referencedId](#localizedbarrierstyle12对象说明)的最下方。 | 184 185## 示例 186 187### 示例1 188 189本示例展示了以容器和容器内组件作为锚点进行布局的用法。 190 191```ts 192@Entry 193@Component 194struct Index { 195 build() { 196 Row() { 197 RelativeContainer() { 198 Row(){Text('row1')}.justifyContent(FlexAlign.Center) 199 .width(100).height(100) 200 .backgroundColor("#FF3333") 201 .alignRules({ 202 top: {anchor: "__container__", align: VerticalAlign.Top}, 203 left: {anchor: "__container__", align: HorizontalAlign.Start} 204 }) 205 .id("row1") 206 207 Row(){Text('row2')}.justifyContent(FlexAlign.Center) 208 .width(100).height(100) 209 .backgroundColor("#FFCC00") 210 .alignRules({ 211 top: {anchor: "__container__", align: VerticalAlign.Top}, 212 right: {anchor: "__container__", align: HorizontalAlign.End} 213 }) 214 .id("row2") 215 216 Row(){Text('row3')}.justifyContent(FlexAlign.Center) 217 .height(100) 218 .backgroundColor("#FF6633") 219 .alignRules({ 220 top: {anchor: "row1", align: VerticalAlign.Bottom}, 221 left: {anchor: "row1", align: HorizontalAlign.End}, 222 right: {anchor: "row2", align: HorizontalAlign.Start} 223 }) 224 .id("row3") 225 226 Row(){Text('row4')}.justifyContent(FlexAlign.Center) 227 .backgroundColor("#FF9966") 228 .alignRules({ 229 top: {anchor: "row3", align: VerticalAlign.Bottom}, 230 bottom: {anchor: "__container__", align: VerticalAlign.Bottom}, 231 left: {anchor: "__container__", align: HorizontalAlign.Start}, 232 right: {anchor: "row1", align: HorizontalAlign.End} 233 }) 234 .id("row4") 235 236 Row(){Text('row5')}.justifyContent(FlexAlign.Center) 237 .backgroundColor("#FF66FF") 238 .alignRules({ 239 top: {anchor: "row3", align: VerticalAlign.Bottom}, 240 bottom: {anchor: "__container__", align: VerticalAlign.Bottom}, 241 left: {anchor: "row2", align: HorizontalAlign.Start}, 242 right: {anchor: "__container__", align: HorizontalAlign.End} 243 }) 244 .id("row5") 245 } 246 .width(300).height(300) 247 .margin({left: 50}) 248 .border({width:2, color: "#6699FF"}) 249 } 250 .height('100%') 251 } 252} 253``` 254 255 256### 示例2 257 258本示例展示了容器内子组件设置margin的用法。 259 260```ts 261@Entry 262@Component 263struct Index { 264 build() { 265 Row() { 266 RelativeContainer() { 267 Row(){Text('row1')}.justifyContent(FlexAlign.Center) 268 .width(100).height(100) 269 .backgroundColor("#FF3333") 270 .alignRules({ 271 top: {anchor: "__container__", align: VerticalAlign.Top}, 272 left: {anchor: "__container__", align: HorizontalAlign.Start} 273 }) 274 .id("row1") 275 .margin(10) 276 277 Row(){Text('row2')}.justifyContent(FlexAlign.Center) 278 .width(100).height(100) 279 .backgroundColor("#FFCC00") 280 .alignRules({ 281 left: {anchor: "row1", align: HorizontalAlign.End}, 282 top: {anchor: "row1", align: VerticalAlign.Top} 283 }) 284 .id("row2") 285 286 Row(){Text('row3')}.justifyContent(FlexAlign.Center) 287 .width(100).height(100) 288 .backgroundColor("#FF6633") 289 .alignRules({ 290 left: {anchor: "row1", align: HorizontalAlign.Start}, 291 top: {anchor: "row1", align: VerticalAlign.Bottom} 292 }) 293 .id("row3") 294 295 Row(){Text('row4')}.justifyContent(FlexAlign.Center) 296 .width(100).height(100) 297 .backgroundColor("#FF9966") 298 .alignRules({ 299 left: {anchor: "row3", align: HorizontalAlign.End}, 300 top: {anchor: "row2", align: VerticalAlign.Bottom} 301 }) 302 .id("row4") 303 .margin(10) 304 } 305 .width(300).height(300) 306 .margin({left: 50}) 307 .border({width:2, color: "#6699FF"}) 308 } 309 .height('100%') 310 } 311} 312``` 313 314 315### 示例3 316 317本示例展示了容器大小适应内容（声明size为"auto"）的用法。 318 319```ts 320@Entry 321@Component 322struct Index { 323 build() { 324 Row() { 325 RelativeContainer() { 326 Row(){Text('row1')}.justifyContent(FlexAlign.Center) 327 .width(100).height(100) 328 .backgroundColor("#FF3333") 329 .id("row1") 330 331 Row(){Text('row2')}.justifyContent(FlexAlign.Center) 332 .width(100).height(100) 333 .backgroundColor("#FFCC00") 334 .alignRules({ 335 left: {anchor: "row1", align: HorizontalAlign.End}, 336 top: {anchor: "row1", align: VerticalAlign.Top} 337 }) 338 .id("row2") 339 340 Row(){Text('row3')}.justifyContent(FlexAlign.Center) 341 .width(100).height(100) 342 .backgroundColor("#FF6633") 343 .alignRules({ 344 left: {anchor: "row1", align: HorizontalAlign.Start}, 345 top: {anchor: "row1", align: VerticalAlign.Bottom} 346 }) 347 .id("row3") 348 349 Row(){Text('row4')}.justifyContent(FlexAlign.Center) 350 .width(100).height(100) 351 .backgroundColor("#FF9966") 352 .alignRules({ 353 left: {anchor: "row3", align: HorizontalAlign.End}, 354 top: {anchor: "row2", align: VerticalAlign.Bottom} 355 }) 356 .id("row4") 357 } 358 .width("auto").height("auto") 359 .margin({left: 50}) 360 .border({width:2, color: "#6699FF"}) 361 } 362 .height('100%') 363 } 364} 365``` 366 367 368### 示例4 369 370本示例展示了bias的用法。 371 372```ts 373@Entry 374@Component 375struct Index { 376 build() { 377 Row() { 378 RelativeContainer() { 379 Row().width(100).height(100) 380 .backgroundColor("#FF3333") 381 .alignRules({ 382 top: {anchor: "__container__", align: VerticalAlign.Top}, 383 bottom : {anchor : "__container__", align : VerticalAlign.Bottom}, 384 left: {anchor: "__container__", align: HorizontalAlign.Start}, 385 right : {anchor : "__container__", align: HorizontalAlign.End}, 386 bias : {vertical : 0.3} 387 }) 388 .id("row1") 389 } 390 .width(300).height(300) 391 .margin({left: 50}) 392 .border({width:2, color: "#6699FF"}) 393 } 394 .height('100%') 395 } 396} 397``` 398 399 400### 示例5 401 402本示例展示了guideline的声明和以guideline为锚点的用法。 403 404```ts 405@Entry 406@Component 407struct Index { 408 build() { 409 Row() { 410 RelativeContainer() { 411 Row().width(100).height(100) 412 .backgroundColor("#FF3333") 413 .alignRules({ 414 left: {anchor: "guideline1", align: HorizontalAlign.End}, 415 top: {anchor: "guideline2", align: VerticalAlign.Top} 416 }) 417 .id("row1") 418 } 419 .width(300).height(300) 420 .margin({left: 50}) 421 .border({width:2, color: "#6699FF"}) 422 .guideLine([{id:"guideline1", direction: Axis.Vertical, position:{start:50}}, 423 {id:"guideline2", direction: Axis.Horizontal, position:{start:50}}]) 424 } 425 .height('100%') 426 } 427} 428``` 429 430 431### 示例6 432 433本示例展示了barrier的声明和以barrier为锚点的用法。 434 435```ts 436@Entry 437@Component 438struct Index { 439 build() { 440 Row() { 441 RelativeContainer() { 442 Row(){Text('row1')}.justifyContent(FlexAlign.Center) 443 .width(100).height(100) 444 .backgroundColor("#FF3333") 445 .id("row1") 446 447 Row(){Text('row2')}.justifyContent(FlexAlign.Center) 448 .width(100).height(100) 449 .backgroundColor("#FFCC00") 450 .alignRules({ 451 middle: {anchor: "row1", align: HorizontalAlign.End}, 452 top: {anchor: "row1", align: VerticalAlign.Bottom} 453 }) 454 .id("row2") 455 456 Row(){Text('row3')}.justifyContent(FlexAlign.Center) 457 .width(100).height(100) 458 .backgroundColor("#FF6633") 459 .alignRules({ 460 left: {anchor: "barrier1", align: HorizontalAlign.End}, 461 top: {anchor: "row1", align: VerticalAlign.Top} 462 }) 463 .id("row3") 464 465 Row(){Text('row4')}.justifyContent(FlexAlign.Center) 466 .width(50).height(50) 467 .backgroundColor("#FF9966") 468 .alignRules({ 469 left: {anchor: "row1", align: HorizontalAlign.Start}, 470 top: {anchor: "barrier2", align: VerticalAlign.Bottom} 471 }) 472 .id("row4") 473 } 474 .width(300).height(300) 475 .margin({left: 50}) 476 .border({width:2, color: "#6699FF"}) 477 .barrier([{id: "barrier1", direction: BarrierDirection.RIGHT, referencedId:["row1", "row2"]}, 478 {id: "barrier2", direction: BarrierDirection.BOTTOM, referencedId:["row1", "row2"]}]) 479 } 480 .height('100%') 481 } 482} 483``` 484 485 486### 示例7 487 488本示例通过chainMode接口从上至下分别实现了水平方向的SPREAD链，SPREAD_INSIDE链和PACKED链。 489 490```ts 491@Entry 492@Component 493struct Index { 494 build() { 495 Row() { 496 RelativeContainer() { 497 Row(){Text('row1')}.justifyContent(FlexAlign.Center) 498 .width(80).height(80) 499 .backgroundColor("#FF3333") 500 .alignRules({ 501 left: {anchor: "__container__", align: HorizontalAlign.Start}, 502 right: {anchor: "row2", align : HorizontalAlign.Start}, 503 top: {anchor: "__container__", align: VerticalAlign.Top} 504 }) 505 .id("row1") 506 .chainMode(Axis.Horizontal, ChainStyle.SPREAD) 507 508 Row(){Text('row2')}.justifyContent(FlexAlign.Center) 509 .width(80).height(80) 510 .backgroundColor("#FFCC00") 511 .alignRules({ 512 left: {anchor: "row1", align: HorizontalAlign.End}, 513 right: {anchor: "row3", align : HorizontalAlign.Start}, 514 top: {anchor: "row1", align: VerticalAlign.Top} 515 }) 516 .id("row2") 517 518 Row(){Text('row3')}.justifyContent(FlexAlign.Center) 519 .width(80).height(80) 520 .backgroundColor("#FF6633") 521 .alignRules({ 522 left: {anchor: "row2", align: HorizontalAlign.End}, 523 right: {anchor: "__container__", align : HorizontalAlign.End}, 524 top: {anchor: "row1", align: VerticalAlign.Top} 525 }) 526 .id("row3") 527 528 Row(){Text('row4')}.justifyContent(FlexAlign.Center) 529 .width(80).height(80) 530 .backgroundColor("#FF3333") 531 .alignRules({ 532 left: {anchor: "__container__", align: HorizontalAlign.Start}, 533 right: {anchor: "row5", align : HorizontalAlign.Start}, 534 center: {anchor: "__container__", align: VerticalAlign.Center} 535 }) 536 .id("row4") 537 .chainMode(Axis.Horizontal, ChainStyle.SPREAD_INSIDE) 538 539 Row(){Text('row5')}.justifyContent(FlexAlign.Center) 540 .width(80).height(80) 541 .backgroundColor("#FFCC00") 542 .alignRules({ 543 left: {anchor: "row4", align: HorizontalAlign.End}, 544 right: {anchor: "row6", align : HorizontalAlign.Start}, 545 top: {anchor: "row4", align: VerticalAlign.Top} 546 }) 547 .id("row5") 548 549 Row(){Text('row6')}.justifyContent(FlexAlign.Center) 550 .width(80).height(80) 551 .backgroundColor("#FF6633") 552 .alignRules({ 553 left: {anchor: "row5", align: HorizontalAlign.End}, 554 right: {anchor: "__container__", align : HorizontalAlign.End}, 555 top: {anchor: "row4", align: VerticalAlign.Top} 556 }) 557 .id("row6") 558 559 Row(){Text('row7')}.justifyContent(FlexAlign.Center) 560 .width(80).height(80) 561 .backgroundColor("#FF3333") 562 .alignRules({ 563 left: {anchor: "__container__", align: HorizontalAlign.Start}, 564 right: {anchor: "row8", align : HorizontalAlign.Start}, 565 bottom: {anchor: "__container__", align: VerticalAlign.Bottom} 566 }) 567 .id("row7") 568 .chainMode(Axis.Horizontal, ChainStyle.PACKED) 569 570 Row(){Text('row8')}.justifyContent(FlexAlign.Center) 571 .width(80).height(80) 572 .backgroundColor("#FFCC00") 573 .alignRules({ 574 left: {anchor: "row7", align: HorizontalAlign.End}, 575 right: {anchor: "row9", align : HorizontalAlign.Start}, 576 top: {anchor: "row7", align: VerticalAlign.Top} 577 }) 578 .id("row8") 579 580 Row(){Text('row9')}.justifyContent(FlexAlign.Center) 581 .width(80).height(80) 582 .backgroundColor("#FF6633") 583 .alignRules({ 584 left: {anchor: "row8", align: HorizontalAlign.End}, 585 right: {anchor: "__container__", align : HorizontalAlign.End}, 586 top: {anchor: "row7", align: VerticalAlign.Top} 587 }) 588 .id("row9") 589 } 590 .width(300).height(300) 591 .margin({left: 50}) 592 .border({width:2, color: "#6699FF"}) 593 } 594 .height('100%') 595 } 596} 597``` 598 599 600### 示例8 601 602本示例通过chainMode和bias接口实现了水平方向的带bias的PACKED链。 603 604```ts 605@Entry 606@Component 607struct Index { 608 build() { 609 Row() { 610 RelativeContainer() { 611 Row(){Text('row1')}.justifyContent(FlexAlign.Center) 612 .width(80).height(80) 613 .backgroundColor("#FF3333") 614 .alignRules({ 615 left: {anchor: "__container__", align: HorizontalAlign.Start}, 616 right: {anchor: "row2", align : HorizontalAlign.Start}, 617 center: {anchor: "__container__", align: VerticalAlign.Center}, 618 bias : {horizontal : 0} 619 }) 620 .id("row1") 621 .chainMode(Axis.Horizontal, ChainStyle.PACKED) 622 623 Row(){Text('row2')}.justifyContent(FlexAlign.Center) 624 .width(80).height(80) 625 .backgroundColor("#FFCC00") 626 .alignRules({ 627 left: {anchor: "row1", align: HorizontalAlign.End}, 628 right: {anchor: "row3", align : HorizontalAlign.Start}, 629 top: {anchor: "row1", align: VerticalAlign.Top} 630 }) 631 .id("row2") 632 633 Row(){Text('row3')}.justifyContent(FlexAlign.Center) 634 .width(80).height(80) 635 .backgroundColor("#FF6633") 636 .alignRules({ 637 left: {anchor: "row2", align: HorizontalAlign.End}, 638 right: {anchor: "__container__", align : HorizontalAlign.End}, 639 top: {anchor: "row1", align: VerticalAlign.Top} 640 }) 641 .id("row3") 642 } 643 .width(300).height(300) 644 .margin({left: 50}) 645 .border({width:2, color: "#6699FF"}) 646 } 647 .height('100%') 648 } 649} 650``` 651 652 653### 示例9 654 655本示例展示了在RTL模式下以barrier为锚点时使用LocalizedAlignRuleOptions和LocalizedBarrierDirection设置对齐方式的用法。 656 657```ts 658@Entry 659@Component 660struct Index { 661 build() { 662 Row() { 663 RelativeContainer() { 664 Row(){Text('row1')}.justifyContent(FlexAlign.Center) 665 .width(100).height(100) 666 .backgroundColor("#FF3333") 667 .id("row1") 668 669 Row(){Text('row2')}.justifyContent(FlexAlign.Center) 670 .width(100).height(100) 671 .backgroundColor("#FFCC00") 672 .alignRules({ 673 middle: {anchor: "row1", align: HorizontalAlign.End}, 674 top: {anchor: "row1", align: VerticalAlign.Bottom} 675 }) 676 .id("row2") 677 678 Row(){Text('row3')}.justifyContent(FlexAlign.Center) 679 .width(100).height(100) 680 .backgroundColor("#FF6633") 681 .alignRules({ 682 start: {anchor: "barrier1", align: HorizontalAlign.End}, 683 top: {anchor: "row1", align: VerticalAlign.Top} 684 }) 685 .id("row3") 686 687 Row(){Text('row4')}.justifyContent(FlexAlign.Center) 688 .width(50).height(50) 689 .backgroundColor("#FF9966") 690 .alignRules({ 691 start: {anchor: "row1", align: HorizontalAlign.Start}, 692 top: {anchor: "barrier2", align: VerticalAlign.Bottom} 693 }) 694 .id("row4") 695 } 696 .direction(Direction.Rtl) 697 .width(300).height(300) 698 .margin({left: 50}) 699 .border({width:2, color: "#6699FF"}) 700 .barrier([{id: "barrier1", localizedDirection: LocalizedBarrierDirection.END, referencedId:["row1", "row2"]}, 701 {id: "barrier2", localizedDirection: LocalizedBarrierDirection.BOTTOM, referencedId:["row1", "row2"]}]) 702 } 703 .height('100%') 704 } 705} 706``` 707
