当前位置: 首页 > article >正文

Unity UGUI SuperScrollView介绍

先铺垫一下ScrollView

Unity中常用的ScrollView 是 Unity 中的一个常见 UI 组件,主要用于创建可滚动的视图。当内容超过其显示区域时,ScrollView 可以让用户通过滚动查看全部内容。它通常包含一个显示区域和一个内容区域,内容区域可以超过显示区域的大小,用户可以上下、左右拖动或滚动查看超出范围的内容。

ScrollView 组件的组成部分:

Viewport(视口):这是 ScrollView 中的可视区域。内容区域超过这个区域后会被裁剪掉,只有在这个区域内的内容可见。

Content(内容):这是实际显示的内容,可以是图片、文本、按钮等其他 UI 元素。Content 通常会比 Viewport 大。

Scrollbar(滚动条):这是一个可选的子组件,可以让用户通过滚动条来滚动内容。ScrollView 可以有水平和垂直两个方向的滚动条。

当你有一段超出当前显示区域的内容时,比如列表、大段文本、图片库等,你可以使用 ScrollView 组件来创建一个可滚动的界面,让用户能够查看所有的内容而不需要改变界面布局。

我常规使用该组件的时候通常都会出现该结构,一般我会删掉水平滑动条,然后在content中添加布局组件,然后我先Resources.Load加载item(这里有人会将制成的item直接放到content下,生成item前拿到这个提前放置的item),然后克隆item.如果item功能复杂我会为Item创建一个脚本,功能写在这个脚本中,否则直接写在生成Item的脚本中.数量如果多到成百上千可能会使用对象池做优化.这样一套下来自己实现实在烦累,本插件就很好的为我们做了上面的工作.

本文旨在帮助你快速了解该插件,以及介绍一下常见用法.

1.概述

在UGUI SuperScrollView包中,有三个主要组件:LoopListView2、LoopGridView 和 LoopStaggeredGridView。

LoopListView2、LoopGridView 和 LoopStaggeredGridView 这些组件都附加在同一个UGUI的ScrollRect游戏对象上。它们用于帮助UGUI的ScrollRect支持任意数量的项目,同时提供高性能和节省内存的功能。你可以理解为为ScrollRect组件拓展了功能.

该包中包含88个示例,这些示例都使用了上述三个组件之一。

插件的Demo目录下包含大量示例场景,这些示例都使用了上述三个组件之一,如下分类

你可以稍后看示例,先跳转到示例之后的核心组件部分,三大核心组件是本插件的核心

1. List View(列表视图)

使用 LoopListView2 组件,提供各种从列表滚动的方向、删除、加载更多、筛选等功能:

基础滚动效果:

从上到下、左到右、下到上、右到左的滚动。

交互效果:

选择和删除项、下拉刷新、上拉加载更多、点击加载更多等。

高级功能:

多种预制件展示、内容自适应、简单循环列表(类似于无限滚动)。

2. Grid View(网格视图)

使用 LoopGridView 组件,网格布局的滚动和交互效果,适用于需要在二维空间展示数据的情况:

基础滚动效果:

同样支持从上到下、左到右、下到上、右到左的滚动。

高级效果:

多预制件网格、斜向滚动、多样筛选和交互。

3. Staggered View(错位视图)

使用 LoopStaggeredGridView 组件,与 Pinterest 风格相似,适合不规则高度(垂直方向)或宽度(水平方向)的项目展示:

滚动效果:

垂直和水平错位滚动。

交互效果:

移动到指定项目,适合展示图片墙等复杂布局。

4. Special Grid View(特殊网格视图)

使用 LoopListView2,类似于网格视图,但带有特殊功能:

高级交互:

支持删除、下拉刷新、加载更多等操作,通常用于带有特殊展示效果的网格布局。

5. Responsive View(响应式视图)

同样使用 LoopListView2,该视图专注于自适应屏幕大小,适合不同设备分辨率:

主要功能:

动态调整视图布局,支持刷新和加载。

6. Chat View(聊天视图)

使用 LoopListView2,模拟聊天界面:

特色功能:

