1# RelativeContainer 2 3相对布局组件，用于复杂场景中元素对齐的布局。 4 5> **说明：** 6> 7> * 该组件从API version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> * 从API Version 11开始，在RelativeContainer组件中，[width](ts-universal-attributes-size.md#width)、[height](ts-universal-attributes-size.md#height)设置"auto"表示自适应子组件。当width设置"auto"时，如果水平方向上子组件以容器作为锚点，则"auto"不生效，垂直方向上同理。 9> * 相对布局容器内的子组件的[margin](ts-universal-attributes-size.md#margin)含义不同于通用属性的margin，其含义为到该方向上的锚点的距离。若该方向上没有锚点，则该方向的margin不生效。 10 11## 子组件 12 13支持多个子组件。 14 15 16## 接口 17 18RelativeContainer() 19 20**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 21 22**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 23 24**系统能力：** SystemCapability.ArkUI.ArkUI.Full 25 26## 属性 27 28除支持[通用属性](ts-component-general-attributes.md)外，还支持如下属性： 29 30### guideLine<sup>12+</sup> 31 32guideLine(value: Array<GuideLineStyle>) 33 34设置RelativeContainer容器内的辅助线，Array中每个项目即为一条guideline。 35 36**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 37 38**系统能力：** SystemCapability.ArkUI.ArkUI.Full 39 40**参数：** 41 42| 参数名 | 类型 | 必填 | 说明 | 43| ------ | ------------------------------------------ | ---- | --------------------------------- | 44| value | Array<[GuideLineStyle](#guidelinestyle12对象说明)> | 是 | RelativeContainer容器内的辅助线。 | 45 46### barrier<sup>12+</sup> 47 48barrier(value: Array<BarrierStyle>) 49 50设置RelativeContainer容器内的屏障，Array中每个项目即为一条barrier。 51 52**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 53 54**系统能力：** SystemCapability.ArkUI.ArkUI.Full 55 56**参数：** 57 58| 参数名 | 类型 | 必填 | 说明 | 59| ------ | -------------------------------------- | ---- | ------------------------------- | 60| value | Array<[BarrierStyle](#barrierstyle12对象说明)> | 是 | RelativeContainer容器内的屏障。 | 61 62### barrier<sup>12+</sup> 63 64barrier(barrierStyle: Array<LocalizedBarrierStyle>) 65 66设置RelativeContainer容器内的屏障，Array中每个项目即为一条barrier。 67 68**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 69 70**系统能力：** SystemCapability.ArkUI.ArkUI.Full 71 72**参数：** 73 74| 参数名 | 类型 | 必填 | 说明 | 75| ------ | -------------------------------------- | ---- | ------------------------------ | 76| barrierStyle | Array\<[LocalizedBarrierStyle](#localizedbarrierstyle12对象说明)\> | 是 | RelativeContainer容器内的屏障。 | 77 78## GuideLineStyle<sup>12+</sup>对象说明 79 80guideLine参数，用于定义一条guideline的id、方向和位置。 81 82**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 83 84**系统能力：** SystemCapability.ArkUI.ArkUI.Full 85 86| 名称 | 类型 | 必填 | 说明 | 87| ----- | ------- | ---- | --------------------- | 88| id | string | 是 | guideline的id，必须是唯一的并且不可与容器内组件重名。 | 89| direction | [Axis](ts-appendix-enums.md#axis) | 是 | 指定guideline的方向。</br> 垂直方向的guideline仅能作为组件水平方向的锚点，作为垂直方向的锚点时值为0；水平方向的guideline仅能作为组件垂直方向的锚点，作为水平方向的锚点时值为0。</br>默认值：Axis.Vertical | 90| position | [GuideLinePosition](#guidelineposition12对象说明) | 是 | 指定guideline的位置。</br>当未声明或声明异常值（如undefined）时，guideline的位置默认为start: 0。start和 end两种声明方式选择一种即可。若同时声明，仅start生效。若容器在某个方向的size被声明为"auto"，则该方向上guideline的位置只能使用start方式声明（不允许使用百分比）。<br />默认值：<br />{<br />start: 0<br />} | 91 92## GuideLinePosition<sup>12+</sup>对象说明 93 94guideLine位置参数，用于定义guideline的位置。 95 96**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 97 98**系统能力：** SystemCapability.ArkUI.ArkUI.Full 99 100| 名称 | 类型 | 必填 | 说明 | 101| ----- | ------- | ---- | --------------------- | 102| start | [Dimension](ts-types.md#dimension10) | 否 | guideline距离容器左侧或者顶部的距离。 | 103| end | [Dimension](ts-types.md#dimension10) | 否 | guideline距离容器右侧或者底部的距离。 | 104 105## BarrierStyle<sup>12+</sup>对象说明 106 107barrier参数，用于定义一条barrier的id、方向和生成时所依赖的组件。 108 109**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 110 111**系统能力：** SystemCapability.ArkUI.ArkUI.Full 112 113| 名称 | 类型 | 必填 | 说明 | 114| ----- | ------- | ---- | --------------------- | 115| id | string | 是 | barrier的id，必须是唯一的并且不可与容器内组件重名。 | 116| direction | [BarrierDirection](ts-container-relativecontainer.md#barrierdirection12枚举说明) | 是 | 指定barrier的方向。</br>垂直方向（TOP，BOTTOM）的barrier仅能作为组件的水平方向锚点，用作垂直方向锚点时值为0；水平方向（LEFT，RIGHT）的barrier仅能作为组件的垂直方向锚点，用作水平方向锚点时值为0。<br />默认值：BarrierDirection.LEFT | 117| referencedId | Array\<string> | 是 | 指定生成barrier所依赖的组件。 | 118 119## BarrierDirection<sup>12+</sup>枚举说明 120 121定义屏障线的方向。 122 123**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 124 125**系统能力：** SystemCapability.ArkUI.ArkUI.Full 126 127| 名称 | 说明 | 128| ------ | ----------------------------- | 129| LEFT | 屏障在其所有[referencedId](ts-container-relativecontainer.md#barrierstyle12对象说明)的最左侧。 | 130| RIGHT | 屏障在其所有[referencedId](ts-container-relativecontainer.md#barrierstyle12对象说明)的最右侧。 | 131| TOP | 屏障在其所有[referencedId](ts-container-relativecontainer.md#barrierstyle12对象说明)的最上方。 | 132| BOTTOM | 屏障在其所有[referencedId](ts-container-relativecontainer.md#barrierstyle12对象说明)的最下方。 | 133 134## LocalizedBarrierStyle<sup>12+</sup>对象说明 135 136barrier参数，用于定义一条barrier的id、方向和生成时所依赖的组件。 137 138**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 139 140**系统能力：** SystemCapability.ArkUI.ArkUI.Full 141 142| 名称 | 类型 | 必填 | 说明 | 143| ----- | ------- | ---- | --------------------- | 144| id | string | 是 | barrier的id，必须是唯一的并且不可与容器内组件重名。 | 145| localizedDirection | [LocalizedBarrierDirection](#localizedbarrierdirection12枚举说明) | 是 | 指定barrier的方向。</br> 垂直方向（TOP，BOTTOM）的barrier仅能作为组件的水平方向锚点，作为垂直方向锚点时值为0。水平方向（START，END）的barrier仅能作为组件的垂直方向锚点，作为水平方向锚点时值为0。 | 146| referencedId | Array\<string\> | 是 | 指定生成barrier所依赖的组件。 | 147 148## LocalizedBarrierDirection<sup>12+</sup>枚举说明 149 150定义支持镜像模式的屏障线的方向。 151 152**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 153 154**系统能力：** SystemCapability.ArkUI.ArkUI.Full 155 156| 名称 | 值 | 说明 | 157| ------ | -- | ----------------------------- | 158| START | 0 |屏障在其所有[referencedId](#localizedbarrierstyle12对象说明)的最左/右侧，LTR模式时为最左侧，RTL模式时为最右侧。 | 159| END | 1 | 屏障在其所有[referencedId](#localizedbarrierstyle12对象说明)的最左/右侧, LTR模式时为最右侧，RTL模式时为最左侧。 | 160| TOP | 2 | 屏障在其所有[referencedId](#localizedbarrierstyle12对象说明)的最上方。 | 161| BOTTOM | 3 | 屏障在其所有[referencedId](#localizedbarrierstyle12对象说明)的最下方。 | 162 163## 示例 164 165### 示例1（以容器和容器内组件作为锚点进行布局） 166 167本示例通过alignRules接口实现了以容器和容器内组件作为锚点进行布局的功能。 168 169```ts 170@Entry 171@Component 172struct Index { 173 build() { 174 Row() { 175 RelativeContainer() { 176 Row() { 177 Text('row1') 178 } 179 .justifyContent(FlexAlign.Center) 180 .width(100) 181 .height(100) 182 .backgroundColor('#a3cf62') 183 .alignRules({ 184 top: { anchor: "__container__", align: VerticalAlign.Top }, 185 left: { anchor: "__container__", align: HorizontalAlign.Start } 186 }) 187 .id("row1") 188 189 Row() { 190 Text('row2') 191 } 192 .justifyContent(FlexAlign.Center) 193 .width(100) 194 .height(100) 195 .backgroundColor('#00ae9d') 196 .alignRules({ 197 top: { anchor: "__container__", align: VerticalAlign.Top }, 198 right: { anchor: "__container__", align: HorizontalAlign.End } 199 }) 200 .id("row2") 201 202 Row() { 203 Text('row3') 204 } 205 .justifyContent(FlexAlign.Center) 206 .height(100) 207 .backgroundColor('#0a59f7') 208 .alignRules({ 209 top: { anchor: "row1", align: VerticalAlign.Bottom }, 210 left: { anchor: "row1", align: HorizontalAlign.End }, 211 right: { anchor: "row2", align: HorizontalAlign.Start } 212 }) 213 .id("row3") 214 215 Row() { 216 Text('row4') 217 }.justifyContent(FlexAlign.Center) 218 .backgroundColor('#2ca9e0') 219 .alignRules({ 220 top: { anchor: "row3", align: VerticalAlign.Bottom }, 221 bottom: { anchor: "__container__", align: VerticalAlign.Bottom }, 222 left: { anchor: "__container__", align: HorizontalAlign.Start }, 223 right: { anchor: "row1", align: HorizontalAlign.End } 224 }) 225 .id("row4") 226 227 Row() { 228 Text('row5') 229 }.justifyContent(FlexAlign.Center) 230 .backgroundColor('#30c9f7') 231 .alignRules({ 232 top: { anchor: "row3", align: VerticalAlign.Bottom }, 233 bottom: { anchor: "__container__", align: VerticalAlign.Bottom }, 234 left: { anchor: "row2", align: HorizontalAlign.Start }, 235 right: { anchor: "__container__", align: HorizontalAlign.End } 236 }) 237 .id("row5") 238 } 239 .width(300).height(300) 240 .margin({ left: 50 }) 241 .border({ width: 2, color: "#6699FF" }) 242 } 243 .height('100%') 244 } 245} 246``` 247 248 249### 示例2（子组件设置外边距） 250 251本示例展示了容器内子组件设置外边距的用法。 252 253```ts 254@Entry 255@Component 256struct Index { 257 build() { 258 Row() { 259 RelativeContainer() { 260 Row() { 261 Text('row1') 262 } 263 .justifyContent(FlexAlign.Center) 264 .width(100) 265 .height(100) 266 .backgroundColor('#a3cf62') 267 .alignRules({ 268 top: { anchor: "__container__", align: VerticalAlign.Top }, 269 left: { anchor: "__container__", align: HorizontalAlign.Start } 270 }) 271 .id("row1") 272 .margin(10) 273 274 Row() { 275 Text('row2') 276 } 277 .justifyContent(FlexAlign.Center) 278 .width(100) 279 .height(100) 280 .backgroundColor('#00ae9d') 281 .alignRules({ 282 left: { anchor: "row1", align: HorizontalAlign.End }, 283 top: { anchor: "row1", align: VerticalAlign.Top } 284 }) 285 .id("row2") 286 287 Row() { 288 Text('row3') 289 } 290 .justifyContent(FlexAlign.Center) 291 .width(100) 292 .height(100) 293 .backgroundColor('#0a59f7') 294 .alignRules({ 295 left: { anchor: "row1", align: HorizontalAlign.Start }, 296 top: { anchor: "row1", align: VerticalAlign.Bottom } 297 }) 298 .id("row3") 299 300 Row() { 301 Text('row4') 302 } 303 .justifyContent(FlexAlign.Center) 304 .width(100) 305 .height(100) 306 .backgroundColor('#2ca9e0') 307 .alignRules({ 308 left: { anchor: "row3", align: HorizontalAlign.End }, 309 top: { anchor: "row2", align: VerticalAlign.Bottom } 310 }) 311 .id("row4") 312 .margin(10) 313 } 314 .width(300).height(300) 315 .margin({ left: 50 }) 316 .border({ width: 2, color: "#6699FF" }) 317 } 318 .height('100%') 319 } 320} 321``` 322 323 324### 示例3（设置容器大小自适应内容） 325 326本示例展示了容器大小适应内容（声明width或height为"auto"）的用法。 327 328```ts 329@Entry 330@Component 331struct Index { 332 build() { 333 Row() { 334 RelativeContainer() { 335 Row() { 336 Text('row1') 337 } 338 .justifyContent(FlexAlign.Center) 339 .width(100) 340 .height(100) 341 .backgroundColor('#a3cf62') 342 .id("row1") 343 344 Row() { 345 Text('row2') 346 } 347 .justifyContent(FlexAlign.Center) 348 .width(100) 349 .height(100) 350 .backgroundColor('#00ae9d') 351 .alignRules({ 352 left: { anchor: "row1", align: HorizontalAlign.End }, 353 top: { anchor: "row1", align: VerticalAlign.Top } 354 }) 355 .id("row2") 356 357 Row() { 358 Text('row3') 359 } 360 .justifyContent(FlexAlign.Center) 361 .width(100) 362 .height(100) 363 .backgroundColor('#0a59f7') 364 .alignRules({ 365 left: { anchor: "row1", align: HorizontalAlign.Start }, 366 top: { anchor: "row1", align: VerticalAlign.Bottom } 367 }) 368 .id("row3") 369 370 Row() { 371 Text('row4') 372 } 373 .justifyContent(FlexAlign.Center) 374 .width(100) 375 .height(100) 376 .backgroundColor('#2ca9e0') 377 .alignRules({ 378 left: { anchor: "row3", align: HorizontalAlign.End }, 379 top: { anchor: "row2", align: VerticalAlign.Bottom } 380 }) 381 .id("row4") 382 } 383 .width("auto").height("auto") 384 .margin({ left: 50 }) 385 .border({ width: 2, color: "#6699FF" }) 386 } 387 .height('100%') 388 } 389} 390``` 391 392 393### 示例4（设置偏移） 394 395本示例通过[bias](ts-universal-attributes-location.md#bias对象说明)实现了子组件的位置在竖直方向的两个锚点间偏移的效果。 396 397```ts 398@Entry 399@Component 400struct Index { 401 build() { 402 Row() { 403 RelativeContainer() { 404 Row() 405 .width(100) 406 .height(100) 407 .backgroundColor('#a3cf62') 408 .alignRules({ 409 top: { anchor: "__container__", align: VerticalAlign.Top }, 410 bottom: { anchor: "__container__", align: VerticalAlign.Bottom }, 411 left: { anchor: "__container__", align: HorizontalAlign.Start }, 412 right: { anchor: "__container__", align: HorizontalAlign.End }, 413 bias: { vertical: 0.3 } 414 }) 415 .id("row1") 416 } 417 .width(300).height(300) 418 .margin({ left: 50 }) 419 .border({ width: 2, color: "#6699FF" }) 420 } 421 .height('100%') 422 } 423} 424``` 425 426 427### 示例5（设置辅助线） 428 429本示例展示了相对布局组件通过[guideLine](#guideline12)接口设置辅助线，子组件以辅助线为锚点的功能。 430 431```ts 432@Entry 433@Component 434struct Index { 435 build() { 436 Row() { 437 RelativeContainer() { 438 Row() 439 .width(100) 440 .height(100) 441 .backgroundColor('#a3cf62') 442 .alignRules({ 443 left: { anchor: "guideline1", align: HorizontalAlign.End }, 444 top: { anchor: "guideline2", align: VerticalAlign.Top } 445 }) 446 .id("row1") 447 } 448 .width(300) 449 .height(300) 450 .margin({ left: 50 }) 451 .border({ width: 2, color: "#6699FF" }) 452 .guideLine([{ id: "guideline1", direction: Axis.Vertical, position: { start: 50 } }, 453 { id: "guideline2", direction: Axis.Horizontal, position: { start: 50 } }]) 454 } 455 .height('100%') 456 } 457} 458``` 459 460 461### 示例6（设置屏障） 462 463本示例展示了相对布局组件通过[barrier](#barrier12)接口设置屏障，子组件以屏障为锚点的用法。 464 465```ts 466@Entry 467@Component 468struct Index { 469 build() { 470 Row() { 471 RelativeContainer() { 472 Row() { 473 Text('row1') 474 } 475 .justifyContent(FlexAlign.Center) 476 .width(100) 477 .height(100) 478 .backgroundColor('#a3cf62') 479 .id("row1") 480 481 Row() { 482 Text('row2') 483 } 484 .justifyContent(FlexAlign.Center) 485 .width(100) 486 .height(100) 487 .backgroundColor('#00ae9d') 488 .alignRules({ 489 middle: { anchor: "row1", align: HorizontalAlign.End }, 490 top: { anchor: "row1", align: VerticalAlign.Bottom } 491 }) 492 .id("row2") 493 494 Row() { 495 Text('row3') 496 } 497 .justifyContent(FlexAlign.Center) 498 .width(100) 499 .height(100) 500 .backgroundColor('#0a59f7') 501 .alignRules({ 502 left: { anchor: "barrier1", align: HorizontalAlign.End }, 503 top: { anchor: "row1", align: VerticalAlign.Top } 504 }) 505 .id("row3") 506 507 Row() { 508 Text('row4') 509 } 510 .justifyContent(FlexAlign.Center) 511 .width(50) 512 .height(50) 513 .backgroundColor('#2ca9e0') 514 .alignRules({ 515 left: { anchor: "row1", align: HorizontalAlign.Start }, 516 top: { anchor: "barrier2", align: VerticalAlign.Bottom } 517 }) 518 .id("row4") 519 } 520 .width(300) 521 .height(300) 522 .margin({ left: 50 }) 523 .border({ width: 2, color: "#6699FF" }) 524 .barrier([{ id: "barrier1", direction: BarrierDirection.RIGHT, referencedId: ["row1", "row2"] }, 525 { id: "barrier2", direction: BarrierDirection.BOTTOM, referencedId: ["row1", "row2"] }]) 526 } 527 .height('100%') 528 } 529} 530``` 531 532 533### 示例7（设置链） 534 535本示例通过[chainMode](ts-universal-attributes-location.md#chainmode12)接口从上至下分别实现了水平方向的[SPREAD链，SPREAD_INSIDE链和PACKED链](ts-universal-attributes-location.md#chainstyle12)。 536 537```ts 538@Entry 539@Component 540struct Index { 541 build() { 542 Row() { 543 RelativeContainer() { 544 Row() { 545 Text('row1') 546 } 547 .justifyContent(FlexAlign.Center) 548 .width(80) 549 .height(80) 550 .backgroundColor('#a3cf62') 551 .alignRules({ 552 left: { anchor: "__container__", align: HorizontalAlign.Start }, 553 right: { anchor: "row2", align: HorizontalAlign.Start }, 554 top: { anchor: "__container__", align: VerticalAlign.Top } 555 }) 556 .id("row1") 557 .chainMode(Axis.Horizontal, ChainStyle.SPREAD) 558 559 Row() { 560 Text('row2') 561 } 562 .justifyContent(FlexAlign.Center) 563 .width(80) 564 .height(80) 565 .backgroundColor('#00ae9d') 566 .alignRules({ 567 left: { anchor: "row1", align: HorizontalAlign.End }, 568 right: { anchor: "row3", align: HorizontalAlign.Start }, 569 top: { anchor: "row1", align: VerticalAlign.Top } 570 }) 571 .id("row2") 572 573 Row() { 574 Text('row3') 575 } 576 .justifyContent(FlexAlign.Center) 577 .width(80) 578 .height(80) 579 .backgroundColor('#0a59f7') 580 .alignRules({ 581 left: { anchor: "row2", align: HorizontalAlign.End }, 582 right: { anchor: "__container__", align: HorizontalAlign.End }, 583 top: { anchor: "row1", align: VerticalAlign.Top } 584 }) 585 .id("row3") 586 587 Row() { 588 Text('row4') 589 } 590 .justifyContent(FlexAlign.Center) 591 .width(80) 592 .height(80) 593 .backgroundColor('#a3cf62') 594 .alignRules({ 595 left: { anchor: "__container__", align: HorizontalAlign.Start }, 596 right: { anchor: "row5", align: HorizontalAlign.Start }, 597 center: { anchor: "__container__", align: VerticalAlign.Center } 598 }) 599 .id("row4") 600 .chainMode(Axis.Horizontal, ChainStyle.SPREAD_INSIDE) 601 602 Row() { 603 Text('row5') 604 } 605 .justifyContent(FlexAlign.Center) 606 .width(80) 607 .height(80) 608 .backgroundColor('#00ae9d') 609 .alignRules({ 610 left: { anchor: "row4", align: HorizontalAlign.End }, 611 right: { anchor: "row6", align: HorizontalAlign.Start }, 612 top: { anchor: "row4", align: VerticalAlign.Top } 613 }) 614 .id("row5") 615 616 Row() { 617 Text('row6') 618 } 619 .justifyContent(FlexAlign.Center) 620 .width(80) 621 .height(80) 622 .backgroundColor('#0a59f7') 623 .alignRules({ 624 left: { anchor: "row5", align: HorizontalAlign.End }, 625 right: { anchor: "__container__", align: HorizontalAlign.End }, 626 top: { anchor: "row4", align: VerticalAlign.Top } 627 }) 628 .id("row6") 629 630 Row() { 631 Text('row7') 632 } 633 .justifyContent(FlexAlign.Center) 634 .width(80) 635 .height(80) 636 .backgroundColor('#a3cf62') 637 .alignRules({ 638 left: { anchor: "__container__", align: HorizontalAlign.Start }, 639 right: { anchor: "row8", align: HorizontalAlign.Start }, 640 bottom: { anchor: "__container__", align: VerticalAlign.Bottom } 641 }) 642 .id("row7") 643 .chainMode(Axis.Horizontal, ChainStyle.PACKED) 644 645 Row() { 646 Text('row8') 647 } 648 .justifyContent(FlexAlign.Center) 649 .width(80) 650 .height(80) 651 .backgroundColor('#00ae9d') 652 .alignRules({ 653 left: { anchor: "row7", align: HorizontalAlign.End }, 654 right: { anchor: "row9", align: HorizontalAlign.Start }, 655 top: { anchor: "row7", align: VerticalAlign.Top } 656 }) 657 .id("row8") 658 659 Row() { 660 Text('row9') 661 } 662 .justifyContent(FlexAlign.Center) 663 .width(80) 664 .height(80) 665 .backgroundColor('#0a59f7') 666 .alignRules({ 667 left: { anchor: "row8", align: HorizontalAlign.End }, 668 right: { anchor: "__container__", align: HorizontalAlign.End }, 669 top: { anchor: "row7", align: VerticalAlign.Top } 670 }) 671 .id("row9") 672 } 673 .width(300).height(300) 674 .margin({ left: 50 }) 675 .border({ width: 2, color: "#6699FF" }) 676 } 677 .height('100%') 678 } 679} 680``` 681 682 683### 示例8（链中设置偏移） 684 685本示例通过[chainMode](ts-universal-attributes-location.md#chainmode12)和[bias](ts-universal-attributes-location.md#bias对象说明)接口实现了水平方向的带偏移的[PACKED链](ts-universal-attributes-location.md#chainstyle12)。 686 687```ts 688@Entry 689@Component 690struct Index { 691 build() { 692 Row() { 693 RelativeContainer() { 694 Row() { 695 Text('row1') 696 } 697 .justifyContent(FlexAlign.Center) 698 .width(80) 699 .height(80) 700 .backgroundColor('#a3cf62') 701 .alignRules({ 702 left: { anchor: "__container__", align: HorizontalAlign.Start }, 703 right: { anchor: "row2", align: HorizontalAlign.Start }, 704 center: { anchor: "__container__", align: VerticalAlign.Center }, 705 bias: { horizontal: 0 } 706 }) 707 .id("row1") 708 .chainMode(Axis.Horizontal, ChainStyle.PACKED) 709 710 Row() { 711 Text('row2') 712 } 713 .justifyContent(FlexAlign.Center) 714 .width(80) 715 .height(80) 716 .backgroundColor('#00ae9d') 717 .alignRules({ 718 left: { anchor: "row1", align: HorizontalAlign.End }, 719 right: { anchor: "row3", align: HorizontalAlign.Start }, 720 top: { anchor: "row1", align: VerticalAlign.Top } 721 }) 722 .id("row2") 723 724 Row() { 725 Text('row3') 726 } 727 .justifyContent(FlexAlign.Center) 728 .width(80) 729 .height(80) 730 .backgroundColor('#0a59f7') 731 .alignRules({ 732 left: { anchor: "row2", align: HorizontalAlign.End }, 733 right: { anchor: "__container__", align: HorizontalAlign.End }, 734 top: { anchor: "row1", align: VerticalAlign.Top } 735 }) 736 .id("row3") 737 } 738 .width(300).height(300) 739 .margin({ left: 50 }) 740 .border({ width: 2, color: "#6699FF" }) 741 } 742 .height('100%') 743 } 744} 745``` 746 747 748### 示例9（设置镜像模式） 749 750本示例展示了在镜像模式（direction声明Direction.Rtl）下以屏障为锚点时使用[LocalizedAlignRuleOptions](ts-universal-attributes-location.md#localizedalignruleoptions12对象说明)和[LocalizedBarrierDirection](#localizedbarrierdirection12枚举说明)设置对齐方式的用法。 751 752```ts 753@Entry 754@Component 755struct Index { 756 build() { 757 Row() { 758 RelativeContainer() { 759 Row() { 760 Text('row1') 761 } 762 .justifyContent(FlexAlign.Center) 763 .width(100) 764 .height(100) 765 .backgroundColor('#a3cf62') 766 .id("row1") 767 768 Row() { 769 Text('row2') 770 } 771 .justifyContent(FlexAlign.Center) 772 .width(100) 773 .height(100) 774 .backgroundColor('#00ae9d') 775 .alignRules({ 776 middle: { anchor: "row1", align: HorizontalAlign.End }, 777 top: { anchor: "row1", align: VerticalAlign.Bottom } 778 }) 779 .id("row2") 780 781 Row() { 782 Text('row3') 783 } 784 .justifyContent(FlexAlign.Center) 785 .width(100) 786 .height(100) 787 .backgroundColor('#0a59f7') 788 .alignRules({ 789 start: { anchor: "barrier1", align: HorizontalAlign.End }, 790 top: { anchor: "row1", align: VerticalAlign.Top } 791 }) 792 .id("row3") 793 794 Row() { 795 Text('row4') 796 } 797 .justifyContent(FlexAlign.Center) 798 .width(50) 799 .height(50) 800 .backgroundColor('#2ca9e0') 801 .alignRules({ 802 start: { anchor: "row1", align: HorizontalAlign.Start }, 803 top: { anchor: "barrier2", align: VerticalAlign.Bottom } 804 }) 805 .id("row4") 806 } 807 .direction(Direction.Rtl) 808 .width(300) 809 .height(300) 810 .margin({ left: 50 }) 811 .border({ width: 2, color: "#6699FF" }) 812 .barrier([{ id: "barrier1", localizedDirection: LocalizedBarrierDirection.END, referencedId: ["row1", "row2"] }, 813 { id: "barrier2", localizedDirection: LocalizedBarrierDirection.BOTTOM, referencedId: ["row1", "row2"] }]) 814 } 815 .height('100%') 816 } 817} 818``` 819 820 821### 示例10（设置链中节点权重） 822 823本示例展示了链中节点使用[chainWeight](ts-universal-attributes-location.md#chainweight14)设置尺寸权重的用法。 824 825```ts 826@Entry 827@Component 828struct Index { 829 build() { 830 Row() { 831 RelativeContainer() { 832 Row() { 833 Text('row1') 834 } 835 .justifyContent(FlexAlign.Center) 836 .width(80) 837 .height(80) 838 .backgroundColor('#a3cf62') 839 .alignRules({ 840 left: { anchor: "__container__", align: HorizontalAlign.Start }, 841 right: { anchor: "row2", align: HorizontalAlign.Start }, 842 center: { anchor: "__container__", align: VerticalAlign.Center }, 843 }) 844 .id("row1") 845 .chainMode(Axis.Horizontal, ChainStyle.PACKED) 846 847 Row() { 848 Text('row2') 849 } 850 .justifyContent(FlexAlign.Center) 851 .width(80) 852 .height(80) 853 .backgroundColor('#00ae9d') 854 .alignRules({ 855 left: { anchor: "row1", align: HorizontalAlign.End }, 856 right: { anchor: "row3", align: HorizontalAlign.Start }, 857 top: { anchor: "row1", align: VerticalAlign.Top } 858 }) 859 .id("row2") 860 .chainWeight({horizontal:1}) 861 862 Row() { 863 Text('row3') 864 } 865 .justifyContent(FlexAlign.Center) 866 .width(80) 867 .height(80) 868 .backgroundColor('#0a59f7') 869 .alignRules({ 870 left: { anchor: "row2", align: HorizontalAlign.End }, 871 right: { anchor: "__container__", align: HorizontalAlign.End }, 872 top: { anchor: "row1", align: VerticalAlign.Top } 873 }) 874 .id("row3") 875 .chainWeight({horizontal:2}) 876 } 877 .width(300).height(300) 878 .margin({ left: 50 }) 879 .border({ width: 2, color: "#6699FF" }) 880 } 881 .height('100%') 882 } 883} 884``` 885
