。

网格布局具有较强的页面均分能力#xff0c;子组件占比控制能力#xff0c;是一种重要自适应布局#xff0c;其使用场景有九宫格图片展示、日历、计算器…一、概述

网格布局是由“行”和“列”分割的单元格所组成通过指定“项目”所在的单元格做出各种各样的布局。

网格布局具有较强的页面均分能力子组件占比控制能力是一种重要自适应布局其使用场景有九宫格图片展示、日历、计算器等。

ArkUI提供了Grid容器组件和子组件GridItem用于构建网格布局。

Grid用于设置网格布局相关参数GridItem定义子组件相关特征。

Grid组件支持使用条件渲染、循环渲染、懒加载等方式生成子组件。

二、布局与约束

Grid组件为网格容器其中容器内各条目对应一个GridItem组件如下图所示。

Grid与GridItem组件关系

网格布局是一种二维布局。

Grid组件支持自定义行列数和每行每列尺寸占比、设置子组件横跨几行或者几列同时提供了垂直和水平布局能力。

当网格容器组件尺寸发生变化时所有子组件以及间距会等比例调整从而实现网格布局的自适应能力。

根据Grid的这些布局能力可以构建出不同样式的网格布局如下图所示。

如果Grid组件设置了宽高属性则其尺寸为设置值。

如果没有设置宽高属性Grid组件的尺寸默认适应其父组件的尺寸。

行、列数量与占比同时设置Grid只展示固定行列数的元素其余元素不展示且Grid不可滚动。

推荐使用该种布局方式只设置行、列数量与占比中的一个元素按照设置的方向进行排布超出的元素可通过滚动的方式展示。

行列数量与占比都不设置元素在布局方向上排布其行列数由布局方向、单个网格的宽高等多个属性共同决定。

超出行列容纳范围的元素不展示且Grid不可滚动。

三、设置排列方式

通过设置行列数量与尺寸占比可以确定网格布局的整体排列方式。

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

rowsTemplate和columnsTemplate属性值是一个由多个空格和’数字fr’间隔拼接的字符串fr的个数即网格布局的行或列数fr前面的数值大小用于计算该行或列在网格布局宽度上的占比最终决定该行或列宽度。

行列数量占比示例

如上图所示构建的是一个三行三列的网格布局其在垂直方向上分为三等份每行占一份在水平方向上分为四等份第一列占一份第二列占两份第三列占一份。

1fr

当Grid组件设置了rowsTemplate或columnsTemplate时Grid的layoutDirection、maxCount、minCount、cellLength属性不生效属性说明可参考Grid-属性。

示例效果图

{Text(item.name).fontSize(40).fontColor(Color.White).textAlign(TextAlign.Center)}.backgroundColor(Color.Blue)},

(item:

item.id)}.backgroundColor(Color.White).columnsGap(8).rowsGap(8)//构建的是一个三行三列的网格布局.rowsTemplate(1fr

1fr

垂直方向上分为三等份每行占一份.columnsTemplate(1fr

2fr

水平方向上分为四等份第一列占一份第二列占两份第三列占一份.height(300)}}

}Entry

})}.backgroundColor(Color.White).scrollable(ScrollDirection.Vertical).scrollBar(BarState.Auto).scrollBarColor(Color.Gray).align(Alignment.TopStart).constraintSize({

minHeight:

}).edgeEffect(EdgeEffect.Spring)

}3.2

除了大小相同的等比例网格布局由不同大小的网格组成不均匀分布的网格布局场景在实际应用中十分常见如下图所示。

在Grid组件中可以通过创建Grid时传入合适的GridLayoutOptions实现如图所示的单个网格横跨多行或多列的场景其中irregularIndexes和onGetIrregularSizeByIndex可对仅设置rowsTemplate或columnsTemplate的Grid使用onGetRectByIndex可对同时设置rowsTemplate和columnsTemplate的Grid使用。

不均匀网格布局

例如计算器的按键布局就是常见的不均匀网格布局场景。

如下图计算器中的按键“0”和“”按键“0”横跨第一、二两列按键“”横跨第五、六两行。

使用Grid构建的网格布局其行列标号从0开始依次编号。

示例效果图

{Text(item.name).fontSize(40).fontColor(Color.Black).textAlign(TextAlign.Center)}.backgroundColor(Color.Gray).width(100%).height(100%)},

(item:

1fr).columnsGap(8).backgroundColor(Color.Pink).rowsGap(8).height(320)}}

}计算器

