鸿蒙布局Column/Row/Stack
- 简介
- 我们以Column为例进行讲解
- 1. Column({space: 10}) 这里的space: 10,表示Column里面每个元素之间的间距为10
- 2. width('100%'),height('100%') 表示宽高占比
- 3. backgroundColor(0xffeeeeee) 设置背景颜色
- 4. padding({top: 50}) 设置顶部内边距
- 5. border({width: 1,color: Color.Red,style: BorderStyle.Dotted,radius: 10}) 设置容器的边框
- 6. justifyContent(FlexAlign.Center)表述元素在主轴排列方式
- 7. .alignItems(HorizontalAlign.Start)表述元素在副轴排列方式
- Stack---堆叠布局方式
- alignContent(Alignment.Center)排列方式介绍
- zIndex的使用
简介
鸿蒙开发中,最常用的两种线性布局
Column:垂直布局方式
Row:水平布局方式
我们以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 展示方式
FlexAlign.End 展示方式
FlexAlign.Center 展示方式
FlexAlign.SpaceAround 展示方式
FlexAlign.SpaceBetween 展示方式
FlexAlign.SpaceEvenly 展示方式
7. .alignItems(HorizontalAlign.Start)表述元素在副轴排列方式
对于Column来说副轴就是X(横轴)
对于Row来说副轴就是Y(竖轴)
HorizontalAlign有以下几种排列方式:
HorizontalAlign.Start
HorizontalAlign.Center
HorizontalAlign.End
HorizontalAlign.Start 展示方式
HorizontalAlign.Center 展示方式
HorizontalAlign.End 展示方式
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)
上面我们定义了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 右下角
zIndex的使用
除了按照顺序添加元素外,还可以使用zIndex手动调整添加元素在stack中的第几层。
Column().width(100).height(100).backgroundColor(Color.Red).zIndex(4)
zIndex的值越来,层级就越高,也就是在最上层,也最容易被看到。