RelativeContainer

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

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

規則說明

• 容器內子組件區分水平方向，垂直方向：
  • 水平方向為left， middle， right，對應容器的HorizontalAlign.Start， HorizontalAlign.Center， HorizontalAlign.End。
  • 垂直方向為top， center， bottom，對應容器的VerticalAlign.Top， VerticalAlign.Center， VerticalAlign.Bottom。
• 子組件可以將容器或者其他子組件設為錨點：
  • 參與相對布局的容器內組件必須設置id，不設置id的組件不顯示，容器id固定為__container__。
  • 此子組件某一方向上的三個位置可以將容器或其他子組件的同方向三個位置為錨點，同方向上設置兩個以上錨點的優先級。水平方向Start和Center優先，垂直方向Top和Center優先。
  • 前端頁面設置的子組件尺寸大小不會受到相對布局規則的影響。子組件某個方向上設置兩個或以上alignRules時不建議設置此方向尺寸大小。
  • 對齊后需要額外偏移可設置offset。
• 特殊情況
  • 互相依賴，環形依賴時容器內子組件全部不繪制。
  • 同方向上兩個以上位置設置錨點但錨點位置逆序時此子組件大小為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%')
  }
}

審核編輯 黃宇