Grid布局

在GridRow栅格组件中，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备的布局设置。

创建数组

@State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];

设置断点的范围

breakpoints: { // xs、sm、md、lg、xl、 vp*3就是实际我们能看到的像素变化区间 value: ["200vp", "250vp", "300vp", "350vp", "400vp"], reference: BreakpointsReference.WindowSize }

创建页面元素

加强for循环，遍历内容需要写在()中，参数第一个时遍历数组

第二个是（每一项，下标）

可以在预览器区域拉拽，观看其变化

布局的总列数

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

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

修改默认值：

排列方向

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

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

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

子组件间距

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

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

GridRow({ gutter: 10 }){}

四则计算器案例： 使用Grid布局，在Row盒子中嵌套一个个column列小盒子，添加样式 ``

@Entry
@Component
struct Grid6page {
  build() {
    GridRow(){
      GridCol({span:12}){
        TextInput({ placeholder: '0', })
          .type(InputType.Normal)
          .width('100%')
          .height('10%')
          .backgroundColor(Color.White)
          .textAlign(TextAlign.End)
          .fontSize(36)
          .margin({ top: '15%' })
          .placeholderFont({ size: 36 })
      }.width("100%")
      GridCol({span:3}){
        Button('7')
          .type(ButtonType.Normal)
          .fontSize(36)
          .width('100%')
          .height('95%')
      }.height("15%").margin({right:5})
      GridCol({span:3}){
        Button('8')
          .type(ButtonType.Normal)
          .fontSize(36)
          .width('100%')
          .height('95%')
      }.height("15%").margin({right:5})
      GridCol({span:3}){
        Button('9')
          .type(ButtonType.Normal)
          .fontSize(36)
          .width('100%')
          .height('95%')
      }.height("15%").margin({right:5})
      GridCol({span:3}){
        Button('÷')
          .type(ButtonType.Normal)
          .fontSize(36)
          .width('100%')
          .height('95%')
      }.height("15%").margin({right:5})
      GridCol({span:3}){
        Button('4')
          .type(ButtonType.Normal)
          .fontSize(36)
          .width('100%')
          .height('95%')
      }.height("15%").margin({right:5})
      GridCol({span:3}){
        Button('5')
          .type(ButtonType.Normal)
          .fontSize(36)
          .width('100%')
          .height('95%')
      }.height("15%").margin({right:5})
      GridCol({span:3}){
        Button('6')
          .type(ButtonType.Normal)
          .fontSize(36)
          .width('100%')
          .height('95%')
      }.height("15%").margin({right:5})
      GridCol({span:3}){
        Button('x')
          .type(ButtonType.Normal)
          .fontSize(36)
          .width('100%')
          .height('95%')
      }.height("15%").margin({right:5})
      GridCol({span:3}){
        Button('1')
          .type(ButtonType.Normal)
          .fontSize(36)
          .width('100%')
          .height('95%')
      }.height("15%").margin({right:5})
      GridCol({span:3}){
        Button('2')
          .type(ButtonType.Normal)
          .fontSize(36)
          .width('100%')
          .height('95%')
      }.height("15%").margin({right:5})
      GridCol({span:3}){
        Button('3')
          .type(ButtonType.Normal)
          .fontSize(36)
          .width('100%')
          .height('95%')
      }.height("15%").margin({right:5})
      GridCol({span:3}){
        Button('-')
          .type(ButtonType.Normal)
          .fontSize(36)
          .width('100%')
          .height('95%')
      }.height("15%").margin({right:5})
      GridCol({span:3}){
        Button('CE')
          .type(ButtonType.Normal)
          .fontSize(36)
          .width('100%')
          .height('95%')
      }.height("15%").margin({right:5})
      GridCol({span:3}){
        Button('0')
          .type(ButtonType.Normal)
          .fontSize(36)
          .width('100%')
          .height('95%')
      }.height("15%").margin({right:5})
      GridCol({span:3}){
        Button('.')
          .type(ButtonType.Normal)
          .fontSize(36)
          .width('100%')
          .height('95%')
      }.height("15%").margin({right:5})
      GridCol({span:3}){
        Button('+')
          .type(ButtonType.Normal)
          .fontSize(36)
          .width('100%')
          .height('95%')
      }.height("15%").margin({right:5})
      GridCol({span:12}){
        Button('=')
          .type(ButtonType.Normal)
          .fontSize(36)
          .width('100%')
          .height('100%')
      }.height("12%").margin({right:5})
    }.width('100%').backgroundColor(Color.Red).height('100%')
  }
}

效果图：