HarmonyOS鸿蒙开辟常用4种布局详细说明

不停会分享，虽然鸿蒙现在来没有多大发展，但不能否然以后发展，华为的技术是一大突破，存在即合理
可以现在没有多大发展。但不能否定未来的发展。
关注’猿来编码‘，微信订阅号，复兴 ’组件‘，获取

介绍一下鸿蒙开辟常用4种布局

1、线性布局
2、层叠布局
3、网格布局
4、列表布局
​1. 线性布局（Column/Row）

线性布局（LinearLayout）是开辟中最常用的布局，通过线性容器Row（行）和Column（列）构建，它是其他布局的根本，其子元素在线性方向上（水平或垂直）依次排列，基本形式如下：
Column（列）
子元素在排列方向上的间距，可以通过组件参数space参数举行控制

1. @Entry
2. @Component
3. struct Index {
5.   build() {
6.     Column({space:20}) {
7.       //一行
8.       Row() {
10.       }.width('80%').height(50).backgroundColor(Color.Green)
12.       Row() {
14.       }.width('80%').height(50).backgroundColor(Color.Orange)
16.       Row() {
18.       }.width('80%').height(50).backgroundColor(Color.Yellow)
20.       Row() {
22.       }.width('80%').height(50).backgroundColor(Color.Blue)
24.       Row() {
26.       }.width('80%').height(50).backgroundColor(Color.Red)
28.     }.width('100%').alignItems(HorizontalAlign.Center)
29.   }
30. }

复制代码

效果：

Row（行）

1. @Entry
2. @Component
3. struct Index {
5.   build() {
6.     Row({space:20}) {
7.       Column() {
9.       }.width('15%').height(50).backgroundColor(Color.Red);
10.       Column() {
12.       }.width('15%').height(50).backgroundColor(Color.Orange);
13.       Column() {
15.       }.width('15%').height(50).backgroundColor(Color.Red);
16.       Column() {
18.       }.width('15%').height(50).backgroundColor(Color.Blue);
19.       Column() {
21.       }.width('15%').height(50).backgroundColor(Color.Pink);
23.     }.width('100%').padding(20).backgroundColor('#ccc')
24.   }
25. }

复制代码

子元素排列与对齐
● 主轴：线性布局容器在布局方向上的轴线，Row容器主轴为横向，Column容器主轴为纵向。
● 交织轴：垂直于主轴方向的轴线。Row容器交织轴为纵向，Column容器交织轴为横向。
子元素沿主轴方向的排列方式
可以通过justifyContent 属性举行控制，可选值如下：

1. @Entry
2. @Component
3. struct Index {
5.   build() {
6.     Column({space:20}) {
7.       //一行
8.       Row() {
9.       }.width('80%').height(50).backgroundColor(Color.Green)
10.       Row() {
11.       }.width('80%').height(50).backgroundColor(Color.Red)
13.     }.width('100%').height('100%').justifyContent(FlexAlign.Center)
14.   }
15. }

复制代码

.justifyContent(FlexAlign.Center)

.justifyContent(FlexAlign.Start)

.justifyContent(FlexAlign.End)

.justifyContent(FlexAlign.SpaceBetween)

.justifyContent(FlexAlign.SpaceAround)

.justifyContent(FlexAlign.SpaceEvenly)

子元素沿交织轴方向的对齐方式
可以通过alignItems 属性举行控制，可选值如下：

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Column() {
6.       Row() {
8.       }.width('80%').height(50).backgroundColor(Color.Red)
10.       Row() {
12.       }.width('80%').height(50).backgroundColor(Color.Orange)
14.       Row() {
16.       }.width('80%').height(50).backgroundColor(Color.Yellow)
17.     }.width('100%').height('100%').alignItems(HorizontalAlign.Start)
18.   }
19. }

复制代码

.alignItems(HorizontalAlign.Start)

.alignItems(HorizontalAlign.Center)

.alignItems(HorizontalAlign.End)

**
2、层叠布局（Stack）

Stack布局是一种常用的布局方式，它允许将子元素沿垂直于屏幕的方向堆叠在一起，类似于图层的叠加。子元素可以按照其添加顺序依次叠加在一起，后添加的子元素会覆盖之前添加的子元素，层叠布局具有较强的页面层叠、位置定位能力，其利用场景有广告、卡片层叠效果等。
Stack容器中的子组件可通过zIndex属性设置其地点的层级，zIndex值越大，层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方
Stack 布局通常会和 position绝对定位共同利用，设置元素左上角相对于父容器左上角偏移位置共同利用，position语法示例：.position({ x: 180, y: 130 })

1. @Entry
2. @Component
3. struct StackAlign {
4.   @State alignment: Alignment = Alignment.Center;
6.   build() {
7.     Column() {
8.       Stack() {
9.         Row() {
10.           Text('1')
11.         }
12.         .width(300).height(300).backgroundColor(Color.Yellow)
14.         Row() {
15.           Text('2')
16.         }
17.         .width(150).height(150).backgroundColor(Color.Red)
19.         Row() {
20.           Text('3')
21.         }
22.         .width(75).height(75).backgroundColor(Color.Green)
24.       }
25.     }
26.     .width('100%')
27.   }
28. }

