鸿蒙布局Grid简介

Grid分布介绍

Grid（网格布局） 是在App开发中常用的一种view，Grid会根据Row（行）和Column（列）来展示GirdItem，然后可以将需要展示的内容填充到GridItem中。

现在来看下简单的的展示方式

上述图片中，我们展示了一个3行、4列的布局方式。

开发过程中可通过设置rowsTemplate、和columnsTemplate来确定需要展示的行列数量。

.rowsTemplate('1fr 1fr 1fr') // 3行，
.columnsTemplate('1fr 1fr 1fr 1fr') // 4列,

备注： fr为 fraction(比例、分数) 的缩写。fr的个数表示网格布局的行数或列数，fr前面的数值大小，表示该行或列的尺寸占比。

行列之间的间距可以通过columnsGap、rowsGap控制

  .columnsGap(10) // 列之间间距
  .rowsGap(20) // 行之间间距

让Grid展示的GridItem横跨行列展示—方式1

Grid支持子组件跨多行多列的展示方式，先看一下跨多行多列的展示方式

上面展示了一个3行、4列的Grid网格布局，可以直观的感受到横列不是均匀分布的。

每一行中的第一列、第三列要比第二、第四列宽。
每一列中的第二行要比第1、第三列高。

这种可控制行列占比的方法是通过rowsTemplate、columnsTemplate来实现。

.rowsTemplate('1fr 2fr 1fr') // 3行，将行分成4份，第二行占2份
.columnsTemplate('2fr 1fr 3fr 1fr') // 4列,将列分成7份，第一列占用2份，第三列占3份

让Grid展示的GridItem横跨行列展示—方式2

除了方式1那种子组件跨多行多列的展示方式外，

还可以通过控制每一个GridItem的起始结束行列的方式来控制多行多列的展示。

就以上述展示方式进行介绍。

最开始展示方式是3行3列，并且每行中的第一列占用两份，每一列中的第二行占用两份。

.rowsTemplate('1fr 2fr 1fr') // 3行，将行分成4份，第二行占2份
.columnsTemplate('2fr 1fr 1fr') // 3列,将列分成4份，第一列占用2份

现在我们通过设置rowStart、rowEnd、columnStart、columnEnd来重新布局。

跨行展示设置

    GridItem(){
      Text('1')
        .itemTextStyle()
    }
    .rowStart(0)
    .rowEnd(1)

通过设置后，GridItem：1 的行数占用2行，列保持不变；rowStart、rowEnd是以自身为0开始计算。

跨列展示设置

    GridItem(){
      Text('2')
        .itemTextStyle()
    }
    .columnStart(0)
    .columnEnd(1)

通过设置后，GridItem：2 的列数占用2列，columnStart、columnEnd是以自身为0开始计算。

跨行列展示设置

    GridItem(){
      Text('3')
        .itemTextStyle()
    }
    .columnStart(0)
    .columnEnd(1)
    .rowStart(0)
    .rowEnd(2)

通过设置后，GridItem：3 的占用3行2列，rowStart、rowEnd、columnStart、columnEnd是以自身为0开始计算。

注意事项

1、rowsTemplate、columnsTemplate同时设置

rowsTemplate、columnsTemplate同时存在的情况下，只能展示默认 rows * columns 的网格数量.

例如：

1、展示12个网格 3行 * 4列 = 12

.rowsTemplate('1fr 1fr 1fr') // 3行，
.columnsTemplate('1fr 1fr 1fr 1fr') // 4列,

2、展示9个网格 3行 * 3列 = 9

.rowsTemplate('1fr 1fr 1fr') // 3行，
.columnsTemplate('1fr 1fr 1fr') // 3列,

2、rowsTemplate、columnsTemplate不同时存在

只设置rowsTemplate

rowsTemplate(‘1fr 1fr 1fr’) // 3行

表示展示3行，列数不受限制，可无限列数展示。

只设置columnsTemplate

columnsTemplate(‘1fr 1fr 1fr’) // 3列,

表示展示3列，行数不受限制，可无限行数展示。

3、rowsTemplate、columnsTemplate同时设置，并且使用rowStart、rowEnd、columnStart、columnEnd

此种布局方式需要注意的是，行列确定好展示的网格数量后，如果再使用rowStart、rowEnd、columnStart、columnEnd会导致，会导致之前展示的内容被覆盖掉。

就如上面9个网格的布局，在使用完rowStart、rowEnd、columnStart、columnEnd后，导致页面变化。