相對布局組件

規(guī)則說明

• 容器內(nèi)子組件區(qū)分水平方向，垂直方向：
  • 水平方向為left， middle， right，對應(yīng)容器的HorizontalAlign.Start， HorizontalAlign.Center， HorizontalAlign.End。
  • 垂直方向為top， center， bottom，對應(yīng)容器的VerticalAlign.Top， VerticalAlign.Center， VerticalAlign.Bottom。
• 子組件可以將容器或者其他子組件設(shè)為錨點：
  • 參與相對布局的容器內(nèi)組件必須設(shè)置id，不設(shè)置id的組件不顯示，容器id固定為__container__。
  • 此子組件某一方向上的三個位置（水平方向為left、middle、right，垂直方向為top、center、bottom）可以指定容器或其他子組件同方向的三個位置（水平方向為HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End，垂直方向為VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom）為錨點。若同方向上設(shè)置兩個以上錨點，水平方向Start和Center優(yōu)先，垂直方向Top和Center優(yōu)先。例如，水平方向上指定了left以容器的HorizontalAlign.Start為錨點，middle以容器的HorizontalAlign.Center為錨點，又指定right的錨點為容器的HorizontalAlign.End，當(dāng)組件的width和容器的width不能同時滿足3條約束規(guī)則時，優(yōu)先取Start和Center的約束規(guī)則。
  • 前端頁面設(shè)置的子組件尺寸大小不會受到相對布局規(guī)則的影響。子組件某個方向上設(shè)置兩個或以上alignRules時不建議設(shè)置此方向尺寸大小。
  • 對齊后需要額外偏移可設(shè)置offset。
• 特殊情況
  • 互相依賴，環(huán)形依賴時容器內(nèi)子組件全部不繪制。
  • 同方向上兩個以上位置設(shè)置錨點但錨點位置逆序時此子組件大小為0，即不繪制。
  • 容器不設(shè)置寬高時，容器與容器內(nèi)子組件不繪制。

子組件

支持多個子組件。

接口

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