支持聊天内容的自动加载与刷新,支持改变视口高度来适应窗口大小。

7. Gallery(画廊视图)

使用 LoopListView2,适用于展示图片或内容轮播:

展示方式:

水平或垂直展示图片的画廊效果。

8. Tree View(树状视图)

使用 LoopListView2,用于显示分级树状结构的项目:

树结构效果:

支持树节点的嵌套、头部保持静止,以及项目的动态添加或删除。

9. Page View(分页视图)

使用 LoopListView2,用于分屏展示内容:

主要功能:

适合用于分页式的内容展示,如幻灯片或分步教程。

10. Spin View(旋转选择器)

使用 LoopListView2,适合日期或时间选择器:

主要功能:

支持日期、时间的滚动选择。

11. Nested View(嵌套视图)

支持 LoopListView2 和 LoopGridView 组件,允许嵌套视图布局:

嵌套效果:

可以嵌套列表和网格布局,适合复杂的视图结构展示。

12. List View Animation(列表视图动画)

为列表视图添加动画效果:

动画类型:

项目添加、删除、展开时的剪切、淡入淡出、左右滑动等动画。

13. Draggable View(可拖动视图)

支持拖动项目的列表视图:

拖动效果:

列表项可以通过拖动重新排序。

2.核心组件

LoopListView2

LoopListView2 概述

对于一个包含10,000个item的 ScrollRect,LoopListView2 实际上并不会真正创建10,000个,而是根据 视口的大小创建少量item。

当 ScrollRect 向上滚动时,LoopListView2 组件会检查最顶部项目的位置。一旦最顶部的项目超出视口范围,LoopListView2 组件就会回收该item。

与此同时,它会检查最底部item的位置,一旦最底部的项目接近视口底部时,LoopListView2 组件会调用 onGetItemByIndex 来创建一个新item,并将新创建的定位在最底部.

每个item可以使用不同的预制件,并且可以有不同的高度、宽度和间距。

简而言之 ScrollRect 有10,000个项目,但实际上只会创建7个。

LoopListView2 的核心属性解析

1. ItemPrefabList(Item 预制件列表)

作用:该列表包含了 ScrollView 中所有使用的 Item 预制件(Prefab)。每个 Item 可以使用不同的 Prefab,且每个 Prefab 可以定义自己的 default padding(内边距),即 ScrollRect 中每个 Item 之间的间隔。

(X/Y)PosOffset:在 Vertical ScrollRect(垂直滚动视图)中为 X 轴位置偏移;在 Horizontal ScrollRect(水平滚动视图)中为 Y 轴位置偏移。这些偏移值控制了每个 Item 在初始状态下的位置。

对象池机制(Object Pool):每个 Prefab 都有一个对象池用于复用 Item,避免频繁创建和销毁对象。InitCreateCount 表示在初始化时池中预创建的 Item 数量。

动态调整:你可以在运行时通过 onGetItemByIndex 回调为每个 Item 动态调整 padding 和 (X/Y)PosOffset。

使用 LoopListViewItem2.Padding 和 LoopListViewItem2.StartPosOffset 可以获取或设置这些属性。

注意:所有 Item 的 localScale(本地缩放比例)必须为 (1,1,1),否则会导致布局异常。

2. SupportScrollbar(支持滚动条)

作用:勾选该选项后,LoopListView2 组件将支持与滚动条同步。用户拖动滚动条时,列表内容会相应滚动。

3. ItemSnapEnable(启用 Item 吸附)

作用:启用此选项后,当滚动结束时,组件会自动将某个 Item 吸附(Snap) 到预设的位置,提升交互体验。常用于居中或边界吸附。

4. ItemSnapPivot(Item 吸附枢轴点)

作用:该属性定义 Item 自身的吸附枢轴点,采用 归一化比例坐标:

(0,0) 表示 Item 的左下角。

(1,1) 表示 Item 的右上角。

常见配置:(0.5, 0.5) 表示吸附在 Item 的中心。

5. ViewPortSnapPivot(视口吸附枢轴点)

