【2.UI元素】

5.Slider

Slider（滑動條）是在橫向或縱向範圍内通過滑塊來操作數值的 UI 元素。可以用于調節數值，也可以用于進度條顯示。

5.1 Slider 的構成

Slider 的構成如下圖所示：

Slider 的子級是由圖像和空物體構成的。

其變量如下圖所示：

Fill Rect - 填充矩形，當滑動滑塊時代表目前數值大小的部分。

Handle Rect - 滑塊圖，如果空缺就可以設定成沒有滑塊的進度條，沒有滑塊的情況下，滑鼠拖拽進度條仍然會有滑動操作。

Direction - 方向，包括從左到右，從上到下，從右到左，從下到上選項。

Min Value - 最小值

Max Value - 最大值

Whole Numbers - 勾選後滑塊值為整數

Value - 滑塊的目前值

5.2 Slider 的事件監聽

Slider 的事件監聽是 On Value Changed(Single)，其參數值為單精度浮點型，即 Single 類型。

1.設定 Slider 元件的監聽區

示例：通過 Slider 控制圖像的透明度。

準備好 Image 和 Slider，設定 Slider 的最小值為 0，最大值為 1，将 Image 拖拽到 Slider 監聽區，選擇 No Function 為 CanvasRenderer 元件的 SetAlpha。如下圖所示：

2.使用腳本實作

編寫腳本如下：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class SliderValueChanged : MonoBehaviour
{
    Slider slider;
    GameObject image;
    
    // Start is called before the first frame update
    void Start()
    {
        slider = GetComponent<Slider>();
        slider.onValueChanged.AddListener(OnValueChanged);

        image = GameObject.Find("Image");
    }

    // Update is called once per frame
    void Update()
    {
        
    }

    void OnValueChanged(float value)
    {
        image.GetComponent<CanvasRenderer>().SetAlpha(value);
        print("The slider value is " + value.ToString());
    }
}           

将腳本拖拽到 Slider 上即可。

5.3無滑塊的 Slider

無滑塊的 Slider 需要去掉開關區的勾選，同時，選中子物體 Handle 後，去掉其 Image 勾選。這樣就不顯示滑塊，也不能夠使用滑鼠操作。

通過代碼實作自動控制圖像的透明度，代碼如下：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class SliderValueChanged : MonoBehaviour
{
    Slider slider;
    CanvasRenderer cr;
    
    // Start is called before the first frame update
    void Start()
    {
        slider = GetComponent<Slider>();
        cr = GameObject.Find("Image").GetComponent<CanvasRenderer>();
        cr.SetAlpha(0.0f);
    }

    // Update is called once per frame
    void Update()
    {
        slider.value = Mathf.MoveTowards(slider.value, 1, 0.002f);
        cr.SetAlpha(slider.value);
        if (slider.value >= 1.0f) slider.value = 0.0f;
    }
}           

在上面的代碼中，使用了 Mathf.MoveTowards 方法來實作進度條從左到右滑動；該方法的格式：

Mathf.MoveTowards(current:float, target:float, maxDelta:float):float           

采用改變目前值向目标值靠近，傳回值為改變後的值。