简单了解栅格布局

栅格布局

在鸿蒙系统中使用栅格布局，主要是通过GridRow栅格容器组件和GridCol栅格子组件联合来实现的，首先我们需要创建一些组件 创建 GridRow 组件 GridRow组件是栅格布局的容器，用于定义栅格的整体结构和属性. 以下是一些常见的属性设置及示例： 设置列数：使用columns属性来设置栅格布局的总列数，默认值为 12。例如：

  columns: 8  // 将栅格布局分为8列
}) {
}

设置间距：通过gutter属性可以设置栅格子组件之间的间距，包括水平方向间距x和垂直方向间距y。例如：

  gutter: { x: 10, y: 20 }  // 水平间距为10，垂直间距为20
}) {
  // 在这里添加GridCol子组件
}

设置断点：使用breakpoints属性来设置断点，以实现不同设备尺寸下的自适应布局。breakpoints包含value和reference两个属性，value是一个设置断点位置的单调递增数组，最多支持 6 个断点；reference用于设置断点切换参照物，可选择以窗口为参照物WindowSize或以容器为参照物ComponentSize。例如 ：

  gutter: { x: 10, y: 20 }  // 水平间距为10，垂直间距为20
}) {
  // 在这里添加GridCol子组件
}

设置排列方向：使用direction属性来设置栅格元素的排列方向，可设置为Row表示栅格元素按照行方向排列，或RowReverse表示栅格元素按照逆序行方向排列. 例如：

  direction: 'RowReverse'  // 栅格元素逆序行方向排列
}) {
  // 在这里添加GridCol子组件
}

创建 GridCol 组件 GridCol组件是栅格布局中的子组件，用于定义每个栅格单元的具体位置和占用空间. 常见属性及示例如下： 设置占用列数：使用span属性来设置GridCol组件占用GridRow容器的列数。可以根据不同的设备断点设置不同的占用列数，以实现响应式布局。例如 ：

  breakpoints: {
    value: ('320vp', '600vp', '840vp')
  }
}) {
  ForEach(this.items, (item: MovieItem) => {
    GridCol({
      span: {
        sm: 6,  // 在sm尺寸设备下，一个GridCol占6列，一行2个元素
        md: 3,  // 在md尺寸设备下，一个GridCol占3列，一行4个元素
        lg: 2   // 在lg尺寸设备下，一个GridCol占2列，一行6个元素
      }
    }) {
      // 在这里添加具体的内容
    }
  })
}

设置偏移列数：通过offset属性可以设置GridCol组件相对于原本位置偏移的列数，用于更精细地调整元素的位置。 设置元素序号：使用order属性来设置元素的序号，根据栅格子组件的序号从小到大对栅格子组件进行排序，可用于改变元素的显示顺序. 例如：

组合使用示例 以下是一个完整的示例，展示了如何在鸿蒙系统中使用栅格布局来创建一个简单的页面布局 ： `@Entry @Component struct GridLayoutExample { @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];

build() { GridRow({ breakpoints: { value: ('200vp', '300vp', '400vp', '500vp', '600vp'), reference: BreakpointsReference.WindowSize }, gutter: { x: 5, y: 5 }, columns: 12 }) { ForEach(this.bgColors, (color: Color, index?: number | undefined) => { GridCol({ span: { xs: 2, sm: 3, md: 4, lg: 6, xl: 8, xxl: 12 } }) { Row() { Text(${index}).width('100%').height('50vp') }.backgroundColor(color) } }) } } }` 在上述示例中，GridRow组件作为容器，设置了断点、间距和列数等属性。GridCol组件作为子组件，根据不同的设备尺寸设置了占用列数，从而实现了一个在不同设备上自适应的彩色方块布局。