RelativeContainer

相對布局組件，用于復(fù)雜場景中元素對齊的布局。

說明：
開發(fā)前請熟悉鴻蒙開發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 9開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

規(guī)則說明

• 容器內(nèi)子組件區(qū)分水平方向，垂直方向：
  • 水平方向?yàn)閘eft， middle， right，對應(yīng)容器的HorizontalAlign.Start， HorizontalAlign.Center， HorizontalAlign.End。
  • 垂直方向?yàn)閠op， center， bottom，對應(yīng)容器的VerticalAlign.Top， VerticalAlign.Center， VerticalAlign.Bottom。
• 子組件可以將容器或者其他子組件設(shè)為錨點(diǎn)：
  • 參與相對布局的容器內(nèi)組件必須設(shè)置id，不設(shè)置id的組件不顯示，容器id固定為__container__。
  • 此子組件某一方向上的三個位置可以將容器或其他子組件的同方向三個位置為錨點(diǎn)，同方向上設(shè)置兩個以上錨點(diǎn)的優(yōu)先級。水平方向Start和Center優(yōu)先，垂直方向Top和Center優(yōu)先。
  • 前端頁面設(shè)置的子組件尺寸大小不會受到相對布局規(guī)則的影響。子組件某個方向上設(shè)置兩個或以上alignRules時不建議設(shè)置此方向尺寸大小。
  • 對齊后需要額外偏移可設(shè)置offset。
• 特殊情況
  • 互相依賴，環(huán)形依賴時容器內(nèi)子組件全部不繪制。
  • 同方向上兩個以上位置設(shè)置錨點(diǎn)但錨點(diǎn)位置逆序時此子組件大小為0，即不繪制。
  • HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿

子組件

支持多個子組件。

接口

RelativeContainer()

從API version 9開始，該接口支持在ArkTS卡片中使用。

示例

@Entry
@Component
struct Index {
  build() {
    Row() {

      RelativeContainer() {
        Row().width(100).height(100)
          .backgroundColor("#FF3333")
          .alignRules({
            top: {anchor: "__container__", align: VerticalAlign.Top},
            left: {anchor: "__container__", align: HorizontalAlign.Start}
          })
          .id("row1")

        Row().width(100).height(100)
          .backgroundColor("#FFCC00")
          .alignRules({
            top: {anchor: "__container__", align: VerticalAlign.Top},
            right: {anchor: "__container__", align: HorizontalAlign.End}
          })
          .id("row2")

        Row().height(100)
          .backgroundColor("#FF6633")
          .alignRules({
            top: {anchor: "row1", align: VerticalAlign.Bottom},
            left: {anchor: "row1", align: HorizontalAlign.End},
            right: {anchor: "row2", align: HorizontalAlign.Start}
          })
          .id("row3")

        Row()
          .backgroundColor("#FF9966")
          .alignRules({
            top: {anchor: "row3", align: VerticalAlign.Bottom},
            bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
            left: {anchor: "__container__", align: HorizontalAlign.Start},
            right: {anchor: "row1", align: HorizontalAlign.End}
          })
          .id("row4")

        Row()
          .backgroundColor("#FF66FF")
          .alignRules({
            top: {anchor: "row3", align: VerticalAlign.Bottom},
            bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
            left: {anchor: "row2", align: HorizontalAlign.Start},
            right: {anchor: "__container__", align: HorizontalAlign.End}
          })
          .id("row5")
      }
      .width(300).height(300)
      .margin({left: 100})
      .border({width:2, color: "#6699FF"})
    }
    .height('100%')
  }
}

審核編輯 黃宇