學習筆記（十二）：ArkUi-相對佈局 (RelativeContainer)

听着music睡發表於2024-10-29
筆記UIAI

基本概念

  • 錨點：透過錨點設定當前元素基於哪個元素確定位置。

  • 對齊方式：透過對齊方式，設定當前元素是基於錨點的上中下對齊，還是基於錨點的左中右對齊。

錨點設定

錨點設定是指設定子元素相對於父元素或兄弟元素的位置依賴關係。

在水平方向上，可以設定left、middle、right的錨點。在豎直方向上，可以設定top、center、bottom的錨點。

為了明確定義錨點，必須為RelativeContainer及其子元素設定ID，用於指定錨點資訊。ID預設為“__container__”，其餘子元素的ID透過id屬性設定。

不設定id的元件能顯示，但是不能被其他子元件作為錨點，相對佈局容器會為其拼接id，此id的規律無法被應用感知。

注意：互相依賴，環形依賴時容器內子元件全部不繪製。同方向上兩個以上位置設定錨點，但錨點位置逆序時此子元件大小為0，即不繪製。

使用格式：

.alignRules(
          {
            right:{anchor:'first',align:HorizontalAlign.Start},
            top:{anchor:'first',align:VerticalAlign.Bottom}
          }
)

.alignRules(
　　{
　　　　方向:{anchor: 錨點id,align: 對齊方式}
　　}
)

一、實現一個相對父容器右上角顯示的子元素

二、實現兩個子元素相對排列

元素一（id:"first"）相對父容器右上角排列，

要求元素二（id:"second"）相對與元素一實現

1、元素二頂部在元素一下方

2、元素二右側在元素二左側

子元件位置偏移

子元件經過相對位置對齊後，位置可能還不是目標位置，開發者可根據需要進行額外偏移設定offset

.offset({x:-40,y:-20})

相關文章