相對(duì)布局（RelativeContainer）

概述

RelativeContainer為采用相對(duì)布局的容器，支持容器內(nèi)部的子元素設(shè)置相對(duì)位置關(guān)系。子元素支持指定兄弟元素作為錨點(diǎn)，也支持指定父容器作為錨點(diǎn)，基于錨點(diǎn)做相對(duì)位置布局。下圖是一個(gè)RelativeContainer的概念圖，圖中的虛線表示位置的依賴關(guān)系。

基本概念

• 錨點(diǎn)：通過(guò)錨點(diǎn)設(shè)置當(dāng)前元素基于哪個(gè)元素確定位置。
• 對(duì)齊方式：通過(guò)對(duì)齊方式，設(shè)置當(dāng)前元素是基于錨點(diǎn)的上中下對(duì)齊，還是基于錨點(diǎn)的左中右對(duì)齊。

設(shè)置依賴關(guān)系

錨點(diǎn)設(shè)置

錨點(diǎn)設(shè)置是指設(shè)置子元素相對(duì)于父元素或兄弟元素的位置依賴關(guān)系。在水平方向上，可以設(shè)置left、middle、right的錨點(diǎn)。在豎直方向上，可以設(shè)置top、center、bottom的錨點(diǎn)。為了明確定義錨點(diǎn)，必須為RelativeContainer及其子元素設(shè)置ID，用于指定錨點(diǎn)信息。ID默認(rèn)為“__container__”，其余子元素的ID通過(guò)id屬性設(shè)置。未設(shè)置ID的子元素在RelativeContainer中不會(huì)顯示。

• RelativeContainer父組件為錨點(diǎn)，__container__代表父容器的id。

  RelativeContainer() {
    Row()
      // 添加其他屬性
      .alignRules({
        top: { anchor: '__container__', align: VerticalAlign.Top },
        left: { anchor: '__container__', align: HorizontalAlign.Start }
      })
      .id("row1")
  
    Row()
      ...
      .alignRules({
        top: { anchor: '__container__', align: VerticalAlign.Top },
        right: { anchor: '__container__', align: HorizontalAlign.End }
      })
      .id("row2")
  }
  ...

  

• 以子元素為錨點(diǎn)。

  RelativeContainer() {
    ...
    top: { anchor: 'row1', align: VerticalAlign.Bottom },
    ...
  }
  .width(300).height(300)
  .margin({ left: 20 })
  .border({ width: 2, color: '#6699FF' })

  

設(shè)置相對(duì)于錨點(diǎn)的對(duì)齊位置

設(shè)置了錨點(diǎn)之后，可以通過(guò)align設(shè)置相對(duì)于錨點(diǎn)的對(duì)齊位置。

在水平方向上，對(duì)齊位置可以設(shè)置為HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End。

在豎直方向上，對(duì)齊位置可以設(shè)置為VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom。

場(chǎng)景實(shí)例

相對(duì)布局內(nèi)的子元素相對(duì)靈活，只要在RelativeContainer容器內(nèi)，均可以通過(guò)alignRules進(jìn)行相應(yīng)的位置移動(dòng)。

@Entry
@Component
struct Index {
  build() {
    Row() {
      RelativeContainer() {
        Row()
          .width(100)
          .height(100)
          .backgroundColor('#FF3333')
          .alignRules({
            top: { anchor: '__container__', align: VerticalAlign.Top },  //以父容器為錨點(diǎn)，豎直方向頂頭對(duì)齊
            middle: { anchor: '__container__', align: HorizontalAlign.Center }  //以父容器為錨點(diǎn)，水平方向居中對(duì)齊
          })
          .id('row1')  //設(shè)置錨點(diǎn)為row1

        Row() {
          Image($r('app.media.icon'))
        }
        .height(100).width(100)
        .alignRules({
          top: { anchor: 'row1', align: VerticalAlign.Bottom },  //以row1組件為錨點(diǎn)，豎直方向底端對(duì)齊
          left: { anchor: 'row1', align: HorizontalAlign.Start }  //以row1組件為錨點(diǎn)，水平方向開(kāi)頭對(duì)齊
        })
        .id('row2')  //設(shè)置錨點(diǎn)為row2

        Row()
          .width(100)
          .height(100)
          .backgroundColor('#FFCC00')
          .alignRules({
            top: { anchor: 'row2', align: VerticalAlign.Top }
          })
          .id('row3')  //設(shè)置錨點(diǎn)為row3

        Row()
          .width(100)
          .height(100)
          .backgroundColor('#FF9966')
          .alignRules({
            top: { anchor: 'row2', align: VerticalAlign.Top },
            left: { anchor: 'row2', align: HorizontalAlign.End },
          })
          .id('row4')  //設(shè)置錨點(diǎn)為row4

        Row()
          .width(100)
          .height(100)
          .backgroundColor('#FF66FF')
          .alignRules({
            top: { anchor: 'row2', align: VerticalAlign.Bottom },
            middle: { anchor: 'row2', align: HorizontalAlign.Center }
          })
          .id('row5')  //設(shè)置錨點(diǎn)為row5
      }
      .width(300).height(300)
      .border({ width: 2, color: '#6699FF' })
    }
    .height('100%').margin({ left: 30 })
  }
}