RelativeContainer

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

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

子組件

支持多個(gè)子組件。

接口

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%')
  }
}

審核編輯 黃宇