1# RelativeContainer 2 3The **RelativeContainer** component is a container component used for relative layout of elements 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## Rules 10 11 * Components in the container are aligned horizontally or vertically. 12 * 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. 13 * 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. 14 * A child component can have the container, a guideline, a barrier, or another child component as the anchor. 15 * If a child component laid out in the container does not have an ID set, it is still visible, but cannot be used as an anchor by other child components. The container automatically sets an ID for such a component, using rules that cannot be detected by applications. The container ID is fixed at **__container__**. The ID of a guideline and barrier cannot be the same as any of the components. If they are the same, the IDs take effect as follows (in descending order of priority): component, guideline, barrier. 16 * A child component can have anchors for three positions in one direction (left, middle, and right in the horizontal direction and top, center, and bottom in the vertical direction). These anchors can be positions in the container or other child components in the same direction: **horizontalAlign.Start**, **HorizontalAlign.Center**, and **HorizontalAlign.End** in the horizontal direction and **verticalAlign.Top**, **VerticalAlign.Center**, and **VerticalAlign.Bottom** in the vertical direction. If more than two anchors are set in the same direction, **Start** and **Center** in the horizontal direction are preferred, and **Top** and **Center** in the vertical direction are preferred. For example, when the left, middle, and right positions of a component in the horizontal direction use **HorizontalAlign.Start**, **HorizontalAlign.Center**, and **HorizontalAlign.End** of the container as the anchors, respectively, then: if the widths of the component and its container cannot meet these rules at the same time, the rules for Start and Center are followed. 17 * If both the child component size and relative layout rules are set:<br>In API versions earlier than 11, the child component size is bound by the relative layout rules.<br> Since API version 11, the child component size set from frontend pages is used. 18 * If offset is required after the alignment, it can be set through [bias](ts-universal-attributes-location.md#bias) (available since API version 11) or **offset** (not recommended). 19 * Since API version 11, if **RelativeContainer** has its **width** and **height** attributes set to **auto**, it adapts its width and height to its child components. 20 * If the container's child component uses the container as an anchor in the horizontal direction, the **auto** value of **width** has no effect. The same rule applies to the vertical direction. 21 * For a child component of the container, **margin** has a different meaning from the universal attribute **margin**. It indicates the distance to the anchor in the respective direction. If there is no anchor in the respective direction, **margin** in that direction does not take effect. 22 * If the position of the guideline is not declared or the declared value (for example, **undefined**) is invalid, the position of **start: 0** is used. Either **start** or **end** can be declared for the position. If both of them are declared, only **start** takes effect. 23 * If the size of the container in a direction is declared as **auto**, the position of guidelines in the direction must be declared in **start** mode (the value cannot be in percentage). 24 * A guideline or barrier in the vertical direction can only be used as the anchor of the component in the horizontal direction, and the value is **0** when it is used as the anchor in the vertical direction. A guideline or barrier in the horizontal direction can only be used as the anchor of the component in the vertical direction, and the value is **0** when it is used as the anchor in the horizontal direction. 25 * The formation of a chain depends on the dependency between components. For example, the minimum horizontal chain formed by component A and component B requires the following dependency: Anchor 1 <- Component A <--> Component B -> Anchor 2. That is, A has a left anchor, B has a right anchor, the right anchor of A is **HorizontalAlign.Start** of B, and the left anchor of B is **HorizontalAlign.End** of A. 26 * The direction and format of the chain are declared in the [chainMode](ts-universal-attributes-location.md#chainmode12) API of the chain head component. The **bias** attributes of all elements in the chain are ineffective, and the bias of the chain head element takes effect as the bias of the entire chain. 27 * If the size of all elements in a chain exceeds the anchor constraint of the chain, the excess part is evenly distributed on both sides of the chain. In the [Packed](ts-appendix-enums.md#chainstyle12) chain, the distribution of the excess part can be set through [bias](ts-universal-attributes-location.md#bias). 28 * Exceptions 29 * If the size of a child component cannot be determined based on the rules and its own **size** attribute, the child component is not drawn. 30 * When a mutual or circular dependency occurs, none of the child components in the container are drawn. 31 * 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. 32 33## Child Components 34 35Multiple child components are supported. 36 37 38## APIs 39 40RelativeContainer() 41 42**Widget capability**: This API can be used in ArkTS widgets since API version 9. 43 44**Atomic service API**: This API can be used in atomic services since API version 11. 45 46## Attributes 47 48In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 49 50### guideLine<sup>12+</sup> 51 52guideLine(value: Array<GuideLineStyle>) 53 54Sets the guidelines in the **RelativeContainer** component. The value is an array, each element of which is a guideline. 55 56**System capability**: SystemCapability.ArkUI.ArkUI.Full 57 58**Parameters** 59 60| Name| Type | Mandatory| Description | 61| ------ | ------------------------------------------ | ---- | --------------------------------- | 62| value | Array<[GuideLineStyle](#guidelinestyle12)> | Yes | Guidelines in the **RelativeContainer** component.| 63 64### barrier<sup>12+</sup> 65 66barrier(value: Array<BarrierStyle>) 67 68Sets the barriers in the **RelativeContainer** component. The value is an array, each element of which is a barrier. 69 70**System capability**: SystemCapability.ArkUI.ArkUI.Full 71 72**Parameters** 73 74| Name| Type | Mandatory| Description | 75| ------ | -------------------------------------- | ---- | ------------------------------- | 76| value | Array<[BarrierStyle](#barrierstyle12)> | Yes | Barriers in the **RelativeContainer** component.| 77 78### barrier<sup>12+</sup> 79 80barrier(barrierStyle: Array<LocalizedBarrierStyle>) 81 82Sets the barriers in the **RelativeContainer** component. The value is an array, each element of which is a barrier. 83 84**System capability**: SystemCapability.ArkUI.ArkUI.Full 85 86**Parameters** 87 88| Name| Type | Mandatory| Description | 89| ------ | -------------------------------------- | ---- | ------------------------------ | 90| barrierStyle | Array\<[LocalizedBarrierStyle](#localizedbarrierstyle12)\> | Yes | Barriers in the **RelativeContainer** component.| 91 92## GuideLineStyle<sup>12+</sup> 93 94Defines the ID, direction, and position of a guideline. 95 96**Parameters** 97 98| Name | Type | Mandatory | Description | 99| ----- | ------- | ---- | --------------------- | 100| id | string | Yes | ID of the guideline, which must be unique and cannot be the same as the name of any component in the container. | 101| direction | [Axis](ts-appendix-enums.md#axis) | Yes | Direction of the guideline.<br>Default value: **Axis.Vertical**| 102| position | [GuideLinePosition](#guidelineposition12) | Yes | Position of the guideline.<br>Default value:<br>{<br>start: 0<br>} | 103 104## GuideLinePosition<sup>12+</sup> 105 106Defines the position of a guideline. 107 108**Parameters** 109 110| Name | Type | Mandatory | Description | 111| ----- | ------- | ---- | --------------------- | 112| start | [Dimension](ts-types.md#dimension10) | No | Distance between the guideline and the left or top of the container. | 113| end | [Dimension](ts-types.md#dimension10) | No | Distance between the guideline and the right or bottom of the container.| 114 115## BarrierStyle<sup>12+</sup> 116 117Defines the ID, direction, and referenced components of a barrier. 118 119**Parameters** 120 121| Name | Type | Mandatory | Description | 122| ----- | ------- | ---- | --------------------- | 123| id | string | Yes | ID of the barrier, which must be unique and cannot be the same as the name of any component in the container. | 124| direction | [BarrierDirection](ts-appendix-enums.md#barrierdirection12) | Yes | Direction of the barrier.<br>Default value: **BarrierDirection.LEFT**| 125| referencedId | Array\<string> | Yes | Referenced components of the barrier.| 126 127## LocalizedBarrierStyle<sup>12+</sup> 128 129Defines the ID, direction, and referenced components of a barrier. 130 131**Parameters** 132 133| Name | Type | Mandatory | Description | 134| ----- | ------- | ---- | --------------------- | 135| id | string | Yes | ID of the barrier, which must be unique and cannot be the same as the name of any component in the container. | 136| localizedDirection | [LocalizedBarrierDirection](#localizedbarrierdirection12) | Yes | Direction of the barrier.| 137| referencedId | Array\<string\> | Yes | Referenced components of the barrier.| 138 139## LocalizedBarrierDirection<sup>12+</sup> 140 141Defines the direction of a barrier. 142 143| Name| Value | Description | 144| ------ | -- | ----------------------------- | 145| START | 0 |The barrier is on the left (for left-to-right scripts) or right (for right-to-left scripts) side of all the referenced components specified by [referencedId](#localizedbarrierstyle12).| 146| END | 1 | The barrier is on the right (for left-to-right scripts) or left (for right-to-left scripts) side of all the referenced components specified by [referencedId](#localizedbarrierstyle12). | 147| TOP | 2 | The barrier is at the top of all the referenced components specified by [referencedId](#localizedbarrierstyle12). | 148| BOTTOM | 3 | The barrier is at the bottom of all the referenced components specified by [referencedId](#localizedbarrierstyle12).| 149 150## Example 151 152### Example 1 153 154This example shows how to use containers and components in the containers as anchors for layout. 155 156```ts 157@Entry 158@Component 159struct Index { 160 build() { 161 Row() { 162 RelativeContainer() { 163 Row(){Text('row1')}.justifyContent(FlexAlign.Center) 164 .width(100).height(100) 165 .backgroundColor("#FF3333") 166 .alignRules({ 167 top: {anchor: "__container__", align: VerticalAlign.Top}, 168 left: {anchor: "__container__", align: HorizontalAlign.Start} 169 }) 170 .id("row1") 171 172 Row(){Text('row2')}.justifyContent(FlexAlign.Center) 173 .width(100).height(100) 174 .backgroundColor("#FFCC00") 175 .alignRules({ 176 top: {anchor: "__container__", align: VerticalAlign.Top}, 177 right: {anchor: "__container__", align: HorizontalAlign.End} 178 }) 179 .id("row2") 180 181 Row(){Text('row3')}.justifyContent(FlexAlign.Center) 182 .height(100) 183 .backgroundColor("#FF6633") 184 .alignRules({ 185 top: {anchor: "row1", align: VerticalAlign.Bottom}, 186 left: {anchor: "row1", align: HorizontalAlign.End}, 187 right: {anchor: "row2", align: HorizontalAlign.Start} 188 }) 189 .id("row3") 190 191 Row(){Text('row4')}.justifyContent(FlexAlign.Center) 192 .backgroundColor("#FF9966") 193 .alignRules({ 194 top: {anchor: "row3", align: VerticalAlign.Bottom}, 195 bottom: {anchor: "__container__", align: VerticalAlign.Bottom}, 196 left: {anchor: "__container__", align: HorizontalAlign.Start}, 197 right: {anchor: "row1", align: HorizontalAlign.End} 198 }) 199 .id("row4") 200 201 Row(){Text('row5')}.justifyContent(FlexAlign.Center) 202 .backgroundColor("#FF66FF") 203 .alignRules({ 204 top: {anchor: "row3", align: VerticalAlign.Bottom}, 205 bottom: {anchor: "__container__", align: VerticalAlign.Bottom}, 206 left: {anchor: "row2", align: HorizontalAlign.Start}, 207 right: {anchor: "__container__", align: HorizontalAlign.End} 208 }) 209 .id("row5") 210 } 211 .width(300).height(300) 212 .margin({left: 50}) 213 .border({width:2, color: "#6699FF"}) 214 } 215 .height('100%') 216 } 217} 218``` 219 220 221### Example 2 222 223This example shows how to set margins for child components in the container. 224 225```ts 226@Entry 227@Component 228struct Index { 229 build() { 230 Row() { 231 RelativeContainer() { 232 Row(){Text('row1')}.justifyContent(FlexAlign.Center) 233 .width(100).height(100) 234 .backgroundColor("#FF3333") 235 .alignRules({ 236 top: {anchor: "__container__", align: VerticalAlign.Top}, 237 left: {anchor: "__container__", align: HorizontalAlign.Start} 238 }) 239 .id("row1") 240 .margin(10) 241 242 Row(){Text('row2')}.justifyContent(FlexAlign.Center) 243 .width(100).height(100) 244 .backgroundColor("#FFCC00") 245 .alignRules({ 246 left: {anchor: "row1", align: HorizontalAlign.End}, 247 top: {anchor: "row1", align: VerticalAlign.Top} 248 }) 249 .id("row2") 250 251 Row(){Text('row3')}.justifyContent(FlexAlign.Center) 252 .width(100).height(100) 253 .backgroundColor("#FF6633") 254 .alignRules({ 255 left: {anchor: "row1", align: HorizontalAlign.Start}, 256 top: {anchor: "row1", align: VerticalAlign.Bottom} 257 }) 258 .id("row3") 259 260 Row(){Text('row4')}.justifyContent(FlexAlign.Center) 261 .width(100).height(100) 262 .backgroundColor("#FF9966") 263 .alignRules({ 264 left: {anchor: "row3", align: HorizontalAlign.End}, 265 top: {anchor: "row2", align: VerticalAlign.Bottom} 266 }) 267 .id("row4") 268 .margin(10) 269 } 270 .width(300).height(300) 271 .margin({left: 50}) 272 .border({width:2, color: "#6699FF"}) 273 } 274 .height('100%') 275 } 276} 277``` 278 279 280### Example 3 281 282This example shows how to configure the container to adapt its size to content (**size** declared as **"auto"**). 283 284```ts 285@Entry 286@Component 287struct Index { 288 build() { 289 Row() { 290 RelativeContainer() { 291 Row(){Text('row1')}.justifyContent(FlexAlign.Center) 292 .width(100).height(100) 293 .backgroundColor("#FF3333") 294 .id("row1") 295 296 Row(){Text('row2')}.justifyContent(FlexAlign.Center) 297 .width(100).height(100) 298 .backgroundColor("#FFCC00") 299 .alignRules({ 300 left: {anchor: "row1", align: HorizontalAlign.End}, 301 top: {anchor: "row1", align: VerticalAlign.Top} 302 }) 303 .id("row2") 304 305 Row(){Text('row3')}.justifyContent(FlexAlign.Center) 306 .width(100).height(100) 307 .backgroundColor("#FF6633") 308 .alignRules({ 309 left: {anchor: "row1", align: HorizontalAlign.Start}, 310 top: {anchor: "row1", align: VerticalAlign.Bottom} 311 }) 312 .id("row3") 313 314 Row(){Text('row4')}.justifyContent(FlexAlign.Center) 315 .width(100).height(100) 316 .backgroundColor("#FF9966") 317 .alignRules({ 318 left: {anchor: "row3", align: HorizontalAlign.End}, 319 top: {anchor: "row2", align: VerticalAlign.Bottom} 320 }) 321 .id("row4") 322 } 323 .width("auto").height("auto") 324 .margin({left: 50}) 325 .border({width:2, color: "#6699FF"}) 326 } 327 .height('100%') 328 } 329} 330``` 331 332 333### Example 4 334 335This example shows the usage of **bias**. 336 337```ts 338@Entry 339@Component 340struct Index { 341 build() { 342 Row() { 343 RelativeContainer() { 344 Row().width(100).height(100) 345 .backgroundColor("#FF3333") 346 .alignRules({ 347 top: {anchor: "__container__", align: VerticalAlign.Top}, 348 bottom : {anchor : "__container__", align : VerticalAlign.Bottom}, 349 left: {anchor: "__container__", align: HorizontalAlign.Start}, 350 right : {anchor : "__container__", align: HorizontalAlign.End}, 351 bias : {vertical : 0.3} 352 }) 353 .id("row1") 354 } 355 .width(300).height(300) 356 .margin({left: 50}) 357 .border({width:2, color: "#6699FF"}) 358 } 359 .height('100%') 360 } 361} 362``` 363 364 365### Example 5 366 367This example shows how to declare a guideline and use it as an anchor. 368 369```ts 370@Entry 371@Component 372struct Index { 373 build() { 374 Row() { 375 RelativeContainer() { 376 Row().width(100).height(100) 377 .backgroundColor("#FF3333") 378 .alignRules({ 379 left: {anchor: "guideline1", align: HorizontalAlign.End}, 380 top: {anchor: "guideline2", align: VerticalAlign.Top} 381 }) 382 .id("row1") 383 } 384 .width(300).height(300) 385 .margin({left: 50}) 386 .border({width:2, color: "#6699FF"}) 387 .guideLine([{id:"guideline1", direction: Axis.Vertical, position:{start:50}}, 388 {id:"guideline2", direction: Axis.Horizontal, position:{start:50}}]) 389 } 390 .height('100%') 391 } 392} 393``` 394 395 396### Example 6 397 398This example shows how to declare a barrier and use it as an anchor. 399 400```ts 401@Entry 402@Component 403struct Index { 404 build() { 405 Row() { 406 RelativeContainer() { 407 Row(){Text('row1')}.justifyContent(FlexAlign.Center) 408 .width(100).height(100) 409 .backgroundColor("#FF3333") 410 .id("row1") 411 412 Row(){Text('row2')}.justifyContent(FlexAlign.Center) 413 .width(100).height(100) 414 .backgroundColor("#FFCC00") 415 .alignRules({ 416 middle: {anchor: "row1", align: HorizontalAlign.End}, 417 top: {anchor: "row1", align: VerticalAlign.Bottom} 418 }) 419 .id("row2") 420 421 Row(){Text('row3')}.justifyContent(FlexAlign.Center) 422 .width(100).height(100) 423 .backgroundColor("#FF6633") 424 .alignRules({ 425 left: {anchor: "barrier1", align: HorizontalAlign.End}, 426 top: {anchor: "row1", align: VerticalAlign.Top} 427 }) 428 .id("row3") 429 430 Row(){Text('row4')}.justifyContent(FlexAlign.Center) 431 .width(50).height(50) 432 .backgroundColor("#FF9966") 433 .alignRules({ 434 left: {anchor: "row1", align: HorizontalAlign.Start}, 435 top: {anchor: "barrier2", align: VerticalAlign.Bottom} 436 }) 437 .id("row4") 438 } 439 .width(300).height(300) 440 .margin({left: 50}) 441 .border({width:2, color: "#6699FF"}) 442 .barrier([{id: "barrier1", direction: BarrierDirection.RIGHT, referencedId:["row1", "row2"]}, 443 {id: "barrier2", direction: BarrierDirection.BOTTOM, referencedId:["row1", "row2"]}]) 444 } 445 .height('100%') 446 } 447} 448``` 449 450 451### Example 7 452 453This example demonstrates the implementation of horizontal **SPREAD** chain, **SPREAD_INSIDE** chain, and **PACKED** chain from top to bottom using the **chainMode** API. 454 455```ts 456@Entry 457@Component 458struct Index { 459 build() { 460 Row() { 461 RelativeContainer() { 462 Row(){Text('row1')}.justifyContent(FlexAlign.Center) 463 .width(80).height(80) 464 .backgroundColor("#FF3333") 465 .alignRules({ 466 left: {anchor: "__container__", align: HorizontalAlign.Start}, 467 right: {anchor: "row2", align : HorizontalAlign.Start}, 468 top: {anchor: "__container__", align: VerticalAlign.Top} 469 }) 470 .id("row1") 471 .chainMode(Axis.Horizontal, ChainStyle.SPREAD) 472 473 Row(){Text('row2')}.justifyContent(FlexAlign.Center) 474 .width(80).height(80) 475 .backgroundColor("#FFCC00") 476 .alignRules({ 477 left: {anchor: "row1", align: HorizontalAlign.End}, 478 right: {anchor: "row3", align : HorizontalAlign.Start}, 479 top: {anchor: "row1", align: VerticalAlign.Top} 480 }) 481 .id("row2") 482 483 Row(){Text('row3')}.justifyContent(FlexAlign.Center) 484 .width(80).height(80) 485 .backgroundColor("#FF6633") 486 .alignRules({ 487 left: {anchor: "row2", align: HorizontalAlign.End}, 488 right: {anchor: "__container__", align : HorizontalAlign.End}, 489 top: {anchor: "row1", align: VerticalAlign.Top} 490 }) 491 .id("row3") 492 493 Row(){Text('row4')}.justifyContent(FlexAlign.Center) 494 .width(80).height(80) 495 .backgroundColor("#FF3333") 496 .alignRules({ 497 left: {anchor: "__container__", align: HorizontalAlign.Start}, 498 right: {anchor: "row5", align : HorizontalAlign.Start}, 499 center: {anchor: "__container__", align: VerticalAlign.Center} 500 }) 501 .id("row4") 502 .chainMode(Axis.Horizontal, ChainStyle.SPREAD_INSIDE) 503 504 Row(){Text('row5')}.justifyContent(FlexAlign.Center) 505 .width(80).height(80) 506 .backgroundColor("#FFCC00") 507 .alignRules({ 508 left: {anchor: "row4", align: HorizontalAlign.End}, 509 right: {anchor: "row6", align : HorizontalAlign.Start}, 510 top: {anchor: "row4", align: VerticalAlign.Top} 511 }) 512 .id("row5") 513 514 Row(){Text('row6')}.justifyContent(FlexAlign.Center) 515 .width(80).height(80) 516 .backgroundColor("#FF6633") 517 .alignRules({ 518 left: {anchor: "row5", align: HorizontalAlign.End}, 519 right: {anchor: "__container__", align : HorizontalAlign.End}, 520 top: {anchor: "row4", align: VerticalAlign.Top} 521 }) 522 .id("row6") 523 524 Row(){Text('row7')}.justifyContent(FlexAlign.Center) 525 .width(80).height(80) 526 .backgroundColor("#FF3333") 527 .alignRules({ 528 left: {anchor: "__container__", align: HorizontalAlign.Start}, 529 right: {anchor: "row8", align : HorizontalAlign.Start}, 530 bottom: {anchor: "__container__", align: VerticalAlign.Bottom} 531 }) 532 .id("row7") 533 .chainMode(Axis.Horizontal, ChainStyle.PACKED) 534 535 Row(){Text('row8')}.justifyContent(FlexAlign.Center) 536 .width(80).height(80) 537 .backgroundColor("#FFCC00") 538 .alignRules({ 539 left: {anchor: "row7", align: HorizontalAlign.End}, 540 right: {anchor: "row9", align : HorizontalAlign.Start}, 541 top: {anchor: "row7", align: VerticalAlign.Top} 542 }) 543 .id("row8") 544 545 Row(){Text('row9')}.justifyContent(FlexAlign.Center) 546 .width(80).height(80) 547 .backgroundColor("#FF6633") 548 .alignRules({ 549 left: {anchor: "row8", align: HorizontalAlign.End}, 550 right: {anchor: "__container__", align : HorizontalAlign.End}, 551 top: {anchor: "row7", align: VerticalAlign.Top} 552 }) 553 .id("row9") 554 } 555 .width(300).height(300) 556 .margin({left: 50}) 557 .border({width:2, color: "#6699FF"}) 558 } 559 .height('100%') 560 } 561} 562``` 563 564 565### Example 8 566 567This example shows how to use **chainMode** and **bias** to implement the horizontal **PACKED** chain with a bias. 568 569```ts 570@Entry 571@Component 572struct Index { 573 build() { 574 Row() { 575 RelativeContainer() { 576 Row(){Text('row1')}.justifyContent(FlexAlign.Center) 577 .width(80).height(80) 578 .backgroundColor("#FF3333") 579 .alignRules({ 580 left: {anchor: "__container__", align: HorizontalAlign.Start}, 581 right: {anchor: "row2", align : HorizontalAlign.Start}, 582 center: {anchor: "__container__", align: VerticalAlign.Center}, 583 bias : {horizontal : 0} 584 }) 585 .id("row1") 586 .chainMode(Axis.Horizontal, ChainStyle.PACKED) 587 588 Row(){Text('row2')}.justifyContent(FlexAlign.Center) 589 .width(80).height(80) 590 .backgroundColor("#FFCC00") 591 .alignRules({ 592 left: {anchor: "row1", align: HorizontalAlign.End}, 593 right: {anchor: "row3", align : HorizontalAlign.Start}, 594 top: {anchor: "row1", align: VerticalAlign.Top} 595 }) 596 .id("row2") 597 598 Row(){Text('row3')}.justifyContent(FlexAlign.Center) 599 .width(80).height(80) 600 .backgroundColor("#FF6633") 601 .alignRules({ 602 left: {anchor: "row2", align: HorizontalAlign.End}, 603 right: {anchor: "__container__", align : HorizontalAlign.End}, 604 top: {anchor: "row1", align: VerticalAlign.Top} 605 }) 606 .id("row3") 607 } 608 .width(300).height(300) 609 .margin({left: 50}) 610 .border({width:2, color: "#6699FF"}) 611 } 612 .height('100%') 613 } 614} 615``` 616 617 618### Example 9 619 620This example shows how to use **LocalizedAlignRuleOptions** and **LocalizedBarrierDirection** to set the alignment mode when the barrier is used as the anchor point with right-to-left scripts. 621 622```ts 623@Entry 624@Component 625struct Index { 626 build() { 627 Row() { 628 RelativeContainer() { 629 Row(){Text('row1')}.justifyContent(FlexAlign.Center) 630 .width(100).height(100) 631 .backgroundColor("#FF3333") 632 .id("row1") 633 634 Row(){Text('row2')}.justifyContent(FlexAlign.Center) 635 .width(100).height(100) 636 .backgroundColor("#FFCC00") 637 .alignRules({ 638 middle: {anchor: "row1", align: HorizontalAlign.End}, 639 top: {anchor: "row1", align: VerticalAlign.Bottom} 640 }) 641 .id("row2") 642 643 Row(){Text('row3')}.justifyContent(FlexAlign.Center) 644 .width(100).height(100) 645 .backgroundColor("#FF6633") 646 .alignRules({ 647 start: {anchor: "barrier1", align: HorizontalAlign.End}, 648 top: {anchor: "row1", align: VerticalAlign.Top} 649 }) 650 .id("row3") 651 652 Row(){Text('row4')}.justifyContent(FlexAlign.Center) 653 .width(50).height(50) 654 .backgroundColor("#FF9966") 655 .alignRules({ 656 start: {anchor: "row1", align: HorizontalAlign.Start}, 657 top: {anchor: "barrier2", align: VerticalAlign.Bottom} 658 }) 659 .id("row4") 660 } 661 .direction(Direction.Rtl) 662 .width(300).height(300) 663 .margin({left: 50}) 664 .border({width:2, color: "#6699FF"}) 665 .barrier([{id: "barrier1", localizedDirection: LocalizedBarrierDirection.END, referencedId:["row1", "row2"]}, 666 {id: "barrier2", localizedDirection: LocalizedBarrierDirection.BOTTOM, referencedId:["row1", "row2"]}]) 667 } 668 .height('100%') 669 } 670} 671``` 672 673
