鸿蒙ArkTS言语入门

经过之前的学习，想必大家对如何经过Row和Column来构建一个最基础的页面曾经有了一个初步的把握，接上去，笔者将会引见更多的页面规划，来将咱们的页面变得愈加丰盛精彩。在本篇博客中，笔者将会引见Grid/GridItem(网格规划)，尽或者的具体的解释该规划的用法以及在实践开发环节中一些小技巧的经常使用。

首先咱们来对Grid启动一个初步的意识：

网格规划（Grid）是由“行”和“列”宰割的单元格所组成，经过指定“名目”所在的单元格做出各种各样的规划。网格规划具有较强的页面均分才干，子组件占比控制才干，是一种关键自顺应规划，其经常使用场景有九宫格图片展现、日历、计算器等。

上方的内容是官网给出的对Grid的文字定义，不美观出，网格规划在特定场景（例如日历、计算器等）下是有较大长处的，它可以轻松的将页面启动均分，大大缩小代码量，提高编码效率，而且做进去的页面会愈加繁复美观。咱们用图片来解释会愈加明了，如下图：

在这张图片中，Grid网格规划经过其子组件GridItem将整个页面划分为一个九宫格的规划方式，咱们可以在每一个GridItem再启动规划，从而成功每一个GridItem都能成功其共同的性能，大大优化了页面的美观以及适用性，须要留意的是，Grid的子组件只能是GridItem,所以，这两者普通是组合产生经常使用的。

如图便是一个计算器的页面，这个页面便是经常使用Grid的一个典型例子，在每一个GridItem中放入一个Button按钮，并赋予他们各自的性能，最终组成整个计算器系统的页面。

又例如此图，软件中它将不同的餐品放在一张张独自的卡片中，这也是可以经过Grid来启动规划的，这样的规划使得整个页面明晰明了，无利于顾客更好地选餐。总之这是一个运行场景十分广的规划方式，接上去，笔者将具体解说一下该规划的写法。

陈列方式

Grid组件提供了rowsTemplate和columnsTemplate属性用于设置网格规划行列数量与尺寸占比。

rowsTemplate和columnsTemplate属性值是一个由多个空格和’数字+fr’距离拼接的字符串，fr的个数即网格规划的行或列数，fr前面的数值大小，用于计算该行或列在网格规划宽度上的占比，最终选择该行或列宽度。

设置网格规划列的数量或最小列宽值，不设置时自动1列。

例如, ‘1fr 1fr 2fr’ 是将父组件分3列，将父组件准许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。

columnsTemplate(‘repeat(auto-fit, track-size)’)是设置最小列宽值为track-size，智能计算列数和实践列宽。

columnsTemplate(‘repeat(auto-fill, track-size)’)是设置固定列宽值为track-size，智能计算列数。

其中repeat、auto-fit、auto-fill为关键字。track-size为列宽，支持的单位包括px、vp、%或有效数字，track-size至少包括一个有效列宽。

设置为’0fr’时，该列的列宽为0，不显示GridItem。设置为其余合法值时，GridItem显示为固定1列。

设置网格规划行的数量或最小行高值，不设置时自动1行。

例如, ‘1fr 1fr 2fr’是将父组件分三行，将父组件准许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。

rowsTemplate(‘repeat(auto-fit, track-size)’)是设置最小行高值为track-size，智能计算行数和实践行高。

rowsTemplate(‘repeat(auto-fill, track-size)’)是设置固定行高值为track-size，智能计算行数。

其中repeat、auto-fit、auto-fill为关键字。track-size为行高，支持的单位包括px、vp、%或有效数字，track-size至少包括一个有效行高。

设置为’0fr’，则这一行的行宽为0，这一行GridItem不显示。设置为其余合法值，按固定1行解决。

经过上方这张图可以看得愈加明了一点。

上图经常使用代码演示就是这样:

Grid() {...}.rowsTemplate('1fr 1fr 1fr').columnsTemplate('1fr 2fr 1fr')

这段代码经过rowsTemplate将整个页面的分为了3行,每一行都为一等份 [ 经常使用('1fr 1fr 1fr')示意 ] ,再在此基础上分出了3列,其中两边为一份,两边为两份 [ 经常使用('1fr 2fr 1fr')示意 ],这样切割上去,便成为了如上图那样的网格型规划了. 这样一个页面就有了一个初步的模型,接上去,咱们以计算器为例,向GridItem中填充一些繁难的内容:

通常的,咱们只需向GridItem中添加Text组件,就可以成功文字的填充:

GridItem() {Text('1')...}

然而在下图的这种状况中,咱们还要经常使用到columnStart和columnEnd这两个属性。

这两个属性示意指定元素的起始列号和终点列号，例如，上图中的“0”按钮，它与其余按钮不同的是，它横跨了第一列和第二列，所以在这个按钮中填充文本时，就要加上起始和终点列号，代码如下：

GridItem() {Text("0")...}.columnStart(1).columnEnd(2)//colum示意列，该按钮横跨第一列到第二列，所以起始Start为1，终点End为2

再例如上图中的“=”按钮，代码如下：

GridItem() {Text("=")...}.rowStart(5).rowEnd(6)//row示意行，该按钮横跨第五列到第六列，所以起始Start为5，终点End为6

上方的一切状况都是在曾经设置好行和列的数量及占比的前提下启动的，假设咱们间接让GridItem去自行陈列，则又是经常使用另外一种方法。

设置主轴方向

从图中咱们可以看到，一共有4个选项，区分是Row、Column、RowReverse、ColumnReverse，前面两个区分代表以水平正向陈列和垂直正向陈列（从左往右，从上往下），而前面两个则是区分代表水平反向陈列和垂直反向陈列（从右往左，从下往上）,这里咱们还须要引入一个新的属性：maxCount和minCount，这两个属性代表着主轴上能陈列的最大和最小的GridItem数量，例如：

Grid() {...}.layoutDirection(GridDirection.Row)//代表主轴方向为水平方向，即从左往右陈列.maxCount(3)//代表水平方向最多有3个GridItem，多于3个就要向下换行

同理，将主轴换为垂直方向

Grid() {...}.layoutDirection(GridDirection.Column)//代表主轴方向为垂直方向，即从上往下陈列.maxCount(3)//代表垂直方向最多有3个GridItem，多于3个就要向右换行

设置行列间距

Grid() {...}.columnsGap(10).rowsGap(15)

咱们只须要依据页面的规划，更改这两个属性中的数据，就可以自在的调整各个元素之间的距离。

本篇博客到此为止，假设文章中有疏漏的中央，还请各位读者多多包涵斧正！

本博客由 金陵科技学院-放开原子开源社 张子航编写。