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

1、描述

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

2、子组件

可以包含GridCol子组件。

3、接口

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

4、参数

5、GridRowColumnOption枚举说明：

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

6、GutterOption说明：

7、GridRowSizeOption说明：

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

8、BreakPoints说明：

  // 启用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枚举类型：

10、GridRowDirection枚举类型：

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

说明：

栅格元素仅支持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、效果图