鸿蒙5.0开发进阶：UI框架-ArkTS组件（Grid）

往期鸿蒙全套实战文章必看：（文中附带全栈鸿蒙学习资料）

Grid

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

说明

该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

仅支持GridItem子组件，支持渲染控制类型（if/else、ForEach、LazyForEach和Repeat）。

说明

Grid子组件的索引值计算规则：

按子组件的顺序依次递增。

if/else语句中，只有条件成立分支内的子组件会参与索引值计算，条件不成立分支内的子组件不计算索引值。

ForEach/LazyForEach和Repeat语句中，会计算展开所有子节点索引值。

if/else、ForEach、LazyForEach和Repeat发生变化以后，会更新子节点索引值。

Grid子组件的visibility属性设置为Hidden或None时依然会计算索引值。

Grid子组件的visibility属性设置为None时不显示，但依然会占用子组件对应的网格。

Grid子组件设置position属性，会占用子组件对应的网格，子组件将显示在相对Grid左上角偏移position的位置。该子组件不会随其对应网格滚动，在对应网格滑出Grid显示范围外后不显示。

当Grid子组件之间留有空隙时，会根据当前的展示区域尽可能填补空隙，因此GridItem可能会随着网格滚动而改变相对位置。

接口

Grid(scroller?: Scroller, layoutOptions?: GridLayoutOptions)

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
scrollerScroller否

可滚动组件的控制器。用于与可滚动组件进行绑定。

说明：

不允许和其他滚动类组件，如：List、Grid、Scroll等绑定同一个滚动控制对象。

layoutOptions10+GridLayoutOptions否Grid布局选项。

GridLayoutOptions10+对象说明

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

布局选项。其中,irregularIndexes和onGetIrregularSizeByIndex可对仅设置rowsTemplate或columnsTemplate的Grid使用，可以指定一个index数组，并为其中的index对应的GridItem设置其占据的行数与列数，使用方法参见示例3；onGetRectByIndex可对同时设置rowsTemplate和columnsTemplate的Grid使用，为指定的index对应的GridItem设置位置和大小，使用方法参见示例1。

名称类型必填说明
regularSize[number, number]是

大小规则的GridItem在Grid中占的行数和列数，只支持占1行1列即[1, 1]。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

irregularIndexesnumber[]否

指定的GridItem索引在Grid中的大小是不规则的。当不设置onGetIrregularSizeByIndex时，irregularIndexes中GridItem的默认大小为垂直滚动Grid的一整行或水平滚动Grid的一整列。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

onGetIrregularSizeByIndex(index: number) => [number, number]否

配合irregularIndexes使用，设置不规则GridItem占用的行数和列数。开发者可为irregularIndexes中指明的index对应的GridItem设置占用的行数和列数。在API version 12之前，垂直滚动Grid不支持GridItem占多行，水平滚动Grid不支持GridItem占多列。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

onGetRectByIndex11+(index: number) => [number, number,number,number]否

设置指定索引index对应的GridItem的位置及大小[rowStart,columnStart,rowSpan,columnSpan]。

其中rowStart为行起始位置，columnStart为列起始位置，无单位。

rowSpan为GridItem占用的行数，columnSpan为GridItem占用的列数，无单位。

rowStart和columnStart取大于等于0的自然数，若取负数时，rowStart和columnStart默认为0。

rowSpan和columnSpan取大于等于1的自然数，若取小数则向下取整，若小于1则按1计算。

说明：

第一种情况：某个GridItem发现给它指定的起始位置被占据了，则从起始位置[0,0]开始按顺序从左到右，从上到下寻找起始的放置位置。

第二种情况：如果起始位置没有被占据，但其他位置被占据了，无法显示全部的GridItem大小，则只会布局一部分。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

属性

除支持通用属性和滚动组件通用属性外，还支持以下属性：

columnsTemplate

columnsTemplate(value: string)

设置当前网格布局列的数量、固定列宽或最小列宽值，不设置时默认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，自动计算列数。

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和有效数字，不支持%。

使用效果可以参考示示例8。

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuestring是当前网格布局列的数量或最小列宽值。

rowsTemplate

rowsTemplate(value: string)

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

例如, '1fr 1fr 2fr'是将父组件分3行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。

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行处理。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuestring是当前网格布局行的数量或最小行高值。

说明

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

columnsGap(value: Length)

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueLength是

列与列的间距。

默认值：0

rowsGap

rowsGap(value: Length)

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueLength是

行与行的间距。

默认值：0

scrollBar

scrollBar(value: BarState)

设置滚动条状态。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueBarState是

滚动条状态。

默认值：BarState.Auto

说明：

API version 9及以下版本默认值为BarState.Off，API version 10及以上版本的默认值为BarState.Auto。

scrollBarColor

scrollBarColor(value: Color | number | string)

设置滚动条的颜色。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueColor | number | string是

滚动条的颜色。

默认值：'#182431'（40%不透明度）

scrollBarWidth

scrollBarWidth(value: number | string)

设置滚动条的宽度，不支持百分比设置。宽度设置后，滚动条正常状态和按压状态宽度均为滚动条的宽度值。如果滚动条的宽度超过Grid组件主轴方向的高度，则滚动条的宽度会变为默认值。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber | string是

滚动条的宽度。

默认值：4

