【Unity 插件推薦】UnityDynamicScrollView 動態捲動大師，輕鬆打造高效能無限列表！

前言

 

今天要推薦的是 UnityDynamicScrollView，一款針對 Unity 專案中大量清單項目優化的高效動態捲動插件，不僅支援【無限內容加載】、【動態 item 尺寸調整】，更能在面對數萬筆資料時保持流暢運作！

不論你想打造【排行榜 UI】、【任務清單】或是【商城列表】等需要大量 item 呈現的界面，UnityDynamicScrollView 都能完美支援，提供【超低資源消耗】與【高效能體驗】。

本篇文章將介紹這款插件的【安裝方式】、【範例展示】與【使用教學】，並附上完整實作【腳本】與【案例】，讓你快速掌握 UnityDynamicScrollView 的強大功能，打造出【專業】又【流暢】的動態 UI！

 

 

Unity UnityDynamicScrollView 插件介紹

 

UnityDynamicScrollView 是一款專為大量 UI 項目設計的高效捲動插件，適用於【排行榜】、【任務列表】、【商城清單】等資料筆數龐大的場景。

它不僅支援動態內容加載，還內建 ScrollViewEx 元件，透過【分頁加載】與【物件池】機制，有效減少【效能壓力】與【記憶體消耗】，即使處理數萬筆資料也能保持畫面流暢不卡頓。

此外，該插件也支援每個項目動態調整尺寸，並提供【更新回調】、【動態滾動】、【隨機插入】與【刪除】等實用功能。

【整體架構清晰】、【開源免費】，開發者可從【GitHub】或【Gitee】輕鬆下載整合，是一款在清單管理上非常值得信賴的實用工具。

 

功能特色

1. 高效處理大量清單資料
   UnityDynamicScrollView 支援高達數萬筆 item 的【快速載入】與【動態顯示】，透過優化的【資料分頁】與【物件池機制】，即使在【手機裝置】或【低效能設備】上也能維持流暢的 UI 呈現。
2. 支援【動態 item 尺寸】與【更新回調】
   插件內建可自定義每個 item 的【寬度】與【高度】，可以根據【內容】或【排名動態調整】，例如前三名可套用更醒目的【樣式】與【尺寸】，其他項目則維持常規大小，同時透過回調函式實現【即時更新】與【互動點擊】，讓 UI 呈現更具【層次感】與【彈性】。
3. 【整合簡易】、【開源免費】
   使用者只需將插件資料夾放入專案中即可立即套用，不依賴其他額外套件，並支援從【GitHub】與【Gitee】免費下載原始碼；程式結構清晰，範例場景詳盡，適合初學者快速上手，也方便進階開發者進行【客製】與【擴充】。

 

適用場景

1. 【排行榜系統】、【商城列表】、【道具清單】
   在需要展示大量資訊的 UI 介面中，如【積分排行榜】、【道具商城】、【任務列表】等，UnityDynamicScrollView 提供【穩定】且【快速】的資料載入能力，不僅維持操作順暢，更能減輕裝置運算負擔。
2. 大型遊戲【後台管理工具】或【Debug 面板】
   適用於開發者建立內部用的【測試清單】、【Log 紀錄畫面】或【後台數據監控面板】，不論是【實時資料動態變化】、【增刪項目】或【快速查找】，皆能藉由此插件有效支援，簡化開發流程。
3. 手機／平板等資源有限裝置
   針對需要高度效能最佳化的環境，如【行動遊戲 UI】或【輕量型應用介面】，此插件具備【低記憶體佔用】與【分頁處理機制】，能讓大量清單顯示依然流暢，提升【整體使用者體驗】與【操作反應速度】。

 

 

Unity UnityDynamicScrollView 插件下載安裝

 

• Github 網址：UnityDynamicScrollView
• Gitee 網址：UnityDynamicScrollView

 

下載壓縮文件，解壓縮後把 Assets 資料夾改名 UnityDynamicScrollView，放進專案裡即可。

 

 

Unity UnityDynamicScrollView 查看案例

 

用法詳見工程中附帶的範例，場景 Scene 中的 Canvas1 及腳本 TestScript。

 

當 item 數量龐大時，可以使用 ScrollViewEx。

ScrollViewEx 繼承了 ScrollView 的所有功能，並進行了針對性的優化，它會對 item 進行分頁，設定適當的頁面尺寸可以得到更好的效能表現，詳見場景 Scene 中的 Canvas2，及腳本 TestLargeAmount.cs。

以下是當有 50000 個 item 時使用 ScrollView 和 ScrollViewEx，並指定頁面尺寸 30。

 

當隨機地添加、刪除資料或隨機跳轉時二者耗時。

 

 

Unity UnityDynamicScrollView 使用實例：實作一個排行榜或是說任務列表

 

