鴻蒙HarmonyOS實戰-ArkUI元件（RelativeContainer）

蜀道山QAQ發表於2024-03-25
鴻蒙UI元件AI

🚀一、RelativeContainer

🔎1.概述

ArkUI元件中的RelativeContainer是一個相對定位的容器，可以用來將子元件按照相對位置佈局。

在RelativeContainer中，每個子元件都可以設定相對於父容器或其他元件的位置和大小。可以透過設定相對位置、偏移量、寬度和高度來實現佈局。相對位置可以設定為左側、上方、右側和下方。偏移量可以設定為相對位置的偏移值，例如向右偏移10畫素或向下偏移5畫素。寬度和高度可以設定為相對值或絕對值。

使用RelativeContainer時，要注意避免元件重疊或越出容器邊界的情況。可以使用zIndex屬性來設定元件的堆疊順序，避免遮蓋問題。同時，也可以使用padding屬性來設定內邊距，避免元件緊貼容器邊緣。

更多鴻蒙最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY

RelativeContainer是一個非常靈活的容器元件，可以實現各種複雜的佈局效果。

image

🔎2.設定依賴關係

🦋2.1 錨點設定

在網頁中，錨點是指可以跳轉到頁面中特定位置的連結。設定錨點需要以下步驟：

在 HTML 頁面中找到要設定錨點的位置。

在該位置的標籤中新增一個 ID 屬性，併為其賦一個唯一的值。例如：

Section 1

。

在引用該錨點的連結中，將連結目標指向該 ID。例如：Go to Section 1。

當使用者點選連結時，頁面會自動滾動到設定的錨點位置。

更多鴻蒙最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY

但在RelativeContainer中錨點其實是對於的參照物，具體用法介紹如下：

  • 在水平方向上，可以設定left、middle、right的錨點。
  • 在豎直方向上，可以設定top、center、bottom的錨點。
  • 必須為RelativeContainer及其子元素設定ID，用於指定錨點資訊。RelativeContainer的ID預設為__container__

1、RelativeContainer父元件為錨點，__container__代表父容器的id

RelativeContainer() {
  Row(){
    Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
  }
    // 新增其他屬性
    .alignRules({
      top: { anchor: '__container__', align: VerticalAlign.Top },
      left: { anchor: '__container__', align: HorizontalAlign.Start }
    })
    .id("row1")
  Row(){
    Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
  }
  .alignRules({
    top: { anchor: '__container__', align: VerticalAlign.Top },
    right: { anchor: '__container__', align: HorizontalAlign.End }
  })
    .id("row2")
}
.width(300).height(300)
.margin({ left: 20 })
.border({ width: 2, color: '#6699FF' })

image

2、以子元素為錨點

    RelativeContainer() {
      Row(){
        Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
      }
        // 新增其他屬性
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Top },
          left: { anchor: '__container__', align: HorizontalAlign.Start }
        })
        .id("row1")
      Row(){
        Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
      }
      .alignRules({
        top: { anchor: 'row1', align: VerticalAlign.Bottom  },
        right: { anchor: 'row1', align: HorizontalAlign.End }
      })
        .id("row2")
    }
    .width(300).height(300)
    .margin({ left: 20 })
    .border({ width: 2, color: '#6699FF' })

image

🦋2.2 設定相對於錨點的對齊位置

1、在水平方向上，對齊位置可以設定為HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End

image

2、在豎直方向上，對齊位置可以設定為VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom

image

🔎3.案例

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

        Row() {
          Image($r('app.media.icon'))
        }
        .height(100).width(100)
        .alignRules({
          top: { anchor: 'row1', align: VerticalAlign.Bottom },  //以row1元件為錨點，豎直方向低端對齊
          left: { anchor: 'row1', align: HorizontalAlign.Start }  //以row1元件為錨點，水平方向開頭對齊
        })
        .id('row2')  //設定錨點為row2

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

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

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

image

🚀寫在最後

  • 如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
  • 點贊，轉發，有你們的 『點贊和評論』，才是我創造的動力。
  • 關注小編，同時可以期待後續文章ing🚀，不定期分享原創知識。
  • 更多鴻蒙最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY

image

相關文章