单位：vp

cachedCount

cachedCount(value: number)

设置预加载的GridItem的数量，只在LazyForEach和开启了virtualScroll开关的Repeat中生效。设置为小于0的值时，按默认值显示。

设置缓存后会在Grid显示区域上下各缓存cachedCount*列数个GridItem。

LazyForEach和开启了virtualScroll开关的Repeat超出显示和缓存范围的GridItem会被释放。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是

预加载的GridItem的数量。

默认值：1

editMode8+

editMode(value: boolean)

设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是

Grid是否进入编辑模式。

默认值：false

layoutDirection8+

layoutDirection(value: GridDirection)

设置布局的主轴方向。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueGridDirection是

布局的主轴方向。

默认值：GridDirection.Row

maxCount8+

maxCount(value: number)

设置可显示的最大行数或列数。设置为小于1的值时，按默认值显示。

当layoutDirection是Row/RowReverse时，表示可显示的最大列数。

当layoutDirection是Column/ColumnReverse时，表示可显示的最大行数。

当maxCount小于minCount时，maxCount和minCount都按默认值处理。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是

可显示的最大行数或列数。

默认值：Infinity

minCount8+

minCount(value: number)

设置可显示的最小行数或列数。设置为小于1的值时，按默认值显示。

当layoutDirection是Row/RowReverse时，表示可显示的最小列数。

当layoutDirection是Column/ColumnReverse时，表示可显示的最小行数。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是

可显示的最小行数或列数。

默认值：1

cellLength8+

cellLength(value: number)

设置一行的高度或者一列的宽度。

当layoutDirection是Row/RowReverse时，表示一行的高度。

当layoutDirection是Column/ColumnReverse时，表示一列的宽度。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是

一行的高度或者一列的宽度。

默认值：第一个元素的大小

单位：vp

multiSelectable8+

multiSelectable(value: boolean)

设置是否开启鼠标框选。开启框选后，可以配合Griditem的selected属性和onSelect事件获取GridItem的选中状态，还可以设置选中态样式（无默认选中样式）。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是

是否开启鼠标框选。

默认值：false

false：关闭框选。true：开启框选。

supportAnimation8+

supportAnimation(value: boolean)

设置是否支持动画。当前支持GridItem拖拽动画。仅在滚动模式下（只设置rowsTemplate、columnsTemplate其中一个）支持动画。

仅在大小规则的Grid中支持拖拽动画，跨行或跨列场景不支持。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是

是否支持动画。

默认值：false

edgeEffect10+

edgeEffect(value: EdgeEffect, options?: EdgeEffectOptions)

设置边缘滑动效果。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueEdgeEffect是

Grid组件的边缘滑动效果，支持弹簧效果和阴影效果。

默认值：EdgeEffect.None

options11+EdgeEffectOptions否

组件内容大小小于组件自身时，是否开启滑动效果。设置为{ alwaysEnabled: true }会开启滑动效果，{ alwaysEnabled: false }不开启。

默认值：{ alwaysEnabled: false }

enableScrollInteraction10+

enableScrollInteraction(value: boolean)

设置是否支持滚动手势，当设置为false时，无法通过手指或者鼠标滚动，但不影响控制器的滚动接口。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是

是否支持滚动手势。

默认值：true

nestedScroll10+

nestedScroll(value: NestedScrollOptions)

设置嵌套滚动选项。设置向前向后两个方向上的嵌套滚动模式，实现与父组件的滚动联动。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueNestedScrollOptions是嵌套滚动选项。

friction10+

friction(value: number | Resource)

设置摩擦系数，手动划动滚动区域时生效，只对惯性滚动过程有影响，对惯性滚动过程中的链式效果有间接影响。设置为小于等于0的值时，按默认值处理

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber | Resource是

摩擦系数。

默认值：非可穿戴设备为0.6，可穿戴设备为0.9。

从API version 11开始，非可穿戴设备默认值为0.7。

从API version 12开始，非可穿戴设备默认值为0.75。

alignItems12+

alignItems(alignment: Optional)

设置Grid中GridItem的对齐方式， 使用方法可以参考示例9。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
alignmentOptional<GridItemAlignment>是

设置Grid中GridItem的对齐方式。

默认值：GridItemAlignment.DEFAULT

GridItemAlignment12+枚举说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称值描述
DEFAULT0使用Grid的默认对齐方式。
STRETCH1以一行中的最高的GridItem作为其他GridItem的高度。

说明

1、只有可滚动的Grid中，设置STRETCH参数会生效，其他场景不生效。

2、在Grid的一行中，如果每个GridItem都是大小规律的（只占一行一列），设置STRETCH参数会生效，存在跨行或跨列的GridItem的场景不生效。

3、设置STRETCH后，只有不设置高度的GridItem才会以当前行中最高的GridItem作为自己的高度，设置过高度的GridItem高度不会变化。

4、设置STRETCH后，Grid布局时会有额外的布局流程，可能会带来额外的性能开销。

GridDirection8+枚举说明

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称枚举值描述
Row0主轴布局方向沿水平方向布局，即自左往右先填满一行，再去填下一行。
Column1主轴布局方向沿垂直方向布局，即自上往下先填满一列，再去填下一列。
RowReverse2主轴布局方向沿水平方向反向布局，即自右往左先填满一行，再去填下一行。
ColumnReverse3主轴布局方向沿垂直方向反向布局，即自下往上先填满一列，再去填下一列。

