鸿蒙布局Column/Row/Stack

简介

鸿蒙开辟中，最常用的两种线性布局

1. Column:垂直布局方式
2. Row：水平布局方式

复制代码

我们以Column为例进行讲授

请看一下下面代码

1. @Entry
2. @Component
3. struct ColumnTest {
4.   build() {
5.     Column({space: 10}){
6.       Text('Column垂直布局')
7.       Column({space:20}){
8.         Button('测试')
9.           .width('50%')
10.           .backgroundColor(Color.Green)
11.         Button('测试1')
12.           .width('50%')
13.           .backgroundColor(Color.Red)
14.         Button('测试2')
15.           .width('50%')
16.           .backgroundColor(Color.Blue)
17.       }
18.       .width('80%')
19.       .height('50%')
20.       .backgroundColor(Color.White)
21.       .justifyContent(FlexAlign.Center)
22.       // .alignItems(HorizontalAlign.Start)
23.       .border({width: 1,color: Color.Red,style: BorderStyle.Dotted,radius: 10})
24.     }
25.     .width('100%')
26.     .height('100%')
27.     .backgroundColor(0xffeeeeee)
28.     .padding({top: 50})
30.   }
31. }

复制代码

1. Column({space: 10}) 这里的space: 10，表示Column里面每个元素之间的间距为10

2. width(‘100%’)，height(‘100%’) 表示宽高占比

3. backgroundColor(0xffeeeeee) 设置背景颜色

4. padding({top: 50}) 设置顶部内边距

1. ```
2. padding(50) 表示上下左右，内边距全部都是50
3. padding({top: 50,left: 30}) 表示顶部内边距50，左边内边距30
4. ```
5. 如果使用margin外边距，道理类似

复制代码

5. border({width: 1,color: Color.Red,style: BorderStyle.Dotted,radius: 10}) 设置容器的边框

1. ```
2. width: 1 边框宽1
3. color: Color.Red 边框颜色
4. style: BorderStyle.Dotted 边框线条方式
5.     Dotted 点
6.     Dashed 线段
7.     Solid 实线
8. radius: 10 设置容器圆角
9. ```

复制代码

6. justifyContent(FlexAlign.Center)表述元素在主轴分列方式

对于Column来说主轴就是Y（竖轴）
对于Row来说主轴就是X（横轴）
FlexAlign有以下几种分列方式：

1. FlexAlign.Start 头部对齐
2. FlexAlign.Center 中间对齐
3. FlexAlign.End 底部对齐
4. FlexAlign.SpaceAround 元素与元素之间，元素与顶部或底部之间距离一样
5. FlexAlign.SpaceBetween 元素与元素之间距离一样，元素与顶部或底部之间距离为0
6. FlexAlign.SpaceEvenly 元素与元素之间距离一样，元素与顶部或底部之间距离为元素相邻间距的一般

复制代码

FlexAlign.Start 展示方式

FlexAlign.End 展示方式

FlexAlign.Center 展示方式

FlexAlign.SpaceAround 展示方式

FlexAlign.SpaceBetween 展示方式

FlexAlign.SpaceEvenly 展示方式

7. .alignItems(HorizontalAlign.Start)表述元素在副轴分列方式

对于Column来说副轴就是X（横轴）
对于Row来说副轴就是Y（竖轴）
HorizontalAlign有以下几种分列方式：

1. HorizontalAlign.Start
2. HorizontalAlign.Center
3. HorizontalAlign.End

复制代码

HorizontalAlign.Start 展示方式

HorizontalAlign.Center 展示方式

HorizontalAlign.End 展示方式

Stack—堆叠布局方式

这是一种在屏幕Z轴方向上的一种布局方式，类似于将所有的元素堆叠在一起，最后加入的在最上层，除非有明确指明放在那一层。

1. Stack(){
2.         Column()
3.           .width(300)
4.           .height(300)
5.           .backgroundColor(Color.Black)
6.         Column()
7.           .width(250)
8.           .height(250)
9.           .backgroundColor(Color.Orange)
10.         Column()
11.           .width(200)
12.           .height(200)
13.           .backgroundColor(Color.Red)
14.       }
15.       .width('100%')
16.       .height('50%')
17.       .backgroundColor(Color.White)
18.       .alignContent(Alignment.Center)

复制代码

上面我们定义了3个Column，以Stack的方式堆叠在一起。
这里面的宽高/背景色，就不再介绍。
alignContent(Alignment.Center)分列方式介绍

Alignment有以下几种形式

1. Alignment.TopStart  左上角
2. Alignment.Top 顶部中间
3. Alignment.TopEnd 右上角
4. Alignment.Start 中间左边
5. Alignment.Center 中间
6. Alignment.End 中间右边
7. Alignment.BottomTop 左下角
8. Alignment.Bottom 底部中间
9. Alignment.BottomEnd 右下角

复制代码

zIndex的使用

除了按照顺序添加元素外，还可以使用zIndex手动调解添加元素在stack中的第几层。

1. Column()
2.     .width(100)
3.     .height(100)
4.     .backgroundColor(Color.Red)
5.     .zIndex(4)

复制代码

zIndex的值越来，层级就越高，也就是在最上层，也最轻易被看到。

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