第十三讲_ArkUI栅格布局(GridRow/GrowCol)

发布时间:2024年01月24日

1. 栅格布局概述

GridRow 为栅格容器组件,需与栅格子组件 GridCol 联合使用。

  • 栅格布局中将页面划分为等宽的列数和行数
  • 栅格布局中可以调整列与列之间和行与行之间的间距
  • 栅格布局中当页面元素的数量超出了一行或一列的容量时,自动换到下一行或下一列

2. GridRow的使用

2.1 设置栅格布局的总列数

GridRow 中通过 columns 参数设置栅格布局的总列数,columns 等于 12(默认值)。

@Entry
@Component
struct GridRowLayout {
  build() {
    GridRow({columns: 4}) {
      GridCol() {
        Text("第一个GridCol")
      }
      .backgroundColor(Color.Red)

      GridCol() {
        Text("第二个GridCol")
      }
      .backgroundColor(Color.Green)

      GridCol() {
        Text("第三个GridCol")
      }
      .backgroundColor(Color.Blue)

      GridCol() {
        Text("第四个GridCol")
      }
      .backgroundColor(Color.Pink)
    }
  }
}

在这里插入图片描述
示例代码中,设置栅格布局的Columns=4,表示4个GridCol子组件会占用一行。

2.2 设置栅格布局的排列方向

GridRowdirection 参数来指定 GridCol 在栅格容器中的排列方向。

  • GridRowDirection.Row:从左往右排列(默认值)
  • GridRowDirection.RowReverse:从右往左排列
@Entry
@Component
struct GridRowLayout {
  build() {
    GridRow({columns: 4, direction: GridRowDirection.RowReverse}) {
      GridCol() {
        Text("第一个GridCol")
      }
      .backgroundColor(Color.Red)

      GridCol() {
        Text("第二个GridCol")
      }
      .backgroundColor(Color.Green)

      GridCol() {
        Text("第三个GridCol")
      }
      .backgroundColor(Color.Blue)

      GridCol() {
        Text("第四个GridCol")
      }
      .backgroundColor(Color.Pink)
    }
  }
}

在这里插入图片描述

2.3 设置栅格布局中子组件间距

GridRow 中通过 gutter 参数设置子元素在水平(x轴)和垂直(y轴)方向的间距。

@Entry
@Component
struct GridRowLayout {
  build() {
    GridRow({columns: 4, direction: GridRowDirection.RowReverse, gutter: {x: 10, y: 10}}) {
      GridCol() {
        Text("第一个GridCol")
      }
      .backgroundColor(Color.Red)

      GridCol() {
        Text("第二个GridCol")
      }
      .backgroundColor(Color.Green)

      GridCol() {
        Text("第三个GridCol")
      }
      .backgroundColor(Color.Blue)

      GridCol() {
        Text("第四个GridCol")
      }
      .backgroundColor(Color.Pink)

      GridCol() {
        Text("第五个GridCol")
      }
      .backgroundColor(Color.Orange)
    }
  }
}

在这里插入图片描述

3. GridCol的使用

3.1 设置一个GridCol占栅格布局的列数

GridCol 中通过 span 参数设置在栅格布局中占的列数,span 等于 1(默认值)。

@Entry
@Component
struct GridRowLayout {
  build() {
    GridRow({columns: 4, direction: GridRowDirection.RowReverse, gutter: {x: 10, y: 10}}) {
      GridCol() {
        Text("第一个GridCol")
      }
      .backgroundColor(Color.Red)

      GridCol() {
        Text("第二个GridCol")
      }
      .backgroundColor(Color.Green)

      GridCol() {
        Text("第三个GridCol")
      }
      .backgroundColor(Color.Blue)

      GridCol() {
        Text("第四个GridCol")
      }
      .backgroundColor(Color.Pink)

      // 设置一个GridCol占栅格布局的4列
      GridCol({span: 4}) {
        Text("第五个GridCol")
      }
      .backgroundColor(Color.Orange)
    }
  }
}

在这里插入图片描述

3.2 设置GridCol在栅格布局中偏移列数

GridCol 中通过 offset 参数设置在栅格布局中偏移的列数,offset 等于 0(默认值)。