说明

Grid组件通用属性clip的默认值为true。

事件

除支持通用事件和滚动组件通用事件外，还支持以下事件：

onScrollIndex

onScrollIndex(event: (first: number, last: number) => void)

当前网格显示的起始位置/终止位置的item发生变化时触发。网格初始化时会触发一次。Grid显示区域上第一个子组件/最后一个组件的索引值有变化就会触发。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
firstnumber是当前显示的网格起始位置的索引值。
last10+number是当前显示的网格终止位置的索引值。

onItemDragStart8+

onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => (() => any) | void)

开始拖拽网格元素时触发。返回void表示不能拖拽。

手指长按GridItem时触发该事件。

由于拖拽检测也需要长按，且事件处理机制优先触发子组件事件，GridItem上绑定LongPressGesture时无法触发拖拽。如有长按和拖拽同时使用的需求可以使用通用拖拽事件。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
eventItemDragInfo是拖拽点的信息。
itemIndexnumber是被拖拽网格元素索引值。

onItemDragEnter8+

onItemDragEnter(event: (event: ItemDragInfo) => void)

拖拽进入网格元素范围内时触发。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
eventItemDragInfo是拖拽点的信息。

onItemDragMove8+

onItemDragMove(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void)

拖拽在网格元素范围内移动时触发。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
eventItemDragInfo是拖拽点的信息。
itemIndexnumber是拖拽起始位置。
insertIndexnumber是拖拽插入位置。

onItemDragLeave8+

onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void)

拖拽离开网格元素时触发。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
eventItemDragInfo是拖拽点的信息。
itemIndexnumber是拖拽离开的网格元素索引值。

onItemDrop8+

onItemDrop(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void)

绑定该事件的网格元素可作为拖拽释放目标，当在网格元素内停止拖拽时触发。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
eventItemDragInfo是拖拽点的信息。
itemIndexnumber是拖拽起始位置。
insertIndexnumber是拖拽插入位置。
isSuccessboolean是是否成功释放

onScrollBarUpdate10+

onScrollBarUpdate(event: (index: number, offset: number) => ComputedBarAttribute)

当前网格显示的起始位置item发生变化时触发，可通过该回调设置滚动条的位置及长度。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
indexnumber是当前显示的网格起始位置的索引值。
offsetnumber是当前显示的网格起始位置元素相对网格显示起始位置的偏移，单位vp。

返回值：

类型说明
ComputedBarAttribute滚动条的位置及长度。

onReachStart10+

onReachStart(event: () => void)

网格到达起始位置时触发。

Grid初始化时会触发一次，Grid滚动到起始位置时触发一次。Grid边缘效果为弹簧效果时，划动经过起始位置时触发一次，回弹回起始位置时再触发一次。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

onReachEnd10+

onReachEnd(event: () => void)

网格到达末尾位置时触发。

Grid边缘效果为弹簧效果时，划动经过末尾位置时触发一次，回弹回末尾位置时再触发一次。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

onScrollFrameBegin10+

onScrollFrameBegin(event: (offset: number, state: ScrollState) => { offsetRemain: number })

网格开始滑动时触发，事件参数传入即将发生的滑动量，事件处理函数中可根据应用场景计算实际需要的滑动量并作为事件处理函数的返回值返回，网格将按照返回值的实际滑动量进行滑动。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
offsetnumber是即将发生的滑动量，单位vp。
stateScrollState是当前滑动状态。

返回值：

类型说明
{ offsetRemain: number }实际滑动量，单位vp。

onScrollStart10+

onScrollStart(event: () => void)

网格滑动开始时触发。手指拖动网格或网格的滚动条触发的滑动开始时，会触发该事件。使用Scroller滑动控制器触发的带动画的滑动，动画开始时会触发该事件。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

onScrollStop10+

onScrollStop(event: () => void)

网格滑动停止时触发。手指拖动网格或网格的滚动条触发的滑动，手指离开屏幕并且滑动停止时会触发该事件。使用Scroller滑动控制器触发的带动画的滑动，动画停止会触发该事件。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

onScroll(deprecated)

onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void)

网格滑动时触发。

从API version 10开始使用。

从API version 12开始废弃不再使用，建议使用onDidScroll替代。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
scrollOffsetnumber是

每帧滚动的偏移量，Grid的内容向上滚动时偏移量为正，向下滚动时偏移量为负。

单位vp。

scrollStateScrollState是当前滑动状态。

ComputedBarAttribute10+对象说明

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型只读可选说明
totalOffsetnumber否否Grid内容相对显示区域的总偏移，单位px。
totalLengthnumber否否Grid内容总长度，单位px。

示例

示例1