1.創建 Scroll View

 

將 Scroll View 節點的 Scroll Rect 元件移除，如下。

 

掛上程式碼中的 ScrollView 元件或 ScrollViewEx 元件，我這裡以 ScrollViewEx 元件為例。

 

注意：ScrollViewEx 繼承了 ScrollView 的所有功能，並進行了針對性的優化，它會對 item 進行分頁，設定適當的頁面尺寸可以得到更好的效能表現。

 

2.設定 Scroll View 參數

 

2.1 調整寬高

我們先調整一下 Scroll View 的寬高。

 

2.2 刪除 Scrollbar 滑桿

我們看到 Scroll View 帶了兩個 Scrollbar 滑塊，我們不要它，可以直接把子節點下的 Scrollbar Horizo​​ntal 和 Scrollbar Vertical 刪除。

 

刪除後可以看到 Viewport 之前給 Scrollbar 留了空間，現在沒有 Scrollbar 了，我們要調節一下 Viewport 使其填充整個 Scroll View。

 

我們選中 Viewport，把 Right 和 Bottom 都改為 0。

 

結果如下。

 

2.3 設定 item 模板: Item Template

清單中要顯示一個一個的 item，得先做 item 模板，我們在 Scroll View 子節點下創建一個 Image，重命名為 item，如下。

 

調整一下 item 的寬高。

 

並給 item 加點元素，效果及節點結構如下。

 

接著選取 Scroll View 節點，設定 Item Template 為剛剛的 item，並填入 Default Item Size 為 item 的寬度高，如下。

 

2.4 設定物件池大小：Pool Size

 

2.5 設定列表排列方向

清單提供了 4 種排列方向，大家一看選項就知道是什麼意思了，這裡我以 Vertical 垂直為例。

 

2.6 設定分頁大小: Page Size

如果你用的是 ScrollView 元件就沒有 Page Size 這個設定了，只有 ScrollViewEx 元件有這個設定。

為什麼要設定分頁呢？ ScrollView 中維護了一份 List，用於儲存 item的座標和尺寸。

 

假設你的清單有巨量的 item 數據，你現在要往中間插入一個新的 item，這個時候要重新計算巨量的 item 的座標和尺寸，非常的耗性能，解決辦法就是設定分頁，每次只維護一個分頁的 item，大大提升效能。

建議設定為列表可見區域能夠顯示的 item 的最大數量的 2 倍以上，我在這裡設定為 30。

 

 

2.7 其他常規設置

設定一下 Content 和 Viewport，如下。

 

依照滑動方向勾選 Horizontal 或 Vertical，這裡我只需垂直方向滑動，所以只勾選 Vertical。

 

3.寫測試程式碼

建立一個 MyTest.cs 腳本，如下。

註：直接參考是原作者提供的測試腳本  TestScript.cs 和 TestLargeAmount.cs 修改即可。

 

using System.Collections.Generic;

using AillieoUtils;

using UnityEngine;

using UnityEngine.UI;

//排行榜單項數據結構

public struct RankItemData

{

   // 排名

   public int rank;

   // 名字

   public string name;

}

public class MyTest : MonoBehaviour

{

   // 測試數據列表

   List<RankItemData> testData = new List<RankItemData>();

   // 引用的ScrollView組件（AillieoUtils中的循環列表組件）

   public ScrollView scrollView;

   private void Start()

   {

       // 構造測試數據

       InitData();

       // 設置ScrollView的三個核心回調函數：

       // 1. 數據更新回調

       scrollView.SetUpdateFunc(updateFunc);

       // 2. 動態尺寸回調

       scrollView.SetItemSizeFunc(itemSizeFunc);

       // 3. 數據總數回調

       scrollView.SetItemCountFunc(itemCountFunc);

       // 刷新列表（參數false表示不重置滾動位置）

       scrollView.UpdateData(false);

   }

   /// <summary>

   /// 初始化測試數據（生成5萬條排行榜數據）

   /// </summary>

   private void InitData()

   {

       // 構建50000個排名數據

       for (int i = 1; i <= 50000; ++i)

       {

           RankItemData data = new RankItemData();

           data.rank = i;// 排名從1開始

           data.name = "Name_" + i;// 模擬玩家名稱

           testData.Add(data);

       }

   }

   /// <summary>

   /// 列表項更新回調

   /// </summary>

   /// <param name="index">數據索引</param>

   /// <param name="rectTransform">列表項的RectTransform</param>

   void updateFunc(int index, RectTransform rectTransform)

