OpenHarmony实战开发-鸿蒙ArkTS语言入门（网格结构）

首先我们来对Grid进行一个初步的认识：
网格结构（Grid）是由“行”和“列”分割的单位格所组成，通过指定“项目”地点的单位格做出各种各样的结构。网格结构具有较强的页面均分本领，子组件占比控制本领，是一种重要自顺应结构，其使用场景有九宫格图片展示、日历、盘算器等。
上面的内容是官方给出的对Grid的文字定义，不丢脸出，网格结构在特定场景（例如日历、盘算器等）下是有较大优势的，它可以轻松的将页面进行均分，大大淘汰代码量，提高编码效率，而且做出来的页面会更加简洁雅观。我们用图片来解释会更加明了，如下图：

在这张图片中，Grid网格结构通过其子组件GridItem将整个页面分别为一个九宫格的结构形式，我们可以在每一个GridItem再进行结构，从而实现每一个GridItem都能实现其独特的功能，大大提拔了页面的雅观以及实用性，需要注意的是，Grid的子组件只能是GridItem,所以，这两者一样平常是组合出现使用的。

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

又例云云图，软件中它将不同的餐品放在一张张单独的卡片中，这也是可以通过Grid来进行结构的，这样的结构使得整个页面清晰明了，有利于顾客更好地选餐。总之这是一个应用场景非常广的结构方式，接下来，笔者将详细讲解一下该结构的写法。
排列方式

由上面两个例子我们不难发现，Grid可以自由的设置其子组件GridItem的大小、长宽比以及数量，那么我们该如何来设置它呢？
Grid组件提供了rowsTemplate和columnsTemplate属性用于设置网格结构行列数量与尺寸占比。
rowsTemplate和columnsTemplate属性值是一个由多个空格和’数字+fr’隔断拼接的字符串，fr的个数即网格结构的行或列数，fr前面的数值大小，用于盘算该行或列在网格结构宽度上的占比，最终决定该行或列宽度。
columnsTemplate的属性描述：

设置当前网格结构列的数量或最小列宽值，不设置时默认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列。
rowsTemplate的属性描述：

设置当前网格结构行的数量或最小行高值，不设置时默认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行处理。
通过下面这张图可以看得更加明了一点

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

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

复制代码

这段代码通过rowsTemplate将整个页面的分为了3行,每一行都为一等份 [ 使用(‘1fr 1fr 1fr’)体现 ] ,再在此基础上分出了3列,其中两边为一份,中心为两份 [ 使用(‘1fr 2fr 1fr’)体现 ],这样切割下来,便成为了如上图那样的网格型结构了. 这样一个页面就有了一个初步的模型,接下来,我们以盘算器为例,向GridItem中填充一些简朴的内容:

通常的,我们只要向GridItem中加入Text组件,就可以实现文字的填充:

1. GridItem() {
2.   Text('1')
3.     ...
4. }

复制代码

但是在下图的这种情况中,我们还要使用到columnStart和columnEnd这两个属性。

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

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

复制代码

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

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

复制代码

上面的所有情况都是在已经设置好行和列的数量及占比的条件下进行的，如果我们直接让GridItem去自行排列，则又是使用另外一种方法。
设置主轴方向

这里我们就需要要确定一个页面的主轴，主轴是水平方向照旧垂直方向决定了接下来GridItem按什么方式排列，这里会引入Grid的一个新的属性：layoutDirection，该属性的参数是GridDirection，通过这个参数我们可以选择该Grid的主轴方向，如图：

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

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

复制代码

如图：

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

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

复制代码

如图：

设置行列间距

接下来，我们要来了解一下如何控制各个GridItem之间的距离，将页面做得更加雅观。设置行列间距只需要用到两个简朴的属性：rowsGap和columnsGap，我们直接进入代码演示：

1. Grid() {
2.   ...
3. }
4. .columnsGap(10)
5. .rowsGap(15)

复制代码

我们只需要根据页面的结构，更改这两个属性中的数据，就可以自由的调整各个元素之间的距离。
我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI、实战开发视频教程》以及《鸿蒙生态应用开发白皮书V2.0PDF》《鸿蒙开发学习手册》（共计890页）鸿蒙开发资料等…渴望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

OpenHarmony APP开发教程步调：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG

应用开发中级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

应用开发中高级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

南北双向高工技能基础：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

全网首发-工业级 南向装备开发就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.设置文件
3.应用数据管理
4.应用安全管理
5.应用隐私掩护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与关照
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台使命(Background Task)管理
11.装备管理
12.装备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。