一、构建布局
开发一个应用程序的页面，首先要考虑的就是页面的排列布局。在 ArkTS 中，页面元素的排列方式，大部分都是通过布局组件来控制的。
官方提供了多种构建布局的方式，例如：
- 线性布局 (Row/Column)
- 层叠布局 (Stack)
- 弹性布局 (Flex)
- 相对布局 (RelativeContainer)
- 栅格布局 (GridRow/GridCol)
- 媒体查询 (@ohos.mediaquery)
- 创建列表 (List)
- 创建网格 (Grid/GridItem)
- 创建轮播 (Swiper)
- 选项卡 (Tabs)
其中，线性布局是我们在鸿蒙应用开发中最常用的一种布局方式。
二、线性布局组件
线性布局组件有2个，分别是Column和Row，它们都是作为容器组件来使用，区别在于：
- Column：内部子元素从上往下排列；
- Row：内部子元素从左往右排列；
说明：在ArkTS中，组件是横向排列还是纵向排列，不是看当前组件自身的特性，而是看父级组件是什么样的布局容器。
基础语法：
build() {
Column() {
Row() {
Column()
Column()
}
Row() {
Column()
Column()
}
}
}
代码说明：
build()函数内只能有一个根组件，所以通常会用Column或Row来作为页面最外层的根组件；- Column和Row之间可以相互嵌套使用；
- 以上代码中，Column和Row都没有设置样式，因此在预览中暂时看不到任何页面效果；
三、组件样式
我们可以通过“属性方法”的语法形式，来给线性布局组件添加样式。
1、通用属性
通用属性，指的是不仅限于Column和Row组件可以用，其他组件也可以使用。常用的通用属性如下（完整的通用属性可以参考官方文档）：
width()：组件宽度；height()：组件高度；size()：组件宽高；backgroundColor()：组件背景颜色；border()：组件边框；padding()：组件内边距；margin()：组件外边距；
示例代码：
build() {
Column() {
Row() {
Column()
.width(100).height(100)
.border({ width: 1, color: 'white' })
.margin({ left: 50 })
}
.size({ width: '100%', height: 200 })
.backgroundColor('blue')
}
.width('100%').height('100%')
.padding(20)
.backgroundColor('#eeeeee')
}
代码预览效果如下图：
2、线性布局属性
除了通用的样式属性外，线性布局组件也有一些自己的排列布局属性（详细文档参考官方文档）。
space：控制内部子元素之间的间距：justifyContent()：内部子元素在主轴（子元素的默认排列方向）上的排列方式；alignItems()：内部子元素在交叉轴（与子元素默认排列方向垂直的方向）上的排列方式；
关于主轴和交叉轴的解释，图示如下：
示例代码：
build() {
Column() {
Row() {
Column().width(100).height(50).backgroundColor('white')
}
.justifyContent(FlexAlign.Center) // 让内部子元素在父宽度范围内左右居中对齐
.alignItems(VerticalAlign.Top) // 让内部子元素在父宽高范围内靠顶部对齐
.size({ width: '100%', height: 100 })
.backgroundColor('blue')
Row()
.size({ width: '100%', height: 100 })
.backgroundColor('red')
}
.justifyContent(FlexAlign.Center) // 让内部子元素在父级高度范围内上下居中对齐
.width('100%').height('100%')
.backgroundColor('#eeeeee')
}
代码预览效果如下图：
3、属性取值
justifyContent() 和 alignItems() 是线性布局中非常常用的两种样式属性，它们的属性取值都是从ArkTS预设好的枚举值中来获取设置。
具体属性取值如下：
| 排列方式 | justifyContent()属性值 | alignItems()属性值 |
|---|---|---|
| 靠上对齐 | FlexAlign.Start | VerticalAlign.Top |
| 靠下对齐 | FlexAlign.End | VerticalAlign.Bottom |
| 上下居中对齐 | FlexAlign.Center | VerticalAlign.Center |
| 靠左对齐 | FlexAlign.Start | HorizontalAlign.Start |
| 考右对齐 | FlexAlign.End | HorizontalAlign.End |
| 左右居中对齐 | FlexAlign.Center | HorizontalAlign.Center |
| 相邻元素间距相等，首尾两端靠边 | FlexAlign.SpaceBetween | |
| 相邻元素间距相等，首尾元素边距是相邻元素边距的一半 | FlexAlign.SpaceAround | |
| 所有元素间距都相等 | FlexAlign.SpaceEvenly |
💡💡💡 Tips 小技巧
每一个属性的取值都有很多种可能，我们不用刻意的去记忆这些取值，只需要在属性方法写好后，将鼠标悬停在方法名上，DevEco Studio就会提示我们该属性的取值是哪一种枚举类型：
确定好枚举类型后，只需要在枚举类型代码后再敲一个点.，DevEco Studio就会弹出当前枚举可选的取值：