作用:该属性定义 ScrollRect Viewport 的吸附枢轴点,决定 Item 吸附时在 Viewport 中的位置。同样使用归一化比例坐标:

(0,0) 表示 Viewport 的左下角。

(1,1) 表示 Viewport 的右上角。

常见配置:(0.5, 0.5) 表示吸附在 Viewport 的中心。

6. ArrangeType(排列方向)

设置滚动视图(ScrollRect)的滚动方向,决定了 ScrollRect 中 Item 的排列顺序和方向。根据方向的不同,有以下四种类型:

TopToBottom(从上到下)

使用场景:适用于 垂直 ScrollRect。

排列方式:Item 会按照 item0, item1, ..., itemN 的顺序,从 上到下 依次排列在 Viewport 中。

示例:常见于聊天列表或消息通知列表。

BottomToTop(从下到上)

使用场景:适用于 垂直 ScrollRect。

排列方式:Item 会按照 item0, item1, ..., itemN 的顺序,从 下到上 依次排列在 Viewport 中。

示例:常见于需要最新内容在上方显示的场景,比如新闻推送或时间轴。

 LeftToRight(从左到右)

使用场景:适用于 水平 ScrollRect。

排列方式:Item 会按照 item0, item1, ..., itemN 的顺序,从 左到右 依次排列在 Viewport 中。

示例:常用于商品横向滑动浏览列表或轮播图。

RightToLeft(从右到左)

使用场景:适用于 水平 ScrollRect。

排列方式:Item 会按照 item0, item1, ..., itemN 的顺序,从 右到左 依次排列在 Viewport 中。

示例:适用于右向滑动的阅读列表或横向浏览页面。

LoopListView2 重要公共方法解析
1)InitListView 方法

作用:该方法用于初始化 LoopListView2 组件,并且需要传入 3个参数:

参数 1:itemTotalCount(Item 总数)

作用:设置滚动视图中 Item 的总数。

值为 -1:表示 Item 数量是无限的,此时不支持滚动条(Scrollbar)。ItemIndex 的范围从 负无穷到正无穷.

值为 >= 0:表示 Item 数量是有限的,ItemIndex 的范围从 0 到 itemTotalCount - 1。

参数 2:onGetItemByIndex(获取 Item 回调函数)

概括的说:

我们的滚动视窗UI更新的时候(即当某个 Item 进入 ScrollRect 的 Viewport时,系统会调用该回调函数),content下的Item将会生成.

Item需要初始化(比如更新文字,图片,绑定事件),那么我们就在这个回调函数中进行这些操作,这个回调将为我们提供LoopListView2 自身和Item在视窗中的索引,返回给我们一个LoopListViewItem2,每个创建的 Item 都会自动绑定一个 LoopListViewItem2 组件。

一个官方示例

        可以看到先判断索引,然后获取数据(这个数据是你自己)

        然后通过LoopListViewItem2 .NewListViewItem方法生成一个Item,你可以通过传入不同的预制件名称来改变样式(这里还返回一个自动为你添加的LoopListViewItem2 组件).

     这个名称就是刚才ItemPrefabList中你添加进列表中的(当然一般就一种).然后通过NewListViewItem返回的Item你可以获取自己的组件,更新UI,绑定方法等等

LoopListViewItem2(返回值)

作用:onGetItemByIndex 回调函数的返回值,

LoopListViewItem2 相关属性

mItemIndex(Item 索引)

作用:表示该 Item 在列表中的索引位置。

无限列表(itemTotalCount = -1):mItemIndex 范围从 -MaxInt 到 +MaxInt。

有限列表(itemTotalCount >= 0):mItemIndex 范围从 0 到 itemTotalCount - 1。

mItemId(自定义 Item ID)

作用:表示该 Item 的用户自定义 ID,可以设置为任何整型值,用于各种场景(如:搜索某个特定 Item)。

参数3LoopListViewInitParam :

是一个可选参数,用于初始化配置。这个对象允许你自定义一些初始化参数,而不需要每次通过代码或 Inspector 手动设置。你可以用它来控制 ScrollRect 的布局和行为。

