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