鸿蒙布局Column/Row/Stack
简介鸿蒙开辟中，最常用的两种线性布局
Column:垂直布局方式
Row：水平布局方式
https://img-blog.csdnimg.cn/direct/54f25b8810b44a2086a057be5decae0f.png#pic_center
https://img-blog.csdnimg.cn/direct/fdfb2b56726a4105b8613e32cb738e1f.png#pic_center
我们以Column为例进行讲授
请看一下下面代码
@Entry
@Component
struct ColumnTest {
build() {
Column({space: 10}){
Text('Column垂直布局')
Column({space:20}){
Button('测试')
.width('50%')
.backgroundColor(Color.Green)
Button('测试1')
.width('50%')
.backgroundColor(Color.Red)
Button('测试2')
.width('50%')
.backgroundColor(Color.Blue)
}
.width('80%')
.height('50%')
.backgroundColor(Color.White)
.justifyContent(FlexAlign.Center)
// .alignItems(HorizontalAlign.Start)
.border({width: 1,color: Color.Red,style: BorderStyle.Dotted,radius: 10})
}
.width('100%')
.height('100%')
.backgroundColor(0xffeeeeee)
.padding({top: 50})
}
}
1. Column({space: 10}) 这里的space: 10，表示Column里面每个元素之间的间距为10
2. width(‘100%’)，height(‘100%’) 表示宽高占比
3. backgroundColor(0xffeeeeee) 设置背景颜色
4. padding({top: 50}) 设置顶部内边距
```
padding(50) 表示上下左右，内边距全部都是50
padding({top: 50,left: 30}) 表示顶部内边距50，左边内边距30
```
如果使用margin外边距，道理类似
5. border({width: 1,color: Color.Red,style: BorderStyle.Dotted,radius: 10}) 设置容器的边框
```
width: 1 边框宽1
color: Color.Red 边框颜色
style: BorderStyle.Dotted 边框线条方式
Dotted 点
Dashed 线段
Solid 实线
radius: 10 设置容器圆角
```
6. justifyContent(FlexAlign.Center)表述元素在主轴分列方式
对于Column来说主轴就是Y（竖轴）
对于Row来说主轴就是X（横轴）
FlexAlign有以下几种分列方式：
FlexAlign.Start 头部对齐
FlexAlign.Center 中间对齐
FlexAlign.End 底部对齐
FlexAlign.SpaceAround 元素与元素之间，元素与顶部或底部之间距离一样
FlexAlign.SpaceBetween 元素与元素之间距离一样，元素与顶部或底部之间距离为0
FlexAlign.SpaceEvenly 元素与元素之间距离一样，元素与顶部或底部之间距离为元素相邻间距的一般
FlexAlign.Start 展示方式
https://img-blog.csdnimg.cn/direct/8d145f0afa6f4d2cab7cf30e5ca229e6.png#pic_center
FlexAlign.End 展示方式
https://img-blog.csdnimg.cn/direct/ab2ff829d4854c24b2d017eaa31bc294.png#pic_center
FlexAlign.Center 展示方式
https://img-blog.csdnimg.cn/direct/407efaea10d747ceb8b149c543ccd900.png#pic_center
FlexAlign.SpaceAround 展示方式
https://img-blog.csdnimg.cn/direct/871b6cea8eb34af4867805687a7a0f0d.png#pic_center
FlexAlign.SpaceBetween 展示方式
https://img-blog.csdnimg.cn/direct/590d1af19ee14630ada233d372e19ed7.png#pic_center
FlexAlign.SpaceEvenly 展示方式
https://img-blog.csdnimg.cn/direct/779d784ae7bc419ab5221da647619790.png#pic_center
7. .alignItems(HorizontalAlign.Start)表述元素在副轴分列方式
对于Column来说副轴就是X（横轴）
对于Row来说副轴就是Y（竖轴）
HorizontalAlign有以下几种分列方式：
HorizontalAlign.Start
HorizontalAlign.Center
HorizontalAlign.End
HorizontalAlign.Start 展示方式
https://img-blog.csdnimg.cn/direct/a7635c928465462e98446d751930761d.png#pic_center
HorizontalAlign.Center 展示方式
https://img-blog.csdnimg.cn/direct/c92bb6af0bf948d7936ea172bb911348.png#pic_center
HorizontalAlign.End 展示方式
https://img-blog.csdnimg.cn/direct/f8143e94b35d45bea0aafbc06fd885b3.png#pic_center
Stack—堆叠布局方式
这是一种在屏幕Z轴方向上的一种布局方式，类似于将所有的元素堆叠在一起，最后加入的在最上层，除非有明确指明放在那一层。
Stack(){
Column()
.width(300)
.height(300)
.backgroundColor(Color.Black)
Column()
.width(250)
.height(250)
.backgroundColor(Color.Orange)
Column()
.width(200)
.height(200)
.backgroundColor(Color.Red)
}
.width('100%')
.height('50%')
.backgroundColor(Color.White)
.alignContent(Alignment.Center)
https://img-blog.csdnimg.cn/direct/4a736ed2c1bc4327aadf24d32b517f11.png#pic_center
上面我们定义了3个Column，以Stack的方式堆叠在一起。
这里面的宽高/背景色，就不再介绍。
alignContent(Alignment.Center)分列方式介绍
Alignment有以下几种形式
Alignment.TopStart左上角
Alignment.Top 顶部中间
Alignment.TopEnd 右上角
Alignment.Start 中间左边
Alignment.Center 中间
Alignment.End 中间右边
Alignment.BottomTop 左下角
Alignment.Bottom 底部中间
Alignment.BottomEnd 右下角
https://img-blog.csdnimg.cn/direct/c44eba2c6f154f2d9c497ac7f1a41246.png#pic_center
zIndex的使用
除了按照顺序添加元素外，还可以使用zIndex手动调解添加元素在stack中的第几层。
Column()
.width(100)
.height(100)
.backgroundColor(Color.Red)
.zIndex(4)
zIndex的值越来，层级就越高，也就是在最上层，也最轻易被看到。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]