ArkUI栅格布局（GridRow/GrowCol）
- 1. 栅格布局概述
- 2. GridRow的使用
- 2.1 设置栅格布局的总列数
- 2.2 设置栅格布局的排列方向
- 2.3 设置栅格布局中子组件间距
- 3. GridCol的使用
- 3.1 设置一个GridCol占栅格布局的列数
- 3.2 设置GridCol在栅格布局中偏移列数
- 3.3 设置GridCol在栅格布局中顺序
- 4. 栅格系统断点
- 4.1 GridRow 自定义断点
- 4.2 应用断点适配不同宽度设备
1. 栅格布局概述
GridRow 为栅格容器组件，需与栅格子组件 GridCol 联合使用。
- 栅格布局中将页面划分为等宽的列数和行数
- 栅格布局中可以调整列与列之间和行与行之间的间距
- 栅格布局中当页面元素的数量超出了一行或一列的容量时，自动换到下一行或下一列
2. GridRow的使用
2.1 设置栅格布局的总列数
GridRow 中通过 columns 参数设置栅格布局的总列数，columns 等于 12（默认值）。
@Entry
@Component
struct GridRowLayout {
build() {
GridRow({columns: 4}) {
GridCol() {
Text("第一个GridCol")
}
.backgroundColor(Color.Red)
GridCol() {
Text("第二个GridCol")
}
.backgroundColor(Color.Green)
GridCol() {
Text("第三个GridCol")
}
.backgroundColor(Color.Blue)
GridCol() {
Text("第四个GridCol")
}
.backgroundColor(Color.Pink)
}
}
}
示例代码中，设置栅格布局的Columns=4，表示4个GridCol子组件会占用一行。
2.2 设置栅格布局的排列方向
GridRow 的 direction 参数来指定 GridCol 在栅格容器中的排列方向。
- GridRowDirection.Row：从左往右排列（默认值）
- GridRowDirection.RowReverse：从右往左排列
@Entry
@Component
struct GridRowLayout {
build() {
GridRow({columns: 4, direction: GridRowDirection.RowReverse}) {
GridCol() {
Text("第一个GridCol")
}
.backgroundColor(Color.Red)
GridCol() {
Text("第二个GridCol")
}
.backgroundColor(Color.Green)
GridCol() {
Text("第三个GridCol")
}
.backgroundColor(Color.Blue)
GridCol() {
Text("第四个GridCol")
}
.backgroundColor(Color.Pink)
}
}
}
2.3 设置栅格布局中子组件间距
GridRow 中通过 gutter 参数设置子元素在水平（x轴）和垂直（y轴）方向的间距。
@Entry
@Component
struct GridRowLayout {
build() {
GridRow({columns: 4, direction: GridRowDirection.RowReverse, gutter: {x: 10, y: 10}}) {
GridCol() {
Text("第一个GridCol")
}
.backgroundColor(Color.Red)
GridCol() {
Text("第二个GridCol")
}
.backgroundColor(Color.Green)
GridCol() {
Text("第三个GridCol")
}
.backgroundColor(Color.Blue)
GridCol() {
Text("第四个GridCol")
}
.backgroundColor(Color.Pink)
GridCol() {
Text("第五个GridCol")
}
.backgroundColor(Color.Orange)
}
}
}
3. GridCol的使用
3.1 设置一个GridCol占栅格布局的列数
GridCol 中通过 span 参数设置在栅格布局中占的列数，span 等于 1（默认值）。
@Entry
@Component
struct GridRowLayout {
build() {
GridRow({columns: 4, direction: GridRowDirection.RowReverse, gutter: {x: 10, y: 10}}) {
GridCol() {
Text("第一个GridCol")
}
.backgroundColor(Color.Red)
GridCol() {
Text("第二个GridCol")
}
.backgroundColor(Color.Green)
GridCol() {
Text("第三个GridCol")
}
.backgroundColor(Color.Blue)
GridCol() {
Text("第四个GridCol")
}
.backgroundColor(Color.Pink)
// 设置一个GridCol占栅格布局的4列
GridCol({span: 4}) {
Text("第五个GridCol")
}
.backgroundColor(Color.Orange)
}
}
}
3.2 设置GridCol在栅格布局中偏移列数
GridCol 中通过 offset 参数设置在栅格布局中偏移的列数，offset 等于 0（默认值）。
@Entry
@Component
struct GridRowLayout {
build() {
GridRow({columns: 4, direction: GridRowDirection.RowReverse, gutter: {x: 10, y: 10}}) {
GridCol() {
Text("第一个GridCol")
}
.backgroundColor(Color.Red)
GridCol() {
Text("第二个GridCol")
}
.backgroundColor(Color.Green)
GridCol() {
Text("第三个GridCol")
}
.backgroundColor(Color.Blue)
GridCol() {
Text("第四个GridCol")
}
.backgroundColor(Color.Pink)
// 设置一个GridCol占栅格布局的2列
// 设置GridCol偏移1列
GridCol({span: 2, offset: 1}) {
Text("第五个GridCol")
}
.backgroundColor(Color.Orange)
}
}
}
3.3 设置GridCol在栅格布局中顺序
GridCol 中通过 order 参数设置在栅格布局中排列顺序，order 等于0（默认）。order 较小的组件在前，较大的在后。没有设置order参数的，按照代码的先后顺序排列。
@Entry
@Component
struct GridRowLayout {
build() {
GridRow({columns: 4, gutter: {x: 10, y: 10}}) {
GridCol() {
Text("第一个GridCol")
}
.backgroundColor(Color.Red)
// 设置GridCol的order为0
GridCol({order: 0}) {
Text("第二个GridCol")
}
.backgroundColor(Color.Green)
// 设置GridCol的order为1
GridCol({order: 1}) {
Text("第三个GridCol")
}
.backgroundColor(Color.Blue)
GridCol() {
Text("第四个GridCol")
}
.backgroundColor(Color.Pink)
// 设置一个GridCol占栅格布局的2列
// 设置GridCol偏移1列
// 设置GridCol的顺序为1
GridCol({span: 2, offset: 1, order: 2}) {
Text("第五个GridCol")
}
.backgroundColor(Color.Orange)
}
}
}
示例代码中，第一个GridCol子组件没有设置order，order默认等于0；第二个GridCol子组件设置order等于0；第三个GridCol子组件设置order等于1；第四个GridCol子组件没有设置order，order默认等于0；第五个GridCol子组件设置order等于2。所以最终显示的顺序为：第一个GridCol、第二个GridCol、第四个GridCol、第三个GridCol、第五个GridCol
4. 栅格系统断点
栅格系统以设备的水平宽度作为断点依据，定义设备的宽度类型，形成了一套断点规则。
栅格系统默认断点将设备宽度分为 xs、sm、md、lg 四类：
- xs：最小宽度类型设备[0, 320）
- sm：小宽度类型设备[320, 520)
- md：中等宽度类型设备[520, 840)
- lg：大宽度类型设备[840, +∞)
4.1 GridRow 自定义断点
GridRow 中通过 breakpoints 参数自定义修改断点的取值范围，最多支持 6 个断点：
- xs：最小宽度类型设备
- sm：小宽度类型设备
- md：中等宽度类型设备
- lg：大宽度类型设备
- xl：特大宽度类型设备
- xxl：超大宽度类型设备
GridRow({
breakpoints: {
// 表示启用xs、sm、md、lg、xl、xxl共6个断点，小于200vp为xs，200vp-300vp为sm，300vp-400vp为md，4000vp-500vp为lg，500vp-600vp为xl，大于600vp为xxl
value: ["200vp", "300vp", "400vp", "500vp", "600vp"],
reference: BreakpointsReference.WindowSize,
},
});
4.2 应用断点适配不同宽度设备
GridRow 的 columns 参数，GridCol 的 span、offset 参数可以根据断点分别设置不同的值。
例如：GridRow 的 columns 参数设置
- xs（最小宽度类型设备）时，栅格布局的列数为2
- sm（小宽度类型设备）时，栅格布局的列数为2
- md（中等宽度类型设备）时，栅格布局的列数为4
- lg（大宽度类型设备）时，栅格布局的列数为4
@Entry
@Component
struct GridRowLayout {
build() {
GridRow({
columns: {
xs: 2,
sm: 2,
md: 4,
lg: 4
}
}) {
GridCol() {
Text("第一个GridCol")
}
.backgroundColor(Color.Red)
GridCol({order: 0}) {
Text("第二个GridCol")
}
.backgroundColor(Color.Green)
GridCol({order: 1}) {
Text("第三个GridCol")
}
.backgroundColor(Color.Blue)
GridCol() {
Text("第四个GridCol")
}
.backgroundColor(Color.Pink)
}
}
}
![[BUG] Authentication Error](https://img-blog.csdnimg.cn/direct/a145274518aa41e9a92c02cd79f35425.png)