鸿蒙移动应用开发项目式教程课件 项目1-创建人文历史专区-任务1-8 网络布局与约束

网络布局与约束

Grid组件概述

网格布局由行和列分割的单元格组成，每个单元格中可以放置一个或多个子组件。网格布局组件包含Grid和GridItem两部分。

1．Grid组件Grid组件是一种用于构建网格布局的容器组件，它允许开发者通过行和列来分割空间，进而在分割成的网格中的每个单元格内放置子组件（必须为GridItem），以实现各种复杂的布局。网格布局适用于多种场景，如九宫格图片展示、日历、计算器等。Grid组件能够轻松地将页面均分，减少代码量，提高编程效率，同时使页面更加简洁、美观。知识解析学以致用课堂小结课后拓展1.1网络布局与约束任务导入

Grid组件概述2．GridItem组件Grid组件为网格容器，容器内各条目分别对应一个GridItem组件，如图所示。示例代码如下。知识解析学以致用课堂小结课后拓展1.1网络布局与约束任务导入

Grid组件概述

网格布局是一种二维布局。Grid组件支持自定义行数、列数和每行、每列尺寸占比，设置子组件跨几行或者几列，同时具备垂直和水平布局能力。当网格容器组件尺寸发生变化时，所有子组件及间距会等比例调整，从而实现网格布局的自适应。根据Grid组件的这些布局能力，可以构建出不同样式的网格布局，如图所示。知识解析学以致用课堂小结课后拓展1.1网络布局与约束任务导入不同样式的网格布局

Grid组件概述

如果Grid组件设置了宽、高属性，则其尺寸为设置值。如果没有设置宽、高属性，Grid组件的尺寸默认适应其父组件的尺寸。根据行、列数量与尺寸占比属性的设置，Grid组件可以提供以下3种布局方式。

（1）行、列数量与尺寸占比同时设置：网格布局只展示固定行、列数的元素，其余元素不展示，且网格布局不可滚动（推荐使用该种布局方式）。

（2）只设置行、列数量与尺寸占比中的一个：元素按照设置的方向进行排布，超出的元素可通过滚动的方式展示。

（3）行、列数量与尺寸占比都不设置：元素在布局方向上排布，其行、列数由布局方向及单个网格的宽、高等多个属性共同决定，超出行、列容纳范围的元素不展示，且网格布局不可滚动。知识解析学以致用课堂小结课后拓展1.1网络布局与约束任务导入设置排列方式

可以通过修改行、列数量，修改主轴方向的方式设置网格布局的排列方式。

1．设置行、列数量与尺寸占比

通过设置行、列数量与尺寸占比可以确定网格布局的整体排列方式。Grid组件提供的rowsTemplate和columnsTemplate属性用于设置网格布局行、列数量与尺寸占比。rowsTemplate和columnsTemplate属性的值是由多个空格和“数字+fr”拼接的字符串，fr的个数即网格布局的行数或列数，fr前面的数字用于计算该行或该列在网格布局上的占比，最终决定行的高度或列的宽度。知识解析学以致用课堂小结课后拓展1.1网络布局与约束任务导入设置排列方式

如图所示的是一个3行3列的网格布局，其在垂直方向上分为3等份，每行占一份；在水平方向上分为4等份，第一列占一份，第二列占两份，第三列占一份。知识解析学以致用课堂小结课后拓展1.1网络布局与约束任务导入行、列数量占比示例设置排列方式

2．设置子组件所占行、列数

除了网格大小相同的等比例网格布局，由不同大小的网格组成、不均匀分布的网格布局场景在实际应用中十分常见。在Grid组件中，可以通过在创建网格布局时传入合适的GridLayoutOptions实现如图所示的单个网格跨多行或多列的场景。知识解析学以致用课堂小结课后拓展1.1网络布局与约束任务导入不均匀网格布局设置排列方式

3．设置主轴方向

使用Grid组件构建网格布局时，若没有设置行、列数量与尺寸占比，可以通过layoutDirection设置网格布局的主轴方向，决定子组件的排列方式。此时，可以结合minCount和maxCount属性来约束主轴方向上的网格数量。

当layoutDirection的值设置为GridDirection.Row时，先从左到右排列，排满一行再排下一行，当layoutDirection的值设置为GridDirection.Column时，先从上向下排列，排满一列再排下一列，如图所示。此时，将maxCount属性设置为3，表示主轴方向上最大显示的网格单元数量为3。知识解析学以致用课堂小结课后拓展1.1网络布局与约束任务导入在网格布局中显示数据

网格布局采用二维布局的方式组织其内部元素，如图所示。知识解析学以致用课堂小结课后拓展1.1网络布局与约束任务导入Grid组件可以通过二维布局的方式显示一组GridItem子组件。对于内容结构相似的多个GridItem组件，通常更推荐使用ForEach语句以减少重复代码。二维布局设置行、列间距

两个网格单元之间的网格横向间距称为行间距，网格纵向间距称为列间距，如图所示。通过Grid的rowsGap和columnsGap属性可以设置网格布局的行、列间距。知识解析学以致用课堂小结课后拓展1.1网络布局与约束任务导入网格的行、列间距构建可滚动的网格布局

可滚动的网格布局常用在文件管理、购物或视频列表等页面中，效果如图所示。在设置网格布局的行、列数量与尺寸占比时，如果仅设置行、列数量与尺寸占比中的一个，即仅设置ro