固定行列的Grid，可以使用GridLayoutOptions中的onGetRectByIndex指定GridItem的位置和大小。

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct GridExample {
  5.   @State numbers1: String[] = ['0', '1', '2', '3', '4']
  6.   @State numbers2: String[] = ['0', '1','2','3','4','5']
  7.  
  8.   layoutOptions3: GridLayoutOptions = {
  9.     regularSize: [1, 1],
  10.     onGetRectByIndex: (index: number) => {
  11.       if (index == 0)
  12.         return [0, 0, 1, 1]
  13.       else if(index==1)
  14.         return [0, 1, 2, 2]
  15.       else if(index==2)
  16.         return [0 ,3 ,3 ,3]
  17.       else if(index==3)
  18.         return [3, 0, 3, 3]
  19.       else if(index==4)
  20.         return [4, 3, 2, 2]
  21.       else
  22.         return [5, 5, 1, 1]
  23.     }
  24.   }
  25.  
  26.   build() {
  27.     Column({ space: 5 }) {
  28.       Grid() {
  29.         ForEach(this.numbers1, (day: string) => {
  30.           ForEach(this.numbers1, (day: string) => {
  31.             GridItem() {
  32.               Text(day)
  33.                 .fontSize(16)
  34.                 .backgroundColor(0xF9CF93)
  35.                 .width('100%')
  36.                 .height('100%')
  37.                 .textAlign(TextAlign.Center)
  38.             }
  39.           }, (day: string) => day)
  40.         }, (day: string) => day)
  41.       }
  42.       .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
  43.       .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
  44.       .columnsGap(10)
  45.       .rowsGap(10)
  46.       .width('90%')
  47.       .backgroundColor(0xFAEEE0)
  48.       .height(300)
  49.  
  50.       Text('GridLayoutOptions的使用：onGetRectByIndex。').fontColor(0xCCCCCC).fontSize(9).width('90%')
  51.  
  52.       Grid(undefined, this.layoutOptions3) {
  53.         ForEach(this.numbers2, (day: string) => {
  54.           GridItem() {
  55.             Text(day)
  56.               .fontSize(16)
  57.               .backgroundColor(0xF9CF93)
  58.               .width('100%')
  59.               .height("100%")
  60.               .textAlign(TextAlign.Center)
  61.           }
  62.           .height("100%")
  63.           .width('100%')
  64.         }, (day: string) => day)
  65.       }
  66.       .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')
  67.       .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')
  68.       .columnsGap(10)
  69.       .rowsGap(10)
  70.       .width('90%')
  71.       .backgroundColor(0xFAEEE0)
  72.       .height(300)
  73.     }.width('100%').margin({ top: 5 })
  74.   }
  75. }

示例2

可滚动Grid，包括所有滚动属性和事件。

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct GridExample {
  5.   @State numbers: String[] = ['0', '1', '2', '3', '4']
  6.   scroller: Scroller = new Scroller()
  7.   @State gridPosition: number = 0 //0代表滚动到grid顶部，1代表中间值，2代表滚动到grid底部。
  8.  
  9.   build() {
  10.     Column({ space: 5 }) {
  11.       Text('scroll').fontColor(0xCCCCCC).fontSize(9).width('90%')
  12.       Grid(this.scroller) {
  13.         ForEach(this.numbers, (day: string) => {
  14.           ForEach(this.numbers, (day: string) => {
  15.             GridItem() {
  16.               Text(day)
  17.                 .fontSize(16)
  18.                 .backgroundColor(0xF9CF93)
  19.                 .width('100%')
  20.                 .height(80)
  21.                 .textAlign(TextAlign.Center)
  22.             }
  23.           }, (day: string) => day)
  24.         }, (day: string) => day)
  25.       }
  26.       .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
  27.       .columnsGap(10)
  28.       .rowsGap(10)
  29.       .friction(0.6)
  30.       .enableScrollInteraction(true)
  31.       .supportAnimation(false)
  32.       .multiSelectable(false)
  33.       .edgeEffect(EdgeEffect.Spring)
  34.       .scrollBar(BarState.On)
  35.       .scrollBarColor(Color.Grey)
  36.       .scrollBarWidth(4)
  37.       .width('90%')
  38.       .backgroundColor(0xFAEEE0)
  39.       .height(300)
  40.       .onScrollIndex((first: number, last: number) => {
  41.         console.info(first.toString())
  42.         console.info(last.toString())
  43.       })
  44.       .onScrollBarUpdate((index: number, offset: number) => {
  45.         console.info("XXX" + 'Grid onScrollBarUpdate,index : ' + index.toString() + ",offset" + offset.toString())
  46.         return { totalOffset: (index / 5) * (80 + 10) - offset, totalLength: 80 * 5 + 10 * 4 }
  47.       })  //只适用于当前示例代码数据源，如果数据源有变化，则需要修改该部分代码，或者删掉此属性
  48.       .onDidScroll((scrollOffset: number, scrollState: ScrollState) => {
  49.         console.info(scrollOffset.toString())
  50.         console.info(scrollState.toString())
  51.       })
  52.       .onScrollStart(() => {
  53.         console.info("XXX" + "Grid onScrollStart")
  54.       })
  55.       .onScrollStop(() => {
  56.         console.info("XXX" + "Grid onScrollStop")
  57.       })
  58.       .onReachStart(() => {
  59.         this.gridPosition = 0
  60.         console.info("XXX" + "Grid onReachStart")
  61.       })
  62.       .onReachEnd(() => {
  63.         this.gridPosition = 2
  64.         console.info("XXX" + "Grid onReachEnd")
  65.       })
  66.  
  67.       Button('next page')
  68.         .onClick(() => { // 点击后滑到下一页
  69.           this.scroller.scrollPage({ next: true })
  70.         })
  71.     }.width('100%').margin({ top: 5 })
  72.   }
  73. }

