HarmonyOS应用开发学习笔记 UI布局学习 相对布局 （RelativeContainer）_alignrules

UI布局学习 之 相对布局 （RelativeContainer）

官方文档

一、关键字 RelativeContainer， alignRules（适配规则）

			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 }
            })
1
2
3
4
5
6
7

• 其实很好理解 ：alignRules{}里面表示：
• 元素四个方向（left，top，bottom，right），
• 相对于谁（anchor：‘id’）
• 的什么位置（HorizontalAlign.Start ，VerticalAlign.Bottom ，VerticalAlign.Bottom， HorizontalAlign.End ）

RelativeContainer为采用相对布局的容器，支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局。下图是一个RelativeContainer的概念图，图中的虚线表示位置的依赖关系。

子元素并不完全是上图中的依赖关系。比如，Item4可以以Item2为依赖锚点，也可以以RelativeContainer父容器为依赖锚点。

二、关键：锚点（相对于谁）、对齐方式

为了明确定义锚点，必须为RelativeContainer及其子元素设置ID

• 在水平方向上，可以设置left、middle、right的锚点。
• 竖直方向上，可以设置top、center、bottom的锚点。

RelativeContainer父组件为锚点，__container__代表父容器的id

关键点：

• 1、弄清楚相对于谁，（id是关键）
• 2、对齐方式的设置（eft、middle、right，top、center、bottom）

1、元素相对于父组件 示例：

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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2、子元素之间相对布局 以子元素为参照物

• text02相对于text01
  

    RelativeContainer() {

          Text('Text01')
            .alignRules({
              //相对于父容器,顶部（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({
              //相对于text01（id为('text01')的元素），顶部（top）和id('text01')的底部（Bottom）对齐
              top: { anchor: 'text01', align: VerticalAlign.Bottom },
              left: { anchor: 'text01', align: HorizontalAlign.Start } //顶部（top）和id('text01')的底部（Bottom）对齐
            })
            .margin({ top: 20 })
            .width(100)
            .height(100)
            .backgroundColor(Color.Green)
            .id('text02')

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

三、设置相对于锚点的对齐位置