优化ScrollView滚动列表卡顿，数据量千条以上轻松应对

2023-02-15 00:11:52

优化 ScrollView 滚动列表卡顿：让列表滚动如丝般顺滑

滚动列表，一个我们日常开发中常用的 UI 元素，但它也常会给我们带来一些性能问题，尤其是当列表项过多时，卡顿现象尤为明显。本文将深入剖析 ScrollView 滚动卡顿的根源，并逐步引导你使用 "虚拟表" 技术来优化它，让你的列表滚动起来如丝般顺滑。

问题根源：大量数据同时更新，性能杀手

ScrollView 滚动列表卡顿的根源在于，每当列表滚动时，所有列表项都会被触发更新，而更新大量列表项需要花费大量时间，从而导致卡顿。这种同时更新所有列表项的机制，就像一辆超载的卡车，拖慢了整个滚动的进程。

解决方案："虚拟表"，只更新看得见的

为了解决这个性能瓶颈，我们可以引入 "虚拟表" 的概念。虚拟表的核心思想是：只更新可见的列表项，而隐藏的列表项则不予更新。这样一来，每次滚动时需要更新的列表项数量就会大大减少，从而大幅提高滚动性能。

实现步骤：循序渐进，一步一步

1. 创建 "VirtualTable" 脚本

首先，创建一个继承自 MonoBehaviour 的脚本，并命名为 "VirtualTable"。这个脚本将负责管理虚拟表的实现。

2. 定义变量

在 "VirtualTable" 脚本中，定义几个关键变量：

itemList：一个存储所有列表项引用的 List<GameObject> 变量。
startIndex：存储当前可见列表项起始索引的 int 变量。
endIndex：存储当前可见列表项结束索引的 int 变量。
isNeedUpdate：指示是否需要更新列表项的 bool 变量。

3. 初始化变量

在 "VirtualTable" 脚本的 Start() 方法中，初始化上述变量。

4. 更新列表项

在 "VirtualTable" 脚本的 Update() 方法中，根据当前可见列表项的起始索引和结束索引，更新可见列表项。

5. 计算可见索引

在 "VirtualTable" 脚本的 OnScrollRectValueChanged() 方法中，根据滚动条的位置，计算当前可见列表项的起始索引和结束索引，并更新 isNeedUpdate 变量的值。

6. 添加到 ScrollView

将 "VirtualTable" 脚本添加到 ScrollView 的父对象上。

7. 添加列表项引用

将所有列表项的引用添加到 "VirtualTable" 脚本中的 itemList 变量中。

代码示例：让概念落地

using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class VirtualTable : MonoBehaviour
{
    public List<GameObject> itemList;
    public int startIndex;
    public int endIndex;
    public bool isNeedUpdate;

    private void Start()
    {
        startIndex = 0;
        endIndex = 0;
        isNeedUpdate = true;
    }

    private void Update()
    {
        if (isNeedUpdate)
        {
            for (int i = startIndex; i <= endIndex; i++)
            {
                // 更新列表项
            }
            isNeedUpdate = false;
        }
    }

    public void OnScrollRectValueChanged(Vector2 value)
    {
        // 计算可见索引
        startIndex = Mathf.RoundToInt(value.y * (itemList.Count - 1));
        endIndex = startIndex + Mathf.RoundToInt(GetComponent<RectTransform>().rect.height / GetComponent<GridLayoutGroup>().cellSize.y) - 1;
        isNeedUpdate = true;
    }
}