示例3

GridLayoutOptions的使用：irregularIndexes与onGetIrregularSizeByIndex。

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct GridExample {
  5.   @State numbers: String[] = ['0', '1', '2', '3', '4']
  6.   scroller: Scroller = new Scroller()
  7.   layoutOptions1: GridLayoutOptions = {
  8.     regularSize: [1, 1],        // 只支持[1, 1]
  9.     irregularIndexes: [0, 6],   // 索引为0和6的GridItem占用一行
  10.   }
  11.  
  12.   layoutOptions2: GridLayoutOptions = {
  13.     regularSize: [1, 1],
  14.     irregularIndexes: [0, 7],   // 索引为0和7的GridItem占用的列数由onGetIrregularSizeByIndex指定
  15.     onGetIrregularSizeByIndex: (index: number) => {
  16.       if (index === 0) {
  17.         return [1, 5]
  18.       }
  19.       return [1, index % 6 + 1]
  20.     }
  21.   }
  22.  
  23.   build() {
  24.     Column({ space: 5 }) {
  25.       Grid(this.scroller, this.layoutOptions1) {
  26.         ForEach(this.numbers, (day: string) => {
  27.           ForEach(this.numbers, (day: string) => {
  28.             GridItem() {
  29.               Text(day)
  30.                 .fontSize(16)
  31.                 .backgroundColor(0xF9CF93)
  32.                 .width('100%')
  33.                 .height(80)
  34.                 .textAlign(TextAlign.Center)
  35.             }.selectable(false)
  36.           }, (day: string) => day)
  37.         }, (day: string) => day)
  38.       }
  39.       .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
  40.       .columnsGap(10)
  41.       .rowsGap(10)
  42.       .multiSelectable(true)
  43.       .scrollBar(BarState.Off)
  44.       .width('90%')
  45.       .backgroundColor(0xFAEEE0)
  46.       .height(300)
  47.  
  48.       Text('scroll').fontColor(0xCCCCCC).fontSize(9).width('90%')
  49.       // 不使用scroll，需要undefined占位
  50.       Grid(undefined, this.layoutOptions2) {
  51.         ForEach(this.numbers, (day: string) => {
  52.           ForEach(this.numbers, (day: string) => {
  53.             GridItem() {
  54.               Text(day)
  55.                 .fontSize(16)
  56.                 .backgroundColor(0xF9CF93)
  57.                 .width('100%')
  58.                 .height(80)
  59.                 .textAlign(TextAlign.Center)
  60.             }
  61.           }, (day: string) => day)
  62.         }, (day: string) => day)
  63.       }
  64.       .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
  65.       .columnsGap(10)
  66.       .rowsGap(10)
  67.       .scrollBar(BarState.Off)
  68.       .width('90%')
  69.       .backgroundColor(0xFAEEE0)
  70.       .height(300)
  71.     }.width('100%').margin({ top: 5 })
  72.   }
  73. }

示例4

