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本示例通过alignRules接口实现了以容器和容器内组件作为锚点进行布局的功能。 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### 示例2（子组件设置外边距） 272 273本示例展示了容器内子组件设置外边距的用法。 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### 示例3（设置容器大小自适应内容） 347 348本示例展示了容器大小适应内容（声明width或height为"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### 示例4（设置偏移） 416 417本示例通过[bias](ts-universal-attributes-location.md#bias对象说明)实现了子组件的位置在竖直方向的两个锚点间偏移的效果 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### 示例5（设置辅助线） 450 451本示例展示了相对布局组件通过[guideLine](#guideline12)接口设置辅助线，子组件以辅助线为锚点的功能。 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### 示例6（设置屏障） 484 485本示例展示了相对布局组件通过[barrier](#barrier12)接口设置屏障，子组件以屏障为锚点的用法。 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### 示例7（设置链） 556 557本示例通过[chainMode](ts-universal-attributes-location.md#chainmode12)接口从上至下分别实现了水平方向的[SPREAD链，SPREAD_INSIDE链和PACKED链](ts-universal-attributes-location.md#chainstyle12)。 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### 示例8（链中设置偏移） 706 707本示例通过[chainMode](ts-universal-attributes-location.md#chainmode12)和[bias](ts-universal-attributes-location.md#bias对象说明)接口实现了水平方向的带偏移的[PACKED链](ts-universal-attributes-location.md#chainstyle12)。 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### 示例9（设置镜像模式） 771 772本示例展示了在镜像模式（direction声明Direction.Rtl）下以屏障为锚点时使用[LocalizedAlignRuleOptions](ts-universal-attributes-location.md#localizedalignruleoptions12对象说明)和[LocalizedBarrierDirection](#localizedbarrierdirection12枚举说明)设置对齐方式的用法。 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
