第十节HarmonyOS 常用容器组件3-GridRow

1、描述

栅格容器组件，仅可以和栅格子组件（GridCol）在栅格布局场景中使用。

2、子组件

可以包含GridCol子组件。

3、接口

GridRow(options:{columns: number | GridRowColumnOption, gutter?: Length | GutterOption, Breakpoints?: Breakpoints, direction?: GridRowDirection})

4、参数

参数名	参数类型	必填	描述
columns	number | GridRowColumnOption	是	设置布局列数。
gutter	Length | GutterOption	否	栅格布局间距，x代表水平方向，y代表竖直方向。
Breakpoints	Breakpoints	否	设置断点值的断点数列以及基于窗口或容器尺寸的相应参照。
direction	GridRowDirection	否	栅格布局排列方向。

5、GridRowColumnOption枚举说明：

栅格在不同宽度设备类型下，栅格列数。

参数名	参数类型	参数描述
xs	number	最小宽度类型设备。
sm	number	小宽度类型设备。
md	number	中等宽度类型设备。
lg	number	大宽度类型设备。
xl	number	特大宽度类型设备。
xxl	number	超大宽度类型设备。

6、GutterOption说明：

参数名	参数类型	参数描述
x	Length | GridRowSizeOption	水平gutter option。
y	Length | GridRowSizeOption	竖直gutter option。

7、GridRowSizeOption说明：

栅格在不同宽度设备类型下，gutter的大小。

参数名	参数类型	参数描述
xs	number	最小宽度类型设备。
sm	number	小宽度类型设备。
md	number	中等宽度类型设备。
lg	number	大宽度类型设备。
xl	number	特大宽度类型设备。
xxl	number	超大宽度类型设备。

8、BreakPoints说明：

参数名	参数类型	参数描述
value	Array<string>	设置段带你位置的单调递增数组。默认值：[“320vp”, “520vp”, “840vp”]。
reference	BreakpointsReference	断点切换参照物。

  // 启用xs、sm、md共3个断点

  breakpoints: {value: ["100vp", "200vp"]}

  // 启用xs、sm、md、lg共4个断点，断点范围值必须单调递增

  breakpoints: {value: ["320vp", "520vp", "840vp"]}

  // 启用xs、sm、md、lg、xl共5个断点，断点范围数量不可超过断点可取值数量-1

  breakpoints: {value: ["320vp", "520vp", "840vp", "1080vp"]}

9、BreakpointsReference枚举类型：

枚举名	描述
WindowSize	以窗口为参照。
ComponentSize	以容器为参照。

10、GridRowDirection枚举类型：

枚举名	描述
row	栅格元素按照行为方向排列。
rowReverse	栅格元素按照逆序行为方法排列。

栅格最多支持xs、sm、md、lg、xl、xxl六个断点，且名称不可修改。假设传入的数组是[n0, n1, n2, n3, n4]，各个断点取值如下：

断点	取值范围
xs	[0, n0)
sm	[n0, n1)
md	[n2, n2)
lg	[n3, n3)
xl	[n4, n4)
xxl	[n5, INF)

说明：

栅格元素仅支持Row/RowReverse排列，不支持column/ColumnReverse方向排列。

栅格子组件仅能通过span、offset计算子组件位置与大小。多个子组件span超过规定列数时自动换行。

单个元素span大小超过最大列数时后台默认span为最大column数。

新一行的Offset加上子组件的span超过总列数时，将下一个子组件在新的一行放置。

例：Item1: GridCol({ span: 6})， Item2: GridCol({ span: 8, offset:11})

11、事件

名称：onBreakpointChange(callback: (breakpoints: string) => void)

功能说明：断点发生变化时触发回调。

参数：breakpoints - string - 取值为"xs"、"sm"、"md"、"lg"、"xl"、"xxl"。

12、示例

import router from '@ohos.router'@Entry
@Component
struct GridRowPage {@State message: string = '栅格容器组件，仅可以和栅格子组件(GridCol)在栅格布局场景中使用。'@State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];build() {Row() {Scroll() {Column() {Text(this.message).fontSize(20).fontWeight(FontWeight.Bold).width("96%")GridRow({columns: 5,gutter: { x: 5, y: 10 },breakpoints: { value: ["400vp", "600vp", "800vp"], reference: BreakpointsReference.WindowSize }}) {ForEach(this.bgColors, (color) => {GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {Row().width("100%").height("20vp")}.borderColor(color).borderWidth(2)})}.width("100%").height("100%").margin({ top: 12 }).onBreakpointChange((breakpoint) => {console.log("currentBp = " + breakpoint)})GridRow({columns: 6,gutter: { x: 12, y: 20 },breakpoints: { value: ["400vp", "600vp", "800vp"], reference: BreakpointsReference.WindowSize }}) {ForEach(this.bgColors, (color) => {GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {Row().width("100%").height("20vp")}.borderColor(color).borderWidth(2)})}.width("100%").height("100%").margin({ top: 12 })Blank(12)Button("GridRow文本文档").fontSize(20).backgroundColor('#007DFF').width('96%').onClick(() => {// 处理点击事件逻辑router.pushUrl({url: "pages/containerComponents/gridRow/GridRowDesc",})})}.width('100%')}}.padding({ top: 12, bottom: 12 })}
}

13、效果图