nestedScroll和onScrollFrameBegin的使用。

  1. @Entry
  2. @Component
  3. struct GridExample {
  4.   @State colors: number[] = [0xFFC0CB, 0xDA70D6, 0x6B8E23, 0x6A5ACD, 0x00FFFF, 0x00FF7F]
  5.   @State numbers: number[] = []
  6.   @State translateY: number = 0
  7.   private scroller: Scroller = new Scroller()
  8.   private gridScroller: Scroller = new Scroller()
  9.   private touchDown: boolean = false
  10.   private listTouchDown: boolean = false
  11.   private scrolling: boolean = false
  12.  
  13.   aboutToAppear() {
  14.     for (let i = 0; i < 100; i++) {
  15.       this.numbers.push(i)
  16.     }
  17.   }
  18.  
  19.   build() {
  20.     Stack() {
  21.       Column() {
  22.         Row() {
  23.           Text('Head')
  24.         }
  25.  
  26.         Column() {
  27.           List({ scroller: this.scroller }) {
  28.             ListItem() {
  29.               Grid() {
  30.                 GridItem() {
  31.                   Text('GoodsTypeList1')
  32.                 }
  33.                 .backgroundColor(this.colors[0])
  34.                 .columnStart(0)
  35.                 .columnEnd(1)
  36.  
  37.                 GridItem() {
  38.                   Text('GoodsTypeList2')
  39.                 }
  40.                 .backgroundColor(this.colors[1])
  41.                 .columnStart(0)
  42.                 .columnEnd(1)
  43.  
  44.                 GridItem() {
  45.                   Text('GoodsTypeList3')
  46.                 }
  47.                 .backgroundColor(this.colors[2])
  48.                 .columnStart(0)
  49.                 .columnEnd(1)
  50.  
  51.                 GridItem() {
  52.                   Text('GoodsTypeList4')
  53.                 }
  54.                 .backgroundColor(this.colors[3])
  55.                 .columnStart(0)
  56.                 .columnEnd(1)
  57.  
  58.                 GridItem() {
  59.                   Text('GoodsTypeList5')
  60.                 }
  61.                 .backgroundColor(this.colors[4])
  62.                 .columnStart(0)
  63.                 .columnEnd(1)
  64.               }
  65.               .scrollBar(BarState.Off)
  66.               .columnsGap(15)
  67.               .rowsGap(10)
  68.               .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
  69.               .columnsTemplate('1fr')
  70.               .width('100%')
  71.               .height(200)
  72.             }
  73.  
  74.             ListItem() {
  75.               Grid(this.gridScroller) {
  76.                 ForEach(this.numbers, (item: number) => {
  77.                   GridItem() {
  78.                     Text(item + '')
  79.                       .fontSize(16)
  80.                       .backgroundColor(0xF9CF93)
  81.                       .width('100%')
  82.                       .height('100%')
  83.                       .textAlign(TextAlign.Center)
  84.                   }
  85.                   .width('100%')
  86.                   .height(40)
  87.                   .shadow({ radius: 10, color: '#909399', offsetX: 1, offsetY: 1 })
  88.                   .borderRadius(10)
  89.                   .translate({ x: 0, y: this.translateY })
  90.                 }, (item: string) => item)
  91.               }
  92.               .columnsTemplate('1fr 1fr')
  93.               .friction(0.3)
  94.               .columnsGap(15)
  95.               .rowsGap(10)
  96.               .scrollBar(BarState.Off)
  97.               .width('100%')
  98.               .height('100%')
  99.               .layoutDirection(GridDirection.Column)
  100.               .nestedScroll({
  101.                 scrollForward: NestedScrollMode.PARENT_FIRST,
  102.                 scrollBackward: NestedScrollMode.SELF_FIRST
  103.               })
  104.               .onTouch((event: TouchEvent) => {
  105.                 if (event.type == TouchType.Down) {
  106.                   this.listTouchDown = true
  107.                 } else if (event.type == TouchType.Up) {
  108.                   this.listTouchDown = false
  109.                 }
  110.               })
  111.             }
  112.           }
  113.           .scrollBar(BarState.Off)
  114.           .edgeEffect(EdgeEffect.None)
  115.           .onTouch((event: TouchEvent) => {
  116.             if (event.type == TouchType.Down) {
  117.               this.touchDown = true
  118.             } else if (event.type == TouchType.Up) {
  119.               this.touchDown = false
  120.             }
  121.           })
  122.           .onScrollFrameBegin((offset: number, state: ScrollState) => {
  123.             if (this.scrolling && offset > 0) {
  124.               let newOffset = this.scroller.currentOffset().yOffset
  125.               if (newOffset >= 590) {
  126.                 this.gridScroller.scrollBy(0, offset)
  127.                 return { offsetRemain: 0 }
  128.               } else if (newOffset + offset > 590) {
  129.                 this.gridScroller.scrollBy(0, newOffset + offset - 590)
  130.                 return { offsetRemain: 590 - newOffset }
  131.               }
  132.             }
  133.             return { offsetRemain: offset }
  134.           })
  135.           .onScrollStart(() => {
  136.             if (this.touchDown && !this.listTouchDown) {
  137.               this.scrolling = true
  138.             }
  139.           })
  140.           .onScrollStop(() => {
  141.             this.scrolling = false
  142.           })
  143.         }
  144.         .width('100%')
  145.         .height('100%')
  146.         .padding({ left: 10, right: 10 })
  147.       }
  148.  
  149.       Row() {
  150.         Text('Top')
  151.           .width(30)
  152.           .height(30)
  153.           .borderRadius(50)
  154.       }
  155.       .padding(5)
  156.       .borderRadius(50)
  157.       .backgroundColor('#ffffff')
  158.       .shadow({ radius: 10, color: '#909399', offsetX: 1, offsetY: 1 })
  159.       .margin({ right: 22, bottom: 15 })
  160.       .onClick(() => {
  161.         this.scroller.scrollTo({ xOffset: 0, yOffset: 0 })
  162.         this.gridScroller.scrollTo({ xOffset: 0, yOffset: 0 })
  163.       })
  164.     }
  165.     .align(Alignment.BottomEnd)
  166.   }
  167. }

示例5

  1. 设置属性editMode(true)设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem。
  2. 在onItemDragStart回调中设置拖拽过程中显示的图片。
  3. 在onItemDrop中获取拖拽起始位置，和拖拽插入位置，并在onItemDrop中完成交换数组位置逻辑。

说明

