【元服务】基础布局——栅格布局基础

栅格布局概述

栅格布局（Grid Layout）是一种基于网格线的二维布局方式。它通过将页面划分为多个等宽的列和行，使得页面元素的定位和排列更加直观和有规律性。这种布局方式不仅优化了用户体验，还提高了设计和开发的效率。

特点与优势

响应式布局： 栅格布局能够根据不同设备的屏幕尺寸自动调整布局，确保在不同设备上都能呈现一致的用户体验。 直观易用： 通过将页面划分为多个等宽的列和行，栅格布局使得页面元素的定位和排列更加直观和易于理解。 高效开发： 栅格布局为系统提供了统一的定位标注标准，降低了设计和开发的复杂度，提高了工作效率。 定制化能力强： 通过调整列与列、行与行之间的间距以及元素的占位和顺序等属性，栅格布局能够满足多种复杂的布局需求。

栅格容器

栅格系统断点 栅格系统以设备的水平宽度（屏幕密度像素值，单位vp）作为断点依据，定义设备的宽度类型，形成了一套断点规则。开发者可根据需求在不同的断点区间实现不同的页面布局效果。

栅格系统默认断点将设备宽度分为xs、sm、md、lg四类，尺寸范围如下：

在GridRow栅格组件中，允许开发者使用breakpoints自定义修改断点的取值范围，最多支持6个断点，除了默认的四个断点外，还可以启用xl，xxl两个断点，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备的布局设置。

针对断点位置，开发者根据实际使用场景，通过一个单调递增数组设置。由于breakpoints最多支持六个断点，单调递增数组长度最大为5。

使用示例：

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

布局的总列数 GridRow中通过columns设置栅格布局的总列数。

columns默认值为12，即在未设置columns时，任何断点下，栅格布局被分成12列。

当columns类型为GridRowColumnOption时，支持下面六种不同尺寸（xs, sm, md, lg, xl, xxl）设备的总列数设置，各个尺寸下数值可不同。

排列方向 栅格布局中，可以通过设置GridRow的direction属性来指定栅格子组件在栅格容器中的排列方向。该属性可以设置为GridRowDirection.Row（从左往右排列）或GridRowDirection.RowReverse（从右往左排列），以满足不同的布局需求。通过合理的direction属性设置，可以使得页面布局更加灵活和符合设计要求。

子组件默认从左往右排列。

GridRow({ direction: GridRowDirection.Row }){}

子组件间距 GridRow中通过gutter属性设置子元素在水平和垂直方向的间距。

当gutter类型为number时，同时设置栅格子组件间水平和垂直方向边距且相等。下例中，设置子组件水平与垂直方向距离相邻元素的间距为10。

GridRow({ gutter: 10 }){}

当gutter类型为GutterOption时，单独设置栅格子组件水平垂直边距，x属性为水平方向间距，y为垂直方向间距。

栅格组件的嵌套使用 栅格组件也可以嵌套使用，完成一些复杂的布局。

以下是一个示例：

/**
 * @author 坚果派-九龙
 * @date 2024年11月19日12:43:42
 */
@Entry
@Component
struct ThirdPage {
  build() {
    GridRow() {
      GridCol({ span: { sm: 12 } }) {
        Row() {
          Text('坚果派-九龙-元服务栅格布局')
            .fontColor(Color.White)
            .fontSize(18)
            .width('100%')
            .height('100%')
            .textAlign(TextAlign.Start)
            .fontWeight(FontWeight.Bolder)
        }.width('100%').height('100%').backgroundColor(Color.Black)
      }.width('100%').height('10%')

      GridCol({ span: { sm: 12 } }) {
        GridRow() {
          GridCol({ span: { sm: 2 } }) {
            Row() {
              Text('左侧菜单').fontSize(24)
            }
            .height('100%')
          }.backgroundColor('#66CCFF')

          GridCol({ span: { sm: 10 } }) {
            Row() {
              Text('右侧正文').fontSize(24)
            }
            .height('100%')
          }.backgroundColor("#F2F2F2")
        }.width('100%').height('80%')
      }

      GridCol({ span: { sm: 12 } }) {
        Row() {
          Text('底部')
            .fontColor(Color.White)
            .fontSize(24)
            .width('100%')
            .height('100%')
            .textAlign(TextAlign.Center)
        }.width('100%').height('100%').backgroundColor(Color.Black)
      }.width('100%').height('10%')
    }
  }
}