鸿蒙开发中的Grid布局

学前端的小朱

已于 2024-08-15 15:22:49 修改

阅读量725

点赞数 25

分类专栏：鸿蒙开发文章标签： harmonyos 华为鸿蒙 DevEco Studio arkts Grid

于 2024-08-15 15:13:32 首次发布

本文链接：https://blog.csdn.net/qq_45569925/article/details/141222349

版权

鸿蒙开发专栏收录该内容

20 篇文章 1 订阅

订阅专栏

Grid的属性

columnsTemplate(value: string)

设置当前网格布局列的数量、固定列宽或最小列宽值，不设置默认1列

属性	描述
columnsTemplate('repeat(auto-fit, track-size)')	设置最小列宽值为track-size，自动计算列数和实际列宽
columnsTemplate('repeat(auto-fill, track-size)')	设置固定列宽值为track-size，自动计算列数
columnsTemplate('repeat(auto-stretch, track-size)')	设置固定列宽值为track-size，使用columnsGap为最小列间距，自动计算列数和实际列间距

注意：

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

auto-stretch模式只支持track-size为一个有效列宽值，并且track-size只支持px、vp和有效数字，不支持%。

设置为'0fr'时，该列的列宽为0，不显示GridItem。设置为其他非法值时，GridItem显示为固定1列。

rowsTemplate(value: string)

设置当前网格布局行的数量、固定行高或最小行高值，不设置时默认1行。

属性	说明
rowsTemplate('repeat(auto-fit, track-size)')	设置最小行高值为track-size，自动计算行数和实际行高
rowsTemplate('repeat(auto-fill, track-size)')	设置固定行高值为track-size，自动计算行数
rowsTemplate('repeat(auto-stretch, track-size)')	设置固定行高值为track-size，使用rowsGap为最小行间距，自动计算行数和实际行间距

注意：

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

auto-stretch模式只支持track-size为一个有效行高值，并且track-size只支持px、vp和有效数字，不支持%。

设置为'0fr'，则这一行的行宽为0，这一行GridItem不显示。设置为其他非法值，按固定1行处理。

说明：

Grid组件根据rowsTemplate、columnsTemplate属性的设置情况，可分为以下三种布局模式：

1、rowsTemplate、columnsTemplate同时设置：

Grid只展示固定行列数的元素，其余元素不展示，且Grid不可滚动。
此模式下以下属性不生效：layoutDirection、maxCount、minCount、cellLength。
Grid的宽高没有设置时，默认适应父组件尺寸。
Grid网格列大小按照Grid自身内容区域大小减去所有行列Gap后按各个行列所占比重分配。
GridItem默认填满网格大小。

2、rowsTemplate、columnsTemplate仅设置其中的一个：

元素按照设置的方向进行排布，超出Grid显示区域后，Grid可通过滚动的方式展示。
如果设置了columnsTemplate，Grid滚动方向为垂直方向，主轴方向为垂直方向，交叉轴方向为水平方向。
如果设置了rowsTemplate，Grid滚动方向为水平方向，主轴方向为水平方向，交叉轴方向为垂直方向。
此模式下以下属性不生效：layoutDirection、maxCount、minCount、cellLength。
网格交叉轴方向尺寸根据Grid自身内容区域交叉轴尺寸减去交叉轴方向所有Gap后按所占比重分配。
网格主轴方向尺寸取当前网格交叉轴方向所有GridItem高度最大值。

3、rowsTemplate、columnsTemplate都不设置：

元素在layoutDirection方向上排布，列数由Grid的宽度、首个元素的宽度、minCount、maxCount、columnsGap共同决定。
行数由Grid高度、首个元素高度、cellLength、rowsGap共同决定。超出行列容纳范围的元素不显示，也不能通过滚动进行展示。
此模式下仅生效以下属性：layoutDirection、maxCount、minCount、cellLength、editMode、columnsGap、rowsGap。
当前layoutDirection设置为Row时，先从左到右排列，排满一行再排下一行。剩余高度不足时不再布局，整体内容顶部居中。
当前layoutDirection设置为Column时，先从上到下排列，排满一列再排下一列，剩余宽度不足时不再布局。整体内容顶部居中。
当前Grid下面没有GridItem时，Grid的宽高为0。

columnsGap(value: Length)

设置列与列的间距。设置为小于0的值时，按默认值显示。

rowsGap(value: Length)

设置行与行的间距。设置为小于0的值时，按默认值显示。

GridItem属性

属性	说明
rowStart(value: number)	设置当前元素起始行号
rowEnd(value: number)	设置当前元素终点行号
columnStart(value: number)	设置当前元素起始列号
columnEnd(value: number)	设置当前元素终点列号

说明

需要指定GridItem起始行列号和所占行列数的场景推荐使用Grid的layoutOptions参数，详细可参考Grid的示例1和Grid的示例3。

起始行号、终点行号、起始列号、终点列号生效规则如下：

rowStart/rowEnd合理取值范围为0~总行数-1，columnStart/columnEnd合理取值范围为0~总列数-1。

如果设置了rowStart/rowEnd/columnStart/columnEnd，GridItem会占据指定的行数(rowEnd-rowStart+1)或列数(columnEnd-columnStart+1)。

只有在设置columnTemplate和rowTemplate的Grid中，设置合理的rowStart/rowEnd/columnStart/columnEnd四个属性的GridItem才能按照指定的行列号布局。

在设置columnTemplate和rowTemplate的Grid中，单独设置行号rowStart/rowEnd或列号columnStart/columnEnd的GridItem会按照一行一列进行布局。

在只设置columnTemplate的Grid中设置列号columnStart/columnEnd的GridItem按照列数布局。在该区域位置存在GridItem布局，则直接换行进行放置。

在只设置rowTemplate的Grid中设置行号rowStart/rowEnd的GridItem按照行数布局。在该区域位置存在GridItem布局，则直接换列进行放置。

在只设置columnTemplate的Grid中，在GridItem上设置了不合理的值，GridItem按照一行一列进行布局。

columnTemplate和rowTemplate都不设置的Grid中GridItem的行列号属性无效。