相對(duì)布局組件

規(guī)則說(shuō)明

• 容器內(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固定為_(kāi)_container__。
  • 此子組件某一方向上的三個(gè)位置（水平方向?yàn)閘eft、middle、right，垂直方向?yàn)閠op、center、bottom）可以指定容器或其他子組件同方向的三個(gè)位置（水平方向?yàn)镠orizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End，垂直方向?yàn)閂erticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom）為錨點(diǎn)。若同方向上設(shè)置兩個(gè)以上錨點(diǎn)，水平方向Start和Center優(yōu)先，垂直方向Top和Center優(yōu)先。例如，水平方向上指定了left以容器的HorizontalAlign.Start為錨點(diǎn)，middle以容器的HorizontalAlign.Center為錨點(diǎn)，又指定right的錨點(diǎn)為容器的HorizontalAlign.End，當(dāng)組件的width和容器的width不能同時(shí)滿(mǎn)足3條約束規(guī)則時(shí)，優(yōu)先取Start和Center的約束規(guī)則。
  • 前端頁(yè)面設(shè)置的子組件尺寸大小不會(huì)受到相對(duì)布局規(guī)則的影響。子組件某個(gè)方向上設(shè)置兩個(gè)或以上alignRules時(shí)不建議設(shè)置此方向尺寸大小。
  • 對(duì)齊后需要額外偏移可設(shè)置offset。
• 特殊情況
  • 互相依賴(lài)，環(huán)形依賴(lài)時(shí)容器內(nèi)子組件全部不繪制。
  • 同方向上兩個(gè)以上位置設(shè)置錨點(diǎn)但錨點(diǎn)位置逆序時(shí)此子組件大小為0，即不繪制。
  • 容器不設(shè)置寬高時(shí)，容器與容器內(nèi)子組件不繪制。

子組件

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

接口

RelativeContainer()

從API version 9開(kāi)始，該接口支持在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%')
  }
}