【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

csharp 复制代码
/// <summary>
/// 测试数据
/// </summary>
public class TestData : ScrollListData
{
    public string ID;
    public string Name;
}

4.自定义元素类

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

csharp 复制代码
/// <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了,比如新增数据:

csharp 复制代码
            //新增一条数据
            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.删除数据

csharp 复制代码
            //新增一条数据
            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.更新数据

csharp 复制代码
            //新增一条数据
            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.清空数据

csharp 复制代码
            //清空数据
            scrollList.ClearData();

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

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

相关推荐
AA陈超2 小时前
虚幻引擎UE5专用服务器游戏开发-21 连招技能动画蒙太奇播放
c++·游戏·ue5·游戏引擎·虚幻
一只一只21 小时前
Unity 3D笔记——《B站阿发你好》
笔记·3d·unity
SmalBox1 天前
【光照】[PBR][法线分布]GGX实现方法对比
unity·渲染
UWA1 天前
游戏在高负载场景下,整机功耗控制在多少
游戏·unity·性能优化·游戏开发
软件黑马王子2 天前
2025GUI项目实践:Unity编辑模式下GUI运行
游戏·unity·gui
王源骏2 天前
Unity实现网页端 打开本地文件选择图片上传到阿里云的OSS
unity·阿里云·游戏引擎
爱吃小胖橘2 天前
Unity-角色控制器
3d·unity·c#·游戏引擎
新石器程序员2 天前
借鉴bevy实现适用于Godot-rust的状态管理
rust·游戏引擎·godot·bevy
Kaaras2 天前
游戏引擎以及游戏开发
游戏引擎
绀目澄清2 天前
unity3d PuppetMaster 布娃娃插件在学习
unity