更新日期：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元素會被對象池自動回收，基于對象池的控制，所以即便是頻繁的增、刪、改數據操作也不會產生性能瓶頸。

當然，這里只是介紹了一些基礎操作，其他更多的信息請參閱源碼。