线性
主轴
复制成功
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
1@Entry
2@Component
3struct Index {
4 build() {
5 RelativeContainer() {
6 Column({
7 space: 10
8 }) {
9 Text()
10 .backgroundColor(Color.Gray)
11 .width('200vp')
12 .height('100vp')
13
14 Text()
15 .backgroundColor(Color.Gray)
16 .width('200vp')
17 .height('100vp')
18
19 Text()
20 .backgroundColor(Color.Gray)
21 .width('200vp')
22 .height('100vp')
23 }
24 .width('100%')
25 .height('100%')
26 .justifyContent(FlexAlign.SpaceEvenly)
27 }
28 }
29}
@Entry
@Component
struct Index {
build() {
RelativeContainer() {
Column({
space: 10
}) {
Text()
.backgroundColor(Color.Gray)
.width('200vp')
.height('100vp')
Text()
.backgroundColor(Color.Gray)
.width('200vp')
.height('100vp')
Text()
.backgroundColor(Color.Gray)
.width('200vp')
.height('100vp')
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.SpaceEvenly)
}
}
}
横轴
复制成功
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
1@Entry
2@Component
3struct Index {
4 build() {
5 RelativeContainer() {
6 Row() {
7 Text()
8 .backgroundColor(Color.Gray)
9 .width('60vp')
10 .height('200vp')
11
12 Text()
13 .backgroundColor(Color.Gray)
14 .width('60vp')
15 .height('200vp')
16
17 Text()
18 .backgroundColor(Color.Gray)
19 .width('60vp')
20 .height('200vp')
21 }
22 .width('100%')
23 .height('100%')
24 .justifyContent(FlexAlign.SpaceEvenly)
25 }
26 }
27}
@Entry
@Component
struct Index {
build() {
RelativeContainer() {
Row() {
Text()
.backgroundColor(Color.Gray)
.width('60vp')
.height('200vp')
Text()
.backgroundColor(Color.Gray)
.width('60vp')
.height('200vp')
Text()
.backgroundColor(Color.Gray)
.width('60vp')
.height('200vp')
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.SpaceEvenly)
}
}
}
导航
复制成功
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
1@Entry
2@Component
3struct Index {
4 build() {
5 RelativeContainer() {
6 Column() {
7 Row() {
8 Text('<<')
9 Text('个人中心')
10 Image($r('app.media.startIcon'))
11 .width(28)
12 }
13 .width('100%')
14 .height(30)
15 .backgroundColor(Color.White)
16 .justifyContent(FlexAlign.SpaceBetween)
17 .padding({
18 left: 10,
19 right: 10
20 })
21 }
22 .width('100%')
23 .height('100%')
24 .backgroundColor(Color.Gray)
25 }
26 }
27}
@Entry
@Component
struct Index {
build() {
RelativeContainer() {
Column() {
Row() {
Text('<<')
Text('个人中心')
Image($r('app.media.startIcon'))
.width(28)
}
.width('100%')
.height(30)
.backgroundColor(Color.White)
.justifyContent(FlexAlign.SpaceBetween)
.padding({
left: 10,
right: 10
})
}
.width('100%')
.height('100%')
.backgroundColor(Color.Gray)
}
}
}
垂直
复制成功
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
1@Entry
2@Component
3struct Index {
4 build() {
5 RelativeContainer() {
6 Column({
7 space: 10
8 }) {
9 Text()
10 .backgroundColor(Color.White)
11 .width('200vp')
12 .height('100vp')
13 Text()
14 .backgroundColor(Color.White)
15 .width('200vp')
16 .height('100vp')
17
18 Text()
19 .backgroundColor(Color.White)
20 .width('200vp')
21 .height('100vp')
22 }
23 .alignItems(HorizontalAlign.Center)
24 .width('100%')
25 .height('100%')
26 .backgroundColor(Color.Gray)
27 }
28 }
29}
@Entry
@Component
struct Index {
build() {
RelativeContainer() {
Column({
space: 10
}) {
Text()
.backgroundColor(Color.White)
.width('200vp')
.height('100vp')
Text()
.backgroundColor(Color.White)
.width('200vp')
.height('100vp')
Text()
.backgroundColor(Color.White)
.width('200vp')
.height('100vp')
}
.alignItems(HorizontalAlign.Center)
.width('100%')
.height('100%')
.backgroundColor(Color.Gray)
}
}
}
水平
复制成功
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
1@Entry
2@Component
3struct Index {
4 build() {
5 RelativeContainer() {
6 Row({
7 space: 20
8 }) {
9 Text()
10 .backgroundColor(Color.White)
11 .width('100vp')
12 .height('200vp')
13 Text()
14 .backgroundColor(Color.White)
15 .width('100vp')
16 .height('200vp')
17
18 Text()
19 .backgroundColor(Color.White)
20 .width('100vp')
21 .height('200vp')
22 }
23 .alignItems(VerticalAlign.Center)
24 .width('100%')
25 .height('100%')
26 .backgroundColor(Color.Gray)
27 }
28 }
29}
@Entry
@Component
struct Index {
build() {
RelativeContainer() {
Row({
space: 20
}) {
Text()
.backgroundColor(Color.White)
.width('100vp')
.height('200vp')
Text()
.backgroundColor(Color.White)
.width('100vp')
.height('200vp')
Text()
.backgroundColor(Color.White)
.width('100vp')
.height('200vp')
}
.alignItems(VerticalAlign.Center)
.width('100%')
.height('100%')
.backgroundColor(Color.Gray)
}
}
}
Copyright ©2010-2022 比特日记 All Rights Reserved.
Powered By 可尔物语
浙ICP备11005866号-12