LoopListViewInitParam 的常见属性

以下是该参数的常见配置项:

mItemDefaultSize:

每个项的默认尺寸(宽度或高度,取决于垂直或水平布局)。

当项的大小未显式设置时使用。

mDistanceForRecycle0:

当项从视口中滚动超出此距离时会被回收。

mDistanceForNew0:

当视口内需要显示新的项时,达到此距离会触发加载。

mItemPadding:

每个项之间的间距。

mSmoothDumpRate:

平滑滚动的速率。

mSnapMoveSpeed:

对齐滚动的速度。

mItemSnapEnable:

是否启用项的对齐功能。

2) NewListViewItem Method

刚才提到就不赘述了

3)SetListItemCount Method

作用:用于在运行时设置滚动视图中的 Item 总数。

参数为 -1:表示列表中的 Item 数量是无限的,此时不支持滚动条,并且 ItemIndex 范围从 -MaxInt 到 +MaxInt。

参数 >= 0:表示 Item 数量有限,ItemIndex 范围为 0 到 itemTotalCount - 1。

resetPos 参数:

true:调用该方法后会重置 ScrollRect 内容的位置。

false:调用后 ScrollRect 的内容位置保持不变。

4) GetShownItemByItemIndex 方法

作用:根据ItemIndex 获取当前可见的 Item。

返回值:如果该 itemIndex 对应的 Item 不可见,则返回 null。

5) GetShownItemByItemId 方法

作用:根据用户自定义的 itemId 获取当前可见的 Item。

返回值:如果该 itemId 对应的 Item 不可见,则返回 null。

6) GetShownItemByIndex 方法

作用:根据可见列表中的索引获取 Item。

所有可见的 Item 存储在一个 List<LoopListViewItem2> 中,名为 mItemList。

参数:index 的范围为 0 到 mItemList.Count - 1。

7) ShowItemCount 方法

作用:获取当前可见 Item 的总数。

8) RefreshItemByItemIndex 方法

作用:根据 itemIndex 更新指定的 Item。

如果该 itemIndex 对应的 Item 不可见,则该方法不会执行任何操作。

如果可见,则会调用 onGetItemByIndex(itemIndex) 获取更新后的 Item,并重新定位所有可见 Item。

9) RefreshAllShownItem 方法

作用:更新所有可见的 Item。

10) MovePanelToItemIndex 方法

作用:将 ScrollRect 的内容位置移动到指定 itemIndex 的位置,并且加上一个偏移量 offset。

itemIndex 的范围为 0 到 MaxInt。

offset 的范围为 0 到 ScrollRect Viewport 的尺寸。

11) OnItemSizeChanged 方法

作用:当一个可见的 Item 的尺寸(高度或宽度)在运行时发生变化时,需要调用此方法以重新排列所有可见的 Item。

垂直 ScrollRect:如果高度变化,调用此方法重新排列。

水平 ScrollRect:如果宽度变化,调用此方法重新排列。

12) FinishSnapImmediately 方法

作用:立刻完成吸附(Snap),无需动画过渡。

13) CurSnapNearestItemIndex 方法

作用:获取与 Viewport 吸附点最近的 Item 的索引。

14) SetSnapTargetItemIndex 方法

作用:设置吸附的目标 Item 索引。该方法通常用于分页视图(PageView)场景。

15) ClearSnapData 方法

作用:清除当前的吸附目标,组件会自动吸附到 CurSnapNearestItemIndex。

16) GetFirstShownItemIndexAndOffset 方法

作用:获取列表视图中第一个可见 Item 的索引和偏移量。

返回值:ItemPosStruct,包含两个属性:

mItemIndex:第一个可见 Item 的索引。

mItemOffset:该 Item 的偏移量。

LoopGridView

LoopGridView 概述

三大组件还是比较像的,基本上换汤不换药

LoopGridView 组件附加在与 UGUI ScrollRect 相同的游戏对象上。它主要用于所有项具有相同大小,并且行数或列数是固定的 网格视图(GridView)。ScrollRect 可以同时进行水平和垂直滚动。

