布局
RelativeContainner
复制成功
1
2
3
4
5
6
7
8
9
10
1简化多个组件层叠布局
2包含相对定位、绝对定位概念
3控制页面中某个区域，以及这个区域内部元素的排列规则
4
5控制容器内元素水平、垂直方向布局，默认所有子元素层叠+左上角对齐
6子元素可以以RelativeContainner或其他子元素作为偏移参考
7
8alignRules应用在子元素，指定水平、垂直参考线
9水平参考线：left、middle、right
10垂直参考线：top、center、bottom
简化多个组件层叠布局
包含相对定位、绝对定位概念
控制页面中某个区域，以及这个区域内部元素的排列规则
控制容器内元素水平、垂直方向布局，默认所有子元素层叠+左上角对齐
子元素可以以RelativeContainner或其他子元素作为偏移参考
alignRules应用在子元素，指定水平、垂直参考线
水平参考线：left、middle、right
垂直参考线：top、center、bottom
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
1@Entry
2@Component
3struct Index {
4 @State message: string = 'Hello World';
5
6 build() {
7 Column() {
8 RelativeContainer() {
9 Column() {
10 Text('Box1')
11 }
12 .width(100)
13 .height(100)
14 .backgroundColor(Color.Brown)
15
16 Column() {
17 Text('Box2')
18 }
19 .width(100)
20 .height(100)
21 .backgroundColor(Color.Brown)
22 .alignRules({
23 right: {
24 anchor: '__container__', align: HorizontalAlign.End
25 },
26 top: {
27 anchor: '__container__', align: VerticalAlign.Top
28 }
29 })
30
31 Column() {
32 Text('Box3')
33 }
34 .width(100)
35 .height(100)
36 .backgroundColor(Color.Brown)
37 .alignRules({
38 left: {
39 anchor: '__container__', align: HorizontalAlign.Start
40 },
41 bottom: {
42 anchor: '__container__', align: VerticalAlign.Bottom
43 }
44 })
45
46 Column() {
47 Text('Box4')
48 }
49 .width(100)
50 .height(100)
51 .backgroundColor(Color.Brown)
52 .alignRules({
53 right: {
54 anchor: '__container__', align: HorizontalAlign.End
55 },
56 bottom: {
57 anchor: '__container__', align: VerticalAlign.Bottom
58 }
59 })
60
61 Column() {
62 Text('Box5')
63 }
64 .width(100)
65 .height(100)
66 .backgroundColor(Color.Brown)
67 .alignRules({
68 middle: {
69 anchor: '__container__', align: HorizontalAlign.Center
70 },
71 center: {
72 anchor: '__container__', align: VerticalAlign.Center
73 }
74 })
75 }
76 .height('50%')
77 .width('100%')
78 .border({
79 width: 1,
80 color: Color.Blue
81 })
82 }
83 .width('100%')
84 .height('100%')
85 .justifyContent(FlexAlign.Center)
86 }
87}
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Column() {
RelativeContainer() {
Column() {
Text('Box1')
}
.width(100)
.height(100)
.backgroundColor(Color.Brown)
Column() {
Text('Box2')
}
.width(100)
.height(100)
.backgroundColor(Color.Brown)
.alignRules({
right: {
anchor: '__container__', align: HorizontalAlign.End
},
top: {
anchor: '__container__', align: VerticalAlign.Top
}
})
Column() {
Text('Box3')
}
.width(100)
.height(100)
.backgroundColor(Color.Brown)
.alignRules({
left: {
anchor: '__container__', align: HorizontalAlign.Start
},
bottom: {
anchor: '__container__', align: VerticalAlign.Bottom
}
})
Column() {
Text('Box4')
}
.width(100)
.height(100)
.backgroundColor(Color.Brown)
.alignRules({
right: {
anchor: '__container__', align: HorizontalAlign.End
},
bottom: {
anchor: '__container__', align: VerticalAlign.Bottom
}
})
Column() {
Text('Box5')
}
.width(100)
.height(100)
.backgroundColor(Color.Brown)
.alignRules({
middle: {
anchor: '__container__', align: HorizontalAlign.Center
},
center: {
anchor: '__container__', align: VerticalAlign.Center
}
})
}
.height('50%')
.width('100%')
.border({
width: 1,
color: Color.Blue
})
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}
相对定位
相对子元素定位，关键：子元素需要接触
复制成功
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
1@Entry
2@Component
3struct Index {
4 @State message: string = 'Hello World';
5
6 build() {
7 Column() {
8 RelativeContainer() {
9 Column() {
10 Text('Box1')
11 }
12 .width(100)
13 .height(100)
14 .backgroundColor(Color.Brown)
15 .id('Box1')
16
17 Column() {
18 Text('Box2')
19 }
20 .width(100)
21 .height(100)
22 .backgroundColor(Color.Brown)
23 .alignRules({
24 right: {
25 anchor: '__container__', align: HorizontalAlign.End
26 },
27 top: {
28 anchor: '__container__', align: VerticalAlign.Top
29 }
30 })
31 .id('Box2')
32
33 Column() {
34 Text('Box3')
35 }
36 .width(100)
37 .height(100)
38 .backgroundColor(Color.Brown)
39 .alignRules({
40 left: {
41 anchor: 'Box1', align: HorizontalAlign.End
42 },
43 top: {
44 anchor: 'Box1', align: VerticalAlign.Bottom
45 }
46 })
47 .id('Box3')
48
49 Column() {
50 Text('Box4')
51 }
52 .width(100)
53 .height(100)
54 .backgroundColor(Color.Brown)
55 .alignRules({
56 right: {
57 anchor: 'Box3', align: HorizontalAlign.Start
58 },
59 top: {
60 anchor: 'Box3', align: VerticalAlign.Bottom
61 }
62 })
63 .id('Box4')
64
65 Column() {
66 Text('Box5')
67 }
68 .width(100)
69 .height(100)
70 .backgroundColor(Color.Brown)
71 .alignRules({
72 left: {
73 anchor: 'Box3', align: HorizontalAlign.End
74 },
75 top: {
76 anchor: 'Box3', align: VerticalAlign.Bottom
77 }
78 })
79 .id('Box5')
80 }
81 .height(300)
82 .width(300)
83 .border({
84 width: 1,
85 color: Color.Blue
86 })
87 }
88 .width('100%')
89 .height('100%')
90 .justifyContent(FlexAlign.Center)
91 }
92}
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Column() {
RelativeContainer() {
Column() {
Text('Box1')
}
.width(100)
.height(100)
.backgroundColor(Color.Brown)
.id('Box1')
Column() {
Text('Box2')
}
.width(100)
.height(100)
.backgroundColor(Color.Brown)
.alignRules({
right: {
anchor: '__container__', align: HorizontalAlign.End
},
top: {
anchor: '__container__', align: VerticalAlign.Top
}
})
.id('Box2')
Column() {
Text('Box3')
}
.width(100)
.height(100)
.backgroundColor(Color.Brown)
.alignRules({
left: {
anchor: 'Box1', align: HorizontalAlign.End
},
top: {
anchor: 'Box1', align: VerticalAlign.Bottom
}
})
.id('Box3')
Column() {
Text('Box4')
}
.width(100)
.height(100)
.backgroundColor(Color.Brown)
.alignRules({
right: {
anchor: 'Box3', align: HorizontalAlign.Start
},
top: {
anchor: 'Box3', align: VerticalAlign.Bottom
}
})
.id('Box4')
Column() {
Text('Box5')
}
.width(100)
.height(100)
.backgroundColor(Color.Brown)
.alignRules({
left: {
anchor: 'Box3', align: HorizontalAlign.End
},
top: {
anchor: 'Box3', align: VerticalAlign.Bottom
}
})
.id('Box5')
}
.height(300)
.width(300)
.border({
width: 1,
color: Color.Blue
})
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}
居中
复制成功
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
1@Entry
2@Component
3struct Index {
4 @State message: string = 'Hello World';
5
6 build() {
7 Column() {
8 RelativeContainer() {
9 Column() {
10 Text('Box1')
11 }
12 .width(100)
13 .height(100)
14 .backgroundColor(Color.Brown)
15 .id('Box1')
16 .alignRules({
17 middle: {
18 anchor: '__container__', align: HorizontalAlign.Center
19 },
20 center: {
21 anchor: '__container__', align: VerticalAlign.Center
22 }
23 })
24 }
25 .height(300)
26 .width(300)
27 .border({
28 width: 1,
29 color: Color.Blue
30 })
31 }
32 .width('100%')
33 .height('100%')
34 .justifyContent(FlexAlign.Center)
35 }
36}
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Column() {
RelativeContainer() {
Column() {
Text('Box1')
}
.width(100)
.height(100)
.backgroundColor(Color.Brown)
.id('Box1')
.alignRules({
middle: {
anchor: '__container__', align: HorizontalAlign.Center
},
center: {
anchor: '__container__', align: VerticalAlign.Center
}
})
}
.height(300)
.width(300)
.border({
width: 1,
color: Color.Blue
})
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}
居中2
复制成功
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
1@Entry
2@Component
3struct Index {
4 @State message: string = 'Hello World';
5
6 build() {
7 Column() {
8 RelativeContainer() {
9 Column() {
10 Text('Box1')
11 }
12 .width(100)
13 .height(100)
14 .backgroundColor(Color.Brown)
15 .id('Box1')
16 .alignRules({
17 top: {
18 anchor: '__container__', align: VerticalAlign.Top
19 },
20 bottom: {
21 anchor: '__container__', align: VerticalAlign.Bottom
22 },
23 left: {
24 anchor: '__container__', align: HorizontalAlign.Start
25 },
26 right: {
27 anchor: '__container__', align: HorizontalAlign.End
28 }
29 })
30 }
31 .height(300)
32 .width(300)
33 .border({
34 width: 1,
35 color: Color.Blue
36 })
37 }
38 .width('100%')
39 .height('100%')
40 .justifyContent(FlexAlign.Center)
41 }
42}
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Column() {
RelativeContainer() {
Column() {
Text('Box1')
}
.width(100)
.height(100)
.backgroundColor(Color.Brown)
.id('Box1')
.alignRules({
top: {
anchor: '__container__', align: VerticalAlign.Top
},
bottom: {
anchor: '__container__', align: VerticalAlign.Bottom
},
left: {
anchor: '__container__', align: HorizontalAlign.Start
},
right: {
anchor: '__container__', align: HorizontalAlign.End
}
})
}
.height(300)
.width(300)
.border({
width: 1,
color: Color.Blue
})
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}
Copyright ©2010-2022 比特日记 All Rights Reserved.
Powered By 可尔物语
浙ICP备11005866号-12