UI布局學(xué)習(xí) 之 相對(duì)布局 （RelativeContainer）

官方文檔

一、關(guān)鍵字 RelativeContainer， alignRules（適配規(guī)則）

			Text('Text02')
            .alignRules({
              left: { anchor: 'text01', align: HorizontalAlign.Start },
              top: { anchor: 'text01', align: VerticalAlign.Bottom },
              bottom: { anchor: 'text01', align: VerticalAlign.Bottom },
              right: { anchor: 'text01', align: HorizontalAlign.End }
            })

• 其實(shí)很好理解 ：alignRules{}里面表示：
• 元素四個(gè)方向（left，top，bottom，right），
• 相對(duì)于誰(shuí)（anchor：‘id’）
• 的什么位置（HorizontalAlign.Start ，VerticalAlign.Bottom ，VerticalAlign.Bottom， HorizontalAlign.End ）

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

子元素并不完全是上圖中的依賴關(guān)系。比如，Item4可以以Item2為依賴錨點(diǎn)，也可以以RelativeContainer父容器為依賴錨點(diǎn)。

二、關(guān)鍵：錨點(diǎn)（相對(duì)于誰(shuí)）、對(duì)齊方式

為了明確定義錨點(diǎn)，必須為RelativeContainer及其子元素設(shè)置ID

• 在水平方向上，可以設(shè)置left、middle、right的錨點(diǎn)。
• 豎直方向上，可以設(shè)置top、center、bottom的錨點(diǎn)。

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

關(guān)鍵點(diǎn)：

• 1、弄清楚相對(duì)于誰(shuí)，（id是關(guān)鍵）
• 2、對(duì)齊方式的設(shè)置（eft、middle、right，top、center、bottom）

1、元素相對(duì)于父組件 示例：

RelativeContainer() {

          Text('Text01')
            .alignRules({
              top: { anchor: '__container__', align: VerticalAlign.Top },
              left: { anchor: '__container__', align: HorizontalAlign.Start }
            }).width(100).height(100).backgroundColor(Color.Red)
            .id('text01')

          Text('Text02')
            .textAlign(TextAlign.Center)
            .alignRules({
              top: { anchor: '__container__', align: VerticalAlign.Top },
              right: { anchor: '__container__', align: HorizontalAlign.End }

            }).width(100).height(100).backgroundColor(Color.Green)
            .id('text02')
          
        }.backgroundColor(Color.Yellow).width('100%').height(500)

2、子元素之間相對(duì)布局 以子元素為參照物

• text02相對(duì)于text01
  

    RelativeContainer() {

          Text('Text01')
            .alignRules({
              //相對(duì)于父容器,頂部（top）和左邊（start）位置
              top: { anchor: '__container__', align: VerticalAlign.Top },
              left: { anchor: '__container__', align: HorizontalAlign.Start }
            })
            .width(100)
            .height(100)
            .backgroundColor(Color.Red)
            .id('text01')


          Text('Text02')
            .textAlign(TextAlign.Center)
            .alignRules({
              //相對(duì)于text01（id為('text01')的元素），頂部（top）和id('text01')的底部（Bottom）對(duì)齊
              top: { anchor: 'text01', align: VerticalAlign.Bottom },
              left: { anchor: 'text01', align: HorizontalAlign.Start } //頂部（top）和id('text01')的底部（Bottom）對(duì)齊
            })
            .margin({ top: 20 })
            .width(100)
            .height(100)
            .backgroundColor(Color.Green)
            .id('text02')

        }.backgroundColor(Color.Yellow).width('100%').height(500)

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

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-786967.html

到了這里，關(guān)于HarmonyOS應(yīng)用開發(fā)學(xué)習(xí)筆記 UI布局學(xué)習(xí) 相對(duì)布局 （RelativeContainer）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！