例如,对于一个包含 10,000 个项的网格(100 行 × 100 列),LoopGridView 实际上不会创建 10,000 个项,而是根据视口的大小动态创建少量的项。

当 ScrollRect 向上滚动时,LoopGridView 会检查最上方行的位置。一旦最上方的行超出视口,组件会将该行的所有项回收。

与此同时,它也会检查最下方行的位置,当该行接近视口底部时,LoopGridView 会调用 onGetItemByRowColumn 处理器来创建一个新行,并将新创建的行及其项排列在当前最下方行的下方,使新行成为新的最下方行。

每个项可以使用不同的预制体(Prefab)。

尽管网格视图定义了 10,000 个项,但实际上只会创建少量必要的项。以下图示展示了一个 从左上到右下(TopLeftToBottomRight) 排列的 ScrollRect(100 行 × 100 列)的示例:

LoopListView2 的核心属性解析

1) ItemPrefabList(项预制体列表)

要克隆的现有项列表。

每个项可以使用不同的预制体(Prefab)。每个预制体都拥有一个用于获取和回收的池(pool),并且 InitCreateCount 设置了启动时在池中创建的项数量。

重要提示:所有预制体的 localScale 必须设置为 (1,1,1),而 ScrollRect 的内容对象的 localScale 也必须设置为 (1,1,1)。

2) GridFixedType(网格固定类型)

此属性的值可以是 ColumnCountFixed(列数固定) 或 RowCountFixed(行数固定)。

这个属性类似于 UGUI 的 GridLayoutGroup.constraint 和 GridLayoutGroup.startAxis,即确定首先沿哪个轴方向排列项。

3) RowCount / ColumnCount(行数 / 列数)

如果 GridFixedType 设置为 ColumnCountFixed,则需要设置网格的列数。

如果设置为 RowCountFixed,则需要设置网格的行数。

此属性类似于 UGUI 的 GridLayoutGroup.constraintCount。

4) Padding(内边距)

定义项与视口之间的间距。此属性类似于 UGUI 的 GridLayoutGroup.Padding。

5) ItemSize(项大小)

设置项的大小。如果 x 或 y 的值为 0,则在初始化 LoopGridView 组件时,项的大小会自动设置为 ItemPrefabList 中第一个预制体的大小。

6) ItemPadding(项间距)

定义网格中每个项之间的间距。

7) RecycleDistance(回收距离)

当项离开视口达到此距离时,该项会被回收。

8) ItemSnapEnable(项对齐启用)

启用此选项后,LoopGridView 组件会尝试将项对齐到配置的位置。

9) ItemSnapPivot(项对齐锚点)

定义项对齐的锚点位置,值为矩形大小的比例。(0,0)表示左下角,而(1,1)表示右上角。

10) ViewPortSnapPivot(视口对齐锚点)

定义 ScrollRect 视口 的对齐锚点位置,值为矩形大小的比例。(0,0)表示左下角,而(1,1)表示右上角。

11) ArrangeType(排列类型)

定义滚动方向,有四种排列方式:

TopLeftToBottomRight(从左上到右下)

BottomLeftToTopRight(从左下到右上)

TopRightToBottomLeft(从右上到左下)

BottomRightToTopLeft(从右下到左上)

LoopGridView重要公共方法解析
1) InitGridView Method

初始化 LoopGridView 组件,包含以下参数:

itemTotalCount:GridView 的总项数,必须为 >=0,项索引范围为 0 至 itemTotalCount - 1。

onGetItemByRowColumn:当项出现在 ScrollRect 视口中时触发,负责创建项并更新其内容,三个int参数顺序为 itemIndex、row、column。

settingParam:LoopGridViewSettingParam 对象,用于在代码中覆盖 Inspector 的默认设置。

LoopGridViewItem:onGetItemByRowColumn 回调的返回值,带有 mItemIndex(索引)和 mItemId(ID)。ID 在创建或从池中获取时设置,回收到池前不会更改。

这个组件和前面提到的类似,也是自动附加的.

2) NewListViewItem Method

从指定的预制体克隆一个新项,通常在 onGetItemByRowColumn 回调中使用。