预览器窗口不支持显示拖拽跟手。

  1. @Entry
  2. @Component
  3. struct GridExample {
  4.   @State numbers: string[] = []
  5.   scroller: Scroller = new Scroller()
  6.   @State text: string = 'drag'
  7.  
  8.   @Builder pixelMapBuilder() { //拖拽过程样式
  9.     Column() {
  10.       Text(this.text)
  11.         .fontSize(16)
  12.         .backgroundColor(0xF9CF93)
  13.         .width(80)
  14.         .height(80)
  15.         .textAlign(TextAlign.Center)
  16.     }
  17.   }
  18.  
  19.   aboutToAppear() {
  20.     for (let i = 1;i <= 15; i++) {
  21.       this.numbers.push(i + '')
  22.     }
  23.   }
  24.  
  25.   changeIndex(index1: number, index2: number) { //交换数组位置
  26.     let temp: string;
  27.     temp = this.numbers[index1];
  28.     this.numbers[index1] = this.numbers[index2];
  29.     this.numbers[index2] = temp;
  30.   }
  31.  
  32.   build() {
  33.     Column({ space: 5 }) {
  34.       Grid(this.scroller) {
  35.         ForEach(this.numbers, (day: string) => {
  36.           GridItem() {
  37.             Text(day)
  38.               .fontSize(16)
  39.               .backgroundColor(0xF9CF93)
  40.               .width(80)
  41.               .height(80)
  42.               .textAlign(TextAlign.Center)
  43.           }
  44.         })
  45.       }
  46.       .columnsTemplate('1fr 1fr 1fr')
  47.       .columnsGap(10)
  48.       .rowsGap(10)
  49.       .width('90%')
  50.       .backgroundColor(0xFAEEE0)
  51.       .height(300)
  52.       .editMode(true) //设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem
  53.       .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { //第一次拖拽此事件绑定的组件时，触发回调。
  54.         this.text = this.numbers[itemIndex]
  55.         return this.pixelMapBuilder() //设置拖拽过程中显示的图片。
  56.       })
  57.       .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { //绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。
  58.         // isSuccess=false时，说明drop的位置在grid外部；insertIndex > length时，说明有新增元素的事件发生
  59.         if (!isSuccess || insertIndex >= this.numbers.length) {
  60.           return
  61.         }
  62.         console.info('beixiang' + itemIndex + '', insertIndex + '') //itemIndex拖拽起始位置，insertIndex拖拽插入位置
  63.         this.changeIndex(itemIndex, insertIndex)
  64.       })
  65.     }.width('100%').margin({ top: 5 })
  66.   }
  67. }

示例图：

网格子组件开始拖拽：

网格子组件拖拽过程中：

网格子组件1与子组件6拖拽交换位置后：

示例6

layoutDirection、maxcount、minCount、cellLength的使用。

  1. @Entry
  2. @Component
  3. struct GridExample {
  4.   @State numbers: string[] = []
  5.  
  6.   aboutToAppear() {
  7.     for (let i = 1; i <= 30; i++) {
  8.       this.numbers.push(i + '')
  9.     }
  10.   }
  11.  
  12.   build() {
  13.     Scroll() {
  14.       Column({ space: 5 }) {
  15.         Blank()
  16.         Text('rowsTemplate、columnsTemplate都不设置layoutDirection、maxcount、minCount、cellLength才生效')
  17.           .fontSize(15).fontColor(0xCCCCCC).width('90%')
  18.         Grid() {
  19.           ForEach(this.numbers, (day: string) => {
  20.             GridItem() {
  21.               Text(day).fontSize(16).backgroundColor(0xF9CF93)
  22.             }.width(40).height(80).borderWidth(2).borderColor(Color.Red)
  23.           }, (day: string) => day)
  24.         }
  25.         .height(300)
  26.         .columnsGap(10)
  27.         .rowsGap(10)
  28.         .backgroundColor(0xFAEEE0)
  29.         .maxCount(6)
  30.         .minCount(2)
  31.         .cellLength(0)
  32.         .layoutDirection(GridDirection.Row)
  33.       }
  34.       .width('90%').margin({ top: 5, left: 5, right: 5 })
  35.       .align(Alignment.Center)
  36.     }
  37.   }
  38. }

示例7

