跳至主要内容

ScrollView Variants

重要 注意 提醒

Coding Style wiki​

InfiniteScrollView 內建 4 種實作 (皆繼承 InfiniteScrollView)，將對應組件掛載至 ScrollRect 物件上並指定 cellPrefab 即可使用；初始、數據操作、刷新、滾動與 Snap 等共用 API 詳見基底類頁面。

命名空間OxGKit.InfiniteScrollView
類型VerticalInfiniteScrollView、HorizontalInfiniteScrollView、VerticalGridInfiniteScrollView、HorizontalGridInfiniteScrollView (皆繼承 InfiniteScrollView)
原始碼VerticalInfiniteScrollView.cs、HorizontalInfiniteScrollView.cs、VerticalGridInfiniteScrollView.cs、HorizontalGridInfiniteScrollView.cs
using OxGKit.InfiniteScrollView;

快速上手​

實作總覽​

實作排列方式專屬成員
VerticalInfiniteScrollView垂直列表 (上下滾動)spacing (float)
HorizontalInfiniteScrollView水平列表 (左右滾動)spacing (float)
VerticalGridInfiniteScrollView垂直網格 (上下滾動)spacing (Vector2)、columnCount
HorizontalGridInfiniteScrollView水平網格 (左右滾動)spacing (Vector2)、rowCount
using Cysharp.Threading.Tasks;
using OxGKit.InfiniteScrollView;
using UnityEngine;

public class GridLauncher : MonoBehaviour
{
    public VerticalGridInfiniteScrollView gridScrollView;

    private async void Start()
    {
        // 網格設置 (亦可於 Inspector 配置)
        this.gridScrollView.columnCount = 4;
        this.gridScrollView.spacing = new Vector2(10f, 10f);

        await this.gridScrollView.InitializePool();

        for (int i = 0; i < 500; i++)
            this.gridScrollView.Add(new InfiniteCellData(new Vector2(100f, 100f), i));
        this.gridScrollView.Refresh();
    }
}

通用規則​

  • 4 種實作的差異僅在排列計算與專屬成員，數據操作、刷新與 Snap 等 API 皆共用基底類行為。
  • 列表不會自動配置 ScrollRect 的滾動軸向，請自行將 ScrollRect 的 Vertical / Horizontal 勾選與所用實作對應。

注意 Grid 實作以每一排第一筆數據的 cellSize 推進排列與 content 尺寸計算，建議 Grid 使用一致的 cellSize (動態尺寸適用於 Vertical / Horizontal 列表)。

VerticalInfiniteScrollView​

垂直無限列表 (上下滾動)，適用排行榜、聊天室等直向清單。

類型public class VerticalInfiniteScrollView : InfiniteScrollView
原始碼VerticalInfiniteScrollView.cs
成員說明
public float spacingCell 的垂直間距。

覆寫行為

public override void Snap(int index, float duration)
public override bool Remove(int index, bool refresh = true)
  • Snap：依 snapAlign 累計 cellSize.y + spacing 計算垂直目標位置 (content 高度小於 viewport 無法滾動時不動作)。
  • Remove：移除後會將 content 位置回移一格 (cellSize.y + spacing)，避免移除當下的視覺跳動。

HorizontalInfiniteScrollView​

水平無限列表 (左右滾動)，適用卡片列、橫向選單等橫向清單。

類型public class HorizontalInfiniteScrollView : InfiniteScrollView
原始碼HorizontalInfiniteScrollView.cs
成員說明
public float spacingCell 的水平間距。

覆寫行為

public override void Snap(int index, float duration)
public override bool Remove(int index, bool refresh = true)
  • Snap：依 snapAlign 累計 cellSize.x + spacing 計算水平目標位置 (content 寬度小於 viewport 無法滾動時不動作)。
  • Remove：移除後會將 content 位置回移一格 (cellSize.x + spacing)。

提醒 頁籤分頁 (TabPage) 應用可以水平列表搭配 Snap 進行頁面切換 (參考 Samples 的 Infinite TabPage Demo，詳見模塊介紹)。

VerticalGridInfiniteScrollView​

垂直網格無限列表 (上下滾動)，每一橫排並排 columnCount 個 Cell，適用背包、商店等網格清單。

類型public class VerticalGridInfiniteScrollView : InfiniteScrollView
原始碼VerticalGridInfiniteScrollView.cs
成員說明
public Vector2 spacingCell 間距 (x = 水平、y = 垂直)。
public int columnCount欄數 (每一橫排並排的 Cell 數量)，預設 1 (小於等於 0 時自動視為 1)。

覆寫行為

public override void Snap(int index, float duration)
  • Snap：依目標索引所在的排數 (index / columnCount) 計算垂直目標位置。

注意 columnCount 於 v1.7.1 由 columeCount 更名 (拼寫修正)，已標註 FormerlySerializedAs，舊場景 / Prefab 的序列化數據會自動遷移。

HorizontalGridInfiniteScrollView​

水平網格無限列表 (左右滾動)，每一直排並排 rowCount 個 Cell。

類型public class HorizontalGridInfiniteScrollView : InfiniteScrollView
原始碼HorizontalGridInfiniteScrollView.cs
成員說明
public Vector2 spacingCell 間距 (x = 水平、y = 垂直)。
public int rowCount列數 (每一直排並排的 Cell 數量)，預設 1 (小於等於 0 時自動視為 1)。

覆寫行為

public override void Snap(int index, float duration)
  • Snap：依目標索引所在的排數 (index / rowCount) 計算水平目標位置。