【Unity】 HTFramework框架（六十五）ScrollList滚动数据列表

更新日期：2025年5月16日。
Github 仓库：https://github.com/SaiTingHu/HTFramework
Gitee 仓库：https://gitee.com/SaiTingHu/HTFramework

一、ScrollList滚动数据列表

首先，ScrollRect滚动区域视图还算是一个比较常用的组件，但他有如下缺点：

未直接面向数据层：ScrollRect通常用于显示多条数据，且在超出区域后提供视图滚动效果，但其未提供面向数据层的相关接口（如新增、修改、删除、显示等），就像一个白板一样，或者说Unity本身就保留了这一部分作为开发者的扩展空间。

如要实现一个展示多条数据的滚动列表，需要自行搭建UI组件、编写数据管理接口、维护数据增删逻辑、并同步与UI组件保持界面更新，这个过程虽然不难，但每次都这样来一遍还是相当浪费时间的，所以非常有必要将典型的滚动数据列表功能提炼出来，只需简单的配置，就能应对大多数常见的滚动数据列表功能，这就是ScrollList。

二、使用ScrollList

1.快捷创建ScrollList

首先，在Hierarchy窗口点击鼠标右键，通过菜单HTFramework -> UI -> Scroll List快捷创建一个ScrollList组件：

ScrollList是针对ScrollRect的扩展，所以他看起来就跟一个ScrollRect一模一样：

2.ScrollList的属性

只不过ScrollList多出来了几个属性，以便于我们配置滚动数据列表：

Element Template：数据元素模板，单条数据对应的在UI界面显示的元素的模板。
Scroll Direction：滚动方向。
First Position：第一条元素的位置。
Row Number：一行元素的数量，垂直滚动时，一行显示的元素超出此数量后将换到下一行，水平滚动时，一列显示的元素超出此数量后将换到下一列。
Spacing：元素间距，x为水平间距，y为垂直间距。

3.自定义数据类

首先，我们需要自定义数据类，并继承至ScrollListData，其作为单条数据对应的对象，比如这里的TestData：

/// <summary>
/// 测试数据
/// </summary>
public class TestData : ScrollListData
{public string ID;public string Name;
}

4.自定义元素类

然后，还需要自定义元素类，并继承至ScrollListElement，其作为单条数据对应的在UI界面显示的元素，比如这里的TestElement：

/// <summary>
/// 测试元素
/// </summary>
public class TestElement : ScrollListElement
{public Text Txt_Content;//更新数据时回调public override void UpdateData(){base.UpdateData();//获取对应的数据（也即是上文的 TestData）if (Data != null){//将 Name 显示到UI界面Txt_Content.text = Data.Cast<TestData>().Name;}}
}

5.修改元素模板

将自定义元素类TestElement挂到元素模板上：

并根据自己的需求修改元素模板：

比如我这里将元素的单行上限设置为3，也即是每排满3个元素便换下一行。

6.新增数据

至此，我们便可以直接像操作数据一样操作这个ScrollList了，比如新增数据：

            //新增一条数据scrollList.AddData(new TestData() { Name = "张三" });scrollList.AddData(new TestData() { Name = "李四" });scrollList.AddData(new TestData() { Name = "王五" });scrollList.AddData(new TestData() { Name = "赵六" });scrollList.AddData(new TestData() { Name = "宋七" });//新增多条数据List<TestData> datas = new List<TestData>();scrollList.AddDatas(datas);

只需调用新增数据接口就行了，UI元素会自动生成，不用关心如何维护数据、何时创建UI元素、何时删除UI元素等。

7.删除数据

            //新增一条数据TestData testData = new TestData() { Name = "张三" };scrollList.AddData(testData);scrollList.AddData(new TestData() { Name = "李四" });scrollList.AddData(new TestData() { Name = "王五" });scrollList.AddData(new TestData() { Name = "赵六" });scrollList.AddData(new TestData() { Name = "宋七" });//删除一条数据（张三）scrollList.RemoveData(testData);

8.更新数据

            //新增一条数据TestData testData = new TestData() { Name = "张三" };scrollList.AddData(testData);scrollList.AddData(new TestData() { Name = "李四" });scrollList.AddData(new TestData() { Name = "王五" });scrollList.AddData(new TestData() { Name = "赵六" });scrollList.AddData(new TestData() { Name = "宋七" });//数据发生了改变，更新数据testData.Name = "张三三三";scrollList[testData].UpdateData();

9.清空数据

            //清空数据scrollList.ClearData();

清空数据后，所有UI元素会被对象池自动回收，基于对象池的控制，所以即便是频繁的增、删、改数据操作也不会产生性能瓶颈。

当然，这里只是介绍了一些基础操作，其他更多的信息请参阅源码。