双指缩放修改Grid列数。

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct GridExample {
  5.   @State numbers: String[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19']
  6.   @State columns: number = 2
  7.  
  8.   aboutToAppear() {
  9.     let lastCount = AppStorage.get<number>('columnsCount')
  10.     if (typeof lastCount != 'undefined') {
  11.       this.columns = lastCount
  12.     }
  13.   }
  14.  
  15.   build() {
  16.     Column({ space: 5 }) {
  17.       Row() {
  18.         Text('双指缩放改变列数')
  19.           .height('5%')
  20.           .margin({ top: 10, left: 20 })
  21.       }
  22.  
  23.       Grid() {
  24.         ForEach(this.numbers, (day: string) => {
  25.           ForEach(this.numbers, (day: string) => {
  26.             GridItem() {
  27.               Text(day)
  28.                 .fontSize(16)
  29.                 .backgroundColor(0xF9CF93)
  30.                 .width('100%')
  31.                 .height(80)
  32.                 .textAlign(TextAlign.Center)
  33.             }
  34.           }, (day: string) => day)
  35.         }, (day: string) => day)
  36.       }
  37.       .columnsTemplate('1fr '.repeat(this.columns))
  38.       .columnsGap(10)
  39.       .rowsGap(10)
  40.       .width('90%')
  41.       .scrollBar(BarState.Off)
  42.       .backgroundColor(0xFAEEE0)
  43.       .height('100%')
  44.       .cachedCount(3)
  45.       // 切换列数item位置重排动画
  46.       .animation({
  47.         duration: 300,
  48.         curve: Curve.Smooth
  49.       })
  50.       .priorityGesture(
  51.         PinchGesture()
  52.           .onActionEnd((event: GestureEvent) => {
  53.             console.info('end scale:' + event.scale)
  54.             // 手指分开，减少列数以放大Item，触发阈值可以自定义，示例为2
  55.             if (event.scale > 2) {
  56.               this.columns--
  57.             } else if (event.scale < 0.6) {
  58.               this.columns++
  59.             }
  60.             // 可以根据设备屏幕宽度设定最大和最小列数，此处以最小1列最大4列为例
  61.             this.columns = Math.min(4, Math.max(1, this.columns));
  62.             AppStorage.setOrCreate<number>('columnsCount', this.columns)
  63.           })
  64.       )
  65.     }.width('100%').margin({ top: 5 })
  66.   }
  67. }

示例8

属性columnsTemplate中auto-fill、auto-fit和auto-stretch的使用示例

  1. @Entry
  2. @Component
  3. struct GridColumnsTemplate {
  4.   data: number[] = [0, 1, 2, 3, 4, 5]
  5.   data1: number[] = [0, 1, 2, 3, 4, 5]
  6.   data2: number[] = [0, 1, 2, 3, 4, 5]
  7.  
  8.   build() {
  9.     Column({ space: 10 }) {
  10.       Text('auto-fill 根据设定的列宽自动计算列数').width('90%')
  11.       Grid() {
  12.         ForEach(this.data, (item: number) => {
  13.           GridItem() {
  14.             Text('N' + item).height(80)
  15.           }
  16.           .backgroundColor(Color.Orange)
  17.         })
  18.       }
  19.       .width('90%')
  20.       .border({ width: 1, color: Color.Black })
  21.       .columnsTemplate('repeat(auto-fill, 70)')
  22.       .columnsGap(10)
  23.       .rowsGap(10)
  24.       .height(150)
  25.  
  26.       Text('auto-fit 先根据设定的列宽计算列数，余下的空间会均分到每一列中').width('90%')
  27.       Grid() {
  28.         ForEach(this.data1, (item: number) => {
  29.           GridItem() {
  30.             Text('N' + item).height(80)
  31.           }
  32.           .backgroundColor(Color.Orange)
  33.         })
  34.       }
  35.       .width('90%')
  36.       .border({ width: 1, color: Color.Black })
  37.       .columnsTemplate('repeat(auto-fit, 70)')
  38.       .columnsGap(10)
  39.       .rowsGap(10)
  40.       .height(150)
  41.  
  42.       Text('auto-stretch 先根据设定的列宽计算列数，余下的空间会均分到每个列间距中').width('90%')
  43.       Grid() {
  44.         ForEach(this.data2, (item: number) => {
  45.           GridItem() {
  46.             Text('N' + item).height(80)
  47.           }
  48.           .backgroundColor(Color.Orange)
  49.         })
  50.       }
  51.       .width('90%')
  52.       .border({ width: 1, color: Color.Black })
  53.       .columnsTemplate('repeat(auto-stretch, 70)')
  54.       .columnsGap(10)
  55.       .rowsGap(10)
  56.       .height(150)
  57.     }
  58.     .width('100%')
  59.     .height('100%')
  60.   }
  61. }

示例9

下面的Grid中包含两列，每列中的GridItem包括高度确定的两个Column和一个高度不确定的Text共三个子组件。

在默认情况下，左右两个GridItem的高度可能是不同的；在设置了Grid的alignItems属性为GridItemAlignment.STRETCH后，一行左右两个GridItem中原本高度较小的GridItem会以另一个高度较大的GridItem的高度作为自己的高度。

  1. @Entry
  2. @Component
  3. struct Index {
  4.   @State data: number[] = [];
  5.   @State items: number[] = [];
  6.  
  7.   aboutToAppear(): void {
  8.     for (let i = 0; i < 100; i++) {
  9.       this.data.push(i)
  10.       this.items.push(this.getSize())
  11.     }
  12.   }
  13.  
  14.   getSize() {
  15.     let ret = Math.floor(Math.random() * 5)
  16.     return Math.max(1, ret)
  17.   }
  18.  
  19.   build() {
  20.     Column({ space: 10 }) {
  21.       Text('Grid alignItems示例代码')
  22.  
  23.       Grid() {
  24.         ForEach(this.data, (item: number) => {
  25.           // GridItem和Column不设置高度，默认会自适应子组件大小，设置STRETCH的场景下，会变成与当前行最高节点同高。
  26.           // 若设置高度，则会保持已设置的高度，不会与当前行最高节点同高。
  27.           GridItem() {
  28.             Column() {
  29.               Column().height(100).backgroundColor('#D5D5D5').width('100%')
  30.               // 中间的Text设置flexGrow(1)来自适应填满父组件的空缺
  31.               Text('这是一段文字。'.repeat(this.items[item]))
  32.                 .flexGrow(1).width('100%').align(Alignment.TopStart)
  33.                 .backgroundColor('#F7F7F7')
  34.               Column().height(50).backgroundColor('#707070').width('100%')
  35.             }
  36.           }
  37.           .border({ color: Color.Black, width: 1 })
  38.         })
  39.       }
  40.       .columnsGap(10)
  41.       .rowsGap(5)
  42.       .columnsTemplate('1fr 1fr')
  43.       .width('80%')
  44.       .height('100%')
  45.       // Grid设置alignItems为STRETCH，以当前行最高的GridItem的高度为其他GridItem的高度。
  46.       .alignItems(GridItemAlignment.STRETCH)
  47.       .scrollBar(BarState.Off)
  48.     }
  49.     .height('100%')
  50.     .width('100%')
  51.   }
  52. }

鸿蒙5.0开发进阶全套学习资料
微信名片
注：本文转载自blog.csdn.net的懂你的大海的文章"https://blog.csdn.net/Androidbye/article/details/144963536"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！