Unity3d中UGUI组件精简复盘Slider组件

Posted 2021-08-31 ProMer_Wang

上一节，我们简单概括了Unity3D编辑器中Toggle组件的简要介绍。具体详情链接为：Unity3d中UGUI组件精简复盘（十）Toggle组件

话不多说，我们直接进入正题~ 今天我们简要概括复盘的组件便是Slider组件啦~

是的没错，Slider组件也是继承于Selectable基类的，所以在属性的注解上也会有Selectable基类中的属性。这里就不重复了直接上链接，想要了解Selectable基类通用的属性注解的请自行跳转自Unity3d中UGUI组件精简复盘（八）Selectable基类进行查阅哈，如果有的小伙伴不知道为什么这么说继承于Selectable基类，可到VS环境下定义出Slider类名，选中类名按F12键，即可得知。

Slider组件

Slider继承于Selectable

子物体：

Background： 背景框

FillArea： 填充范围

Fill： 填充图片

Handle Slide Area： 滑动范围

Handle： 滑动块图片

属性：
File Rect： Fill 的Transform

Handle Rect： Handle的Transform

Direction： Left To Right从左到右，Right To Left从右到左，Bottom To Top 从下到上，Top To Bottom 从上到下

Min Value： 最小值

Max Value： 最大值

Whole Numbers： 是否为整数，勾选时值为整数，不勾选时为浮点数

Value： 适用于值的范围不为0~1的情况下进行控制

OnValueChanged（Boolean）： 类似于Button里面的一个Onclick事件绑定。我们可以通过手动设置来进行绑定，当然我们也一样可以通过手写代码控制：

例如：TestSlider.cs

using UnityEngine.UI;

public class TestSlider : MonoBehaviour {
    void Start()
    {
        GetComponent<Slider>().onValueChanged.AddListener((value) => Debug.Log(value));
    }
}

**应用：**可以用于做系统音量或者系统亮度

例子1：进度条的简易实现

using UnityEngine.UI;
public class SliderText : MonoBehaviour {
	void Start () {
        StartCoroutine(valueChange());
	}

    private IEnumerator valueChange()
    {
        Slider slider = GetComponent<Slider>();
        float process = 0;

        while(process <1)
        {
            process += 0.1f;
          
            yield return new WaitUntil(()=>
            {
                //Mathf.SmoothSetp在最小值到最大值之间进行一个平滑的变化
                  slider.value = Mathf.SmoothStep(slider.value, process, 0.5f);
                return process - slider.value <= 0.01f;
            });

        }
    }
}

联系工作实际：
第一： 在工作中通常避免不了进度条的问题，而博主在工作中就遇到过一个坑，那就是由于Canvas里面的渲染模式的问题，导致原本不应该颜色渐变的进度条变成了颜色渐变的进度条，画了一大部分时间去查找原因，起初以为是美术出的图就是渐变色的图，后来发现并不是，是由于自己在拼接UI的时候，自己新建的Canvas属性与原属性不一致导致的，这一踩坑点。

第二：在工作实际中有这么一种情况，需求中出现了一种圆形的类似进度条的填充需求。看似是进度条实则不是进度条，而是通过修改Image里的填充模式从而实现的。这是踩坑点二；

第三：无疑就是Slider里的填充区域的问题，这个跟自己的熟练度有关，建议多去了解Slider里面的子物体的作用。

如果博客博友对这个章节有更多的内容想要了解的，可以评论哈，等这一个章节结束后，我会根据评论反馈以及自己的能力，将评论中反馈的内容在下一个计划中去制作出对应的内容的哈~

作者：ProMer_Wang

链接：https://blog.csdn.net/qq_43801020/article/details/117611968

本文为ProMer_Wang的原创文章，著作权归作者所有，转载请注明原文出处，欢迎转载！