一.Slider对象的结构
| 对象 | 介绍 |
|---|---|
| Slider | 附加Slider组件 |
| Background | 背景 |
| Fill Area | 填充范围 |
| Fill | 填充对象 |
| Handle Slider Area | 滑块移动范围 |
| Handle | 滑块 |
二.Slider组件属性
| 属性 | 说明 |
|---|---|
| Fill Rect | 关联填充对象 |
| Handle Rect | 关联滑块对象 |
| Direction | 设置方向 |
| Min Value | 最大取值 |
| Max Value | 最小取值 |
| Whole Numbers | 是否取整 |
| Value | 当前取值 |
三.事件监听
3.1 可视化监听
3.2 代码监听
public class CSlider : MonoBehaviour
{private Slider _slider;void Start(){_slider = GameObject.Find("Slider").GetComponent<Slider>();_slider.onValueChanged.AddListener(delegate (float value){sliderOnValueChanged(value);});}public void sliderOnValueChanged(float value){Debug.Log("value: "+ value);}
}四.填充内容占满背景
首先，我们进一步的了解默认的Slider对象，先将滑块隐藏，在最小值和最大值之间拖动Value
可以看到Value最小时，填充图片没有消失，Value最大时，填充范围没有覆盖背景图。
以下设置可以解决这个问题：
4.1.把Fill放到Slider下，Fill Area删了
4.2 将Fill的宽高设置为和父对象一致
4.3 把Fill的Image组件的ImageType属性设置为Filled，把Fill Method设置为Horizontal
将Background和Fill的图片设置后，改变Value的值，可以看到Value最小时，填充消失，Value最大时，覆盖背景
五.Slider的应用
总体来说Slider很常用，游戏中血条，进度条，设置百分比数值等地方都有应用。可按是否有交互进行分类，无交互的统称为进度条(包括血条，经验条等，肯定没有滑块)；有交互的称为滑动条(可能有滑块)
5.1 进度条
某游戏的进度条UI
通过代码设置进度条UI的简单举例
public class CSlider : MonoBehaviour
{private Slider _slider;private TMP_Text _text1;private float time = 0;void Start(){_text1 = GameObject.Find("Slider1/Text1").GetComponent<TMP_Text>();_slider = GameObject.Find("Slider1").GetComponent<Slider>();_slider.minValue = 0;_slider.maxValue = 100;_slider.wholeNumbers = true;setSliderValue(20);}void Update(){time += Time.deltaTime;if(3 < time){setSliderValue(50);}Debug.Log(time);}public void setSliderValue(float value){_slider.value = value;_text1.SetText(value + "/" + _slider.maxValue);}
}运行效果
5.2 滑动条
某游戏滑动条UI
代码示例
public class CSlider : MonoBehaviour
{private Slider _slider;private TMP_Text _text1;private float time = 0;void Start(){_text1 = GameObject.Find("Slider1/Text1").GetComponent<TMP_Text>();_slider = GameObject.Find("Slider1").GetComponent<Slider>();_slider.minValue = 0;_slider.maxValue = 100;_slider.wholeNumbers = true;_slider.onValueChanged.AddListener(delegate (float value){Debug.Log(value);_text1.SetText(value + "/" + _slider.maxValue);});setSliderValue(20);}public void setSliderValue(float value){_slider.value = value;_text1.SetText(value + "/" + _slider.maxValue);}
}运行效果