在网格中可以通过onGetRectByIndex返回的[rowStart,columnStart,rowSpan,columnSpan]来实现跨行跨列布局其中rowStart和columnStart属性表示指定当前元素起始行号和起始列号rowSpan和columnSpan属性表示指定当前元素的占用行数和占用列数。

所以“0”按键横跨第一列和第二列“”按键横跨第五行和第六行只要将“0”对应onGetRectByIndex的rowStart和columnStart设为5和0rowSpan和columnSpan设为1和2将“”对应onGetRectByIndex的rowStart和columnStart设为4和3rowSpan和columnSpan设为2和1即可。

layoutOptions:

使用Grid构建网格布局时若没有设置行列数量与占比可以通过layoutDirection设置网格布局的主轴方向决定子组件的排列方式。

此时可以结合minCount和maxCount属性来约束主轴方向上的网格数量。

主轴方向示意图

当前layoutDirection设置为Row时先从左到右排列排满一行再排下一行。

当前layoutDirection设置为Column时先从上到下排列排满一列再排下一列如上图所示。

此时将maxCount属性设为3表示主轴方向上最大显示的网格单元数量为3。

Grid()

.layoutDirection(GridDirection.Row)说明

layoutDirection属性仅在不设置rowsTemplate和columnsTemplate时生效此时元素在layoutDirection方向上排列。

仅设置rowsTemplate时Grid主轴为水平方向交叉轴为垂直方向。

仅设置columnsTemplate时Grid主轴为垂直方向交叉轴为水平方向。

四、在网格布局中显示数据

Grid组件可以通过二维布局的方式显示一组GridItem子组件。

Grid()

1fr)对于内容结构相似的多个GridItem通常更推荐使用ForEach语句中嵌套GridItem的形式来减少重复代码。

示例效果图

{Text(this.title).fontColor(Color.Black).fontSize(20).fontWeight(FontWeight.Bold).margin({

top:

}).textAlign(TextAlign.Start).width(100%)}

}Component

{Text(service)}.backgroundColor(Color.Gray)},

(service:

string).rowsGap(8).columnsGap(8).height(200)}}

}五、设置行列间距

在两个网格单元之间的网格横向间距称为行间距网格纵向间距称为列间距如下图所示。

通过Grid的rowsGap和columnsGap可以设置网格布局的行列间距。

在图5所示的计算器中行间距为15vp列间距为10vp。

Grid()

可滚动的网格布局常用在文件管理、购物或视频列表等页面中如下图所示。

在设置Grid的行列数量与占比时如果仅设置行、列数量与占比中的一个即仅设置rowsTemplate或仅设置columnsTemplate属性网格单元按照设置的方向排列超出Grid显示区域后Grid拥有可滚动能力。

如果设置的是columnsTemplateGrid的滚动方向为垂直方向如果设置的是rowsTemplateGrid的滚动方向为水平方向。

如上图所示的横向可滚动网格布局只要设置rowsTemplate属性的值且不设置columnsTemplate属性当内容超出Grid组件宽度时Grid可横向滚动进行内容展示。

Entry

只设置rowsTemplate属性当内容超出Grid区域时可水平滚动。

.rowsGap(15)}}

}七、控制滚动位置

与新闻列表的返回顶部场景类似控制滚动位置功能在网格布局中也很常用例如下图所示日历的翻页功能。

日历翻页

Grid组件初始化时可以绑定一个Scroller对象用于进行滚动控制例如通过Scroller对象的scrollPage方法进行翻页。

private

Scroller()在日历页面中用户在点击“下一页”按钮时应用响应点击事件通过指定scrollPage方法的参数next为true滚动到下一页。

Column({

{this.scroller.scrollPage({next:

false})})Button(下一页).onClick(()

{this.scroller.scrollPage({next:

true})})}

与长列表的处理类似循环渲染适用于数据量较小的布局场景当构建具有大量网格项的可滚动网格布局时推荐使用数据懒加载方式实现按需迭代加载数据从而提升列表性能。

当使用懒加载方式渲染网格时为了更好的滚动体验减少滑动时出现白块Grid组件中也可通过cachedCount属性设置GridItem的预加载数量只在懒加载LazyForEach中生效。

设置预加载数量后会在Grid显示区域前后各缓存cachedCount*列数个GridItem超出显示和缓存范围的GridItem会被释放。

Grid()

cachedCount的增加会增大UI的CPU、内存开销。

使用时需要根据实际情况综合性能和用户体验进行调整。