Unity UGUI的ScrollRect滾動(dòng)視圖組件使用詳解

更新時(shí)間：2023年07月11日 09:41:19 作者：AlianBlank

這篇文章主要為大家介紹了Unity UGUI的ScrollRect滾動(dòng)視圖組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

1. 什么是ScrollRect組件？

ScrollRect（滾動(dòng)視圖）是Unity UGUI中的一個(gè)常用組件，用于在UI界面中創(chuàng)建可滾動(dòng)的區(qū)域。

通過ScrollRect組件，可以實(shí)現(xiàn)在有限的空間內(nèi)顯示大量的內(nèi)容，并且可以通過滑動(dòng)手勢(shì)來瀏覽內(nèi)容。

2. ScrollRect組件的工作原理

ScrollRect組件通過將內(nèi)容放置在一個(gè)可滾動(dòng)的矩形區(qū)域內(nèi)，然后通過拖動(dòng)或滑動(dòng)手勢(shì)來改變內(nèi)容的顯示位置。

ScrollRect組件包含一個(gè)Viewport（視口）和一個(gè)Content（內(nèi)容）兩個(gè)子對(duì)象，Viewport用于限制Content的顯示范圍，而Content則包含了實(shí)際的內(nèi)容。

3. ScrollRect組件的常用屬性

Content：用于放置實(shí)際的內(nèi)容的RectTransform對(duì)象。
Horizontal：是否允許水平方向的滾動(dòng)。
Vertical：是否允許垂直方向的滾動(dòng)。
Movement Type：滾動(dòng)的類型，可選的類型有：Unrestricted（不受限制）、Elastic（彈性）、Clamped（限制）。
Inertia：是否啟用慣性滾動(dòng)。
Deceleration Rate：慣性滾動(dòng)的減速率。
Scroll Sensitivity：滾動(dòng)的靈敏度。

4. ScrollRect組件的常用函數(shù)

ScrollTo：滾動(dòng)到指定位置。
StopMovement：停止?jié)L動(dòng)。
OnBeginDrag：開始拖拽時(shí)調(diào)用的函數(shù)。
OnDrag：拖拽過程中調(diào)用的函數(shù)。
OnEndDrag：結(jié)束拖拽時(shí)調(diào)用的函數(shù)。

5. 示例代碼

示例1：基本的滾動(dòng)視圖

using UnityEngine;
using UnityEngine.UI;
public class ScrollRectExample : MonoBehaviour
{
    public ScrollRect scrollRect;
    void Start()
    {
        // 設(shè)置Content的大小
        RectTransform content = scrollRect.content;
        content.sizeDelta = new Vector2(0, 1000);
        // 設(shè)置滾動(dòng)視圖的滾動(dòng)范圍
        scrollRect.verticalNormalizedPosition = 1;
    }
}

操作步驟：

創(chuàng)建一個(gè)空的GameObject，并添加ScrollRect組件。
在Hierarchy面板中選中ScrollRect對(duì)象，將Content對(duì)象拖拽到ScrollRect的Content屬性中。
將示例代碼添加到ScrollRectExample腳本中，并將ScrollRect對(duì)象拖拽到scrollRect屬性中。
運(yùn)行游戲，可以看到滾動(dòng)視圖中的內(nèi)容可以通過滑動(dòng)手勢(shì)進(jìn)行滾動(dòng)。

示例2：限制滾動(dòng)范圍

using UnityEngine;
using UnityEngine.UI;
public class ScrollRectExample : MonoBehaviour
{
    public ScrollRect scrollRect;
    void Start()
    {
        // 設(shè)置Content的大小
        RectTransform content = scrollRect.content;
        content.sizeDelta = new Vector2(0, 1000);
        // 設(shè)置滾動(dòng)視圖的滾動(dòng)范圍
        scrollRect.verticalNormalizedPosition = 1;
        scrollRect.movementType = ScrollRect.MovementType.Clamped;
    }
}

操作步驟：

創(chuàng)建一個(gè)空的GameObject，并添加ScrollRect組件。
在Hierarchy面板中選中ScrollRect對(duì)象，將Content對(duì)象拖拽到ScrollRect的Content屬性中。
將示例代碼添加到ScrollRectExample腳本中，并將ScrollRect對(duì)象拖拽到scrollRect屬性中。
運(yùn)行游戲，可以看到滾動(dòng)視圖中的內(nèi)容在滾動(dòng)到邊界時(shí)會(huì)受到限制。

示例3：慣性滾動(dòng)

using UnityEngine;
using UnityEngine.UI;
public class ScrollRectExample : MonoBehaviour
{
    public ScrollRect scrollRect;
    void Start()
    {
        // 設(shè)置Content的大小
        RectTransform content = scrollRect.content;
        content.sizeDelta = new Vector2(0, 1000);
        // 設(shè)置滾動(dòng)視圖的滾動(dòng)范圍
        scrollRect.verticalNormalizedPosition = 1;
        scrollRect.inertia = true;
        scrollRect.decelerationRate = 0.5f;
    }
}

操作步驟：

創(chuàng)建一個(gè)空的GameObject，并添加ScrollRect組件。
在Hierarchy面板中選中ScrollRect對(duì)象，將Content對(duì)象拖拽到ScrollRect的Content屬性中。
將示例代碼添加到ScrollRectExample腳本中，并將ScrollRect對(duì)象拖拽到scrollRect屬性中。
運(yùn)行游戲，可以看到滾動(dòng)視圖中的內(nèi)容在滑動(dòng)結(jié)束后會(huì)有慣性滾動(dòng)的效果。

示例4：滾動(dòng)到指定位置

using UnityEngine;
using UnityEngine.UI;
public class ScrollRectExample : MonoBehaviour
{
    public ScrollRect scrollRect;
    void Start()
    {
        // 設(shè)置Content的大小
        RectTransform content = scrollRect.content;
        content.sizeDelta = new Vector2(0, 1000);
        // 設(shè)置滾動(dòng)視圖的滾動(dòng)范圍
        scrollRect.verticalNormalizedPosition = 1;
        // 滾動(dòng)到指定位置
        scrollRect.ScrollTo(new Vector2(0, 500), 0.5f);
    }
}

操作步驟：

創(chuàng)建一個(gè)空的GameObject，并添加ScrollRect組件。
在Hierarchy面板中選中ScrollRect對(duì)象，將Content對(duì)象拖拽到ScrollRect的Content屬性中。
將示例代碼添加到ScrollRectExample腳本中，并將ScrollRect對(duì)象拖拽到scrollRect屬性中。
運(yùn)行游戲，可以看到滾動(dòng)視圖會(huì)自動(dòng)滾動(dòng)到指定位置。

示例5：停止?jié)L動(dòng)

using UnityEngine;
using UnityEngine.UI;
public class ScrollRectExample : MonoBehaviour
{
    public ScrollRect scrollRect;
    void Start()
    {
        // 設(shè)置Content的大小
        RectTransform content = scrollRect.content;
        content.sizeDelta = new Vector2(0, 1000);
        // 設(shè)置滾動(dòng)視圖的滾動(dòng)范圍
        scrollRect.verticalNormalizedPosition = 1;
        // 停止?jié)L動(dòng)
        scrollRect.StopMovement();
    }
}

操作步驟：