堆叠布局,网格布局

堆叠布局

层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠

布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素（子组件）依次入栈，后一个子元素覆

盖前一个子元素，子元素可以叠加，也可以设置位置。

层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。

如图，Stack作为容器，容器内的子元素（子组件）的顺序为Item1->Item2->Item3。

基本使用

Stack组件为容器组件，容器内可包含各种子组件。其中子组件默认进行居中堆叠。子元素被约束在Stack下， 进行自己的样式定义以及排列。

对齐方式

Stack组件通过alignContent参数实现位置的相对移动。如图2所示，支持九种对齐方式。

名称                                 ​​​​​​​        ​​​​​​​        ​​​​​​​ 描述

TopStart                                          顶部起始端

Top                                                  顶部横向居中

TopEnd                                            顶部尾端

Start                                                 起始端纵向居中

Center                                              居中（默认）

End                                                  尾端纵向居中

BottomStart                                     底部起始端

Bottom                                             底部横向居中

BottomEnd                                       底部尾端

Z序控制

Stack容器中兄弟组件显示层级关系可以通过Z序控制的zIndex属性改变。zIndex值越大，显示层级越高，即

zIndex值大的组件会覆盖在zIndex值小的组件上方。

在层叠布局中，如果后面子元素尺寸大于前面子元素尺寸，则前面子元素完全隐藏。

网格布局

网格布局是由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。网格布局 具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日 历、计算器等。

ArkUI提供了Grid容器组件和子组件GridItem，用于构建网格布局。Grid用于设置网格布局相关参数，GridItem 定义子组件相关特征。

基本使用

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

Grid的子组件必须是GridItem组件。

设置排列方式

1. 设置行列数量与占比

通过设置行列数量与尺寸占比可以确定网格布局的整体排列方式。Grid 组件提供了 rowsTemplate 和

columnsTemplate 属性用于设置网格布局行列数量与尺寸占比。

rowsTemplate 和 columnsTemplate 属性值是一个由多个空格和 数字 + fr 间隔拼接的字符串，fr 的个

数即网格布局的行或列数，fr 前面的数值大小，用于计算该行或列在网格布局宽度上的占比，最终决定

该行或列的宽度。

只要将 rowsTemplate 的值为 1fr 1fr 1fr ，同时将 columnsTemplate 的值为 1fr 2fr 1fr ，即可

实现上述网格布局。

注意：当 Grid 组件设置了 rowsTemplate 或 columnsTemplate 时，Grid 的 layoutDirection、

maxCount、minCount、cellLength 属性不生效

2. 设置子组件所占行列数

除了大小相同的等比例网格布局，由不同大小的网格组成不均匀分布的网格布局场景在实际应用中十分

常见，如下图所示。在Grid组件中，通过设置 GridItem 的 rowStart、rowEnd、columnStart 和

columnEnd 可以实现如图所示的单个网格横跨多行或多列的场景。

在单个网格单元中，rowStart 和 rowEnd 属性表示指定当前元素起始行号和终点行号，columnStart 和

columnEnd属性表示指定当前元素的起始列号和终点列号。

所以“0”按键横跨第一列和第二列，只要将“0”对应GridItem的columnStart和columnEnd设为1和2，将“=”

对应GridItem的的rowStart和rowEnd设为5和6即可。

对于内容结构相似的多个GridItem，通常更推荐使用循环渲染ForEach语句中嵌套GridItem的形式，来减

少重复代码。

通过Grid的rowsGap和columnsGap可以设置网格布局的行列间距。在图5所示的计算器中，行间距为

15vp，列间距为10vp。

2. 设置滚动

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

占比时，如果仅设置行、列数量与占比中的一个，即仅设置rowsTemplate或仅设置columnsTemplate属

性，网格单元按照设置的方向排列，超出Grid显示区域后，Grid拥有可滚动能力。

如果设置的是columnsTemplate，Grid的滚动方向为垂直方向；如果设置的是rowsTemplate，Grid的滚

动方向为水平方向。

如上图所示的横向可滚动网格布局，只要设置rowsTemplate属性的值且不设置columnsTemplate属性，

当内容超出Grid组件宽度时，Grid可横向滚动进行内容展示。