3)SetListItemCount Method

动态设置 GridView 的总项数。若 resetPos 为 false,ScrollRect 的内容位置不会改变。

4) GetShownItemByItemIndex Method

根据 itemIndex 获取可见项,若不可见则返回 null。

5)GetShownItemByRowColumn Method

根据 (row, column) 获取可见项,若不可见则返回 null。

6)RefreshItemByItemIndex Method

更新指定 itemIndex 的项内容,若该项不可见则不会执行任何操作。

7)RefreshItemByRowColumn Method

根据 (row, column) 更新项内容,若该项不可见则不会执行任何操作。

8)RefreshAllShownItem Method

更新所有当前可见项的内容。

9)MovePanelToItemByIndex Method

将 ScrollRect 的内容移动到指定 itemIndex 项的位置,并添加偏移量。

10)MovePanelToItemByRowColumn Method

将面板移动到 (row, column) 位置的项,并添加偏移量。

11)SetGridFixedGroupCount Method

动态更改 GridFixedType 和固定的行/列数,同时可以设置项大小、间距和内边距。

12)FinishSnapImmediately Method

立即完成当前对齐操作。

13)RowColumnPair Method

获取视口对齐点附近项的 (row, column)。

14)SetSnapTargetItemRowColumn Method

设置要对齐的目标项的 (row, column)。

15)ClearSnapData Method

清除当前对齐目标,使 LoopGridView 自动对齐到最近的项。

LoopStaggeredGridView

LoopStaggeredGridView 概述

LoopStaggeredGridView 主要用于 瀑布流布局(Staggered GridView),适用于垂直 GridView 中项的高度不同(或水平 GridView 中项的宽度不同)的情况。如果 GridView 中的所有项尺寸相同,建议使用 LoopGridView。

LoopStaggeredGridView 类似于 LoopListView2。对于一个包含 10,000 个项的 ScrollRect,LoopStaggeredGridView 不会一次性创建 10,000 个项,而是根据视口大小动态创建少量的项。

功能描述

滚动时项的管理:

在 垂直 GridView 中,当 ScrollRect 向上滚动时,LoopStaggeredGridView 会检查 每列最上方项的位置。

一旦某列的最上方项超出视口,组件会将该项回收。

同时,组件会检查 每列最下方项的位置。当某列的最下方项接近视口底部时,组件会调用 onGetItemByIndex 回调来创建一个新项,并将其放置在该列最下方项的下方。

新项会优先添加到当前所有列中底部位置最高的那一列,即最短列的末尾。

项的排列规则:

项的排列遵循从左到右、从上到下的顺序。

不同尺寸的项:

在垂直 GridView 中,项可以有不同的高度,但必须有相同的宽度。

在水平 GridView 中,项可以有不同的宽度,但高度必须相同。

性能优化:

即使 GridView 包含 10,000 项,实际创建的项数量也取决于视口大小。

LoopStaggeredGridView 的核心属性解析

和前文一样不赘述.

重要提示:所有itemPrefab的localScale必须为(1,1,1)。

LoopStaggeredGridView 重要公共方法解析
  1. InitListView Method

初始化 LoopStaggeredGridView 组件,包含以下参数:

itemTotalCount:

ScrollView 中的总项数,必须设置为 >= 0。

layoutParam:

GridViewLayoutParam 实例,用于设置布局参数。

这个参数就是说你是想做垂直 GridView 中项的高度不同(或水平 GridView 中项的宽度不同)的情况。

垂直 GridView:

mColumnOrRowCount:列数。

mItemWidthOrHeight:项的宽度。

mPadding1:视口左边距。

mPadding2:视口右边距。

水平 GridView:

mColumnOrRowCount:行数。

mItemWidthOrHeight:项的高度。

mPadding1:视口上边距。

mPadding2:视口下边距。

如果 mCustomColumnOrRowOffsetArray 为 null,则平均排列列或行。

如果 mCustomColumnOrRowOffsetArray 不为 null,数组中的值表示每列/行的 X 或 Y 偏移量,数组长度必须等于 mColumnOrRowCount。

