Chinar blog ：www.chinar.xin

Unity UGUI 完整系列教程 (Chinar中文图解)

Unity UGUI-Slider 组件

---

本文提供全流程，中文翻译。 Chinar 的初衷是将一种简单的生活方式带给世人 使有限时间 具备无限可能

Chinar —— 心分享、心创新！ 助力快速掌握 Unity UGUI Slider 组件的使用 为初学者节省宝贵的时间，避免采坑！

Chinar 教程效果：

---

---

全文高清图片，点击即可放大观看 (很多人竟然不知道)

---

1

Presentation —— 介绍

Slider 组件是一个滑动条组件，它一般用来制作血条或者进度条。

我们创建一个Slider组件看一下它的属性：

在Unity的 Hierarchy 面板上右键–>UI–>Slider


选中我们创建的Slider对象

首先看一下其子物体对应的UI

---

2

Attribute —— 属性

然后再看Inspector面板上的属性

下面看一下每个属性的详细功能

属性	功能
Fill Rect	Slider 组件中填充区域的图形
Handle Rect	滑动条手柄部分的组件
Direction	拖动手柄时滑块的拖动方向。选项包括从左到右，从右到左，从下到上和从上到下。
Min Value	最大值
Max Value	最小值
Whole Numbers	是否将值约束为整数
Value	填充区域的值，范围0~1

---

3

Direction —— 拖拽方向

我们介绍一下 Direction 属性四种类型的效果

我们一般习惯将滑动条的 Handle 对象进行隐藏，原因是看着有点丑，这并不影响我们拖动滑动条

首先默认拖拽方向为 Left To Rigth 从左到右


而 Right To Left 是从右往左拖拽,这里不做演示

看一下 Bottom To Top 从底部往顶部：

而Top To Bottom 是从上往下拖拽，这里也不做演示了

---

4

Use —— 使用

我们来做一个滑动条自增的效果，类似于进度条

首先制作UI界面


这里将Slider的MaxValue设置为100

下面我们来写代码：

using UnityEngine;
using UnityEngine.UI;public class ChinarSlider : MonoBehaviour
{private Slider slider;//Slider 对象private Text text;//Text 对象/// <summary>/// 初始化组件/// </summary>void Start(){slider = GameObject.Find("Slider").GetComponent<Slider>();text = slider.transform.Find("Text").GetComponent<Text>();slider.value = 0;text.text = " ";}void Update(){if (slider.value < 100){slider.value += Time.deltaTime;text.text = (slider.value/1).ToString("F")+"%";}}
}

运行Unity看下效果：

至此：您已完美征服了 UGUI - Slider

---

Unity UGUI 完整系列教程 (Chinar中文图解)

---

支持

May Be —— 开发者，总有一天要做的事！

拥有自己的服务器，无需再找攻略 Chinar 提供一站式《零》基础教程 使有限时间 具备无限可能！

---

先点击领取 —— 阿里全产品优惠券 (享受最低优惠)

Chinar 免费服务器、建站教程全攻略！( Chinar Blog )

---

---

END

本博客为非营利性个人原创，除部分有明确署名的作品外，所刊登的所有作品的著作权均为本人所拥有，本人保留所有法定权利。违者必究

对于需要复制、转载、链接和传播博客文章或内容的，请及时和本博主进行联系，留言，Email: ichinar@icloud.com

对于经本博主明确授权和许可使用文章及内容的，使用时请注明文章或内容出处并注明网址