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-universal-attributes-location.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**System capability**: SystemCapability.ArkUI.ArkUI.Full 47 48## Attributes 49 50In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 51 52### guideLine<sup>12+</sup> 53 54guideLine(value: Array<GuideLineStyle>) 55 56Sets the guidelines in the **RelativeContainer** component. The value is an array, each element of which is a guideline. 57 58**Atomic service API**: This API can be used in atomic services since API version 12. 59 60**System capability**: SystemCapability.ArkUI.ArkUI.Full 61 62**Parameters** 63 64| Name| Type | Mandatory| Description | 65| ------ | ------------------------------------------ | ---- | --------------------------------- | 66| value | Array<[GuideLineStyle](#guidelinestyle12)> | Yes | Guidelines in the **RelativeContainer** component.| 67 68### barrier<sup>12+</sup> 69 70barrier(value: Array<BarrierStyle>) 71 72Sets the barriers in the **RelativeContainer** component. The value is an array, each element of which is a barrier. 73 74**Atomic service API**: This API can be used in atomic services since API version 12. 75 76**System capability**: SystemCapability.ArkUI.ArkUI.Full 77 78**Parameters** 79 80| Name| Type | Mandatory| Description | 81| ------ | -------------------------------------- | ---- | ------------------------------- | 82| value | Array<[BarrierStyle](#barrierstyle12)> | Yes | Barriers in the **RelativeContainer** component.| 83 84### barrier<sup>12+</sup> 85 86barrier(barrierStyle: Array<LocalizedBarrierStyle>) 87 88Sets the barriers in the **RelativeContainer** component. The value is an array, each element of which is a barrier. 89 90**Atomic service API**: This API can be used in atomic services since API version 12. 91 92**System capability**: SystemCapability.ArkUI.ArkUI.Full 93 94**Parameters** 95 96| Name| Type | Mandatory| Description | 97| ------ | -------------------------------------- | ---- | ------------------------------ | 98| barrierStyle | Array\<[LocalizedBarrierStyle](#localizedbarrierstyle12)\> | Yes | Barriers in the **RelativeContainer** component.| 99 100## GuideLineStyle<sup>12+</sup> 101 102Defines the ID, direction, and position of a guideline. 103 104**Atomic service API**: This API can be used in atomic services since API version 12. 105 106**System capability**: SystemCapability.ArkUI.ArkUI.Full 107 108| Name | Type | Mandatory | Description | 109| ----- | ------- | ---- | --------------------- | 110| 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. | 111| direction | [Axis](ts-appendix-enums.md#axis) | Yes | Direction of the guideline.<br>Default value: **Axis.Vertical**| 112| position | [GuideLinePosition](#guidelineposition12) | Yes | Position of the guideline.<br>Default value:<br>{<br>start: 0<br>} | 113 114## GuideLinePosition<sup>12+</sup> 115 116Defines the position of a guideline. 117 118**Atomic service API**: This API can be used in atomic services since API version 12. 119 120**System capability**: SystemCapability.ArkUI.ArkUI.Full 121 122| Name | Type | Mandatory | Description | 123| ----- | ------- | ---- | --------------------- | 124| start | [Dimension](ts-types.md#dimension10) | No | Distance between the guideline and the left or top of the container. | 125| end | [Dimension](ts-types.md#dimension10) | No | Distance between the guideline and the right or bottom of the container.| 126 127## BarrierStyle<sup>12+</sup> 128 129Defines the ID, direction, and referenced components of a barrier. 130 131**Atomic service API**: This API can be used in atomic services since API version 12. 132 133**System capability**: SystemCapability.ArkUI.ArkUI.Full 134 135| Name | Type | Mandatory | Description | 136| ----- | ------- | ---- | --------------------- | 137| 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. | 138| direction | [BarrierDirection](ts-container-relativecontainer.md#barrierdirection12) | Yes | Direction of the barrier.<br>Default value: **BarrierDirection.LEFT**| 139| referencedId | Array\<string> | Yes | Referenced components of the barrier.| 140 141## BarrierDirection<sup>12+</sup> 142 143Defines the direction of a barrier. 144 145**Atomic service API**: This API can be used in atomic services since API version 12. 146 147**System capability**: SystemCapability.ArkUI.ArkUI.Full 148 149| Name | Description | 150| ------ | ----------------------------- | 151| LEFT | The barrier is on the left side of all the referenced components specified by [referencedId](ts-container-relativecontainer.md#barrierstyle12). | 152| RIGHT | The barrier is on the right side of all the referenced components specified by [referencedId](ts-container-relativecontainer.md#barrierstyle12). | 153| TOP | The barrier is at the top of all the referenced components specified by [referencedId](ts-container-relativecontainer.md#barrierstyle12). | 154| BOTTOM | The barrier is at the bottom of all the referenced components specified by [referencedId](ts-container-relativecontainer.md#barrierstyle12).| 155 156## LocalizedBarrierStyle<sup>12+</sup> 157 158Defines the ID, direction, and referenced components of a barrier. 159 160**Atomic service API**: This API can be used in atomic services since API version 12. 161 162**System capability**: SystemCapability.ArkUI.ArkUI.Full 163 164| Name | Type | Mandatory | Description | 165| ----- | ------- | ---- | --------------------- | 166| 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. | 167| localizedDirection | [LocalizedBarrierDirection](#localizedbarrierdirection12) | Yes | Direction of the barrier.| 168| referencedId | Array\<string\> | Yes | Referenced components of the barrier.| 169 170## LocalizedBarrierDirection<sup>12+</sup> 171 172Defines the direction of a barrier. 173 174**Atomic service API**: This API can be used in atomic services since API version 12. 175 176**System capability**: SystemCapability.ArkUI.ArkUI.Full 177 178| Name| Value | Description | 179| ------ | -- | ----------------------------- | 180| 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).| 181| 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). | 182| TOP | 2 | The barrier is at the top of all the referenced components specified by [referencedId](#localizedbarrierstyle12). | 183| BOTTOM | 3 | The barrier is at the bottom of all the referenced components specified by [referencedId](#localizedbarrierstyle12).| 184 185## Example 186 187### Example 1: Implementing a Layout with Containers and Components as Anchors 188 189This example demonstrates how to use the **alignRules** API to implement a layout with containers and their internal components as anchors. 190 191```ts 192@Entry 193@Component 194struct Index { 195 build() { 196 Row() { 197 RelativeContainer() { 198 Row() { 199 Text('row1') 200 } 201 .justifyContent(FlexAlign.Center) 202 .width(100) 203 .height(100) 204 .backgroundColor('#a3cf62') 205 .alignRules({ 206 top: { anchor: "__container__", align: VerticalAlign.Top }, 207 left: { anchor: "__container__", align: HorizontalAlign.Start } 208 }) 209 .id("row1") 210 211 Row() { 212 Text('row2') 213 } 214 .justifyContent(FlexAlign.Center) 215 .width(100) 216 .height(100) 217 .backgroundColor('#00ae9d') 218 .alignRules({ 219 top: { anchor: "__container__", align: VerticalAlign.Top }, 220 right: { anchor: "__container__", align: HorizontalAlign.End } 221 }) 222 .id("row2") 223 224 Row() { 225 Text('row3') 226 } 227 .justifyContent(FlexAlign.Center) 228 .height(100) 229 .backgroundColor('#0a59f7') 230 .alignRules({ 231 top: { anchor: "row1", align: VerticalAlign.Bottom }, 232 left: { anchor: "row1", align: HorizontalAlign.End }, 233 right: { anchor: "row2", align: HorizontalAlign.Start } 234 }) 235 .id("row3") 236 237 Row() { 238 Text('row4') 239 }.justifyContent(FlexAlign.Center) 240 .backgroundColor('#2ca9e0') 241 .alignRules({ 242 top: { anchor: "row3", align: VerticalAlign.Bottom }, 243 bottom: { anchor: "__container__", align: VerticalAlign.Bottom }, 244 left: { anchor: "__container__", align: HorizontalAlign.Start }, 245 right: { anchor: "row1", align: HorizontalAlign.End } 246 }) 247 .id("row4") 248 249 Row() { 250 Text('row5') 251 }.justifyContent(FlexAlign.Center) 252 .backgroundColor('#30c9f7') 253 .alignRules({ 254 top: { anchor: "row3", align: VerticalAlign.Bottom }, 255 bottom: { anchor: "__container__", align: VerticalAlign.Bottom }, 256 left: { anchor: "row2", align: HorizontalAlign.Start }, 257 right: { anchor: "__container__", align: HorizontalAlign.End } 258 }) 259 .id("row5") 260 } 261 .width(300).height(300) 262 .margin({ left: 50 }) 263 .border({ width: 2, color: "#6699FF" }) 264 } 265 .height('100%') 266 } 267} 268``` 269 270 271### Example 2: Setting Margins for Child Components 272 273This example shows how to set margins for child components in the container. 274 275```ts 276@Entry 277@Component 278struct Index { 279 build() { 280 Row() { 281 RelativeContainer() { 282 Row() { 283 Text('row1') 284 } 285 .justifyContent(FlexAlign.Center) 286 .width(100) 287 .height(100) 288 .backgroundColor('#a3cf62') 289 .alignRules({ 290 top: { anchor: "__container__", align: VerticalAlign.Top }, 291 left: { anchor: "__container__", align: HorizontalAlign.Start } 292 }) 293 .id("row1") 294 .margin(10) 295 296 Row() { 297 Text('row2') 298 } 299 .justifyContent(FlexAlign.Center) 300 .width(100) 301 .height(100) 302 .backgroundColor('#00ae9d') 303 .alignRules({ 304 left: { anchor: "row1", align: HorizontalAlign.End }, 305 top: { anchor: "row1", align: VerticalAlign.Top } 306 }) 307 .id("row2") 308 309 Row() { 310 Text('row3') 311 } 312 .justifyContent(FlexAlign.Center) 313 .width(100) 314 .height(100) 315 .backgroundColor('#0a59f7') 316 .alignRules({ 317 left: { anchor: "row1", align: HorizontalAlign.Start }, 318 top: { anchor: "row1", align: VerticalAlign.Bottom } 319 }) 320 .id("row3") 321 322 Row() { 323 Text('row4') 324 } 325 .justifyContent(FlexAlign.Center) 326 .width(100) 327 .height(100) 328 .backgroundColor('#2ca9e0') 329 .alignRules({ 330 left: { anchor: "row3", align: HorizontalAlign.End }, 331 top: { anchor: "row2", align: VerticalAlign.Bottom } 332 }) 333 .id("row4") 334 .margin(10) 335 } 336 .width(300).height(300) 337 .margin({ left: 50 }) 338 .border({ width: 2, color: "#6699FF" }) 339 } 340 .height('100%') 341 } 342} 343``` 344 345 346### Example 3: Configuring the Container to Adapt Its Size to Content 347 348This example shows how to configure the container to adapt its size to content by setting **width** or **height** to **"auto"**. 349 350```ts 351@Entry 352@Component 353struct Index { 354 build() { 355 Row() { 356 RelativeContainer() { 357 Row() { 358 Text('row1') 359 } 360 .justifyContent(FlexAlign.Center) 361 .width(100) 362 .height(100) 363 .backgroundColor('#a3cf62') 364 .id("row1") 365 366 Row() { 367 Text('row2') 368 } 369 .justifyContent(FlexAlign.Center) 370 .width(100) 371 .height(100) 372 .backgroundColor('#00ae9d') 373 .alignRules({ 374 left: { anchor: "row1", align: HorizontalAlign.End }, 375 top: { anchor: "row1", align: VerticalAlign.Top } 376 }) 377 .id("row2") 378 379 Row() { 380 Text('row3') 381 } 382 .justifyContent(FlexAlign.Center) 383 .width(100) 384 .height(100) 385 .backgroundColor('#0a59f7') 386 .alignRules({ 387 left: { anchor: "row1", align: HorizontalAlign.Start }, 388 top: { anchor: "row1", align: VerticalAlign.Bottom } 389 }) 390 .id("row3") 391 392 Row() { 393 Text('row4') 394 } 395 .justifyContent(FlexAlign.Center) 396 .width(100) 397 .height(100) 398 .backgroundColor('#2ca9e0') 399 .alignRules({ 400 left: { anchor: "row3", align: HorizontalAlign.End }, 401 top: { anchor: "row2", align: VerticalAlign.Bottom } 402 }) 403 .id("row4") 404 } 405 .width("auto").height("auto") 406 .margin({ left: 50 }) 407 .border({ width: 2, color: "#6699FF" }) 408 } 409 .height('100%') 410 } 411} 412``` 413 414 415### Example 4: Applying Vertical Offsets 416 417This example uses the [bias](ts-universal-attributes-location.md#bias) API to create a vertical offset for a child component between two anchors. 418 419```ts 420@Entry 421@Component 422struct Index { 423 build() { 424 Row() { 425 RelativeContainer() { 426 Row() 427 .width(100) 428 .height(100) 429 .backgroundColor('#a3cf62') 430 .alignRules({ 431 top: { anchor: "__container__", align: VerticalAlign.Top }, 432 bottom: { anchor: "__container__", align: VerticalAlign.Bottom }, 433 left: { anchor: "__container__", align: HorizontalAlign.Start }, 434 right: { anchor: "__container__", align: HorizontalAlign.End }, 435 bias: { vertical: 0.3 } 436 }) 437 .id("row1") 438 } 439 .width(300).height(300) 440 .margin({ left: 50 }) 441 .border({ width: 2, color: "#6699FF" }) 442 } 443 .height('100%') 444 } 445} 446``` 447 448 449### Example 5: Setting Guide Lines 450 451This example demonstrates how to set guide lines in a relative layout using the [guideLine](#guideline12) API, with child components using these lines as anchors. 452 453```ts 454@Entry 455@Component 456struct Index { 457 build() { 458 Row() { 459 RelativeContainer() { 460 Row() 461 .width(100) 462 .height(100) 463 .backgroundColor('#a3cf62') 464 .alignRules({ 465 left: { anchor: "guideline1", align: HorizontalAlign.End }, 466 top: { anchor: "guideline2", align: VerticalAlign.Top } 467 }) 468 .id("row1") 469 } 470 .width(300) 471 .height(300) 472 .margin({ left: 50 }) 473 .border({ width: 2, color: "#6699FF" }) 474 .guideLine([{ id: "guideline1", direction: Axis.Vertical, position: { start: 50 } }, 475 { id: "guideline2", direction: Axis.Horizontal, position: { start: 50 } }]) 476 } 477 .height('100%') 478 } 479} 480``` 481 482 483### Example 6: Implementing Barriers 484 485This example shows how to set barriers in a relative layout using the [barrier](#barrier12) API, with child components using these barriers as anchors. 486 487```ts 488@Entry 489@Component 490struct Index { 491 build() { 492 Row() { 493 RelativeContainer() { 494 Row() { 495 Text('row1') 496 } 497 .justifyContent(FlexAlign.Center) 498 .width(100) 499 .height(100) 500 .backgroundColor('#a3cf62') 501 .id("row1") 502 503 Row() { 504 Text('row2') 505 } 506 .justifyContent(FlexAlign.Center) 507 .width(100) 508 .height(100) 509 .backgroundColor('#00ae9d') 510 .alignRules({ 511 middle: { anchor: "row1", align: HorizontalAlign.End }, 512 top: { anchor: "row1", align: VerticalAlign.Bottom } 513 }) 514 .id("row2") 515 516 Row() { 517 Text('row3') 518 } 519 .justifyContent(FlexAlign.Center) 520 .width(100) 521 .height(100) 522 .backgroundColor('#0a59f7') 523 .alignRules({ 524 left: { anchor: "barrier1", align: HorizontalAlign.End }, 525 top: { anchor: "row1", align: VerticalAlign.Top } 526 }) 527 .id("row3") 528 529 Row() { 530 Text('row4') 531 } 532 .justifyContent(FlexAlign.Center) 533 .width(50) 534 .height(50) 535 .backgroundColor('#2ca9e0') 536 .alignRules({ 537 left: { anchor: "row1", align: HorizontalAlign.Start }, 538 top: { anchor: "barrier2", align: VerticalAlign.Bottom } 539 }) 540 .id("row4") 541 } 542 .width(300) 543 .height(300) 544 .margin({ left: 50 }) 545 .border({ width: 2, color: "#6699FF" }) 546 .barrier([{ id: "barrier1", direction: BarrierDirection.RIGHT, referencedId: ["row1", "row2"] }, 547 { id: "barrier2", direction: BarrierDirection.BOTTOM, referencedId: ["row1", "row2"] }]) 548 } 549 .height('100%') 550 } 551} 552``` 553 554 555### Example 7: Creating Chains 556 557This example uses the [chainMode](ts-universal-attributes-location.md#chainmode12) API to create horizontal chains, including [SPREAD, SPREAD_INSIDE, and PACKED chains](ts-universal-attributes-location.md#chainstyle12), from top to bottom. 558 559```ts 560@Entry 561@Component 562struct Index { 563 build() { 564 Row() { 565 RelativeContainer() { 566 Row() { 567 Text('row1') 568 } 569 .justifyContent(FlexAlign.Center) 570 .width(80) 571 .height(80) 572 .backgroundColor('#a3cf62') 573 .alignRules({ 574 left: { anchor: "__container__", align: HorizontalAlign.Start }, 575 right: { anchor: "row2", align: HorizontalAlign.Start }, 576 top: { anchor: "__container__", align: VerticalAlign.Top } 577 }) 578 .id("row1") 579 .chainMode(Axis.Horizontal, ChainStyle.SPREAD) 580 581 Row() { 582 Text('row2') 583 } 584 .justifyContent(FlexAlign.Center) 585 .width(80) 586 .height(80) 587 .backgroundColor('#00ae9d') 588 .alignRules({ 589 left: { anchor: "row1", align: HorizontalAlign.End }, 590 right: { anchor: "row3", align: HorizontalAlign.Start }, 591 top: { anchor: "row1", align: VerticalAlign.Top } 592 }) 593 .id("row2") 594 595 Row() { 596 Text('row3') 597 } 598 .justifyContent(FlexAlign.Center) 599 .width(80) 600 .height(80) 601 .backgroundColor('#0a59f7') 602 .alignRules({ 603 left: { anchor: "row2", align: HorizontalAlign.End }, 604 right: { anchor: "__container__", align: HorizontalAlign.End }, 605 top: { anchor: "row1", align: VerticalAlign.Top } 606 }) 607 .id("row3") 608 609 Row() { 610 Text('row4') 611 } 612 .justifyContent(FlexAlign.Center) 613 .width(80) 614 .height(80) 615 .backgroundColor('#a3cf62') 616 .alignRules({ 617 left: { anchor: "__container__", align: HorizontalAlign.Start }, 618 right: { anchor: "row5", align: HorizontalAlign.Start }, 619 center: { anchor: "__container__", align: VerticalAlign.Center } 620 }) 621 .id("row4") 622 .chainMode(Axis.Horizontal, ChainStyle.SPREAD_INSIDE) 623 624 Row() { 625 Text('row5') 626 } 627 .justifyContent(FlexAlign.Center) 628 .width(80) 629 .height(80) 630 .backgroundColor('#00ae9d') 631 .alignRules({ 632 left: { anchor: "row4", align: HorizontalAlign.End }, 633 right: { anchor: "row6", align: HorizontalAlign.Start }, 634 top: { anchor: "row4", align: VerticalAlign.Top } 635 }) 636 .id("row5") 637 638 Row() { 639 Text('row6') 640 } 641 .justifyContent(FlexAlign.Center) 642 .width(80) 643 .height(80) 644 .backgroundColor('#0a59f7') 645 .alignRules({ 646 left: { anchor: "row5", align: HorizontalAlign.End }, 647 right: { anchor: "__container__", align: HorizontalAlign.End }, 648 top: { anchor: "row4", align: VerticalAlign.Top } 649 }) 650 .id("row6") 651 652 Row() { 653 Text('row7') 654 } 655 .justifyContent(FlexAlign.Center) 656 .width(80) 657 .height(80) 658 .backgroundColor('#a3cf62') 659 .alignRules({ 660 left: { anchor: "__container__", align: HorizontalAlign.Start }, 661 right: { anchor: "row8", align: HorizontalAlign.Start }, 662 bottom: { anchor: "__container__", align: VerticalAlign.Bottom } 663 }) 664 .id("row7") 665 .chainMode(Axis.Horizontal, ChainStyle.PACKED) 666 667 Row() { 668 Text('row8') 669 } 670 .justifyContent(FlexAlign.Center) 671 .width(80) 672 .height(80) 673 .backgroundColor('#00ae9d') 674 .alignRules({ 675 left: { anchor: "row7", align: HorizontalAlign.End }, 676 right: { anchor: "row9", align: HorizontalAlign.Start }, 677 top: { anchor: "row7", align: VerticalAlign.Top } 678 }) 679 .id("row8") 680 681 Row() { 682 Text('row9') 683 } 684 .justifyContent(FlexAlign.Center) 685 .width(80) 686 .height(80) 687 .backgroundColor('#0a59f7') 688 .alignRules({ 689 left: { anchor: "row8", align: HorizontalAlign.End }, 690 right: { anchor: "__container__", align: HorizontalAlign.End }, 691 top: { anchor: "row7", align: VerticalAlign.Top } 692 }) 693 .id("row9") 694 } 695 .width(300).height(300) 696 .margin({ left: 50 }) 697 .border({ width: 2, color: "#6699FF" }) 698 } 699 .height('100%') 700 } 701} 702``` 703 704 705### Example 8: Creating a Chain with Offsets 706 707This example combines the [chainMode](ts-universal-attributes-location.md#chainmode12) and [bias](ts-universal-attributes-location.md#bias) APIs to create a horizontal [PACKED chain](ts-universal-attributes-location.md#chainstyle12) with offsets. 708 709```ts 710@Entry 711@Component 712struct Index { 713 build() { 714 Row() { 715 RelativeContainer() { 716 Row() { 717 Text('row1') 718 } 719 .justifyContent(FlexAlign.Center) 720 .width(80) 721 .height(80) 722 .backgroundColor('#a3cf62') 723 .alignRules({ 724 left: { anchor: "__container__", align: HorizontalAlign.Start }, 725 right: { anchor: "row2", align: HorizontalAlign.Start }, 726 center: { anchor: "__container__", align: VerticalAlign.Center }, 727 bias: { horizontal: 0 } 728 }) 729 .id("row1") 730 .chainMode(Axis.Horizontal, ChainStyle.PACKED) 731 732 Row() { 733 Text('row2') 734 } 735 .justifyContent(FlexAlign.Center) 736 .width(80) 737 .height(80) 738 .backgroundColor('#00ae9d') 739 .alignRules({ 740 left: { anchor: "row1", align: HorizontalAlign.End }, 741 right: { anchor: "row3", align: HorizontalAlign.Start }, 742 top: { anchor: "row1", align: VerticalAlign.Top } 743 }) 744 .id("row2") 745 746 Row() { 747 Text('row3') 748 } 749 .justifyContent(FlexAlign.Center) 750 .width(80) 751 .height(80) 752 .backgroundColor('#0a59f7') 753 .alignRules({ 754 left: { anchor: "row2", align: HorizontalAlign.End }, 755 right: { anchor: "__container__", align: HorizontalAlign.End }, 756 top: { anchor: "row1", align: VerticalAlign.Top } 757 }) 758 .id("row3") 759 } 760 .width(300).height(300) 761 .margin({ left: 50 }) 762 .border({ width: 2, color: "#6699FF" }) 763 } 764 .height('100%') 765 } 766} 767``` 768 769 770### Example 9: Implementing a Mirroring Effect 771 772This example demonstrates how to use [LocalizedAlignRuleOptions](ts-universal-attributes-location.md#localizedalignruleoptions12) and [LocalizedBarrierDirection](#localizedbarrierdirection12) for alignment when using barriers as anchors in mirror mode (**direction** set to **Direction.Rtl**). 773 774```ts 775@Entry 776@Component 777struct Index { 778 build() { 779 Row() { 780 RelativeContainer() { 781 Row() { 782 Text('row1') 783 } 784 .justifyContent(FlexAlign.Center) 785 .width(100) 786 .height(100) 787 .backgroundColor('#a3cf62') 788 .id("row1") 789 790 Row() { 791 Text('row2') 792 } 793 .justifyContent(FlexAlign.Center) 794 .width(100) 795 .height(100) 796 .backgroundColor('#00ae9d') 797 .alignRules({ 798 middle: { anchor: "row1", align: HorizontalAlign.End }, 799 top: { anchor: "row1", align: VerticalAlign.Bottom } 800 }) 801 .id("row2") 802 803 Row() { 804 Text('row3') 805 } 806 .justifyContent(FlexAlign.Center) 807 .width(100) 808 .height(100) 809 .backgroundColor('#0a59f7') 810 .alignRules({ 811 start: { anchor: "barrier1", align: HorizontalAlign.End }, 812 top: { anchor: "row1", align: VerticalAlign.Top } 813 }) 814 .id("row3") 815 816 Row() { 817 Text('row4') 818 } 819 .justifyContent(FlexAlign.Center) 820 .width(50) 821 .height(50) 822 .backgroundColor('#2ca9e0') 823 .alignRules({ 824 start: { anchor: "row1", align: HorizontalAlign.Start }, 825 top: { anchor: "barrier2", align: VerticalAlign.Bottom } 826 }) 827 .id("row4") 828 } 829 .direction(Direction.Rtl) 830 .width(300) 831 .height(300) 832 .margin({ left: 50 }) 833 .border({ width: 2, color: "#6699FF" }) 834 .barrier([{ id: "barrier1", localizedDirection: LocalizedBarrierDirection.END, referencedId: ["row1", "row2"] }, 835 { id: "barrier2", localizedDirection: LocalizedBarrierDirection.BOTTOM, referencedId: ["row1", "row2"] }]) 836 } 837 .height('100%') 838 } 839} 840``` 841 842
