1. 项目概述为什么我们需要ScrollViewEx在Unity UGUI的日常开发中滚动列表Scroll View几乎是每个项目都绕不开的组件。无论是背包系统、聊天记录、排行榜还是任务列表我们都需要用它来展示大量数据。Unity自带的Scroll Rect配合Content Size Fitter和Layout Group如Vertical Layout Group能很好地处理规则高度的列表项比如所有Item高度都固定为100像素。但一旦遇到不规则高度的需求——例如每条聊天消息长度不一、新闻摘要显示行数不同、或者商品详情图文混排——原生方案就会立刻暴露出它的软肋。最直接的表现就是性能断崖式下跌和内存无限膨胀。如果你尝试用原生方案加载1000条高度不一的聊天记录Unity会老老实实地为这1000个Item都生成GameObject并布局无论它们是否在可视区域内。结果就是启动卡顿、滑动掉帧内存占用轻松突破几百MB。这背后的核心问题是原生Scroll View没有对象池和动态布局计算机制它采用的是“有多少数据就创建多少物体”的暴力渲染模式。因此一个能够循环复用列表项、动态计算并缓存Item高度、并且无缝集成到UGUI工作流的解决方案就成了中大型Unity项目的刚需。这就是ScrollViewEx组件诞生的背景。它不是某个神秘的黑科技而是社区开发者在无数次性能优化实战中基于Unity原生Scroll Rect进行深度封装和增强的成果。今天我就结合自己多个上线项目的实战经验为你彻底拆解这个“不规则高度列表终极方案”的核心原理、实现细节以及那些官方文档里绝不会写的避坑指南。2. 核心设计思路与方案选型在动手实现或使用一个ScrollViewEx之前理解它的顶层设计思想至关重要。这决定了你是否能正确地使用它并在出问题时快速定位。2.1 循环复用与对象池性能的基石ScrollViewEx最核心的思想是视觉项与数据项的分离以及对象的循环复用。我们假设有1000条数据但屏幕可视区域可能只能同时显示10条。那么最理想的状况是我们只实例化大约12-14个可视项缓冲项Item的GameObject当用户滚动时将这些GameObject循环移动到新的位置并更新其显示的数据内容。这个过程就像一个传送带当一个Item向上滚动完全移出可视区域顶部时它并不会被销毁。这个Item会被“传送”到列表的底部并重新绑定一条新的数据比如从数据列表的第101条数据。同时它的位置、大小对于不规则高度列表这是关键会根据新绑定的数据重新计算和设置。这样无论你有1万条还是10万条数据活跃的GameObject数量始终保持恒定从根源上解决了Draw Call暴增和内存泄漏的问题。这个“传送带”的管理机制就是对象池。ScrollViewEx内部会维护一个Item的对象池负责GameObject的创建、取出、归还和回收。2.2 动态高度计算与缓存不规则列表的灵魂对于固定高度的列表我们只需要知道Item的索引就能通过index * itemHeight快速算出它的位置。但对于不规则高度每个Item在渲染之前它的高度是未知的。ScrollViewEx解决这个问题的通用策略是提前计算与缓存。计算时机通常有两种策略。初始化时全量计算在数据设置后遍历所有数据根据数据内容如文本长度、图片数量模拟或快速渲染一个Item取得其高度后缓存。适用于数据量不大如几百条且计算不耗时的场景。优点是滚动时无比流畅无需等待。按需动态计算在Item即将进入可视区域前或进入时才计算其高度。这需要与循环复用逻辑紧密配合。当复用池中的一个Item被赋予新数据并需要显示时组件会先强制刷新它的布局LayoutRebuilder.ForceRebuildLayoutImmediate然后获取它渲染后的实际高度RectTransform.rect.height存入高度缓存数组。下次再需要这个索引的Item时就直接使用缓存的高度。在实际项目中策略2按需动态计算缓存是更主流和实用的选择。因为它避免了初始化时的长时间卡顿尤其适合数据从网络分页加载的场景。ScrollViewEx组件通常会提供一个接口如SetData当你在该方法内为Item赋值数据后组件会自动或手动触发一次该Item的高度计算。2.3 与原生UGUI的集成方案一个优秀的ScrollViewEx应该尽可能少地破坏UGUI的工作流。这意味着继承自ScrollRect它本身应该是一个ScrollRect这样所有原生的拖拽、惯性、弹性等特性都能保留。使用标准的UGUI元素作为ItemItem就是一个普通的Prefab上面可以随意挂载Text、Image、Button、Layout Group等任何UGUI组件。ScrollViewEx只负责控制这个Prefab的创建、复用和位置不干涉其内部的渲染逻辑。自动处理布局它需要接管Content内容区域的锚点Anchors和轴心Pivot通常设置为(0, 1)左上角然后根据计算出的每个Item的高度和间距动态设置每个Item的anchoredPosition.y并更新Content的sizeDelta.y总高度。基于以上思路市面上常见的实现方案或插件如EnhancedScroller、SuperScrollView以及许多项目自研的滚动列表其内核都大同小异。下面我们就进入最关键的实操环节。3. ScrollViewEx组件核心实现详解这里我不会贴出某个特定插件的全部代码而是提炼出最通用、最核心的几个模块的实现逻辑和代码片段你可以据此理解任何一款ScrollViewEx甚至自己动手实现一个。3.1 数据结构定义一切的开始首先我们需要定义核心的数据结构来管理信息和状态。// 列表项的数据基类可根据需要继承 public class ScrollItemData { public int Index { get; set; } // 在总数据列表中的索引 // 其他业务数据... } // 列表项视图的基类 public class ScrollItemView : MonoBehaviour { public virtual void SetData(ScrollItemData data) { // 子类重写此方法用于更新UI显示 // 例如textComponent.text data.Message; } } // 核心组件ScrollViewEx public class ScrollViewEx : ScrollRect { // 配置参数 [SerializeField] private ScrollItemView itemPrefab; // Item预制体 [SerializeField] private float spacing 0f; // 项间距 [SerializeField] private int bufferCount 2; // 缓冲区数量屏幕外多渲染几行 // 运行时数据 private ListScrollItemData _dataList new ListScrollItemData(); private float[] _itemHeights; // 缓存每个索引Item的高度 private float[] _itemPositions; // 缓存每个索引Item的起始Y坐标从顶部开始 // 对象池 private StackScrollItemView _itemPool new StackScrollItemView(); private LinkedListScrollItemView _activeItems new LinkedListScrollItemView(); // 当前活跃的Item用于快速插入和移除 // 关键布局信息 private float _contentTotalHeight 0; private RectTransform _contentRT; private Vector2 _contentSize; // Content的原始尺寸 protected override void Awake() { base.Awake(); _contentRT content; _contentSize _contentRT.sizeDelta; // 强制设置Content的锚点和轴心便于计算 _contentRT.anchorMin new Vector2(0, 1); _contentRT.anchorMax new Vector2(1, 1); _contentRT.pivot new Vector2(0, 1); } }注意这里使用LinkedListScrollItemView来管理活跃项是因为在滚动过程中我们需要频繁地从头部移除Item并向尾部添加ItemLinkedList在任意位置插入删除的效率是O(1)比List更合适。3.2 核心流程设置数据与刷新视图当外部调用SetData方法传入全部数据时组件需要初始化高度缓存并更新布局。public void SetData(ListScrollItemData dataList) { _dataList dataList; int count _dataList.Count; // 1. 初始化或重置高度/位置缓存数组 _itemHeights new float[count]; _itemPositions new float[count]; // 2. 回收所有当前活跃的Item到对象池 while (_activeItems.Count 0) { RecycleItem(_activeItems.First.Value); } // 3. 计算总高度和每个Item的位置首次计算时高度未知可先设为预估高度或0 float currentY 0; for (int i 0; i count; i) { _itemPositions[i] currentY; // 首次不知道高度可以先设为0或一个预设的估算高度。 // 真正的按需计算会在Item被取用时进行。 float estimatedHeight 100f; // 例如先给一个默认高度 _itemHeights[i] estimatedHeight; currentY - (estimatedHeight spacing); // Y轴向下为负 } _contentTotalHeight Mathf.Abs(currentY) - spacing; // 计算总高度绝对值 // 4. 更新Content的大小 _contentRT.sizeDelta new Vector2(_contentSize.x, _contentTotalHeight); // 5. 立即刷新一次视图创建初始可视区域内的Item UpdateVisibleItems(true); }3.3 心脏地带滚动时的视图更新UpdateVisibleItems这个方法是整个组件的“心脏”在Update()或OnValueChanged继承自ScrollRect中被调用。它负责根据当前的滚动位置决定哪些Item应该显示哪些应该回收。private void UpdateVisibleItems(bool forceRefresh false) { if (_dataList null || _dataList.Count 0) return; // 计算当前可视范围在Content局部空间中的Y坐标区间 // viewport是ScrollRect自带的Viewport矩形变换 float viewportTop content.anchoredPosition.y; float viewportBottom viewportTop - viewport.rect.height; // 加上缓冲区 float bufferTop viewportTop (bufferCount * _averageItemHeight); float bufferBottom viewportBottom - (bufferCount * _averageItemHeight); // 1. 回收已经完全移出缓冲区的Item var node _activeItems.First; while (node ! null) { var nextNode node.Next; var itemView node.Value; float itemTop _itemPositions[itemView.Data.Index]; float itemBottom itemTop - _itemHeights[itemView.Data.Index]; // 如果Item的底部在缓冲区的顶部之上或者顶部在缓冲区的底部之下则回收 if (itemBottom bufferTop || itemTop bufferBottom) { RecycleItem(itemView); } node nextNode; } // 2. 找出当前应该在缓冲区内的Item索引范围 int startIndex FindIndexAtPosition(bufferTop); int endIndex FindIndexAtPosition(bufferBottom); // 确保索引在有效范围内 startIndex Mathf.Max(0, startIndex); endIndex Mathf.Min(_dataList.Count - 1, endIndex); // 3. 确保这个范围内的每个索引都有一个活跃的Item for (int i startIndex; i endIndex; i) { // 检查这个索引是否已经有活跃的Item了 if (!IsIndexActive(i)) { // 没有就从对象池取一个或者创建一个新的 var itemView GetItemFromPool(); // 设置Item的数据和位置 SetupItem(itemView, i); // 加入到活跃列表按索引顺序插入保持链表有序 InsertItemToActiveList(itemView); } } } // 二分查找法根据Y坐标找到对应的数据索引 private int FindIndexAtPosition(float y) { // y是相对于Content顶部的坐标向下为负而_itemPositions存储的是从顶部开始的正值或0。 // 需要将y转换。假设_itemPositions[0] 0。 float pos -y; // 转换为从顶部开始的正向距离 int low 0; int high _itemPositions.Length - 1; while (low high) { int mid (low high) / 2; float midPos _itemPositions[mid]; float midHeight _itemHeights[mid]; if (pos midPos pos midPos midHeight) { return mid; } else if (pos midPos) { high mid - 1; } else { low mid 1; } } return Mathf.Clamp(low, 0, _itemPositions.Length - 1); }3.4 关键操作Item的取出、设置与回收// 从对象池获取一个Item视图 private ScrollItemView GetItemFromPool() { ScrollItemView itemView; if (_itemPool.Count 0) { itemView _itemPool.Pop(); itemView.gameObject.SetActive(true); } else { itemView Instantiate(itemPrefab, content); itemView.gameObject.SetActive(true); } return itemView; } // 设置Item的数据和位置 private void SetupItem(ScrollItemView itemView, int index) { // 1. 绑定数据 var itemData _dataList[index]; itemData.Index index; // 确保索引正确 itemView.SetData(itemData); // 2. 强制立即重建布局以获取Item渲染后的真实高度 LayoutRebuilder.ForceRebuildLayoutImmediate(itemView.RectTransform); // 3. 获取并缓存真实高度如果是首次计算或需要更新 float newHeight itemView.RectTransform.rect.height; if (Mathf.Abs(_itemHeights[index] - newHeight) 0.01f) { // 高度发生了变化需要更新缓存并刷新整个Content布局 float heightDelta newHeight - _itemHeights[index]; _itemHeights[index] newHeight; // 更新此索引之后所有Item的位置缓存 for (int i index 1; i _itemPositions.Length; i) { _itemPositions[i] - heightDelta; // 因为Y轴向下后面的项位置要减去差值 } // 更新总高度 _contentTotalHeight heightDelta; _contentRT.sizeDelta new Vector2(_contentSize.x, _contentTotalHeight); // 重要因为总高度和后续项位置变了需要立即重新刷新一次视图 UpdateVisibleItems(true); } // 4. 设置Item的最终位置 float posY -_itemPositions[index]; // 转换为anchoredPosition的Y值负值 itemView.RectTransform.anchoredPosition new Vector2(0, posY); } // 回收Item到对象池 private void RecycleItem(ScrollItemView itemView) { _activeItems.Remove(itemView); itemView.gameObject.SetActive(false); _itemPool.Push(itemView); }实操心得LayoutRebuilder.ForceRebuildLayoutImmediate是一个同步调用可能会在单帧内带来性能开销尤其是在Item内部结构复杂时。这就是为什么“按需计算”如此重要——我们只在Item首次进入视野时计算一次。同时要确保Item的RectTransform的Layout Group设置合理避免嵌套过深否则重建布局会很慢。4. 避坑指南与性能优化实战理论很美好但现实很骨感。在实际项目中使用ScrollViewEx你会遇到各种各样稀奇古怪的问题。下面是我踩过坑后总结出的宝贵经验。4.1 坑一Content大小抖动或Item闪烁现象滚动时列表末尾的Item会突然跳动一下或者整个列表轻微抖动。根源在SetupItem中我们计算了新高度后立即更新了_contentTotalHeight和_contentRT.sizeDelta并调用了UpdateVisibleItems(true)。如果这个新高度比旧高度大很多Content突然变长ScrollRect的normalizedPosition可能会发生微小变化从而在下一帧触发OnValueChanged再次进入刷新逻辑造成递归或循环更新。解决方案延迟一帧更新将因高度变化触发的全局刷新UpdateVisibleItems(true)放到Coroutine的yield return null之后执行打破同一帧内的循环。使用标志位设置一个_isUpdatingContentSize的布尔锁在更新Content大小期间忽略由OnValueChanged触发的刷新请求。优化高度变化传播并非所有高度变化都需要立即全局刷新。可以记录下哪些索引的高度变了只更新这些索引之后活跃的Item的位置而不是全部重算。这实现起来更复杂但效果最好。private bool _isUpdatingLayout false; private Listint _dirtyIndexes new Listint(); // 记录高度脏的索引 private IEnumerator Co_UpdateLayoutDelayed() { _isUpdatingLayout true; yield return null; // 等待一帧 // 只刷新受影响的活跃Item位置 foreach (var itemView in _activeItems) { if (_dirtyIndexes.Contains(itemView.Data.Index)) { // 重新设置这个Item的位置高度缓存已是最新 float posY -_itemPositions[itemView.Data.Index]; itemView.RectTransform.anchoredPosition new Vector2(0, posY); } } _dirtyIndexes.Clear(); _isUpdatingLayout false; } // 在SetupItem中发现高度变化后将索引加入脏列表并启动协程 if (heightChanged) { _dirtyIndexes.Add(index); if (!_isUpdatingLayout) { StartCoroutine(Co_UpdateLayoutDelayed()); } }4.2 坑二快速滚动时出现空白或错位现象手指快速滑动列表松手后列表惯性滚动中间会出现空白区域或者Item显示的数据错乱。根源计算赶不上滚动Update()或OnValueChanged的调用频率可能跟不上极端快速的滚动。当滚动速度极快时一帧内可视区域可能跨越了几十个Item而我们的更新逻辑可能只处理了一部分。高度计算异步性如果Item的高度计算依赖异步操作如加载网络图片后在图片加载完成前高度是0或错误的导致位置计算错误。当图片加载完成后Item变高但位置没有及时更新。解决方案增加缓冲区Buffer Count这是最简单有效的方法。将bufferCount从2增加到3或4让屏幕外多渲染几行Item给滚动留出缓冲时间。这会略微增加Draw Call但能极大改善快速滚动的体验。使用Canvas.willRenderCanvases事件这是一个在UI渲染前调用的回调。将UpdateVisibleItems的逻辑放在这里执行可以确保在每一帧渲染前列表的状态都是最新的比在Update中更及时。异步加载的占位与重排对于依赖异步资源的Item初始化时先赋予一个占位高度如加载中的 spinner 高度。等资源加载完成后触发一个ItemSizeChanged事件通知ScrollViewEx重新计算该索引的高度并更新布局。同时该Item在加载期间应保持位置不变。4.3 坑三内存泄漏与对象池管理现象反复打开关闭包含大型列表的界面游戏内存持续增长最终可能崩溃。根源对象池没有正确管理或者Item预制体引用了外部资源未被释放。解决方案实现清晰的池生命周期管理在界面关闭或列表数据清空时不仅要回收活跃Item还要清空对象池。因为池中的GameObject虽然被禁用但仍然占用内存。public void Clear() { SetData(new ListScrollItemData()); // 清空数据并回收活跃项 // 销毁对象池中的所有对象 while (_itemPool.Count 0) { var item _itemPool.Pop(); if (item ! null item.gameObject ! null) Destroy(item.gameObject); } _itemPool.Clear(); }Item视图的OnRecycle方法在ScrollItemView基类中定义一个虚方法OnRecycle当Item被回收到池时调用。子类可以重写它来释放对大型资源如Texture、Sprite的引用或者取消异步加载操作。警惕静态或全局事件引用确保Item内部的事件监听如按钮onClick在回收时被正确移除否则会导致Item无法被GC回收。4.4 坑四与InputField输入框的兼容性问题现象列表中有可交互的UI元素如InputField点击输入时列表会异常滚动或者输入框无法正常聚焦。根源ScrollRect默认会拦截拖拽事件。当你在InputField上点击时事件可能先被ScrollRect处理误判为开始拖拽。解决方案在ScrollViewEx中重写InitializePotentialDrag和OnBeginDrag等方法在开始拖拽前进行更精确的判断。例如检查当前被点击的对象是否是一个输入控件。public override void OnBeginDrag(PointerEventData eventData) { // 检查点击的对象如果是InputField或其子物体则不开始滚动 if (EventSystem.current.currentSelectedGameObject ! null EventSystem.current.currentSelectedGameObject.GetComponentTMPro.TMP_InputField() ! null) { return; } base.OnBeginDrag(eventData); }使用EventTrigger组件辅助判断但这会增加复杂度。更推荐直接使用已经处理了此问题的成熟插件或自己封装一个更智能的ScrollRect。4.5 性能优化终极 checklist在你觉得列表仍然卡顿的时候请按顺序检查以下清单✅ Profiler分析打开Unity Profiler重点观察CPUCanvas.BuildBatch耗时是否过高过高说明UI合批不好检查Item材质是否一致尽量减少Mask和RectMask2D的使用。CPULayoutRebuilder.Rebuild耗时是否过高检查Item内部Layout Group的嵌套深度尝试将嵌套布局改为绝对定位anchoredPosition计算。内存Texture2D或Sprite是否在不停创建确保图片资源被正确引用和释放使用AssetBundle或Addressables时注意卸载。✅ 减少Canvas重建将频繁变化的、独立的UI元素如滚动列表放在一个单独的Canvas下。这样这个Canvas的重建不会触发整个UI界面的重建。✅ 使用RectMask2D替代Mask如果列表需要遮罩优先使用RectMask2D它的性能开销远小于带图片的Mask组件。✅ 禁用不可见Item的CanvasRenderer对于非常复杂的Item可以写一个简单的脚本当Item移出视口时禁用其CanvasRenderer组件这能节省一些渲染开销。✅ 分帧加载如果初始化数据量巨大如上千条不要在单帧内调用SetData。可以设计一个分帧加载的协程每帧处理50-100条数据并更新一次视图避免主线程卡死。5. 进阶应用与扩展思路掌握了基础和避坑技巧后ScrollViewEx还能玩出更多花样。5.1 实现水平与网格布局我们上述讨论的都是垂直列表。将其改造成水平列表思路完全一致只是将计算Y坐标和高度的地方替换为计算X坐标和宽度。核心是FindIndexAtPosition的逻辑需要改为水平方向的二分查找。网格布局Grid则稍复杂一些。你需要计算每行或每列能容纳多少个Item然后根据总数据量计算出总行数。FindIndexAtPosition需要根据(row, column)二维坐标来定位数据索引。对象池的复用和位置计算也需要按行/列来处理。不过市面上优秀的插件如EnhancedScroller都直接支持了网格模式除非有极其特殊的定制需求否则不建议重复造轮子。5.2 与数据绑定框架如UniRx/MVVM结合在大型项目中我们通常希望UI与业务逻辑解耦。这时可以将ScrollViewEx与数据绑定框架结合。ItemData作为ViewModel你的ScrollItemData可以继承自ReactiveObject如UniRx的INotifyPropertyChanged实现。ItemView进行数据绑定在ScrollItemView.SetData中不直接操作UI控件而是将Data的属性与UI控件进行绑定。public class ChatItemView : ScrollItemView { [SerializeField] private TextMeshProUGUI messageText; private IDisposable _binding; public override void SetData(ScrollItemData data) { base.SetData(data); var chatData data as ChatItemData; // 清除旧绑定 _binding?.Dispose(); // 创建新绑定当ChatData.Message变化时自动更新UI _binding chatData.ObserveEveryValueChanged(x x.Message) .Subscribe(msg messageText.text msg); } private void OnDestroy() { _binding?.Dispose(); // 非常重要防止内存泄漏 } }动态更新当某条数据的属性发生变化时由于绑定的存在对应的Item UI会自动刷新。如果这个变化影响了Item的高度比如折叠/展开更多内容你需要在高度变化后手动调用ScrollViewEx的某个接口如NotifyItemSizeChanged(int index)来触发重新布局。5.3 实现下拉刷新与上拉加载更多这是列表的常见功能。ScrollViewEx可以很方便地扩展。下拉刷新监听ScrollRect的onValueChanged事件当verticalNormalizedPosition大于1.0 threshold比如1.05时触发刷新回调。同时可以在Content上方动态插入一个“刷新头”Item并伴随动画。上拉加载更多同样监听onValueChanged当verticalNormalizedPosition小于0.0 - threshold比如-0.05时触发加载更多回调。可以在Content下方插入一个“加载更多”Item。关键点这些特殊的“头”和“尾”Item不应该参与正常的循环复用逻辑。你需要在UpdateVisibleItems中将它们排除在索引计算之外或者单独管理它们的显示和隐藏。6. 总结与个人体会实现一个稳定高效的ScrollViewEx绝非易事它涉及UGUI渲染流程、对象池、算法二分查找和帧同步等多方面知识。经过多个项目的锤炼我的体会是第一没有银弹。即使是成熟的插件也需要根据项目具体情况进行调整和优化。比如如果你的Item高度变化非常频繁那么“按需计算缓存”的策略可能需要配合更激进的高度失效和重算机制。第二性能优化是权衡的艺术。增加缓冲区提升流畅度但增加了渲染开销使用复杂布局方便美术但增加了重建耗时。你需要用Profiler找到自己项目的瓶颈点然后做针对性的取舍。很多时候简化Item的UI结构带来的性能提升比优化滚动算法本身要大得多。第三善用现成方案但需知其所以然。对于大多数团队我强烈建议使用经过验证的插件如EnhancedScroller、Unity的ListView/TableView in UI Toolkit。但在使用前务必阅读其源码或文档理解其核心机制。这样当遇到诡异bug时你才能快速定位是插件的问题、自己配置的问题还是项目其他系统如资源管理导致的问题。最后分享一个我自己的小技巧在开发调试阶段可以给ScrollViewEx加一个调试模式用不同颜色高亮显示缓冲区内的Item、可视区内的Item并实时打印当前活跃的索引范围。这能让你对滚动复用的过程一目了然极大提升调试效率。
1. 项目概述为什么我们需要ScrollViewEx在Unity UGUI的日常开发中滚动列表Scroll View几乎是每个项目都绕不开的组件。无论是背包系统、聊天记录、排行榜还是任务列表我们都需要用它来展示大量数据。Unity自带的Scroll Rect配合Content Size Fitter和Layout Group如Vertical Layout Group能很好地处理规则高度的列表项比如所有Item高度都固定为100像素。但一旦遇到不规则高度的需求——例如每条聊天消息长度不一、新闻摘要显示行数不同、或者商品详情图文混排——原生方案就会立刻暴露出它的软肋。最直接的表现就是性能断崖式下跌和内存无限膨胀。如果你尝试用原生方案加载1000条高度不一的聊天记录Unity会老老实实地为这1000个Item都生成GameObject并布局无论它们是否在可视区域内。结果就是启动卡顿、滑动掉帧内存占用轻松突破几百MB。这背后的核心问题是原生Scroll View没有对象池和动态布局计算机制它采用的是“有多少数据就创建多少物体”的暴力渲染模式。因此一个能够循环复用列表项、动态计算并缓存Item高度、并且无缝集成到UGUI工作流的解决方案就成了中大型Unity项目的刚需。这就是ScrollViewEx组件诞生的背景。它不是某个神秘的黑科技而是社区开发者在无数次性能优化实战中基于Unity原生Scroll Rect进行深度封装和增强的成果。今天我就结合自己多个上线项目的实战经验为你彻底拆解这个“不规则高度列表终极方案”的核心原理、实现细节以及那些官方文档里绝不会写的避坑指南。2. 核心设计思路与方案选型在动手实现或使用一个ScrollViewEx之前理解它的顶层设计思想至关重要。这决定了你是否能正确地使用它并在出问题时快速定位。2.1 循环复用与对象池性能的基石ScrollViewEx最核心的思想是视觉项与数据项的分离以及对象的循环复用。我们假设有1000条数据但屏幕可视区域可能只能同时显示10条。那么最理想的状况是我们只实例化大约12-14个可视项缓冲项Item的GameObject当用户滚动时将这些GameObject循环移动到新的位置并更新其显示的数据内容。这个过程就像一个传送带当一个Item向上滚动完全移出可视区域顶部时它并不会被销毁。这个Item会被“传送”到列表的底部并重新绑定一条新的数据比如从数据列表的第101条数据。同时它的位置、大小对于不规则高度列表这是关键会根据新绑定的数据重新计算和设置。这样无论你有1万条还是10万条数据活跃的GameObject数量始终保持恒定从根源上解决了Draw Call暴增和内存泄漏的问题。这个“传送带”的管理机制就是对象池。ScrollViewEx内部会维护一个Item的对象池负责GameObject的创建、取出、归还和回收。2.2 动态高度计算与缓存不规则列表的灵魂对于固定高度的列表我们只需要知道Item的索引就能通过index * itemHeight快速算出它的位置。但对于不规则高度每个Item在渲染之前它的高度是未知的。ScrollViewEx解决这个问题的通用策略是提前计算与缓存。计算时机通常有两种策略。初始化时全量计算在数据设置后遍历所有数据根据数据内容如文本长度、图片数量模拟或快速渲染一个Item取得其高度后缓存。适用于数据量不大如几百条且计算不耗时的场景。优点是滚动时无比流畅无需等待。按需动态计算在Item即将进入可视区域前或进入时才计算其高度。这需要与循环复用逻辑紧密配合。当复用池中的一个Item被赋予新数据并需要显示时组件会先强制刷新它的布局LayoutRebuilder.ForceRebuildLayoutImmediate然后获取它渲染后的实际高度RectTransform.rect.height存入高度缓存数组。下次再需要这个索引的Item时就直接使用缓存的高度。在实际项目中策略2按需动态计算缓存是更主流和实用的选择。因为它避免了初始化时的长时间卡顿尤其适合数据从网络分页加载的场景。ScrollViewEx组件通常会提供一个接口如SetData当你在该方法内为Item赋值数据后组件会自动或手动触发一次该Item的高度计算。2.3 与原生UGUI的集成方案一个优秀的ScrollViewEx应该尽可能少地破坏UGUI的工作流。这意味着继承自ScrollRect它本身应该是一个ScrollRect这样所有原生的拖拽、惯性、弹性等特性都能保留。使用标准的UGUI元素作为ItemItem就是一个普通的Prefab上面可以随意挂载Text、Image、Button、Layout Group等任何UGUI组件。ScrollViewEx只负责控制这个Prefab的创建、复用和位置不干涉其内部的渲染逻辑。自动处理布局它需要接管Content内容区域的锚点Anchors和轴心Pivot通常设置为(0, 1)左上角然后根据计算出的每个Item的高度和间距动态设置每个Item的anchoredPosition.y并更新Content的sizeDelta.y总高度。基于以上思路市面上常见的实现方案或插件如EnhancedScroller、SuperScrollView以及许多项目自研的滚动列表其内核都大同小异。下面我们就进入最关键的实操环节。3. ScrollViewEx组件核心实现详解这里我不会贴出某个特定插件的全部代码而是提炼出最通用、最核心的几个模块的实现逻辑和代码片段你可以据此理解任何一款ScrollViewEx甚至自己动手实现一个。3.1 数据结构定义一切的开始首先我们需要定义核心的数据结构来管理信息和状态。// 列表项的数据基类可根据需要继承 public class ScrollItemData { public int Index { get; set; } // 在总数据列表中的索引 // 其他业务数据... } // 列表项视图的基类 public class ScrollItemView : MonoBehaviour { public virtual void SetData(ScrollItemData data) { // 子类重写此方法用于更新UI显示 // 例如textComponent.text data.Message; } } // 核心组件ScrollViewEx public class ScrollViewEx : ScrollRect { // 配置参数 [SerializeField] private ScrollItemView itemPrefab; // Item预制体 [SerializeField] private float spacing 0f; // 项间距 [SerializeField] private int bufferCount 2; // 缓冲区数量屏幕外多渲染几行 // 运行时数据 private ListScrollItemData _dataList new ListScrollItemData(); private float[] _itemHeights; // 缓存每个索引Item的高度 private float[] _itemPositions; // 缓存每个索引Item的起始Y坐标从顶部开始 // 对象池 private StackScrollItemView _itemPool new StackScrollItemView(); private LinkedListScrollItemView _activeItems new LinkedListScrollItemView(); // 当前活跃的Item用于快速插入和移除 // 关键布局信息 private float _contentTotalHeight 0; private RectTransform _contentRT; private Vector2 _contentSize; // Content的原始尺寸 protected override void Awake() { base.Awake(); _contentRT content; _contentSize _contentRT.sizeDelta; // 强制设置Content的锚点和轴心便于计算 _contentRT.anchorMin new Vector2(0, 1); _contentRT.anchorMax new Vector2(1, 1); _contentRT.pivot new Vector2(0, 1); } }注意这里使用LinkedListScrollItemView来管理活跃项是因为在滚动过程中我们需要频繁地从头部移除Item并向尾部添加ItemLinkedList在任意位置插入删除的效率是O(1)比List更合适。3.2 核心流程设置数据与刷新视图当外部调用SetData方法传入全部数据时组件需要初始化高度缓存并更新布局。public void SetData(ListScrollItemData dataList) { _dataList dataList; int count _dataList.Count; // 1. 初始化或重置高度/位置缓存数组 _itemHeights new float[count]; _itemPositions new float[count]; // 2. 回收所有当前活跃的Item到对象池 while (_activeItems.Count 0) { RecycleItem(_activeItems.First.Value); } // 3. 计算总高度和每个Item的位置首次计算时高度未知可先设为预估高度或0 float currentY 0; for (int i 0; i count; i) { _itemPositions[i] currentY; // 首次不知道高度可以先设为0或一个预设的估算高度。 // 真正的按需计算会在Item被取用时进行。 float estimatedHeight 100f; // 例如先给一个默认高度 _itemHeights[i] estimatedHeight; currentY - (estimatedHeight spacing); // Y轴向下为负 } _contentTotalHeight Mathf.Abs(currentY) - spacing; // 计算总高度绝对值 // 4. 更新Content的大小 _contentRT.sizeDelta new Vector2(_contentSize.x, _contentTotalHeight); // 5. 立即刷新一次视图创建初始可视区域内的Item UpdateVisibleItems(true); }3.3 心脏地带滚动时的视图更新UpdateVisibleItems这个方法是整个组件的“心脏”在Update()或OnValueChanged继承自ScrollRect中被调用。它负责根据当前的滚动位置决定哪些Item应该显示哪些应该回收。private void UpdateVisibleItems(bool forceRefresh false) { if (_dataList null || _dataList.Count 0) return; // 计算当前可视范围在Content局部空间中的Y坐标区间 // viewport是ScrollRect自带的Viewport矩形变换 float viewportTop content.anchoredPosition.y; float viewportBottom viewportTop - viewport.rect.height; // 加上缓冲区 float bufferTop viewportTop (bufferCount * _averageItemHeight); float bufferBottom viewportBottom - (bufferCount * _averageItemHeight); // 1. 回收已经完全移出缓冲区的Item var node _activeItems.First; while (node ! null) { var nextNode node.Next; var itemView node.Value; float itemTop _itemPositions[itemView.Data.Index]; float itemBottom itemTop - _itemHeights[itemView.Data.Index]; // 如果Item的底部在缓冲区的顶部之上或者顶部在缓冲区的底部之下则回收 if (itemBottom bufferTop || itemTop bufferBottom) { RecycleItem(itemView); } node nextNode; } // 2. 找出当前应该在缓冲区内的Item索引范围 int startIndex FindIndexAtPosition(bufferTop); int endIndex FindIndexAtPosition(bufferBottom); // 确保索引在有效范围内 startIndex Mathf.Max(0, startIndex); endIndex Mathf.Min(_dataList.Count - 1, endIndex); // 3. 确保这个范围内的每个索引都有一个活跃的Item for (int i startIndex; i endIndex; i) { // 检查这个索引是否已经有活跃的Item了 if (!IsIndexActive(i)) { // 没有就从对象池取一个或者创建一个新的 var itemView GetItemFromPool(); // 设置Item的数据和位置 SetupItem(itemView, i); // 加入到活跃列表按索引顺序插入保持链表有序 InsertItemToActiveList(itemView); } } } // 二分查找法根据Y坐标找到对应的数据索引 private int FindIndexAtPosition(float y) { // y是相对于Content顶部的坐标向下为负而_itemPositions存储的是从顶部开始的正值或0。 // 需要将y转换。假设_itemPositions[0] 0。 float pos -y; // 转换为从顶部开始的正向距离 int low 0; int high _itemPositions.Length - 1; while (low high) { int mid (low high) / 2; float midPos _itemPositions[mid]; float midHeight _itemHeights[mid]; if (pos midPos pos midPos midHeight) { return mid; } else if (pos midPos) { high mid - 1; } else { low mid 1; } } return Mathf.Clamp(low, 0, _itemPositions.Length - 1); }3.4 关键操作Item的取出、设置与回收// 从对象池获取一个Item视图 private ScrollItemView GetItemFromPool() { ScrollItemView itemView; if (_itemPool.Count 0) { itemView _itemPool.Pop(); itemView.gameObject.SetActive(true); } else { itemView Instantiate(itemPrefab, content); itemView.gameObject.SetActive(true); } return itemView; } // 设置Item的数据和位置 private void SetupItem(ScrollItemView itemView, int index) { // 1. 绑定数据 var itemData _dataList[index]; itemData.Index index; // 确保索引正确 itemView.SetData(itemData); // 2. 强制立即重建布局以获取Item渲染后的真实高度 LayoutRebuilder.ForceRebuildLayoutImmediate(itemView.RectTransform); // 3. 获取并缓存真实高度如果是首次计算或需要更新 float newHeight itemView.RectTransform.rect.height; if (Mathf.Abs(_itemHeights[index] - newHeight) 0.01f) { // 高度发生了变化需要更新缓存并刷新整个Content布局 float heightDelta newHeight - _itemHeights[index]; _itemHeights[index] newHeight; // 更新此索引之后所有Item的位置缓存 for (int i index 1; i _itemPositions.Length; i) { _itemPositions[i] - heightDelta; // 因为Y轴向下后面的项位置要减去差值 } // 更新总高度 _contentTotalHeight heightDelta; _contentRT.sizeDelta new Vector2(_contentSize.x, _contentTotalHeight); // 重要因为总高度和后续项位置变了需要立即重新刷新一次视图 UpdateVisibleItems(true); } // 4. 设置Item的最终位置 float posY -_itemPositions[index]; // 转换为anchoredPosition的Y值负值 itemView.RectTransform.anchoredPosition new Vector2(0, posY); } // 回收Item到对象池 private void RecycleItem(ScrollItemView itemView) { _activeItems.Remove(itemView); itemView.gameObject.SetActive(false); _itemPool.Push(itemView); }实操心得LayoutRebuilder.ForceRebuildLayoutImmediate是一个同步调用可能会在单帧内带来性能开销尤其是在Item内部结构复杂时。这就是为什么“按需计算”如此重要——我们只在Item首次进入视野时计算一次。同时要确保Item的RectTransform的Layout Group设置合理避免嵌套过深否则重建布局会很慢。4. 避坑指南与性能优化实战理论很美好但现实很骨感。在实际项目中使用ScrollViewEx你会遇到各种各样稀奇古怪的问题。下面是我踩过坑后总结出的宝贵经验。4.1 坑一Content大小抖动或Item闪烁现象滚动时列表末尾的Item会突然跳动一下或者整个列表轻微抖动。根源在SetupItem中我们计算了新高度后立即更新了_contentTotalHeight和_contentRT.sizeDelta并调用了UpdateVisibleItems(true)。如果这个新高度比旧高度大很多Content突然变长ScrollRect的normalizedPosition可能会发生微小变化从而在下一帧触发OnValueChanged再次进入刷新逻辑造成递归或循环更新。解决方案延迟一帧更新将因高度变化触发的全局刷新UpdateVisibleItems(true)放到Coroutine的yield return null之后执行打破同一帧内的循环。使用标志位设置一个_isUpdatingContentSize的布尔锁在更新Content大小期间忽略由OnValueChanged触发的刷新请求。优化高度变化传播并非所有高度变化都需要立即全局刷新。可以记录下哪些索引的高度变了只更新这些索引之后活跃的Item的位置而不是全部重算。这实现起来更复杂但效果最好。private bool _isUpdatingLayout false; private Listint _dirtyIndexes new Listint(); // 记录高度脏的索引 private IEnumerator Co_UpdateLayoutDelayed() { _isUpdatingLayout true; yield return null; // 等待一帧 // 只刷新受影响的活跃Item位置 foreach (var itemView in _activeItems) { if (_dirtyIndexes.Contains(itemView.Data.Index)) { // 重新设置这个Item的位置高度缓存已是最新 float posY -_itemPositions[itemView.Data.Index]; itemView.RectTransform.anchoredPosition new Vector2(0, posY); } } _dirtyIndexes.Clear(); _isUpdatingLayout false; } // 在SetupItem中发现高度变化后将索引加入脏列表并启动协程 if (heightChanged) { _dirtyIndexes.Add(index); if (!_isUpdatingLayout) { StartCoroutine(Co_UpdateLayoutDelayed()); } }4.2 坑二快速滚动时出现空白或错位现象手指快速滑动列表松手后列表惯性滚动中间会出现空白区域或者Item显示的数据错乱。根源计算赶不上滚动Update()或OnValueChanged的调用频率可能跟不上极端快速的滚动。当滚动速度极快时一帧内可视区域可能跨越了几十个Item而我们的更新逻辑可能只处理了一部分。高度计算异步性如果Item的高度计算依赖异步操作如加载网络图片后在图片加载完成前高度是0或错误的导致位置计算错误。当图片加载完成后Item变高但位置没有及时更新。解决方案增加缓冲区Buffer Count这是最简单有效的方法。将bufferCount从2增加到3或4让屏幕外多渲染几行Item给滚动留出缓冲时间。这会略微增加Draw Call但能极大改善快速滚动的体验。使用Canvas.willRenderCanvases事件这是一个在UI渲染前调用的回调。将UpdateVisibleItems的逻辑放在这里执行可以确保在每一帧渲染前列表的状态都是最新的比在Update中更及时。异步加载的占位与重排对于依赖异步资源的Item初始化时先赋予一个占位高度如加载中的 spinner 高度。等资源加载完成后触发一个ItemSizeChanged事件通知ScrollViewEx重新计算该索引的高度并更新布局。同时该Item在加载期间应保持位置不变。4.3 坑三内存泄漏与对象池管理现象反复打开关闭包含大型列表的界面游戏内存持续增长最终可能崩溃。根源对象池没有正确管理或者Item预制体引用了外部资源未被释放。解决方案实现清晰的池生命周期管理在界面关闭或列表数据清空时不仅要回收活跃Item还要清空对象池。因为池中的GameObject虽然被禁用但仍然占用内存。public void Clear() { SetData(new ListScrollItemData()); // 清空数据并回收活跃项 // 销毁对象池中的所有对象 while (_itemPool.Count 0) { var item _itemPool.Pop(); if (item ! null item.gameObject ! null) Destroy(item.gameObject); } _itemPool.Clear(); }Item视图的OnRecycle方法在ScrollItemView基类中定义一个虚方法OnRecycle当Item被回收到池时调用。子类可以重写它来释放对大型资源如Texture、Sprite的引用或者取消异步加载操作。警惕静态或全局事件引用确保Item内部的事件监听如按钮onClick在回收时被正确移除否则会导致Item无法被GC回收。4.4 坑四与InputField输入框的兼容性问题现象列表中有可交互的UI元素如InputField点击输入时列表会异常滚动或者输入框无法正常聚焦。根源ScrollRect默认会拦截拖拽事件。当你在InputField上点击时事件可能先被ScrollRect处理误判为开始拖拽。解决方案在ScrollViewEx中重写InitializePotentialDrag和OnBeginDrag等方法在开始拖拽前进行更精确的判断。例如检查当前被点击的对象是否是一个输入控件。public override void OnBeginDrag(PointerEventData eventData) { // 检查点击的对象如果是InputField或其子物体则不开始滚动 if (EventSystem.current.currentSelectedGameObject ! null EventSystem.current.currentSelectedGameObject.GetComponentTMPro.TMP_InputField() ! null) { return; } base.OnBeginDrag(eventData); }使用EventTrigger组件辅助判断但这会增加复杂度。更推荐直接使用已经处理了此问题的成熟插件或自己封装一个更智能的ScrollRect。4.5 性能优化终极 checklist在你觉得列表仍然卡顿的时候请按顺序检查以下清单✅ Profiler分析打开Unity Profiler重点观察CPUCanvas.BuildBatch耗时是否过高过高说明UI合批不好检查Item材质是否一致尽量减少Mask和RectMask2D的使用。CPULayoutRebuilder.Rebuild耗时是否过高检查Item内部Layout Group的嵌套深度尝试将嵌套布局改为绝对定位anchoredPosition计算。内存Texture2D或Sprite是否在不停创建确保图片资源被正确引用和释放使用AssetBundle或Addressables时注意卸载。✅ 减少Canvas重建将频繁变化的、独立的UI元素如滚动列表放在一个单独的Canvas下。这样这个Canvas的重建不会触发整个UI界面的重建。✅ 使用RectMask2D替代Mask如果列表需要遮罩优先使用RectMask2D它的性能开销远小于带图片的Mask组件。✅ 禁用不可见Item的CanvasRenderer对于非常复杂的Item可以写一个简单的脚本当Item移出视口时禁用其CanvasRenderer组件这能节省一些渲染开销。✅ 分帧加载如果初始化数据量巨大如上千条不要在单帧内调用SetData。可以设计一个分帧加载的协程每帧处理50-100条数据并更新一次视图避免主线程卡死。5. 进阶应用与扩展思路掌握了基础和避坑技巧后ScrollViewEx还能玩出更多花样。5.1 实现水平与网格布局我们上述讨论的都是垂直列表。将其改造成水平列表思路完全一致只是将计算Y坐标和高度的地方替换为计算X坐标和宽度。核心是FindIndexAtPosition的逻辑需要改为水平方向的二分查找。网格布局Grid则稍复杂一些。你需要计算每行或每列能容纳多少个Item然后根据总数据量计算出总行数。FindIndexAtPosition需要根据(row, column)二维坐标来定位数据索引。对象池的复用和位置计算也需要按行/列来处理。不过市面上优秀的插件如EnhancedScroller都直接支持了网格模式除非有极其特殊的定制需求否则不建议重复造轮子。5.2 与数据绑定框架如UniRx/MVVM结合在大型项目中我们通常希望UI与业务逻辑解耦。这时可以将ScrollViewEx与数据绑定框架结合。ItemData作为ViewModel你的ScrollItemData可以继承自ReactiveObject如UniRx的INotifyPropertyChanged实现。ItemView进行数据绑定在ScrollItemView.SetData中不直接操作UI控件而是将Data的属性与UI控件进行绑定。public class ChatItemView : ScrollItemView { [SerializeField] private TextMeshProUGUI messageText; private IDisposable _binding; public override void SetData(ScrollItemData data) { base.SetData(data); var chatData data as ChatItemData; // 清除旧绑定 _binding?.Dispose(); // 创建新绑定当ChatData.Message变化时自动更新UI _binding chatData.ObserveEveryValueChanged(x x.Message) .Subscribe(msg messageText.text msg); } private void OnDestroy() { _binding?.Dispose(); // 非常重要防止内存泄漏 } }动态更新当某条数据的属性发生变化时由于绑定的存在对应的Item UI会自动刷新。如果这个变化影响了Item的高度比如折叠/展开更多内容你需要在高度变化后手动调用ScrollViewEx的某个接口如NotifyItemSizeChanged(int index)来触发重新布局。5.3 实现下拉刷新与上拉加载更多这是列表的常见功能。ScrollViewEx可以很方便地扩展。下拉刷新监听ScrollRect的onValueChanged事件当verticalNormalizedPosition大于1.0 threshold比如1.05时触发刷新回调。同时可以在Content上方动态插入一个“刷新头”Item并伴随动画。上拉加载更多同样监听onValueChanged当verticalNormalizedPosition小于0.0 - threshold比如-0.05时触发加载更多回调。可以在Content下方插入一个“加载更多”Item。关键点这些特殊的“头”和“尾”Item不应该参与正常的循环复用逻辑。你需要在UpdateVisibleItems中将它们排除在索引计算之外或者单独管理它们的显示和隐藏。6. 总结与个人体会实现一个稳定高效的ScrollViewEx绝非易事它涉及UGUI渲染流程、对象池、算法二分查找和帧同步等多方面知识。经过多个项目的锤炼我的体会是第一没有银弹。即使是成熟的插件也需要根据项目具体情况进行调整和优化。比如如果你的Item高度变化非常频繁那么“按需计算缓存”的策略可能需要配合更激进的高度失效和重算机制。第二性能优化是权衡的艺术。增加缓冲区提升流畅度但增加了渲染开销使用复杂布局方便美术但增加了重建耗时。你需要用Profiler找到自己项目的瓶颈点然后做针对性的取舍。很多时候简化Item的UI结构带来的性能提升比优化滚动算法本身要大得多。第三善用现成方案但需知其所以然。对于大多数团队我强烈建议使用经过验证的插件如EnhancedScroller、Unity的ListView/TableView in UI Toolkit。但在使用前务必阅读其源码或文档理解其核心机制。这样当遇到诡异bug时你才能快速定位是插件的问题、自己配置的问题还是项目其他系统如资源管理导致的问题。最后分享一个我自己的小技巧在开发调试阶段可以给ScrollViewEx加一个调试模式用不同颜色高亮显示缓冲区内的Item、可视区内的Item并实时打印当前活跃的索引范围。这能让你对滚动复用的过程一目了然极大提升调试效率。
