第十节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、示例

1. import router from '@ohos.router'
3. @Entry
4. @Component
5. struct GridRowPage {
6.   @State message: string = '栅格容器组件，仅可以和栅格子组件(GridCol)在栅格布局场景中使用。'
7.   @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
9.   build() {
10.     Row() {
11.       Scroll() {
12.         Column() {
13.           Text(this.message)
14.             .fontSize(20)
15.             .fontWeight(FontWeight.Bold)
16.             .width("96%")
18.           GridRow({
19.             columns: 5,
20.             gutter: { x: 5, y: 10 },
21.             breakpoints: { value: ["400vp", "600vp", "800vp"], reference: BreakpointsReference.WindowSize }
22.           }) {
23.             ForEach(this.bgColors, (color) => {
24.               GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
25.                 Row().width("100%").height("20vp")
26.               }.borderColor(color).borderWidth(2)
27.             })
28.           }.width("100%").height("100%").margin({ top: 12 })
29.           .onBreakpointChange((breakpoint) => {
30.             console.log("currentBp = " + breakpoint)
31.           })
33.           GridRow({
34.             columns: 6,
35.             gutter: { x: 12, y: 20 },
36.             breakpoints: { value: ["400vp", "600vp", "800vp"], reference: BreakpointsReference.WindowSize }
37.           }) {
38.             ForEach(this.bgColors, (color) => {
39.               GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
40.                 Row().width("100%").height("20vp")
41.               }.borderColor(color).borderWidth(2)
42.             })
43.           }.width("100%").height("100%").margin({ top: 12 })
45.           Blank(12)
46.           Button("GridRow文本文档")
47.             .fontSize(20)
48.             .backgroundColor('#007DFF')
49.             .width('96%')
50.             .onClick(() => {
51.               // 处理点击事件逻辑
52.               router.pushUrl({
53.                 url: "pages/containerComponents/gridRow/GridRowDesc",
54.               })
55.             })
57.         }
58.         .width('100%')
59.       }
60.     }
61.     .padding({ top: 12, bottom: 12 })
62.   }
63. }

复制代码

13、效果图

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。