1. 项目概述与核心价值在Unity3D的UGUI开发中ScrollRect组件是实现列表、背包、排行榜等界面滚动功能的核心。然而当列表项数量巨大时例如一个拥有成百上千条聊天记录或商品列表的界面直接实例化所有UI元素会带来灾难性的性能问题内存占用飙升、初始化卡顿、运行时掉帧。这正是“自动循环滚动列表”技术诞生的背景。它通过一个巧妙的“对象池”机制仅创建和维护一屏可见的少量UI项在滚动过程中动态复用这些项并更新其数据和位置从而模拟出一个无限长的列表。这不仅是性能优化的必备手段更是中高级UI程序员必须掌握的核心技能。网上能找到的循环滚动方案很多但质量参差不齐。有的实现简单但存在滚动时UI项“闪烁”或“跳动”的致命缺陷有的逻辑复杂难以理解和定制。我分享的这套源码是我在多个商业项目中打磨、迭代后的产物。它不仅仅是一段能跑的代码更是一套完整的解决方案重点解决了滚动顺滑性、数据与视图分离以及高度可定制性这三个核心痛点。无论你是想实现一个聊天窗口、一个无限加载的商品列表还是一个复杂的日历视图这套框架都能为你提供一个坚实、可靠的起点。2. 核心设计思路与架构拆解实现一个健壮的循环滚动列表关键在于理解“欺骗”视觉的原理。我们并不是真的拥有成千上万个UI对象在滚动而是让有限的几个对象在视口Viewport内“循环跑圈”。当某个对象向上滚动完全移出视口顶部时我们不是销毁它而是立刻将其移动到列表的底部并更新其显示为下一个逻辑数据项的内容。这样用户看到的始终是连续的滚动效果而程序实际管理的对象数量可能只有10-20个。2.1 核心组件职责划分为了实现清晰的逻辑分离和高度可维护性我将系统拆分为以下几个核心部分LoopScrollRect (核心控制器)继承自Unity原生的ScrollRect。它是整个系统的大脑负责监听滚动事件、计算当前应显示哪些数据索引、管理UI项的位置循环。它不关心具体UI项长什么样只负责调度。ILoopScrollItem (数据项接口)这是一个关键抽象。任何想要在循环列表中显示的UI预制体其挂载的脚本都需要实现这个接口。它定义了SetData(int index)方法用于接收控制器发来的数据索引并据此更新自己的显示内容。这实现了数据与视图的彻底解耦。对象池 (Pool)负责循环列表项Item预制体的实例化、回收和缓存。当需要新的项时从池中取出或实例化当项被回收时放回池中等待下次使用。这是性能保障的基石。数据源 (Data Source)一个抽象的概念可以是ListT、数组或任何能通过索引[index]获取数据的结构。LoopScrollRect通过索引向ILoopScrollItem查询数据因此数据源可以是本地列表也可以是来自网络的分页数据。2.2 滚动与循环的核心算法避免“闪烁”的关键在于对ScrollRect的content内容区域的anchoredPosition进行精准操控。很多初学者实现的循环在项“跳转”的瞬间会触发Layout组件的重新计算如果使用了VerticalLayoutGroup等或者直接设置position导致坐标系突变从而产生视觉上的抖动。我的解决方案是采用“预测补偿”的方式预测在LateUpdate或ScrollRect的onValueChanged事件中实时计算content的局部位置。判断检查最上/最下的项是否已经完全移出视口。补偿一旦需要循环不是直接移动该UI项而是反向调整整个content的anchoredPosition一个Item的高度/宽度的距离同时将需要循环的项移动到另一端并更新其数据。这个操作是在同一帧内完成的且对content位置的调整是平滑的偏移而非项的瞬移因此完全避免了布局重建和视觉闪烁。// 伪代码逻辑示意以垂直滚动为例 private void UpdateItems() { // 获取当前content的顶部位置在content本地空间 float contentTop -content.anchoredPosition.y; // 计算当前视口内应该显示的数据起始索引 int startIndex Mathf.FloorToInt(contentTop / itemSize); // 如果起始索引发生变化 if (startIndex ! currentStartIndex) { int diff startIndex - currentStartIndex; // 循环需要显示的项 for (int i 0; i activeItems.Count; i) { int newIndex startIndex i; // 处理索引越界循环 newIndex (newIndex % totalCount totalCount) % totalCount; // 更新项的数据 activeItems[i].SetData(newIndex); } // 关键补偿content的位置使其“感觉”在连续滚动 // 而不是让Item跳跃 Vector2 pos content.anchoredPosition; pos.y diff * itemSize; content.anchoredPosition pos; currentStartIndex startIndex; } }注意这里有一个非常重要的细节即itemSize项的大小必须是固定值。对于高度不固定的项计算会变得极其复杂通常需要两遍布局计算先估算再精确这超出了基础循环滚动的范畴。本源码默认处理等宽等高或等高不等宽水平滚动的情况这是最常用且性能最优的场景。3. 源码关键模块深度解析3.1 LoopScrollRect 核心控制器详解这个类是系统的中枢。我将其设计为支持水平和垂直两种滚动方向并且通过序列化字段暴露了必要的参数方便在Inspector中配置。using UnityEngine; using UnityEngine.UI; using System.Collections.Generic; public class LoopScrollRect : ScrollRect { [Header(Loop Settings)] public GameObject itemPrefab; // 列表项预制体 public int totalCount 0; // 数据总数量 public int bufferSize 1; // 视口外缓冲的项数用于预加载防止滚动时留白 private float m_ItemSize; // 单个项的大小高度或宽度 private int m_CurrentStartIndex 0; // 当前显示的第一个数据索引 private ListRectTransform m_ActiveItems new ListRectTransform(); // 当前活跃的项 private StackRectTransform m_Pool new StackRectTransform(); // 对象池 protected override void Start() { base.Start(); // 禁用原生的惯性滚动因为循环逻辑需要更精确的控制或者需要特殊处理惯性 // inertia false; Initialize(); } private void Initialize() { if (itemPrefab null) { Debug.LogError(ItemPrefab is not assigned!); return; } // 计算Item的固定大小 RectTransform prefabRect itemPrefab.GetComponentRectTransform(); m_ItemSize (vertical) ? prefabRect.rect.height : prefabRect.rect.width; // 计算一屏最多显示多少个Item向上取整 RectTransform viewportRect viewport.GetComponentRectTransform(); float viewportSize (vertical) ? viewportRect.rect.height : viewportRect.rect.width; int maxShowCount Mathf.CeilToInt(viewportSize / m_ItemSize) bufferSize * 2; // 清空content下所有子物体如果有 foreach (Transform child in content) { Destroy(child.gameObject); } content.anchoredPosition Vector2.zero; m_ActiveItems.Clear(); m_Pool.Clear(); // 预先实例化最大可能显示的Item数量 for (int i 0; i maxShowCount; i) { RectTransform item GetItemFromPool(); m_ActiveItems.Add(item); // 初始设置位置和数据 UpdateItemPositionAndData(item, i); } // 根据总数据量设置content的正确大小这是滚动范围的基础 UpdateContentSize(); } private RectTransform GetItemFromPool() { RectTransform item; if (m_Pool.Count 0) { item m_Pool.Pop(); item.gameObject.SetActive(true); } else { GameObject go Instantiate(itemPrefab, content); item go.GetComponentRectTransform(); } return item; } private void ReturnItemToPool(RectTransform item) { item.gameObject.SetActive(false); m_Pool.Push(item); } // 更新Item的位置和其对应的数据 private void UpdateItemPositionAndData(RectTransform item, int dataIndex) { // 设置位置 Vector2 pos Vector2.zero; if (vertical) { pos.y -dataIndex * m_ItemSize; // 垂直列表从上到下排列 } else { pos.x dataIndex * m_ItemSize; // 水平列表从左到右排列 } item.anchoredPosition pos; // 设置数据 ILoopScrollItem itemScript item.GetComponentILoopScrollItem(); if (itemScript ! null) { // 处理索引循环确保索引在[0, totalCount)范围内 int validIndex (dataIndex % totalCount totalCount) % totalCount; itemScript.SetData(validIndex); } } // 根据总数据量更新Content的大小 private void UpdateContentSize() { Vector2 size content.sizeDelta; if (vertical) { size.y totalCount * m_ItemSize; } else { size.x totalCount * m_ItemSize; } content.sizeDelta size; } // 核心每帧或滚动时更新Item private void LateUpdate() { if (totalCount 0 || m_ActiveItems.Count 0) return; // 计算当前content的“顶部”或“左边”在自身坐标系中的位置 float viewportPos (vertical) ? -content.anchoredPosition.y : content.anchoredPosition.x; // 计算当前应该显示的第一个数据的索引 int newStartIndex Mathf.FloorToInt(viewportPos / m_ItemSize) - bufferSize; newStartIndex Mathf.Clamp(newStartIndex, 0, Mathf.Max(0, totalCount - m_ActiveItems.Count)); if (newStartIndex ! m_CurrentStartIndex) { int offset newStartIndex - m_CurrentStartIndex; // 如果滚动幅度超过了当前持有的Item数量需要完全重置 if (Mathf.Abs(offset) m_ActiveItems.Count) { // 完全重置所有Item for (int i 0; i m_ActiveItems.Count; i) { UpdateItemPositionAndData(m_ActiveItems[i], newStartIndex i); } } else { // 部分循环更新 if (offset 0) // 向下滚动垂直或向右滚动水平 { for (int i 0; i offset; i) { // 回收最前面的Item并放到最后 RectTransform firstItem m_ActiveItems[0]; m_ActiveItems.RemoveAt(0); m_ActiveItems.Add(firstItem); // 更新这个Item为新的最后一项的数据和位置 UpdateItemPositionAndData(firstItem, newStartIndex m_ActiveItems.Count - 1); } } else if (offset 0) // 向上滚动垂直或向左滚动水平 { for (int i 0; i -offset; i) { // 回收最后面的Item并放到最前 RectTransform lastItem m_ActiveItems[m_ActiveItems.Count - 1]; m_ActiveItems.RemoveAt(m_ActiveItems.Count - 1); m_ActiveItems.Insert(0, lastItem); // 更新这个Item为新的第一项的数据和位置 UpdateItemPositionAndData(lastItem, newStartIndex); } } } m_CurrentStartIndex newStartIndex; } } // 对外接口刷新数据例如数据源变化后调用 public void RefreshData(int newTotalCount) { if (newTotalCount 0) newTotalCount 0; totalCount newTotalCount; UpdateContentSize(); // 重置位置并刷新所有活跃Item content.anchoredPosition Vector2.zero; m_CurrentStartIndex 0; for (int i 0; i m_ActiveItems.Count; i) { int dataIndex (i totalCount) ? i : 0; // 如果数据不够显示第一条或留空 UpdateItemPositionAndData(m_ActiveItems[i], dataIndex); } } }3.2 ILoopScrollItem 数据接口设计这个接口极其简洁但它是连接数据和视图的桥梁。你的每个Item的控制器脚本都需要实现它。public interface ILoopScrollItem { /// summary /// 为当前列表项设置数据 /// /summary /// param nameindex数据在总数据源中的索引/param void SetData(int index); }一个具体的实现例子比如一个简单的文本Itemusing UnityEngine; using UnityEngine.UI; public class ExampleLoopItem : MonoBehaviour, ILoopScrollItem { public Text textDisplay; // 在Inspector中关联一个Text组件 // 假设我们有一个全局的数据源列表 // private static Liststring s_DataList new Liststring(); public void SetData(int index) { // 在这里根据索引从你的数据源如静态列表、管理器类等获取真实数据 // string data s_DataList[index]; // textDisplay.text data; // 示例直接显示索引 textDisplay.text $Item Index: {index}; // 你可以在这里做更多事情加载图片、设置按钮事件注意事件需要根据index动态绑定等。 } }3.3 对象池的优化实践上面的GetItemFromPool和ReturnItemToPool是一个最简单的对象池实现。在更复杂的生产环境中你可能需要对其进行增强预热Pre-warm在初始化时不仅实例化一屏的Item可以多实例化几个放入池中避免在快速滚动时因Instantiate导致的瞬时卡顿。池的容量限制防止在极端情况下如数据量从1000变成10池里缓存了过多无用对象需要实现一个最大池容量超出的部分直接Destroy。不同类型Item的池如果你的列表中有多种样式的预制体如聊天列表中的文本消息、图片消息、系统提示你需要为每种预制体维护一个独立的池。// 一个增强版简单对象池示例 public class SimplePool { private StackRectTransform m_Pool new StackRectTransform(); private GameObject m_Prefab; private Transform m_Parent; public SimplePool(GameObject prefab, Transform parent, int prewarmCount 0) { m_Prefab prefab; m_Parent parent; for (int i 0; i prewarmCount; i) { RectTransform rt InstantiateToPool(); rt.gameObject.SetActive(false); m_Pool.Push(rt); } } public RectTransform Get() { RectTransform item; if (m_Pool.Count 0) { item m_Pool.Pop(); item.gameObject.SetActive(true); } else { item InstantiateToPool(); } return item; } public void Release(RectTransform item) { item.gameObject.SetActive(false); m_Pool.Push(item); } private RectTransform InstantiateToPool() { GameObject go Object.Instantiate(m_Prefab, m_Parent); return go.GetComponentRectTransform(); } }4. 完整集成与使用流程4.1 步骤一准备UI预制体在Unity中创建一个UI Image或Panel作为你的列表项Item的根节点。为其添加必要的UI子元素Text, Image, Button等。创建一个C#脚本如MyItemLogic.cs让它实现ILoopScrollItem接口并在SetData方法中编写更新这些UI元素的逻辑。将这个脚本挂载到预制体根节点上。将配置好的GameObject拖入Project窗口生成一个Prefab预制体。4.2 步骤二设置ScrollRect在Canvas下创建一个带有ScrollRect组件的UI结构通常包括一个Viewport和一个Content。删除或禁用原有的ScrollRect组件。添加我们编写的LoopScrollRect脚本。在Inspector中将步骤一制作的预制体拖拽到LoopScrollRect的Item Prefab字段。设置Total Count为你的初始数据条数可以在代码中动态修改。Buffer Size通常设置为1或2即可它决定了在视口外预加载多少项防止快速滚动时边缘出现空白。4.3 步骤三提供数据源与初始化在你的场景管理器或某个控制脚本中初始化数据并获取LoopScrollRect组件进行配置。public class ListManager : MonoBehaviour { public LoopScrollRect loopScroll; private Liststring m_MessageList new Liststring(); void Start() { // 1. 初始化模拟数据 for (int i 0; i 1000; i) { m_MessageList.Add($聊天消息 #{i 1}); } // 2. 告诉LoopScrollRect总数据量 if (loopScroll ! null) { loopScroll.RefreshData(m_MessageList.Count); } // 3. 关键需要让你的Item脚本能访问到这个数据源。 // 方法A使用静态成员简单但不灵活 // ExampleLoopItem.s_DataList m_MessageList; // 方法B使用单例或事件系统在Item的SetData中通过索引向管理器请求数据。 // 这是更推荐的做法耦合度更低。 } // 动态添加一条新数据例如收到新消息 public void AddNewMessage(string msg) { m_MessageList.Add(msg); if (loopScroll ! null) { loopScroll.RefreshData(m_MessageList.Count); // 可选自动滚动到底部 // loopScroll.normalizedPosition Vector2.zero; // 垂直列表底部是0 // 对于垂直列表需要计算1 - (viewport高度 / content高度)。更复杂的操作可以封装一个方法。 } } }4.4 步骤四处理Item内的交互事件如果你的Item里有按钮需要在SetData中为其onClick事件添加监听并且回调函数需要知道当前是第几项。常见的做法是使用闭包lambda表达式或为按钮设置一个带参数的监听器。public class InteractiveLoopItem : MonoBehaviour, ILoopScrollItem { public Button myButton; public Text infoText; private int m_CurrentIndex; // 记录当前索引 void Start() { // 建议在Awake或Start中获取组件引用避免在SetData中频繁调用GetComponent // myButton GetComponentInChildrenButton(); } public void SetData(int index) { m_CurrentIndex index; infoText.text $Item {index}; // 移除旧的监听器防止重复添加 myButton.onClick.RemoveAllListeners(); // 添加新的监听器使用当前index myButton.onClick.AddListener(() OnItemClicked(m_CurrentIndex)); } private void OnItemClicked(int index) { Debug.Log($Clicked on item with data index: {index}); // 在这里处理点击逻辑例如打开详情页删除该项等。 // 需要通过index找到对应的数据。 } }重要提示一定要在SetData中移除旧的监听器(RemoveAllListeners)。因为Item是被循环复用的如果不移除上一次滚动时绑定的点击事件指向旧的index仍然会生效导致点击一个Item却触发了另一个Item的逻辑这是循环滚动列表中最常见的Bug之一。5. 高级技巧、性能优化与避坑指南5.1 性能优化要点避免在滚动过程中进行耗时操作SetData方法会被频繁调用每次Item循环出现时。确保其中的逻辑是轻量级的。绝对不要在SetData里同步加载网络图片或进行复杂的计算。对于图片加载应使用异步加载并缓存。使用布局组件需谨慎不要在content上添加VerticalLayoutGroup或GridLayoutGroup等Unity布局组件。循环滚动的核心是手动精确控制每个Item的位置布局组件会自动计算位置两者冲突会导致显示错乱。所有Item的位置应由LoopScrollRect脚本控制。Draw Call与合批UGUI的合批Batch规则是基于层级Hierarchy顺序和材质/纹理的。由于我们的Item是动态移动的可能会破坏静态的合批。尽量保持Item使用相同的材质和图集Atlas并避免频繁改变Item的层级顺序虽然循环时会移动Transform但仍在同一父节点下影响相对较小。减少Canvas的Rebuild如果Item内部有频繁变化的文本如计时器会触发Canvas的网格重建。对于大量动态文本考虑使用TextMeshPro它在某些情况下的重建开销更优或者将频繁变化的元素分离到子Canvas中。5.2 常见问题与解决方案问题现象可能原因解决方案滚动时Item闪烁、跳动1. 在循环移动Item时直接修改了localPosition触发了布局或渲染脏标记。2.LateUpdate中更新逻辑与Canvas渲染时序冲突。1. 确保使用anchoredPosition进行位置设置并采用“补偿content位置”的策略如核心算法所述。2. 尝试将更新逻辑放在Canvas.willRenderCanvases事件中确保在UI渲染前完成所有位置计算。快速滚动到底部/顶部时出现空白BufferSize设置过小。当滚动速度过快时新Item的实例化和数据更新跟不上滚动的视觉位移。适当增加BufferSize例如从1增加到2或3。但这会增加常驻内存的Item数量需权衡。点击事件错乱点A触发BItem复用后按钮的旧事件监听没有清除。在Item脚本的SetData方法中务必先执行myButton.onClick.RemoveAllListeners()。列表滚动不流畅有卡顿1.SetData逻辑太重。2. 实例化(Instantiate)发生在滚动过程中。3. 使用了耗时的Unity API如GetComponent。1. 优化SetData异步加载资源。2. 确保对象池已预热足够数量的Item。3. 在Awake或Start中缓存组件引用避免在SetData中调用GetComponent。列表项大小不一致时循环出错基础算法假设所有Item大小固定。这是进阶需求。需要实现一个ItemSizeProvider接口能根据索引返回不同项的大小。滚动计算和位置补偿的逻辑会复杂数倍需要记录每个项的累积高度并进行二分查找来确定起始索引。5.3 实现大小不固定的循环列表进阶思路对于高度不固定的Item如不同长度的聊天消息你需要数据预处理在数据源中预先计算或缓存每个索引对应Item的高度。这可能需要先实例化一个Item设置数据后通过LayoutElement或ContentSizeFitter配合Canvas.ForceUpdateCanvases()来获取其实际高度然后缓存这个值。位置计算维护一个“前缀和”数组prefixSum[i]表示前i个Item的总高度。这样第i个Item的起始位置就是prefixSum[i-1]。查找起始索引当滚动时根据content的偏移量viewportPos在prefixSum数组中使用二分查找找到第一个prefixSum[index] viewportPos的索引这个index就是当前视口起始项的逻辑索引。循环与补偿循环逻辑依然类似但移动Item和补偿content位置时需要使用实际的高度值而不是固定的m_ItemSize。实现这个版本复杂度很高但它能完美支持瀑布流等复杂布局。我建议在彻底掌握固定大小循环列表后再尝试挑战。5.4 与分页加载的结合对于超大数据量如十万条即便使用循环列表一次性初始化所有数据也是不现实的。这时需要将循环滚动与分页加载结合。初始化Total Count设置为一个估计值或先设置为0。先加载第一页数据比如20条显示。滚动监听在LoopScrollRect中监听滚动位置。当用户滚动接近底部例如最后几个Item进入视口时触发一个事件。加载更多事件通知数据层加载下一页数据。数据加载完成后增加Total Count并调用RefreshData或一个更优化的AppendData方法。LoopScrollRect会自动调整content大小并更新末尾的Item来显示新数据。注意事项要处理好加载中的状态显示一个“加载中...”的Item以及加载失败的重试机制。同时要防止在短时间内重复触发加载请求。这套源码框架已经为你处理好了视图的循环复用你只需要专注于数据层的分页逻辑和SetData中的内容更新即可。将视图与数据分离的设计使得接入任何形式的数据源本地、网络、数据库都变得清晰而直接。 Unity UGUI高性能循环滚动列表实现：原理、源码与优化
1. 项目概述与核心价值在Unity3D的UGUI开发中ScrollRect组件是实现列表、背包、排行榜等界面滚动功能的核心。然而当列表项数量巨大时例如一个拥有成百上千条聊天记录或商品列表的界面直接实例化所有UI元素会带来灾难性的性能问题内存占用飙升、初始化卡顿、运行时掉帧。这正是“自动循环滚动列表”技术诞生的背景。它通过一个巧妙的“对象池”机制仅创建和维护一屏可见的少量UI项在滚动过程中动态复用这些项并更新其数据和位置从而模拟出一个无限长的列表。这不仅是性能优化的必备手段更是中高级UI程序员必须掌握的核心技能。网上能找到的循环滚动方案很多但质量参差不齐。有的实现简单但存在滚动时UI项“闪烁”或“跳动”的致命缺陷有的逻辑复杂难以理解和定制。我分享的这套源码是我在多个商业项目中打磨、迭代后的产物。它不仅仅是一段能跑的代码更是一套完整的解决方案重点解决了滚动顺滑性、数据与视图分离以及高度可定制性这三个核心痛点。无论你是想实现一个聊天窗口、一个无限加载的商品列表还是一个复杂的日历视图这套框架都能为你提供一个坚实、可靠的起点。2. 核心设计思路与架构拆解实现一个健壮的循环滚动列表关键在于理解“欺骗”视觉的原理。我们并不是真的拥有成千上万个UI对象在滚动而是让有限的几个对象在视口Viewport内“循环跑圈”。当某个对象向上滚动完全移出视口顶部时我们不是销毁它而是立刻将其移动到列表的底部并更新其显示为下一个逻辑数据项的内容。这样用户看到的始终是连续的滚动效果而程序实际管理的对象数量可能只有10-20个。2.1 核心组件职责划分为了实现清晰的逻辑分离和高度可维护性我将系统拆分为以下几个核心部分LoopScrollRect (核心控制器)继承自Unity原生的ScrollRect。它是整个系统的大脑负责监听滚动事件、计算当前应显示哪些数据索引、管理UI项的位置循环。它不关心具体UI项长什么样只负责调度。ILoopScrollItem (数据项接口)这是一个关键抽象。任何想要在循环列表中显示的UI预制体其挂载的脚本都需要实现这个接口。它定义了SetData(int index)方法用于接收控制器发来的数据索引并据此更新自己的显示内容。这实现了数据与视图的彻底解耦。对象池 (Pool)负责循环列表项Item预制体的实例化、回收和缓存。当需要新的项时从池中取出或实例化当项被回收时放回池中等待下次使用。这是性能保障的基石。数据源 (Data Source)一个抽象的概念可以是ListT、数组或任何能通过索引[index]获取数据的结构。LoopScrollRect通过索引向ILoopScrollItem查询数据因此数据源可以是本地列表也可以是来自网络的分页数据。2.2 滚动与循环的核心算法避免“闪烁”的关键在于对ScrollRect的content内容区域的anchoredPosition进行精准操控。很多初学者实现的循环在项“跳转”的瞬间会触发Layout组件的重新计算如果使用了VerticalLayoutGroup等或者直接设置position导致坐标系突变从而产生视觉上的抖动。我的解决方案是采用“预测补偿”的方式预测在LateUpdate或ScrollRect的onValueChanged事件中实时计算content的局部位置。判断检查最上/最下的项是否已经完全移出视口。补偿一旦需要循环不是直接移动该UI项而是反向调整整个content的anchoredPosition一个Item的高度/宽度的距离同时将需要循环的项移动到另一端并更新其数据。这个操作是在同一帧内完成的且对content位置的调整是平滑的偏移而非项的瞬移因此完全避免了布局重建和视觉闪烁。// 伪代码逻辑示意以垂直滚动为例 private void UpdateItems() { // 获取当前content的顶部位置在content本地空间 float contentTop -content.anchoredPosition.y; // 计算当前视口内应该显示的数据起始索引 int startIndex Mathf.FloorToInt(contentTop / itemSize); // 如果起始索引发生变化 if (startIndex ! currentStartIndex) { int diff startIndex - currentStartIndex; // 循环需要显示的项 for (int i 0; i activeItems.Count; i) { int newIndex startIndex i; // 处理索引越界循环 newIndex (newIndex % totalCount totalCount) % totalCount; // 更新项的数据 activeItems[i].SetData(newIndex); } // 关键补偿content的位置使其“感觉”在连续滚动 // 而不是让Item跳跃 Vector2 pos content.anchoredPosition; pos.y diff * itemSize; content.anchoredPosition pos; currentStartIndex startIndex; } }注意这里有一个非常重要的细节即itemSize项的大小必须是固定值。对于高度不固定的项计算会变得极其复杂通常需要两遍布局计算先估算再精确这超出了基础循环滚动的范畴。本源码默认处理等宽等高或等高不等宽水平滚动的情况这是最常用且性能最优的场景。3. 源码关键模块深度解析3.1 LoopScrollRect 核心控制器详解这个类是系统的中枢。我将其设计为支持水平和垂直两种滚动方向并且通过序列化字段暴露了必要的参数方便在Inspector中配置。using UnityEngine; using UnityEngine.UI; using System.Collections.Generic; public class LoopScrollRect : ScrollRect { [Header(Loop Settings)] public GameObject itemPrefab; // 列表项预制体 public int totalCount 0; // 数据总数量 public int bufferSize 1; // 视口外缓冲的项数用于预加载防止滚动时留白 private float m_ItemSize; // 单个项的大小高度或宽度 private int m_CurrentStartIndex 0; // 当前显示的第一个数据索引 private ListRectTransform m_ActiveItems new ListRectTransform(); // 当前活跃的项 private StackRectTransform m_Pool new StackRectTransform(); // 对象池 protected override void Start() { base.Start(); // 禁用原生的惯性滚动因为循环逻辑需要更精确的控制或者需要特殊处理惯性 // inertia false; Initialize(); } private void Initialize() { if (itemPrefab null) { Debug.LogError(ItemPrefab is not assigned!); return; } // 计算Item的固定大小 RectTransform prefabRect itemPrefab.GetComponentRectTransform(); m_ItemSize (vertical) ? prefabRect.rect.height : prefabRect.rect.width; // 计算一屏最多显示多少个Item向上取整 RectTransform viewportRect viewport.GetComponentRectTransform(); float viewportSize (vertical) ? viewportRect.rect.height : viewportRect.rect.width; int maxShowCount Mathf.CeilToInt(viewportSize / m_ItemSize) bufferSize * 2; // 清空content下所有子物体如果有 foreach (Transform child in content) { Destroy(child.gameObject); } content.anchoredPosition Vector2.zero; m_ActiveItems.Clear(); m_Pool.Clear(); // 预先实例化最大可能显示的Item数量 for (int i 0; i maxShowCount; i) { RectTransform item GetItemFromPool(); m_ActiveItems.Add(item); // 初始设置位置和数据 UpdateItemPositionAndData(item, i); } // 根据总数据量设置content的正确大小这是滚动范围的基础 UpdateContentSize(); } private RectTransform GetItemFromPool() { RectTransform item; if (m_Pool.Count 0) { item m_Pool.Pop(); item.gameObject.SetActive(true); } else { GameObject go Instantiate(itemPrefab, content); item go.GetComponentRectTransform(); } return item; } private void ReturnItemToPool(RectTransform item) { item.gameObject.SetActive(false); m_Pool.Push(item); } // 更新Item的位置和其对应的数据 private void UpdateItemPositionAndData(RectTransform item, int dataIndex) { // 设置位置 Vector2 pos Vector2.zero; if (vertical) { pos.y -dataIndex * m_ItemSize; // 垂直列表从上到下排列 } else { pos.x dataIndex * m_ItemSize; // 水平列表从左到右排列 } item.anchoredPosition pos; // 设置数据 ILoopScrollItem itemScript item.GetComponentILoopScrollItem(); if (itemScript ! null) { // 处理索引循环确保索引在[0, totalCount)范围内 int validIndex (dataIndex % totalCount totalCount) % totalCount; itemScript.SetData(validIndex); } } // 根据总数据量更新Content的大小 private void UpdateContentSize() { Vector2 size content.sizeDelta; if (vertical) { size.y totalCount * m_ItemSize; } else { size.x totalCount * m_ItemSize; } content.sizeDelta size; } // 核心每帧或滚动时更新Item private void LateUpdate() { if (totalCount 0 || m_ActiveItems.Count 0) return; // 计算当前content的“顶部”或“左边”在自身坐标系中的位置 float viewportPos (vertical) ? -content.anchoredPosition.y : content.anchoredPosition.x; // 计算当前应该显示的第一个数据的索引 int newStartIndex Mathf.FloorToInt(viewportPos / m_ItemSize) - bufferSize; newStartIndex Mathf.Clamp(newStartIndex, 0, Mathf.Max(0, totalCount - m_ActiveItems.Count)); if (newStartIndex ! m_CurrentStartIndex) { int offset newStartIndex - m_CurrentStartIndex; // 如果滚动幅度超过了当前持有的Item数量需要完全重置 if (Mathf.Abs(offset) m_ActiveItems.Count) { // 完全重置所有Item for (int i 0; i m_ActiveItems.Count; i) { UpdateItemPositionAndData(m_ActiveItems[i], newStartIndex i); } } else { // 部分循环更新 if (offset 0) // 向下滚动垂直或向右滚动水平 { for (int i 0; i offset; i) { // 回收最前面的Item并放到最后 RectTransform firstItem m_ActiveItems[0]; m_ActiveItems.RemoveAt(0); m_ActiveItems.Add(firstItem); // 更新这个Item为新的最后一项的数据和位置 UpdateItemPositionAndData(firstItem, newStartIndex m_ActiveItems.Count - 1); } } else if (offset 0) // 向上滚动垂直或向左滚动水平 { for (int i 0; i -offset; i) { // 回收最后面的Item并放到最前 RectTransform lastItem m_ActiveItems[m_ActiveItems.Count - 1]; m_ActiveItems.RemoveAt(m_ActiveItems.Count - 1); m_ActiveItems.Insert(0, lastItem); // 更新这个Item为新的第一项的数据和位置 UpdateItemPositionAndData(lastItem, newStartIndex); } } } m_CurrentStartIndex newStartIndex; } } // 对外接口刷新数据例如数据源变化后调用 public void RefreshData(int newTotalCount) { if (newTotalCount 0) newTotalCount 0; totalCount newTotalCount; UpdateContentSize(); // 重置位置并刷新所有活跃Item content.anchoredPosition Vector2.zero; m_CurrentStartIndex 0; for (int i 0; i m_ActiveItems.Count; i) { int dataIndex (i totalCount) ? i : 0; // 如果数据不够显示第一条或留空 UpdateItemPositionAndData(m_ActiveItems[i], dataIndex); } } }3.2 ILoopScrollItem 数据接口设计这个接口极其简洁但它是连接数据和视图的桥梁。你的每个Item的控制器脚本都需要实现它。public interface ILoopScrollItem { /// summary /// 为当前列表项设置数据 /// /summary /// param nameindex数据在总数据源中的索引/param void SetData(int index); }一个具体的实现例子比如一个简单的文本Itemusing UnityEngine; using UnityEngine.UI; public class ExampleLoopItem : MonoBehaviour, ILoopScrollItem { public Text textDisplay; // 在Inspector中关联一个Text组件 // 假设我们有一个全局的数据源列表 // private static Liststring s_DataList new Liststring(); public void SetData(int index) { // 在这里根据索引从你的数据源如静态列表、管理器类等获取真实数据 // string data s_DataList[index]; // textDisplay.text data; // 示例直接显示索引 textDisplay.text $Item Index: {index}; // 你可以在这里做更多事情加载图片、设置按钮事件注意事件需要根据index动态绑定等。 } }3.3 对象池的优化实践上面的GetItemFromPool和ReturnItemToPool是一个最简单的对象池实现。在更复杂的生产环境中你可能需要对其进行增强预热Pre-warm在初始化时不仅实例化一屏的Item可以多实例化几个放入池中避免在快速滚动时因Instantiate导致的瞬时卡顿。池的容量限制防止在极端情况下如数据量从1000变成10池里缓存了过多无用对象需要实现一个最大池容量超出的部分直接Destroy。不同类型Item的池如果你的列表中有多种样式的预制体如聊天列表中的文本消息、图片消息、系统提示你需要为每种预制体维护一个独立的池。// 一个增强版简单对象池示例 public class SimplePool { private StackRectTransform m_Pool new StackRectTransform(); private GameObject m_Prefab; private Transform m_Parent; public SimplePool(GameObject prefab, Transform parent, int prewarmCount 0) { m_Prefab prefab; m_Parent parent; for (int i 0; i prewarmCount; i) { RectTransform rt InstantiateToPool(); rt.gameObject.SetActive(false); m_Pool.Push(rt); } } public RectTransform Get() { RectTransform item; if (m_Pool.Count 0) { item m_Pool.Pop(); item.gameObject.SetActive(true); } else { item InstantiateToPool(); } return item; } public void Release(RectTransform item) { item.gameObject.SetActive(false); m_Pool.Push(item); } private RectTransform InstantiateToPool() { GameObject go Object.Instantiate(m_Prefab, m_Parent); return go.GetComponentRectTransform(); } }4. 完整集成与使用流程4.1 步骤一准备UI预制体在Unity中创建一个UI Image或Panel作为你的列表项Item的根节点。为其添加必要的UI子元素Text, Image, Button等。创建一个C#脚本如MyItemLogic.cs让它实现ILoopScrollItem接口并在SetData方法中编写更新这些UI元素的逻辑。将这个脚本挂载到预制体根节点上。将配置好的GameObject拖入Project窗口生成一个Prefab预制体。4.2 步骤二设置ScrollRect在Canvas下创建一个带有ScrollRect组件的UI结构通常包括一个Viewport和一个Content。删除或禁用原有的ScrollRect组件。添加我们编写的LoopScrollRect脚本。在Inspector中将步骤一制作的预制体拖拽到LoopScrollRect的Item Prefab字段。设置Total Count为你的初始数据条数可以在代码中动态修改。Buffer Size通常设置为1或2即可它决定了在视口外预加载多少项防止快速滚动时边缘出现空白。4.3 步骤三提供数据源与初始化在你的场景管理器或某个控制脚本中初始化数据并获取LoopScrollRect组件进行配置。public class ListManager : MonoBehaviour { public LoopScrollRect loopScroll; private Liststring m_MessageList new Liststring(); void Start() { // 1. 初始化模拟数据 for (int i 0; i 1000; i) { m_MessageList.Add($聊天消息 #{i 1}); } // 2. 告诉LoopScrollRect总数据量 if (loopScroll ! null) { loopScroll.RefreshData(m_MessageList.Count); } // 3. 关键需要让你的Item脚本能访问到这个数据源。 // 方法A使用静态成员简单但不灵活 // ExampleLoopItem.s_DataList m_MessageList; // 方法B使用单例或事件系统在Item的SetData中通过索引向管理器请求数据。 // 这是更推荐的做法耦合度更低。 } // 动态添加一条新数据例如收到新消息 public void AddNewMessage(string msg) { m_MessageList.Add(msg); if (loopScroll ! null) { loopScroll.RefreshData(m_MessageList.Count); // 可选自动滚动到底部 // loopScroll.normalizedPosition Vector2.zero; // 垂直列表底部是0 // 对于垂直列表需要计算1 - (viewport高度 / content高度)。更复杂的操作可以封装一个方法。 } } }4.4 步骤四处理Item内的交互事件如果你的Item里有按钮需要在SetData中为其onClick事件添加监听并且回调函数需要知道当前是第几项。常见的做法是使用闭包lambda表达式或为按钮设置一个带参数的监听器。public class InteractiveLoopItem : MonoBehaviour, ILoopScrollItem { public Button myButton; public Text infoText; private int m_CurrentIndex; // 记录当前索引 void Start() { // 建议在Awake或Start中获取组件引用避免在SetData中频繁调用GetComponent // myButton GetComponentInChildrenButton(); } public void SetData(int index) { m_CurrentIndex index; infoText.text $Item {index}; // 移除旧的监听器防止重复添加 myButton.onClick.RemoveAllListeners(); // 添加新的监听器使用当前index myButton.onClick.AddListener(() OnItemClicked(m_CurrentIndex)); } private void OnItemClicked(int index) { Debug.Log($Clicked on item with data index: {index}); // 在这里处理点击逻辑例如打开详情页删除该项等。 // 需要通过index找到对应的数据。 } }重要提示一定要在SetData中移除旧的监听器(RemoveAllListeners)。因为Item是被循环复用的如果不移除上一次滚动时绑定的点击事件指向旧的index仍然会生效导致点击一个Item却触发了另一个Item的逻辑这是循环滚动列表中最常见的Bug之一。5. 高级技巧、性能优化与避坑指南5.1 性能优化要点避免在滚动过程中进行耗时操作SetData方法会被频繁调用每次Item循环出现时。确保其中的逻辑是轻量级的。绝对不要在SetData里同步加载网络图片或进行复杂的计算。对于图片加载应使用异步加载并缓存。使用布局组件需谨慎不要在content上添加VerticalLayoutGroup或GridLayoutGroup等Unity布局组件。循环滚动的核心是手动精确控制每个Item的位置布局组件会自动计算位置两者冲突会导致显示错乱。所有Item的位置应由LoopScrollRect脚本控制。Draw Call与合批UGUI的合批Batch规则是基于层级Hierarchy顺序和材质/纹理的。由于我们的Item是动态移动的可能会破坏静态的合批。尽量保持Item使用相同的材质和图集Atlas并避免频繁改变Item的层级顺序虽然循环时会移动Transform但仍在同一父节点下影响相对较小。减少Canvas的Rebuild如果Item内部有频繁变化的文本如计时器会触发Canvas的网格重建。对于大量动态文本考虑使用TextMeshPro它在某些情况下的重建开销更优或者将频繁变化的元素分离到子Canvas中。5.2 常见问题与解决方案问题现象可能原因解决方案滚动时Item闪烁、跳动1. 在循环移动Item时直接修改了localPosition触发了布局或渲染脏标记。2.LateUpdate中更新逻辑与Canvas渲染时序冲突。1. 确保使用anchoredPosition进行位置设置并采用“补偿content位置”的策略如核心算法所述。2. 尝试将更新逻辑放在Canvas.willRenderCanvases事件中确保在UI渲染前完成所有位置计算。快速滚动到底部/顶部时出现空白BufferSize设置过小。当滚动速度过快时新Item的实例化和数据更新跟不上滚动的视觉位移。适当增加BufferSize例如从1增加到2或3。但这会增加常驻内存的Item数量需权衡。点击事件错乱点A触发BItem复用后按钮的旧事件监听没有清除。在Item脚本的SetData方法中务必先执行myButton.onClick.RemoveAllListeners()。列表滚动不流畅有卡顿1.SetData逻辑太重。2. 实例化(Instantiate)发生在滚动过程中。3. 使用了耗时的Unity API如GetComponent。1. 优化SetData异步加载资源。2. 确保对象池已预热足够数量的Item。3. 在Awake或Start中缓存组件引用避免在SetData中调用GetComponent。列表项大小不一致时循环出错基础算法假设所有Item大小固定。这是进阶需求。需要实现一个ItemSizeProvider接口能根据索引返回不同项的大小。滚动计算和位置补偿的逻辑会复杂数倍需要记录每个项的累积高度并进行二分查找来确定起始索引。5.3 实现大小不固定的循环列表进阶思路对于高度不固定的Item如不同长度的聊天消息你需要数据预处理在数据源中预先计算或缓存每个索引对应Item的高度。这可能需要先实例化一个Item设置数据后通过LayoutElement或ContentSizeFitter配合Canvas.ForceUpdateCanvases()来获取其实际高度然后缓存这个值。位置计算维护一个“前缀和”数组prefixSum[i]表示前i个Item的总高度。这样第i个Item的起始位置就是prefixSum[i-1]。查找起始索引当滚动时根据content的偏移量viewportPos在prefixSum数组中使用二分查找找到第一个prefixSum[index] viewportPos的索引这个index就是当前视口起始项的逻辑索引。循环与补偿循环逻辑依然类似但移动Item和补偿content位置时需要使用实际的高度值而不是固定的m_ItemSize。实现这个版本复杂度很高但它能完美支持瀑布流等复杂布局。我建议在彻底掌握固定大小循环列表后再尝试挑战。5.4 与分页加载的结合对于超大数据量如十万条即便使用循环列表一次性初始化所有数据也是不现实的。这时需要将循环滚动与分页加载结合。初始化Total Count设置为一个估计值或先设置为0。先加载第一页数据比如20条显示。滚动监听在LoopScrollRect中监听滚动位置。当用户滚动接近底部例如最后几个Item进入视口时触发一个事件。加载更多事件通知数据层加载下一页数据。数据加载完成后增加Total Count并调用RefreshData或一个更优化的AppendData方法。LoopScrollRect会自动调整content大小并更新末尾的Item来显示新数据。注意事项要处理好加载中的状态显示一个“加载中...”的Item以及加载失败的重试机制。同时要防止在短时间内重复触发加载请求。这套源码框架已经为你处理好了视图的循环复用你只需要专注于数据层的分页逻辑和SetData中的内容更新即可。将视图与数据分离的设计使得接入任何形式的数据源本地、网络、数据库都变得清晰而直接。