   {

       // 獲取對應數據

       RankItemData data = testData[index];

       

       // 激活列表項（對象池中的項可能被禁用）

       rectTransform.gameObject.SetActive(true);

       

       // 更新排名文本

       rectTransform.Find("rank").GetComponent<Text>().text = data.rank.ToString();

       // 更新名稱文本

       rectTransform.Find("name").GetComponent<Text>().text = data.name;

       

       // 設置按鈕點擊事件

       Button btn = rectTransform.Find("Button").GetComponent<Button>();

       btn.onClick.RemoveAllListeners();  // 先移除舊監聽

       btn.onClick.AddListener(() =>

       {

           Debug.Log("點擊了：" + data.name);  // 點擊時打印名稱

       });

   }

   /// <summary>

   /// 動態尺寸回調（實現不同排名不同高度）

   /// </summary>

   Vector2 itemSizeFunc(int index)

   {

       RankItemData data = testData[index];

       // 前三名使用更大的高度（180），其他使用默認高度（100）

       // 寬度固定為750

       if (data.rank <= 3)

       {

           return new Vector2(800, 180);

       }

       else

       {

           return new Vector2(800, 100);

       }

   }

   /// <summary>

   /// 數據總數回調

   /// </summary>

   int itemCountFunc()

   {

       // 返回當前數據總量

       return testData.Count;

   }

}


 

4.運行測試

我們將 MyTest.cs 腳本掛到 Canvas 上，並賦值 Scroll View 成員，如下。

 

接著，我們把 item 隱藏掉。

 

運行，效果如下。

 

5.item 之間增加間隔

在 item 下方創建一個 Image 並重新命名為 bg，設定 Anchors 為 stretch-strech，設定 Top 和 Bottom 位元 2，這樣就會上下留 2 個單位的縫隙了。

 

不要忘記了，我們把 item 自身的 Image 元件刪掉。

 

重新運行，效果如下，達到我們的效果了。

 

 

6.結果

我們可以看到，雖然我們的清單資料有 50000 個，但 UI 只有幾個 item 在循環復用著，特別適合用於資料項很多的列表的顯示。

 

7.插入、刪除、追加資料或捲動至指定位置

如果你有一些特別的需求，例如插入、刪除、追加資料或滾動到指定位置，也可以很輕鬆的實現。

這裡修改 MyTest，加入對應的按鈕事件。

// 在隨機位置插入新數據

public void AddRandomData()

{

   RankItemData data = new RankItemData();

   data.rank = 666;

   data.name = "Name_隨機插入新數據";

   var index = Random.Range(0, testData.Count);

   testData.Insert(index, data);

   scrollView.UpdateData(false);

   Debug.Log($"在{index}位置插入了一條新數據");

}

// 隨機刪除一條數據

public void RemoveRandomData()

{

   if (this.testData.Count == 0)

   {

       return;

   }

   var index = Random.Range(0, this.testData.Count);

   testData.RemoveAt(index);

   scrollView.UpdateData(false);

   Debug.Log($"刪除了第{index}條數據");

}

// 在列表末尾追加隨機數據

public void AppendRandomData()

{

   RankItemData data = new RankItemData();

   data.rank = testData.Count + 1;

   data.name = "Name_" + testData.Count + 1;

   testData.Add(data);

   scrollView.UpdateData(false);

   Debug.Log("在列表末尾追加了一條新數據");

}

// 刪除列表最後一條數據

public void RemoveLastData()

{

   if (testData.Count == 0)

   {

       return;

   }

   testData.RemoveAt(testData.Count - 1);

   Debug.Log("刪除列表最後一條數據");

   scrollView.UpdateData(false);

}

//滾動到隨機位置

public void ScrollToRandom()

{

   var index = Random.Range(0, testData.Count);

   scrollView.ScrollTo(index);

}

 

新增按鈕並綁定對應按鈕事件。

 

效果如下。

 

 

Unity UnityDynamicScrollView 動態捲動大師相關網站 & 插件下載點

 

【UnityDynamicScrollView】

GitHub 下載連結：UnityDynamicScrollView

Gitee 下載連結：UnityDynamicScrollView

————————————————

 

更多好用插件：【Unity 好用插件推薦】持續更新，一起讓遊戲開發事半功倍！

 

 

 

本文原創(或整理)於亞洲電玩通，未經作者與本站同意不得隨意引用、轉載、改編或截錄。

特約作家簡介

---

支持贊助 / DONATE

 

亞洲電玩通只是很小的力量，但仍希望為復甦台灣遊戲研發貢獻一點動能，如果您喜歡亞洲電玩通的文章，或是覺得它們對您有幫助，歡迎給予一些支持鼓勵，不論是按讚追蹤或是贊助，讓亞洲電玩通持續產出，感謝。

BTC

352Bw8r46rfXv6jno8qt9Bc3xx6ptTcPze

ETH

0x795442E321a953363a442C76d39f3fbf9b6bC666

TRON

TCNcVmin18LbnXfdWZsY5pzcFvYe1MoD6f