2.4、相对布局（RelativeContainer）

概述

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

我开发的 Demo 展示

以下代码均经过我 demo 的实战验证，确保代码和效果对应

设置依赖关系

锚点设置

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

对应代码

RelativeContainer() {
  Row()
    .width(100)
    .height(100)
    .backgroundColor(Color.Red)
    .alignRules({
      top: { anchor: '__container__', align: VerticalAlign.Top },
      left: { anchor: '__container__', align: HorizontalAlign.Start }
    })
    .id("row1")

  Row()
    .width(100)
    .height(100)
    .backgroundColor(Color.Orange)
    .alignRules({
      top: { anchor: '__container__', align: VerticalAlign.Top },
      right: { anchor: '__container__', align: HorizontalAlign.End }
    })
    .id("row2")
}
.width(300)
.height(300)
.borderWidth(1)
.borderColor(Color.Blue)
.margin({left:15})
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

以子元素为锚点。

row2 在 row1 之下

RelativeContainer() {
  Row()
    .width(100)
    .height(100)
    .backgroundColor(Color.Red)
    .alignRules({
      top: { anchor: '__container__', align: VerticalAlign.Top },
      left: { anchor: '__container__', align: HorizontalAlign.Start }
    })
    .id("row1")

  Row()
    .width(100)
    .height(100)
    .backgroundColor(Color.Orange)
    .alignRules({
      top: { anchor: 'row1', align: VerticalAlign.Bottom },
      left: { anchor: '__container__', align: HorizontalAlign.Start }
    })
    .id("row2")
}
.width(300)
.height(300)
.borderWidth(1)
.borderColor(Color.Blue)
.margin({left:15})
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

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

在水平方向上，对齐位置可以设置为

HorizontalAlign.Start

效果图

对应代码

RelativeContainer() {
   Text("RelativeContainer")
     .alignRules({
       top: { anchor: '__container__', align: VerticalAlign.Top },
       left: { anchor: '__container__', align: HorizontalAlign.Start }
     })
     .margin({left:5,top:5})
     .id("label")

   Text("锚点")
     .alignRules({
       top: { anchor: 'label', align: VerticalAlign.Bottom },
       middle: { anchor: '__container__', align: HorizontalAlign.Center },
       bottom: { anchor: 'label_bottom', align: VerticalAlign.Top }
     })
     .textAlign(TextAlign.Center)
     .width('90%')
     .backgroundColor('#9dc3e6')
     .margin({top:10, bottom:10})
     .id("anchor")

   Text("HorizontalAlign.Start")
     .alignRules({
       bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
       middle: { anchor: '__container__', align: HorizontalAlign.Center }
     })
     .margin({bottom:5})
     .id("label_bottom")
   
   // 红色条
   Stack()
     .width(5)
     .alignRules({
       left: { anchor: 'anchor', align: HorizontalAlign.Start }, // 关键代码
       top: { anchor: 'anchor', align: VerticalAlign.Top },
       bottom: { anchor: 'anchor', align: VerticalAlign.Bottom }
     })
     .margin({top:10, bottom:10})
     .backgroundColor(Color.Red)
     .id("divider")
 }
 .width('100%')
 .height(200)
 .backgroundColor('#f2f2f2')
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

HorizontalAlign.Center

效果图

对应代码

RelativeContainer() {
   ...
   
   // 红色条
   Stack()
     .width(5)
     .alignRules({
       left: { anchor: 'anchor', align: HorizontalAlign.Center},
       ...
     })
     ...
 }
...
1
2
3
4
5
6
7
8
9
10
11
12
13

HorizontalAlign.End

效果图

对应代码

RelativeContainer() {
   ...
   
   // 红色条
   Stack()
     .width(5)
     .alignRules({
       left: { anchor: 'anchor', align: HorizontalAlign.End},
       ...
     })
     ...
 }
...
1
2
3
4
5
6
7
8
9
10
11
12
13

场景实例

效果图

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)
 .borderWidth(1)
 .borderColor(Color.Blue)
 .margin({left:15})
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

上一篇：2.3、弹性布局（Flex）