复制代码

.alignContent(Alignment.TopStart)

1. @Entry
2. @Component
3. struct StackAlign {
4.   @State alignment: Alignment = Alignment.Center;
6.   build() {
7.     Column() {
8.       Stack() {
9.         Row() {
10.           Text('1')
11.         }
12.         .width(300).height(300).backgroundColor(Color.Blue)
14.         Row() {
15.           Text('2')
16.         }
17.         .width(150).height(150).backgroundColor(Color.Red)
19.         Row() {
20.           Text('3')
21.         }
22.         .width(75).height(75).backgroundColor(Color.Yellow)
23.       }
24.       .width('100%').backgroundColor('#ccc').alignContent(Alignment.TopStart)    }
25.     .width('100%')
26.   }
27. }

复制代码

.alignContent(Alignment.TopEnd）

.alignContent(Alignment.Top）

.alignContent(Alignment.Start）

.alignContent(Alignment.Center）

.alignContent(Alignment.End）

.alignContent(Alignment.BottomStart）

.alignContent(Alignment.BottomEnd）

.alignContent(Alignment.Bottom）

**
3、网格布局（Grid）

**
网格布局（Grid）是一种强盛的页面排版方式，通过将页面分别为行和列构成的网格，使得子组件可以在这个二维网格中自由定位。网格布局的容器组件为Grid，子组件为GridItem，如下图所示。
用1fr来表现占1个’单位‘

1. @Entry
2. @Component
3. struct Index {
4.   build() {
6.     Grid(){
7.       GridItem(){}.backgroundColor(Color.Red)
8.       GridItem(){}.backgroundColor(Color.Green)
9.       GridItem(){}.backgroundColor(Color.Yellow)
10.       GridItem(){}.backgroundColor(Color.Brown)
11.       GridItem(){}.backgroundColor(Color.Orange)
12.       GridItem(){}.backgroundColor(Color.Black)
13.       GridItem(){}.backgroundColor(Color.Orange)
14.       GridItem(){}.backgroundColor(Color.Gray)
15.       GridItem(){}.backgroundColor(Color.Pink)
16.     }.width('100%').height(400).rowsTemplate('1fr 2fr 1fr').columnsTemplate('1fr 1fr 1fr').rowsGap(10).columnsGap(10)
17.   }
18. }

复制代码

.rowsTemplate(‘1fr 2fr 1fr’)

.columnsTemplate(‘1fr 2fr 1fr’)

.rowStart(1).rowEnd(2)

.rowsGap(10).columnsGap(30)

当表现内容超出表现地域时，有滚动效果
4、列表布局（List）

列表（List）是一种复杂的容器组件，利用列表可以轻松高效地表现结构化、可滚动的列表信息。列表布局的容器组件为List，子组件为ListItem或者ListItemGroup，其中，ListItem表现单个列表项，ListItemGroup用于列表数据的分组展示，其子组件也是ListItem，如下图所示
.listDirection(Axis.Vertical)

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     List({space:10}) {
6.       ListItem() {
7.         Text('list1')
8.       }.width('100%').backgroundColor(Color.Red)
10.       ListItemGroup() {
11.         ListItem() {
12.           Text('list2')
13.         }.width('100%')
15.         ListItem() {
16.           Text('list3')
17.         }.width('100%')
19.       }.width('100%').backgroundColor(Color.Yellow)
20.     }.width('100%').listDirection(Axis.Vertical)
21.   }
22. }

复制代码

.listDirection(Axis.Horizontal)

.alignListItem(ListItemAlign.End)

.alignListItem(ListItemAlign.Start)

.alignListItem(ListItemAlign.Center)

scrollBar属性可控制滚动条样式

1. @Entry
2. @Component
3. struct Index {
4.   @State contactsGroups: object[] = [
5.     {
6.       title: 'A',
7.       contacts: [
8.         '赵云',
9.         '李白',
10.         '王思'
11.       ],
12.     },
13.     {
14.       title: 'B',
15.       contacts: [
16.         '白叶',
17.         '伯乐'
18.       ],
19.     },
20.     {
21.       title: 'C',
22.       contacts: [
23.         '王大',
24.         '张三'
25.       ],
26.     },
27.     {
28.       title: 'D',
29.       contacts: [
30.         '白龙',
31.         '小明'
32.       ],
33.     },
34.     {
35.       title: 'E',
36.       contacts: [
37.         '盖伦',
38.         '石头',
39.         '光辉'
40.       ],
41.     }
42.   ]
44.   @Builder Header(item){
45.     Text(item.title).fontSize(30).backgroundColor('#ccc').width('100%')
46.   }
48.   build() {
50.     List(){
51.       ForEach(this.contactsGroups,(item)=>{
52.         ListItemGroup({header:this.Header(item)}){
53.           ForEach(item.contacts,(user)=>{
54.             ListItem(){
55.               Text(user)
56.             }.width('100%').height(50)
57.           })
58.         }
59.       },item=>JSON.stringify(item));
60.     }.width('100%').height(300).scrollBar(BarState.On)
61.   }
62. }

复制代码

以上就是常用布局
关注’猿来编码‘，微信订阅号，复兴 ’布局‘，获取

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。