onGetItemByItemIndex:

当项进入 ScrollRect 视口时触发,用于创建和更新项内容。

onGetItemSizeByItemIndex(可选):

如果你能提前知道每个项的大小,可以设置此回调,返回指定 itemIndex 的大小和内边距。

如果无法提前知道项大小,MovePanelToItemIndex 方法只能移动到曾经出现在视口中的项。

如果能提前知道项大小,则可以先调用 UpdateContentSizeUpToItemIndex(itemIndex) 确保布局完成,再调用 MovePanelToItemIndex(itemIndex) 进行移动。

LoopStaggeredGridViewItem:

onGetItemByItemIndex 的返回值,自动附加 LoopStaggeredGridViewItem 组件。

mItemIndex:项的索引,范围为 0 到 itemTotalCount - 1。

mItemIndexInGroup:项在列/行中的索引,垂直 GridView 中表示列,水平 GridView 中表示行。

mItemId:项的 ID,在创建或从池中获取时设置,直到回收到池中之前不会更改。

2) NewListViewItem Method

从指定的预制体 itemPrefabName 克隆一个新项,通常在 onGetItemByItemIndex 回调中使用。

3) SetListItemCount Method

动态设置 GridView 的总项数。

如果 resetPos 为 false,ScrollRect 的内容位置不会改变。

4) GetShownItemByItemIndex Method

根据 itemIndex 获取可见项,如果该项不可见,则返回 null。

5) RefreshItemByItemIndex Method

更新指定 itemIndex 的项内容,如果该项不可见则不会执行任何操作。

如果可见,则会先调用 onGetItemByItemIndex(itemIndex) 获取更新后的项,并重新排列同一组(列/行)中的所有可见项。

6) RefreshAllShownItem Method

更新所有当前可见项的内容。

7) MovePanelToItemIndex Method

将 ScrollRect 的内容移动到指定 itemIndex 的项位置,并加上偏移量。

8) OnItemSizeChanged Method

垂直 ScrollRect:如果可见项的高度在运行时发生变化,需要调用此方法重新排列同一列中的所有可见项。

水平 ScrollRect:如果可见项的宽度在运行时发生变化,需要调用此方法重新排列同一行中的所有可见项。

好的目前已经将核心组件的多数内容介绍完了!

实践一下

现在我们使用最简单的情况使用一下LoopListView2 组件做一个滚动视窗

创建一个ScrollView,和item,在和ScrollRect同级的物体上添加我们的LoopListView2组件

注意将ScrollRect组件的Visibility属性调整为Auto Hide.

将Item放到列表中,设置一下ItemPadding调整一下Item之间的间距.

在合适的地方初始化我们的LoopListView2 组件,在回调中初始化我们的item,这就是一个最简单Demo.

效果

END


http://www.kler.cn/news/354637.html

相关文章:

  • ETL技术在金蝶云星空与旺店通WMS集成中的应用
  • 期货交易程序化,哪些API可供选择及如何使用?
  • taro小程序如何全局监听路由变化?
  • 基于SpringBoot+Vue+uniapp微信小程序的乡村政务服务系统的详细设计和实现(源码+lw+部署文档+讲解等)
  • AI学习指南深度学习篇-生成对抗网络的变体及扩展
  • 02 go语言(golang) - 包和模块
  • 什么是 SQL 命令?SQL 如何工作?
  • Maven基于构建阶段分析多余的依赖
  • Linux 下find常用命令整理(更新ing)
  • HCIP-HarmonyOS Application Developer 习题(十二)
  • 阿加犀构建开发者生态的全链路赋能之旅
  • QGIS--DEMTO3D
  • Pytorch分布式训练杂记1
  • DS链式二叉树的基本操作和OJ题(12)
  • mysql数据同步ES方案---DTS
  • 鸿蒙开发 四十四 ArkTs BuilderParam传递UI(二)
  • 开发一个微信小程序要多少钱?
  • Selenium 中定位元素操作集合
  • 面试经典150题刷题记录
  • 代码随想录算法训练营Day28