@Entry
@Component
struct GridRowLayout {
  build() {
    GridRow({columns: 4, direction: GridRowDirection.RowReverse, gutter: {x: 10, y: 10}}) {
      GridCol() {
        Text("第一个GridCol")
      }
      .backgroundColor(Color.Red)

      GridCol() {
        Text("第二个GridCol")
      }
      .backgroundColor(Color.Green)

      GridCol() {
        Text("第三个GridCol")
      }
      .backgroundColor(Color.Blue)

      GridCol() {
        Text("第四个GridCol")
      }
      .backgroundColor(Color.Pink)

      // 设置一个GridCol占栅格布局的2列
      // 设置GridCol偏移1列
      GridCol({span: 2, offset: 1}) {
        Text("第五个GridCol")
      }
      .backgroundColor(Color.Orange)
    }
  }
}

在这里插入图片描述

3.3 设置GridCol在栅格布局中顺序

GridCol 中通过 order 参数设置在栅格布局中排列顺序,order 等于0(默认)。order 较小的组件在前,较大的在后。没有设置order参数的,按照代码的先后顺序排列。

@Entry
@Component
struct GridRowLayout {
  build() {
    GridRow({columns: 4, gutter: {x: 10, y: 10}}) {
      GridCol() {
        Text("第一个GridCol")
      }
      .backgroundColor(Color.Red)
      
      // 设置GridCol的order为0
      GridCol({order: 0}) {
        Text("第二个GridCol")
      }
      .backgroundColor(Color.Green)

      // 设置GridCol的order为1
      GridCol({order: 1}) {
        Text("第三个GridCol")
      }
      .backgroundColor(Color.Blue)

      GridCol() {
        Text("第四个GridCol")
      }
      .backgroundColor(Color.Pink)

      // 设置一个GridCol占栅格布局的2列
      // 设置GridCol偏移1列
      // 设置GridCol的顺序为1
      GridCol({span: 2, offset: 1, order: 2}) {
        Text("第五个GridCol")
      }
      .backgroundColor(Color.Orange)
    }
  }
}

在这里插入图片描述

示例代码中,第一个GridCol子组件没有设置orderorder默认等于0;第二个GridCol子组件设置order等于0;第三个GridCol子组件设置order等于1;第四个GridCol子组件没有设置orderorder默认等于0;第五个GridCol子组件设置order等于2。所以最终显示的顺序为:第一个GridCol、第二个GridCol、第四个GridCol、第三个GridCol、第五个GridCol

4. 栅格系统断点

栅格系统以设备的水平宽度作为断点依据,定义设备的宽度类型,形成了一套断点规则。

栅格系统默认断点将设备宽度分为 xs、sm、md、lg 四类:

  • xs:最小宽度类型设备[0, 320)
  • sm:小宽度类型设备[320, 520)
  • md:中等宽度类型设备[520, 840)
  • lg:大宽度类型设备[840, +∞)

4.1 GridRow 自定义断点

GridRow 中通过 breakpoints 参数自定义修改断点的取值范围,最多支持 6 个断点:

  • xs:最小宽度类型设备
  • sm:小宽度类型设备
  • md:中等宽度类型设备
  • lg:大宽度类型设备
  • xl:特大宽度类型设备
  • xxl:超大宽度类型设备
GridRow({
  breakpoints: {
    // 表示启用xs、sm、md、lg、xl、xxl共6个断点,小于200vp为xs,200vp-300vp为sm,300vp-400vp为md,4000vp-500vp为lg,500vp-600vp为xl,大于600vp为xxl
    value: ["200vp", "300vp", "400vp", "500vp", "600vp"],
    reference: BreakpointsReference.WindowSize,
  },
});

4.2 应用断点适配不同宽度设备

GridRow 的 columns 参数,GridCol 的 span、offset 参数可以根据断点分别设置不同的值。

例如:GridRow 的 columns 参数设置

  • xs(最小宽度类型设备)时,栅格布局的列数为2
  • sm(小宽度类型设备)时,栅格布局的列数为2
  • md(中等宽度类型设备)时,栅格布局的列数为4
  • lg(大宽度类型设备)时,栅格布局的列数为4
@Entry
@Component
struct GridRowLayout {
  build() {
    GridRow({
      columns: {
        xs: 2,
        sm: 2,
        md: 4,
        lg: 4
      }
    }) {
      GridCol() {
        Text("第一个GridCol")
      }
      .backgroundColor(Color.Red)

      GridCol({order: 0}) {
        Text("第二个GridCol")
      }
      .backgroundColor(Color.Green)

      GridCol({order: 1}) {
        Text("第三个GridCol")
      }
      .backgroundColor(Color.Blue)

      GridCol() {
        Text("第四个GridCol")
      }
      .backgroundColor(Color.Pink)

    }
  }
}

在这里插入图片描述

文章来源:https://blog.csdn.net/wenqi1992/article/details/135813118
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。