常用的页面布局组件
- 线性布局
- 层叠布局
- 弹性布局
- 网格布局
1.线性布局
概述：
线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column布局完成。根据子元素布局排列的不同，选择不同的容器。应用场景：如果布局内子元素超过1个时，且能够以某种方式线性排列时优先考虑此布局。
Row容器：水平方向排列
Column容器：垂直方向排列
Row容器的主轴方向为水平方向（从左向右），侧轴方向为垂直方向。子组件会依次水平排列 Column容器的主轴方向为垂直方向（从上往下），侧轴方向为水平方向。子组件会依次垂直排列
常用属性
| 属性名 | 作用 |
|---|---|
| width | 设置组件宽度（通用属性） |
| height | 设置组件宽度（通用属性） |
| backgroundColor | 设置组件背景色（通用属性） |
| justifyContent() | 主轴对齐方式，枚举取值 |
| alignItems() | 侧轴对齐方式，枚举取值 |
| layoutWeight | 自适应缩放：父组件主轴方向占据剩余空间 |
元素间距
使用space参数设置，取值为number类型
代码示例
@Entry
@Component
struct Index {
build() {
Column() {
Row({space: 10}) {//里面组件水平排列
// 左侧
Column() {//里面组件垂直排列
Text('Column子组件')
.fontSize(14)
.fontColor('#444')
Row() {
Text('Row子组件')
.fontSize(12)
.fontColor('#999')
.layoutWeight(1)
Text()
.width(20)
.height(20)
.backgroundColor(Color.Pink)
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}
.height('100%')
.layoutWeight(1)// 占剩余宽度
// 水平左对齐 -- 交叉轴
.alignItems(HorizontalAlign.Start)
// 垂直两端对齐 -- 主轴
.justifyContent(FlexAlign.SpaceBetween)
// 右侧
Text()
.width(100)
.height(100)
.backgroundColor(Color.Pink)
}
.width('100%')
.height(80)
// .backgroundColor('#ccc')
.padding(5)
.margin({top: 20})
}
}
}
运行显示
2.层叠布局：stack容器
概述：
层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。应用场景：用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。
Stack作为容器，容器内的子元素的顺序为Item1->Item2->Item3
Stack组件为容器组件
容器内可包含各种子元素。其中子元素默认进行居中堆叠。子元素被约束在Stack下，进行自己的样式定义以及排列。
对齐方式
alignContent参数设置对齐方式：stack容器将内部空间划分为9部分为三行三列的九宫格样式，可以通过alignContent：Alignment枚举的方式对子元素进行布局
Z序控制：zIndex
Stack容器中子组件显示层级关系可以通过zIndex属性改变。zIndex属性的值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方。
代码示例
@Entry
@Component
struct Index {
build() {
Column(){
Stack({ alignContent: Alignment.BottomEnd }) {//alignContent参数设置stack容器内组件的位置
Column(){}
.width('90%')
.height(130)
.backgroundColor(Color.Gray)
Text('text')
.width('60%')
.height('60%')
.backgroundColor(Color.Orange)
// .zIndex(1)//如果设置zindex，则先进的元素会覆盖后进的元素
Button('button')
.width('30%')
.height('30%')
.backgroundColor('#ff8ff3eb')
.fontColor('#000')
}
.width('100%')
.height(150)
.backgroundColor(Color.Pink)
}
.margin(10)
}
}
运行显示
3.弹性布局：Flex容器
概述
弹性布局分为单行布局和多行布局。默认情况下，Flex 容器中的子元素都排在一条线（又称“轴线”）上。子元素尺寸总和大于 Flex 容器尺寸时，子元素尺寸会自动挤压。
wrap 参数控制当子元素主轴尺寸之和大于容器主轴尺寸时，Flex 是单行布局还是多行布局。在多行布局时，通过交叉轴方向，确认新行排列方向。
Flex 主轴默认水平方向,Flex 侧轴默认是垂直方向。
布局方向和换行
通过设置参数direction，可以决定主轴的方向，从而控制子元素的排列方向。
wrap: FlexWrap.Wrap换行
对齐方式
通过justifyContent参数设置子元素在主轴方向的对齐方式。
通过alignItems参数设置子元素在交叉轴的对齐方式。
@Entry
@Component
struct Index {
build() {
Column(){
Flex({ justifyContent: FlexAlign.SpaceBetween,//对齐方式，默认为 FlexAlign.Start，SpaceBetween: 两端对齐,SpaceAround: 组件之间间距为边界间距的2倍,SpaceEvenly:每个间距一样
direction: FlexDirection.RowReverse,//FlexDirection.RowReverse: 倒序
wrap: FlexWrap.Wrap,//FlexWrap.Wrap: 换行
}) {
Text('0').width(50).height(50).backgroundColor(0xD2B48C)
Text('1').width(50).height(50).backgroundColor(0xF5DEB3)
Text('2').width(50).height(50).backgroundColor(0xD2B48C)
Text('3').width(50).height(50).backgroundColor(0xF5DEB3)
Text('4').width(50).height(50).backgroundColor(0xD2B48C)
Text('5').width(50).height(50).backgroundColor(0xF5DEB3)
Text('6').width(50).height(50).backgroundColor(0xD2B48C)
Text('7').width(50).height(50).backgroundColor(0xF5DEB3)
}
.width('100%')
.backgroundColor(0xAFEEEE)
}
.margin(10)
}
}
运行显示
4.网格布局：Grid/GridItem
概述
网格布局是由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。 ArkUI提供了Grid容器组件和子组件GridItem，用于构建网格布局
Grid容器的子组件只能为GridItem组件，GridItem组件只能包含一个根组件
Grid属性
| 属性名 | 类型 | 用法 |
|---|---|---|
| columnsTemplate | string | 设置当前网格布局列的数量或最小列宽值，不设置时默认1列。例如, '1fr 1fr 2fr' 是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。 |
| rowsTemplate | string | 设置当前网格布局行的数量或最小行高值，不设置时默认1行。例如, '1fr 1fr 2fr'是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。 |
| columnsGap | Length | 设置列与列的间距。默认值：0 |
| rowsGap | Length | 设置行与行的间距。默认值：0 |
GridItem属性
| 属性名 | 类型 | 用法 |
|---|---|---|
| rowStart | number | 指定当前元素起始行号。 |
| rowEnd | number | 指定当前元素终点行号。 |
| columnStart | number | 指定当前元素起始列号。 |
| columnEnd | number | 指定当前元素终点列号。 |
代码示例
@Entry
@Component
struct Page10_Grid_Merge {
// 快速生成 12 个元素的数组
// Array.from 是 Array 这个类上面的静态方法
// {length:12} 是一个对象，有 length 属性，值为 12
nums: number[] = Array.from({ length: 12 })
build() {
Column() {
Text('合并行列')
.fontSize(20)
.fontWeight(900)
.padding(10)
Grid() {
ForEach(this.nums, (item: number, index: number) => {
if (index === 2) {//判断是否为合并的组件
GridItem() {
Text(index + '')
.fontColor(Color.White)
.fontSize(30)
}
.backgroundColor('#9dc3e6')
.columnStart(3)//列合并开始位置
.columnEnd(4)//列合并结束位置：结束值要比起始值大
} else if (index === 3) {
GridItem() {
Text(index + '')
.fontColor(Color.White)
.fontSize(30)
}
.backgroundColor('#9dc3e6')
.rowStart(2)//行合并开始位置
.rowEnd(3)//行合并结束位置
} else {
GridItem() {
Text(index + '')
.fontColor(Color.White)
.fontSize(30)
}
.backgroundColor('#9dc3e6')
}
})
}
.columnsTemplate('1fr 1fr 1fr 1fr')//四列
.rowsTemplate('1fr 1fr 1fr')//四行
.width('100%')
.height(260)
.rowsGap(10)
.columnsGap(10)
.padding(10)
}
.width('100%')
.height('100%')
}
}
运行显示
设置滚动
上述代码为固定网格，不能滚动，想要设置滚动则 columnsTemplate()和rowsTemplate()属性设置一个就可以滚动
设置columnsTemplate()为垂直滚动，设置rowsTemplate()为水平滚动
@Entry
@Component
struct Shopping {
@State services: Array<string> = ['直播', '进口', '生鲜', '超市', '全球购', '闪购', '拍卖', '金融', '全球购', '生鲜', '超市', '全球购', '闪购', '拍卖', '金融']
build() {
Column({ space: 5 }) {
Grid() {
ForEach(this.services, (service: string, index) => {
GridItem() {
Text(service)
.fontSize(24)
.fontColor(Color.White)
.width('100%')
.height(50)
.backgroundColor(Color.Blue)
.textAlign(TextAlign.Center)
}
.width('25%')
}, (service:string):string => service)
}
.rowsTemplate('1fr 1fr') // 只设置rowsTemplate属性，当内容超出Grid区域时，可水平滚动。
.rowsGap(15)
.columnsGap(15)
}
.width('100%')
.height(120)
}
}
