1. 项目概述为什么我们需要无限滚动列表在Unity UGUI的世界里ScrollView滚动视图是构建任何列表、背包、排行榜、聊天记录界面的基石。但当你面对成百上千条数据时原生的ScrollView会瞬间暴露其软肋它会一股脑地把所有列表项ScrollRect下的子物体全部实例化出来。想象一下一个聊天应用有5000条历史消息你的UI画布上就会瞬间多出5000个GameObject每个都带着RectTransform、CanvasRenderer和至少一个Image或Text组件。这带来的直接后果就是初始化卡顿、内存飙升、滑动时掉帧用户体验直线下降。“无限滚动列表”正是为了解决这个痛点而生的核心优化方案。它的核心思想是按需渲染无论你的数据源有多少条1万条、10万条在屏幕上同时存在的UI项永远只有“可视区域能容纳的数量少量缓冲”。当用户滑动时我们动态地复用这些有限的UI项更新它们的内容和位置制造出一种“列表无限长”的错觉。这就像是一个高效的舞台只有有限的几个演员但他们通过快速换装和走位演绎出了千军万马的场面。我接手过不少从“滑动卡成PPT”到“丝滑如德芙”的优化项目无限滚动列表几乎是每个中大型UI项目的标配。网上虽然有不少开源方案但要么封装过度难以定制要么缺少关键的性能陷阱说明。今天我就从一个一线开发者的角度手把手带你从零实现一个高可用、易理解的UGUI无限滚动列表并把我踩过的坑、调优的参数毫无保留地分享给你。2. 核心原理与架构设计2.1 无限滚动的本质对象池与视口裁剪要理解无限滚动必须先吃透两个核心概念对象池Object Pool和视口裁剪Viewport Culling。对象池是性能优化的经典模式。对于列表项我们称之为Item我们不再“用后即焚”Destroy和“即用即建”Instantiate。而是在初始化时就创建好刚好能铺满屏幕并略有缓冲的Item数量例如竖屏列表每项高100像素屏幕高800像素那么创建800/100 2 10个。这些Item被放入一个“池子”里。当某个Item滑出视口Viewport时我们并不销毁它而是将其放回池中并重置状态同时从池中取出一个闲置的Item填充新数据放置到即将进入视口的位置。这个过程就是复用Reuse。视口裁剪是驱动复用的“裁判”。我们需要实时计算当前滚动位置下视口的顶部和底部对于垂直滚动在世界坐标系或本地坐标系中的边界值。然后遍历所有活跃的Item判断其位置是否在视口边界之内。对于滑出视口的Item将其回池对于需要新进入视口的Item从池中取出并安置。这里有一个极易出错的点坐标系转换。ScrollRect的content内容区域的锚点Pivot和Item的锚点设置会直接影响位置计算的逻辑。一个通用的经验是将content的锚点设置为(0.5, 1)顶部居中Item的锚点也设置为(0.5, 1)并采用Top对齐。这样列表的0号位置就在content的顶部计算Item的localPosition.y时逻辑最清晰。2.2 数据与视图的分离MVC思想的简易实践一个健壮的无限滚动列表必须遵循数据与视图分离的原则。我们不能让UI项自己去数据库里拉数据。数据层Model一个简单的ListT或数组存储所有要展示的数据条目。T可以是你的自定义数据类比如ChatMessage、InventoryItemData。控制层Controller这就是我们即将编写的无限滚动列表组件。它持有数据源的引用负责管理对象池监听ScrollRect的滚动事件并在合适的时机执行“取数据-更新视图”的操作。视图层View即Item的Prefab。它应该是一个纯粹的“展示器”提供一个公共方法如SetData(T data)当控制器调用它时它就用传入的数据更新自己的UI元素Text、Image等。这种分离带来的好处是巨大的数据管理变得清晰列表逻辑可以高度复用Item的Prefab可以独立制作和测试。2.3 确定滚动方向与布局方式在动手写代码前必须明确列表的滚动方向垂直滚动Vertical最常见。ScrollRect的Horizontal关闭Vertical开启。Content使用Vertical Layout Group或我们手动设置纵轴位置。水平滚动Horizontal如相册、横向标签栏。ScrollRect的Vertical关闭Horizontal开启。网格滚动Grid这是前两者的结合也是复杂度最高的。它同时存在行和列的概念在复用计算时需要同时考虑行索引和列索引。为了首次理解核心原理我建议先从垂直滚动开始掌握后再扩展到网格。在本指南中我们将以实现一个垂直滚动的无限列表作为主线因为它是理解所有变体的基础。网格滚动的核心算法思想是一致的只是索引计算从一维变成了二维。3. 保姆级实现步骤3.1 第一步搭建UI场景结构创建一个新的UI Canvas。在Canvas下创建一个GameObject命名为ScrollView为其添加Scroll Rect组件和Mask组件Scroll Rect会自动添加。在ScrollView下创建两个子物体Viewport锚点拉伸至全屏。它已经由Scroll Rect自动创建并关联确保其上有Mask或RectMask2D组件推荐RectMask2D性能更好。Content作为Scroll Rect的Content属性赋值对象。这是所有Item的父节点。配置Scroll Rect将Viewport拖入Viewport属性。将Content拖入Content属性。取消勾选Horizontal勾选Vertical。Movement Type通常设为Elastic有回弹效果或Clamped严格限制根据产品需求定。准备Item的Prefab创建一个作为样板的Item如Item_Prefab设计好它的布局图片、文字等。为其创建一个脚本例如UI_InventoryItem里面包含一个SetData(ItemData data)方法。将这个Item保存为Prefab然后从场景中删除或禁用。关键设置将Content的锚点Anchor和中心点Pivot都设置为(0.5, 1)即顶部中心。将Item_Prefab的锚点也设为(0.5, 1)并采用Upper Center对齐。这能保证列表从顶部开始排列位置计算最直观。3.2 第二步编写核心控制器脚本我们创建一个名为InfiniteScrollView的脚本挂在Content物体上。using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class InfiniteScrollView : MonoBehaviour { // 核心组件引用 [SerializeField] private ScrollRect scrollRect; [SerializeField] private RectTransform viewport; [SerializeField] private GameObject itemPrefab; // Item的预制体 [SerializeField] private float itemHeight 100f; // 每个Item的高度 [SerializeField] private int buffer 2; // 视口外的缓冲Item数量 // 数据与池 private ListItemData dataList new ListItemData(); // 你的数据源 private QueueRectTransform itemPool new QueueRectTransform(); // 对象池 private ListRectTransform activeItems new ListRectTransform(); // 当前活跃的Item // 布局计算相关 private float viewportHeight; private int totalItemsVisible; // 视口内能容纳的Item数 private int currentStartIndex 0; // 当前显示的数据起始索引 private Vector2 lastScrollPos; void Start() { if (scrollRect null) scrollRect GetComponentInParentScrollRect(); if (viewport null) viewport scrollRect.viewport; viewportHeight viewport.rect.height; // 计算视口内能完整显示多少个Item向上取整因为可能显示不全 totalItemsVisible Mathf.CeilToInt(viewportHeight / itemHeight) buffer; // 初始化对象池 InitializePool(); // 模拟一些测试数据 for (int i 0; i 1000; i) { dataList.Add(new ItemData($Item {i})); } // 设置Content的总高度这是实现滚动的关键 SetContentHeight(dataList.Count * itemHeight); // 初始填充Item UpdateItems(); // 订阅滚动事件 scrollRect.onValueChanged.AddListener(OnScroll); } void InitializePool() { for (int i 0; i totalItemsVisible; i) { GameObject go Instantiate(itemPrefab, transform); go.SetActive(false); itemPool.Enqueue(go.GetComponentRectTransform()); } } void SetContentHeight(float height) { RectTransform contentRT transform as RectTransform; contentRT.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, height); // 将Content的初始位置设置在顶部 contentRT.anchoredPosition new Vector2(contentRT.anchoredPosition.x, 0); } void OnScroll(Vector2 normalizedPos) { // 简单的防抖判断避免每帧计算 if (Mathf.Abs(scrollRect.content.anchoredPosition.y - lastScrollPos.y) 0.1f) return; UpdateItems(); lastScrollPos scrollRect.content.anchoredPosition.y; } void UpdateItems() { // 1. 计算当前应该显示的数据起始索引 // Content向下滚动时anchoredPosition.y为负值。我们需要知道滚动了多少个Item的高度。 float scrollY Mathf.Abs(scrollRect.content.anchoredPosition.y); int newStartIndex Mathf.FloorToInt(scrollY / itemHeight); // 2. 如果索引没有变化不需要更新 if (newStartIndex currentStartIndex) return; // 3. 计算索引变化量决定是向前滚动还是向后滚动 int diff newStartIndex - currentStartIndex; currentStartIndex newStartIndex; // 4. 复用Item根据滚动方向回收离开视口的Item并补充新进入的Item if (diff 0) { // 向下滚动旧的顶部Item离开视口 for (int i 0; i diff activeItems.Count 0; i) { RecycleItem(activeItems[0]); activeItems.RemoveAt(0); } // 补充新的底部Item int targetEndIndex currentStartIndex totalItemsVisible; for (int i activeItems.Count; i totalItemsVisible (currentStartIndex i) dataList.Count; i) { int dataIndex currentStartIndex i; if (dataIndex targetEndIndex) { SpawnItem(dataIndex); } } } else if (diff 0) { // 向上滚动旧的底部Item离开视口 for (int i 0; i -diff activeItems.Count 0; i) { RecycleItem(activeItems[activeItems.Count - 1]); activeItems.RemoveAt(activeItems.Count - 1); } // 补充新的顶部Item需要插入到列表前面 for (int i 1; i -diff; i) { int dataIndex currentStartIndex - i; if (dataIndex 0) { SpawnItem(dataIndex, true); // true表示插入到顶部 } } } // 5. 更新所有活跃Item的位置 UpdateItemPositions(); } void SpawnItem(int dataIndex, bool insertAtTop false) { if (dataIndex 0 || dataIndex dataList.Count || itemPool.Count 0) return; RectTransform itemRT itemPool.Dequeue(); itemRT.gameObject.SetActive(true); // 获取视图脚本并设置数据 UI_InventoryItem itemView itemRT.GetComponentUI_InventoryItem(); if (itemView ! null) { itemView.SetData(dataList[dataIndex]); } // 设置Item的本地位置Y坐标 float posY -dataIndex * itemHeight; // 因为锚点在顶部所以Y坐标为负 itemRT.anchoredPosition new Vector2(0, posY); // 加入到活跃列表 if (insertAtTop) { activeItems.Insert(0, itemRT); } else { activeItems.Add(itemRT); } } void RecycleItem(RectTransform itemRT) { itemRT.gameObject.SetActive(false); itemPool.Enqueue(itemRT); } void UpdateItemPositions() { for (int i 0; i activeItems.Count; i) { int dataIndex currentStartIndex i; if (dataIndex dataList.Count) { float posY -dataIndex * itemHeight; activeItems[i].anchoredPosition new Vector2(0, posY); } } } // 提供一个外部设置数据的方法 public void SetData(ListItemData newData) { dataList newData; SetContentHeight(dataList.Count * itemHeight); currentStartIndex 0; // 回收所有活跃Item foreach (var item in activeItems) { RecycleItem(item); } activeItems.Clear(); // 重新更新 UpdateItems(); } } // 示例数据类 [System.Serializable] public class ItemData { public string name; public ItemData(string name) { this.name name; } }3.3 第三步实现Item视图脚本UI_InventoryItem脚本挂在你的Item Prefab上负责根据数据更新UI。using UnityEngine; using UnityEngine.UI; public class UI_InventoryItem : MonoBehaviour { [SerializeField] private Text nameText; // 在Inspector中关联 // 可以添加更多UI引用如Image iconImage等 public void SetData(ItemData data) { if (data null) return; nameText.text data.name; // iconImage.sprite LoadSprite(data.iconId); } }3.4 第四步场景配置与测试将编写好的InfiniteScrollView脚本挂载到Content物体上。在Inspector中将Scroll Rect、Viewport、Item Prefab拖拽赋值。正确设置Item Height与你Prefab的高度一致。运行游戏。你应该能看到一个可以流畅滑动的千条数据列表但在Hierarchy窗口中始终只有大约10个左右的Item实例在活跃状态这就是对象池和复用在起作用。4. 性能优化与高级特性4.1 计算优化避免每帧的昂贵操作上面的基础版本在OnScroll回调中每帧都可能触发UpdateItems其中包含了一些计算和循环。虽然对于简单列表足够但在低端设备或复杂Item下可能成为瓶颈。优化点1使用阈值触发更新。不要每次OnScroll都计算而是记录上次更新的Content位置只有当滚动距离超过一个阈值例如半个Item的高度时才触发真正的UpdateItems逻辑。我们在基础代码中已经用lastScrollPos做了一个简单的防抖。优化点2减少GetComponent调用。在SpawnItem中我们每次复用都调用GetComponentUI_InventoryItem()。更好的做法是在对象池初始化时就将每个Item的视图脚本组件缓存起来。// 修改对象池存储Item和其视图组件的配对 private Queue(RectTransform rt, UI_InventoryItem view) itemPool new Queue(RectTransform, UI_InventoryItem)(); void InitializePool() { for (int i 0; i totalItemsVisible; i) { GameObject go Instantiate(itemPrefab, transform); UI_InventoryItem view go.GetComponentUI_InventoryItem(); go.SetActive(false); itemPool.Enqueue((go.GetComponentRectTransform(), view)); } } // 相应地修改SpawnItem和RecycleItem中对池的操作4.2 支持动态高度的Item前面的实现假设所有Item高度固定。但实际需求中Item高度可能由内容决定如不定长文本。这是无限滚动列表的“地狱难度”。思路我们需要预先知道或计算每一个Item的高度。通常有两种策略离线计算在数据加载时根据数据内容如文本字数、图片数量模拟计算出每个Item的精确高度存储在一个数组里。这要求UI布局规则是确定的。按需计算首次需要显示某个Item时实例化一个“计算用”的Item或使用一个模板设置数据强制Canvas渲染一帧然后通过LayoutUtility.GetPreferredHeight或直接读取rectTransform.rect.height来获取其高度并缓存结果。后续滚动到相同索引时直接使用缓存高度。实现动态高度后Content的总高度不再是itemCount * fixedHeight而是所有Item高度之和。每个Item的位置posY也需要通过累加它之前所有Item的高度来计算。复用逻辑变得异常复杂因为“视口内能容纳的Item数”不再是一个固定值需要实时根据视口顶部和底部位置遍历高度数组来查找起始和结束索引。我强烈建议在项目初期就确定是否需要此功能如果不需要坚决使用固定高度。4.3 实现选中、点击与动画效果Item点击为Item Prefab的根节点添加Button组件或在UI_InventoryItem脚本里监听PointerClick事件。关键在于需要将点击事件与数据索引绑定。通常是在SetData时将数据索引dataIndex存储在Item视图脚本的一个字段中点击时通过控制器的一个公开事件或方法将dataIndex传递出去。// 在InfiniteScrollView中 public event System.Actionint OnItemClicked; // 在UI_InventoryItem中 private int _index; private Button _button; void Awake() { _button GetComponentButton(); _button.onClick.AddListener(() { // 假设控制器通过某种方式被访问到这里需要设计访问模式 // 例如FindObjectOfTypeInfiniteScrollView()?.OnItemClicked?.Invoke(_index); }); } public void SetData(ItemData data, int index) { _index index; // ... 其他设置 }选中状态维护一个selectedIndex变量。在UpdateItems或单独的刷新方法中遍历所有activeItems根据其绑定的dataIndex是否等于selectedIndex来切换一个“选中状态”的UI元素如高亮边框的显示/隐藏。入场动画可以在UI_InventoryItem的SetData方法中播放一个简单的渐显CanvasGroup.alpha或缩放动画。注意在RecycleItem时要停止并重置所有动画状态。5. 避坑指南与常见问题排查5.1 坑一Item闪烁或错位现象快速滑动时Item内容突然变化或者位置跳变。根因复用逻辑有缺陷。最常见的原因是索引计算错误或回收/激活顺序错误。排查在UpdateItems方法中打印currentStartIndex,newStartIndex,diff和activeItems.Count观察滚动时逻辑是否符合预期。检查SpawnItem中计算posY的公式。确保符号正确锚点在上方Y坐标为负。确保回收和生成是成对且顺序正确的。向下滚动时回收最上面的生成到最下面。代码中的if (diff 0)和if (diff 0)两个分支必须处理清楚。5.2 坑二滑动到底部或顶部时卡顿/回弹异常现象列表滚动到尽头时感觉被卡住或者Elastic效果异常。根因Content的尺寸计算错误。如果Content的高度计算小于实际所有Item占用的总高度那么滚动区域会提前结束。解决确保SetContentHeight方法传入的高度值是正确的。对于固定高度是数据量 * Item高度。对于动态高度是所有Item高度之和。这个值必须大于等于实际需要的高度。5.3 坑三Mask显示异常Item在视口外仍然可见现象Item滑出Viewport的矩形区域后依然能看到。解决检查Viewport物体上是否有Mask或RectMask2D组件。RectMask2D性能更好推荐使用。确保Item都是Viewport的直接或间接子物体并且都在Content下。有些情况是因为UI元素的缩放Scale或旋转导致了Mask裁剪失效检查这些变换值。5.4 坑四在UI嵌套Canvas或使用Camera渲染时失效现象无限滚动逻辑工作正常但视觉上Item不跟随滚动。根因可能使用了多个Canvas且子Canvas的渲染模式或覆盖设置导致坐标计算基准不一致。建议对于复杂的UI系统尽量将整个滚动列表结构放在同一个Canvas下。如果必须嵌套确保理解RectTransform的坐标系统在不同渲染模式Screen Space - OverlayvsScreen Space - Camera下的差异。在计算位置时可能需要使用Transform.TransformPoint/InverseTransformPoint来进行坐标系转换。5.5 性能问题速查表问题现象可能原因解决方案初始化卡顿首次加载数据量巨大且未使用对象池瞬间实例化过多Item。1. 确保使用对象池只实例化屏幕可见项。2. 分帧加载数据使用Coroutine配合WaitForEndOfFrame。滑动时掉帧1.OnScroll回调中逻辑太重。2. Item的UI过于复杂过多粒子、复杂阴影。3. Canvas被过度污染频繁改变引起批量渲染破坏。1. 优化UpdateItems逻辑增加更新阈值。2. 简化Item UI使用图集禁用不可见Item的动画。3. 将频繁变化的元素如选中高亮分离到子Canvas。内存占用高1. 对象池数量设置过大。2. Item的Prefab引用了大量未压缩的大图。1. 精确计算totalItemsVisible缓冲数buffer设为1-2即可。2. 优化图片资源使用合适的压缩格式和尺寸。点击无响应1. Item上的Raycast Target被禁用。2. 被上层的UI元素如透明的Image遮挡。3. 点击事件脚本未正确绑定或索引传递错误。1. 确保可点击的UI元素Raycast Target为true。2. 检查UI层级。3. 调试点击事件确认索引参数是否正确传递。6. 从垂直列表到网格列表的思路拓展当你掌握了垂直列表网格Grid列表的实现就不再神秘。核心变化在于索引从一维变为二维。布局参数你需要定义ItemWidth、ItemHeight、SpacingX、SpacingY以及每行的列数Columns。索引计算数据索引dataIndex对应的行号row dataIndex / Columns数据索引dataIndex对应的列号col dataIndex % ColumnsItem的本地位置float posX col * (ItemWidth SpacingX); float posY -row * (ItemHeight SpacingY); // 锚点在上方 itemRT.anchoredPosition new Vector2(posX, posY);视口计算你需要计算视口的左上角和右下角在世界/本地坐标系中的位置。判断一个Item是否在视口内需要同时满足它的posX到posXItemWidth在视口的水平范围内且posY到posY-ItemHeight注意Y轴方向在视口的垂直范围内。复用逻辑依然是回收离开视口的Item生成即将进入的Item。但由于是二维你需要计算当前视口所覆盖的“数据矩阵”的起始行、结束行、起始列、结束列。回收和生成的判断会稍微复杂一些但本质思想不变。实现网格列表是对你理解无限滚动原理的一次绝佳考验。我的建议是先在一个新项目中基于垂直列表的代码进行改造一步步增加维度并用少量数据比如一个5x5的网格进行调试确保每个Item都能出现在正确的位置。 
长河君 · 2026/8/7 19:48:41 · 阅读 1.2k Unity UGUI无限滚动列表：从对象池到性能优化的完整实现
1. 项目概述为什么我们需要无限滚动列表在Unity UGUI的世界里ScrollView滚动视图是构建任何列表、背包、排行榜、聊天记录界面的基石。但当你面对成百上千条数据时原生的ScrollView会瞬间暴露其软肋它会一股脑地把所有列表项ScrollRect下的子物体全部实例化出来。想象一下一个聊天应用有5000条历史消息你的UI画布上就会瞬间多出5000个GameObject每个都带着RectTransform、CanvasRenderer和至少一个Image或Text组件。这带来的直接后果就是初始化卡顿、内存飙升、滑动时掉帧用户体验直线下降。“无限滚动列表”正是为了解决这个痛点而生的核心优化方案。它的核心思想是按需渲染无论你的数据源有多少条1万条、10万条在屏幕上同时存在的UI项永远只有“可视区域能容纳的数量少量缓冲”。当用户滑动时我们动态地复用这些有限的UI项更新它们的内容和位置制造出一种“列表无限长”的错觉。这就像是一个高效的舞台只有有限的几个演员但他们通过快速换装和走位演绎出了千军万马的场面。我接手过不少从“滑动卡成PPT”到“丝滑如德芙”的优化项目无限滚动列表几乎是每个中大型UI项目的标配。网上虽然有不少开源方案但要么封装过度难以定制要么缺少关键的性能陷阱说明。今天我就从一个一线开发者的角度手把手带你从零实现一个高可用、易理解的UGUI无限滚动列表并把我踩过的坑、调优的参数毫无保留地分享给你。2. 核心原理与架构设计2.1 无限滚动的本质对象池与视口裁剪要理解无限滚动必须先吃透两个核心概念对象池Object Pool和视口裁剪Viewport Culling。对象池是性能优化的经典模式。对于列表项我们称之为Item我们不再“用后即焚”Destroy和“即用即建”Instantiate。而是在初始化时就创建好刚好能铺满屏幕并略有缓冲的Item数量例如竖屏列表每项高100像素屏幕高800像素那么创建800/100 2 10个。这些Item被放入一个“池子”里。当某个Item滑出视口Viewport时我们并不销毁它而是将其放回池中并重置状态同时从池中取出一个闲置的Item填充新数据放置到即将进入视口的位置。这个过程就是复用Reuse。视口裁剪是驱动复用的“裁判”。我们需要实时计算当前滚动位置下视口的顶部和底部对于垂直滚动在世界坐标系或本地坐标系中的边界值。然后遍历所有活跃的Item判断其位置是否在视口边界之内。对于滑出视口的Item将其回池对于需要新进入视口的Item从池中取出并安置。这里有一个极易出错的点坐标系转换。ScrollRect的content内容区域的锚点Pivot和Item的锚点设置会直接影响位置计算的逻辑。一个通用的经验是将content的锚点设置为(0.5, 1)顶部居中Item的锚点也设置为(0.5, 1)并采用Top对齐。这样列表的0号位置就在content的顶部计算Item的localPosition.y时逻辑最清晰。2.2 数据与视图的分离MVC思想的简易实践一个健壮的无限滚动列表必须遵循数据与视图分离的原则。我们不能让UI项自己去数据库里拉数据。数据层Model一个简单的ListT或数组存储所有要展示的数据条目。T可以是你的自定义数据类比如ChatMessage、InventoryItemData。控制层Controller这就是我们即将编写的无限滚动列表组件。它持有数据源的引用负责管理对象池监听ScrollRect的滚动事件并在合适的时机执行“取数据-更新视图”的操作。视图层View即Item的Prefab。它应该是一个纯粹的“展示器”提供一个公共方法如SetData(T data)当控制器调用它时它就用传入的数据更新自己的UI元素Text、Image等。这种分离带来的好处是巨大的数据管理变得清晰列表逻辑可以高度复用Item的Prefab可以独立制作和测试。2.3 确定滚动方向与布局方式在动手写代码前必须明确列表的滚动方向垂直滚动Vertical最常见。ScrollRect的Horizontal关闭Vertical开启。Content使用Vertical Layout Group或我们手动设置纵轴位置。水平滚动Horizontal如相册、横向标签栏。ScrollRect的Vertical关闭Horizontal开启。网格滚动Grid这是前两者的结合也是复杂度最高的。它同时存在行和列的概念在复用计算时需要同时考虑行索引和列索引。为了首次理解核心原理我建议先从垂直滚动开始掌握后再扩展到网格。在本指南中我们将以实现一个垂直滚动的无限列表作为主线因为它是理解所有变体的基础。网格滚动的核心算法思想是一致的只是索引计算从一维变成了二维。3. 保姆级实现步骤3.1 第一步搭建UI场景结构创建一个新的UI Canvas。在Canvas下创建一个GameObject命名为ScrollView为其添加Scroll Rect组件和Mask组件Scroll Rect会自动添加。在ScrollView下创建两个子物体Viewport锚点拉伸至全屏。它已经由Scroll Rect自动创建并关联确保其上有Mask或RectMask2D组件推荐RectMask2D性能更好。Content作为Scroll Rect的Content属性赋值对象。这是所有Item的父节点。配置Scroll Rect将Viewport拖入Viewport属性。将Content拖入Content属性。取消勾选Horizontal勾选Vertical。Movement Type通常设为Elastic有回弹效果或Clamped严格限制根据产品需求定。准备Item的Prefab创建一个作为样板的Item如Item_Prefab设计好它的布局图片、文字等。为其创建一个脚本例如UI_InventoryItem里面包含一个SetData(ItemData data)方法。将这个Item保存为Prefab然后从场景中删除或禁用。关键设置将Content的锚点Anchor和中心点Pivot都设置为(0.5, 1)即顶部中心。将Item_Prefab的锚点也设为(0.5, 1)并采用Upper Center对齐。这能保证列表从顶部开始排列位置计算最直观。3.2 第二步编写核心控制器脚本我们创建一个名为InfiniteScrollView的脚本挂在Content物体上。using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class InfiniteScrollView : MonoBehaviour { // 核心组件引用 [SerializeField] private ScrollRect scrollRect; [SerializeField] private RectTransform viewport; [SerializeField] private GameObject itemPrefab; // Item的预制体 [SerializeField] private float itemHeight 100f; // 每个Item的高度 [SerializeField] private int buffer 2; // 视口外的缓冲Item数量 // 数据与池 private ListItemData dataList new ListItemData(); // 你的数据源 private QueueRectTransform itemPool new QueueRectTransform(); // 对象池 private ListRectTransform activeItems new ListRectTransform(); // 当前活跃的Item // 布局计算相关 private float viewportHeight; private int totalItemsVisible; // 视口内能容纳的Item数 private int currentStartIndex 0; // 当前显示的数据起始索引 private Vector2 lastScrollPos; void Start() { if (scrollRect null) scrollRect GetComponentInParentScrollRect(); if (viewport null) viewport scrollRect.viewport; viewportHeight viewport.rect.height; // 计算视口内能完整显示多少个Item向上取整因为可能显示不全 totalItemsVisible Mathf.CeilToInt(viewportHeight / itemHeight) buffer; // 初始化对象池 InitializePool(); // 模拟一些测试数据 for (int i 0; i 1000; i) { dataList.Add(new ItemData($Item {i})); } // 设置Content的总高度这是实现滚动的关键 SetContentHeight(dataList.Count * itemHeight); // 初始填充Item UpdateItems(); // 订阅滚动事件 scrollRect.onValueChanged.AddListener(OnScroll); } void InitializePool() { for (int i 0; i totalItemsVisible; i) { GameObject go Instantiate(itemPrefab, transform); go.SetActive(false); itemPool.Enqueue(go.GetComponentRectTransform()); } } void SetContentHeight(float height) { RectTransform contentRT transform as RectTransform; contentRT.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, height); // 将Content的初始位置设置在顶部 contentRT.anchoredPosition new Vector2(contentRT.anchoredPosition.x, 0); } void OnScroll(Vector2 normalizedPos) { // 简单的防抖判断避免每帧计算 if (Mathf.Abs(scrollRect.content.anchoredPosition.y - lastScrollPos.y) 0.1f) return; UpdateItems(); lastScrollPos scrollRect.content.anchoredPosition.y; } void UpdateItems() { // 1. 计算当前应该显示的数据起始索引 // Content向下滚动时anchoredPosition.y为负值。我们需要知道滚动了多少个Item的高度。 float scrollY Mathf.Abs(scrollRect.content.anchoredPosition.y); int newStartIndex Mathf.FloorToInt(scrollY / itemHeight); // 2. 如果索引没有变化不需要更新 if (newStartIndex currentStartIndex) return; // 3. 计算索引变化量决定是向前滚动还是向后滚动 int diff newStartIndex - currentStartIndex; currentStartIndex newStartIndex; // 4. 复用Item根据滚动方向回收离开视口的Item并补充新进入的Item if (diff 0) { // 向下滚动旧的顶部Item离开视口 for (int i 0; i diff activeItems.Count 0; i) { RecycleItem(activeItems[0]); activeItems.RemoveAt(0); } // 补充新的底部Item int targetEndIndex currentStartIndex totalItemsVisible; for (int i activeItems.Count; i totalItemsVisible (currentStartIndex i) dataList.Count; i) { int dataIndex currentStartIndex i; if (dataIndex targetEndIndex) { SpawnItem(dataIndex); } } } else if (diff 0) { // 向上滚动旧的底部Item离开视口 for (int i 0; i -diff activeItems.Count 0; i) { RecycleItem(activeItems[activeItems.Count - 1]); activeItems.RemoveAt(activeItems.Count - 1); } // 补充新的顶部Item需要插入到列表前面 for (int i 1; i -diff; i) { int dataIndex currentStartIndex - i; if (dataIndex 0) { SpawnItem(dataIndex, true); // true表示插入到顶部 } } } // 5. 更新所有活跃Item的位置 UpdateItemPositions(); } void SpawnItem(int dataIndex, bool insertAtTop false) { if (dataIndex 0 || dataIndex dataList.Count || itemPool.Count 0) return; RectTransform itemRT itemPool.Dequeue(); itemRT.gameObject.SetActive(true); // 获取视图脚本并设置数据 UI_InventoryItem itemView itemRT.GetComponentUI_InventoryItem(); if (itemView ! null) { itemView.SetData(dataList[dataIndex]); } // 设置Item的本地位置Y坐标 float posY -dataIndex * itemHeight; // 因为锚点在顶部所以Y坐标为负 itemRT.anchoredPosition new Vector2(0, posY); // 加入到活跃列表 if (insertAtTop) { activeItems.Insert(0, itemRT); } else { activeItems.Add(itemRT); } } void RecycleItem(RectTransform itemRT) { itemRT.gameObject.SetActive(false); itemPool.Enqueue(itemRT); } void UpdateItemPositions() { for (int i 0; i activeItems.Count; i) { int dataIndex currentStartIndex i; if (dataIndex dataList.Count) { float posY -dataIndex * itemHeight; activeItems[i].anchoredPosition new Vector2(0, posY); } } } // 提供一个外部设置数据的方法 public void SetData(ListItemData newData) { dataList newData; SetContentHeight(dataList.Count * itemHeight); currentStartIndex 0; // 回收所有活跃Item foreach (var item in activeItems) { RecycleItem(item); } activeItems.Clear(); // 重新更新 UpdateItems(); } } // 示例数据类 [System.Serializable] public class ItemData { public string name; public ItemData(string name) { this.name name; } }3.3 第三步实现Item视图脚本UI_InventoryItem脚本挂在你的Item Prefab上负责根据数据更新UI。using UnityEngine; using UnityEngine.UI; public class UI_InventoryItem : MonoBehaviour { [SerializeField] private Text nameText; // 在Inspector中关联 // 可以添加更多UI引用如Image iconImage等 public void SetData(ItemData data) { if (data null) return; nameText.text data.name; // iconImage.sprite LoadSprite(data.iconId); } }3.4 第四步场景配置与测试将编写好的InfiniteScrollView脚本挂载到Content物体上。在Inspector中将Scroll Rect、Viewport、Item Prefab拖拽赋值。正确设置Item Height与你Prefab的高度一致。运行游戏。你应该能看到一个可以流畅滑动的千条数据列表但在Hierarchy窗口中始终只有大约10个左右的Item实例在活跃状态这就是对象池和复用在起作用。4. 性能优化与高级特性4.1 计算优化避免每帧的昂贵操作上面的基础版本在OnScroll回调中每帧都可能触发UpdateItems其中包含了一些计算和循环。虽然对于简单列表足够但在低端设备或复杂Item下可能成为瓶颈。优化点1使用阈值触发更新。不要每次OnScroll都计算而是记录上次更新的Content位置只有当滚动距离超过一个阈值例如半个Item的高度时才触发真正的UpdateItems逻辑。我们在基础代码中已经用lastScrollPos做了一个简单的防抖。优化点2减少GetComponent调用。在SpawnItem中我们每次复用都调用GetComponentUI_InventoryItem()。更好的做法是在对象池初始化时就将每个Item的视图脚本组件缓存起来。// 修改对象池存储Item和其视图组件的配对 private Queue(RectTransform rt, UI_InventoryItem view) itemPool new Queue(RectTransform, UI_InventoryItem)(); void InitializePool() { for (int i 0; i totalItemsVisible; i) { GameObject go Instantiate(itemPrefab, transform); UI_InventoryItem view go.GetComponentUI_InventoryItem(); go.SetActive(false); itemPool.Enqueue((go.GetComponentRectTransform(), view)); } } // 相应地修改SpawnItem和RecycleItem中对池的操作4.2 支持动态高度的Item前面的实现假设所有Item高度固定。但实际需求中Item高度可能由内容决定如不定长文本。这是无限滚动列表的“地狱难度”。思路我们需要预先知道或计算每一个Item的高度。通常有两种策略离线计算在数据加载时根据数据内容如文本字数、图片数量模拟计算出每个Item的精确高度存储在一个数组里。这要求UI布局规则是确定的。按需计算首次需要显示某个Item时实例化一个“计算用”的Item或使用一个模板设置数据强制Canvas渲染一帧然后通过LayoutUtility.GetPreferredHeight或直接读取rectTransform.rect.height来获取其高度并缓存结果。后续滚动到相同索引时直接使用缓存高度。实现动态高度后Content的总高度不再是itemCount * fixedHeight而是所有Item高度之和。每个Item的位置posY也需要通过累加它之前所有Item的高度来计算。复用逻辑变得异常复杂因为“视口内能容纳的Item数”不再是一个固定值需要实时根据视口顶部和底部位置遍历高度数组来查找起始和结束索引。我强烈建议在项目初期就确定是否需要此功能如果不需要坚决使用固定高度。4.3 实现选中、点击与动画效果Item点击为Item Prefab的根节点添加Button组件或在UI_InventoryItem脚本里监听PointerClick事件。关键在于需要将点击事件与数据索引绑定。通常是在SetData时将数据索引dataIndex存储在Item视图脚本的一个字段中点击时通过控制器的一个公开事件或方法将dataIndex传递出去。// 在InfiniteScrollView中 public event System.Actionint OnItemClicked; // 在UI_InventoryItem中 private int _index; private Button _button; void Awake() { _button GetComponentButton(); _button.onClick.AddListener(() { // 假设控制器通过某种方式被访问到这里需要设计访问模式 // 例如FindObjectOfTypeInfiniteScrollView()?.OnItemClicked?.Invoke(_index); }); } public void SetData(ItemData data, int index) { _index index; // ... 其他设置 }选中状态维护一个selectedIndex变量。在UpdateItems或单独的刷新方法中遍历所有activeItems根据其绑定的dataIndex是否等于selectedIndex来切换一个“选中状态”的UI元素如高亮边框的显示/隐藏。入场动画可以在UI_InventoryItem的SetData方法中播放一个简单的渐显CanvasGroup.alpha或缩放动画。注意在RecycleItem时要停止并重置所有动画状态。5. 避坑指南与常见问题排查5.1 坑一Item闪烁或错位现象快速滑动时Item内容突然变化或者位置跳变。根因复用逻辑有缺陷。最常见的原因是索引计算错误或回收/激活顺序错误。排查在UpdateItems方法中打印currentStartIndex,newStartIndex,diff和activeItems.Count观察滚动时逻辑是否符合预期。检查SpawnItem中计算posY的公式。确保符号正确锚点在上方Y坐标为负。确保回收和生成是成对且顺序正确的。向下滚动时回收最上面的生成到最下面。代码中的if (diff 0)和if (diff 0)两个分支必须处理清楚。5.2 坑二滑动到底部或顶部时卡顿/回弹异常现象列表滚动到尽头时感觉被卡住或者Elastic效果异常。根因Content的尺寸计算错误。如果Content的高度计算小于实际所有Item占用的总高度那么滚动区域会提前结束。解决确保SetContentHeight方法传入的高度值是正确的。对于固定高度是数据量 * Item高度。对于动态高度是所有Item高度之和。这个值必须大于等于实际需要的高度。5.3 坑三Mask显示异常Item在视口外仍然可见现象Item滑出Viewport的矩形区域后依然能看到。解决检查Viewport物体上是否有Mask或RectMask2D组件。RectMask2D性能更好推荐使用。确保Item都是Viewport的直接或间接子物体并且都在Content下。有些情况是因为UI元素的缩放Scale或旋转导致了Mask裁剪失效检查这些变换值。5.4 坑四在UI嵌套Canvas或使用Camera渲染时失效现象无限滚动逻辑工作正常但视觉上Item不跟随滚动。根因可能使用了多个Canvas且子Canvas的渲染模式或覆盖设置导致坐标计算基准不一致。建议对于复杂的UI系统尽量将整个滚动列表结构放在同一个Canvas下。如果必须嵌套确保理解RectTransform的坐标系统在不同渲染模式Screen Space - OverlayvsScreen Space - Camera下的差异。在计算位置时可能需要使用Transform.TransformPoint/InverseTransformPoint来进行坐标系转换。5.5 性能问题速查表问题现象可能原因解决方案初始化卡顿首次加载数据量巨大且未使用对象池瞬间实例化过多Item。1. 确保使用对象池只实例化屏幕可见项。2. 分帧加载数据使用Coroutine配合WaitForEndOfFrame。滑动时掉帧1.OnScroll回调中逻辑太重。2. Item的UI过于复杂过多粒子、复杂阴影。3. Canvas被过度污染频繁改变引起批量渲染破坏。1. 优化UpdateItems逻辑增加更新阈值。2. 简化Item UI使用图集禁用不可见Item的动画。3. 将频繁变化的元素如选中高亮分离到子Canvas。内存占用高1. 对象池数量设置过大。2. Item的Prefab引用了大量未压缩的大图。1. 精确计算totalItemsVisible缓冲数buffer设为1-2即可。2. 优化图片资源使用合适的压缩格式和尺寸。点击无响应1. Item上的Raycast Target被禁用。2. 被上层的UI元素如透明的Image遮挡。3. 点击事件脚本未正确绑定或索引传递错误。1. 确保可点击的UI元素Raycast Target为true。2. 检查UI层级。3. 调试点击事件确认索引参数是否正确传递。6. 从垂直列表到网格列表的思路拓展当你掌握了垂直列表网格Grid列表的实现就不再神秘。核心变化在于索引从一维变为二维。布局参数你需要定义ItemWidth、ItemHeight、SpacingX、SpacingY以及每行的列数Columns。索引计算数据索引dataIndex对应的行号row dataIndex / Columns数据索引dataIndex对应的列号col dataIndex % ColumnsItem的本地位置float posX col * (ItemWidth SpacingX); float posY -row * (ItemHeight SpacingY); // 锚点在上方 itemRT.anchoredPosition new Vector2(posX, posY);视口计算你需要计算视口的左上角和右下角在世界/本地坐标系中的位置。判断一个Item是否在视口内需要同时满足它的posX到posXItemWidth在视口的水平范围内且posY到posY-ItemHeight注意Y轴方向在视口的垂直范围内。复用逻辑依然是回收离开视口的Item生成即将进入的Item。但由于是二维你需要计算当前视口所覆盖的“数据矩阵”的起始行、结束行、起始列、结束列。回收和生成的判断会稍微复杂一些但本质思想不变。实现网格列表是对你理解无限滚动原理的一次绝佳考验。我的建议是先在一个新项目中基于垂直列表的代码进行改造一步步增加维度并用少量数据比如一个5x5的网格进行调试确保每个Item都能出现在正确的位置。