第四十四章 Unity 滑动条 (Slider) UI

news2025/1/12 20:42:44

本章节我们介绍滑动条 (Slider)，它允许用户通过拖动鼠标从预定范围中选择数值。首先，我们点击菜单栏“GameObject”->“UI”->“Slider”，调整其位置，最终效果如下

我们发现滑动条 (Slider)下面有三个子游戏对象Background，Fill Area和Handle Slide Area。他们分别代表了横条背景，以及滑动后横条背景，以及圆形滑块(控制柄)背景。这里我们简单的设置一下滑动条 (Slider)的样子。我们修改它的背景色和滑动背景色。首先，点击选中子游戏对象Background，查看它的Inspector检视面板，修改Color属性值。

我们选一个红色吧。然后再选中子游戏对象Fill Area下的Fill子子游戏对象，然后查看它的Inspector检视面板，修改Color属性值。

我们选择一个绿色吧。最终我们查看滑动条 (Slider)的样子。

接下来，我们看看滑动条 (Slider)的Inspector检视面板，如下所示

上面公共的属性，我们就不逐一介绍了。

Fill Rect就是Fill Area子游戏对象。

Handle Rect就是Handle Slide Area子游戏对象。

Direction 拖动控制柄时滑动条值增加的方向。选项包括 Left To Right、Right To Left、Bottom To Top 和 Top To Bottom。默认值是Left To Right从左到右。

Min Value和Max Value 是滑动条的最小值和最大值，默认是从0到1。

Whole Numbers是否应该将滑动条约束为整数值，默认不勾选，也就是使用小数。

Value滑动条的当前数值。默认值为0，也就是圆形滑块(控制柄)位于滑动条的最左端。

最后我们介绍滑动条的On Value Change(Single) 事件，当我们拖动圆形滑块(控制柄)的时候，就会触发这个事件。同样，我们使用一个方法来打印滑动条的Vallue值，如下所示

    // 滑动条元素上的 Slider 组件
    private Slider slider;

    void Start()
    {
        // 获取滑动条元素上的 Slider 组件
        slider = GameObject.Find("Slider").GetComponent<Slider>();
    }

    public void testSliderChange()
    {
        Debug.Log("SliderChange:" + slider.value);
    }

接下来，我们就将这个方法绑定到滑动条的On Value Change(Single) 事件上。