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、效果图