【Unity UGUI 交互组件——Slider（7）】
Slider(滑动条)在游戏开发中应用的非常广泛，比如音量控制（主音量、音乐、音效）、画面亮度/对比度、鼠标灵敏度、视野范围（FOV）显示任务进度、加载进度、角色经验值；技能蓄力（如控制力道、射门力量条）、瞄准条等等
1.概述
这是一个典型的滑动条
他的构成是由六部分构成的，如下图
下表简单介绍一下他的组成的六部分
| Hierarchy 对象 | 作用 | 可删？ | 常用修改 |
|---|---|---|---|
| Slider (根) | 挂 Slider 脚本，统筹一切 | ❌ | 改方向、范围、事件 |
| Background | 整个轨道背景图 | ✅ | 换 9-Slice 底图 |
| Fill Area | 容器，决定填充长度 | ❌ | 改锚点 = 控制填充方向 |
| Fill | 进度条本身（Image） | ❌ | 改颜色/渐变；Image Type 设 Filled |
| Handle Slide Area | 容器，限制滑块移动范围 | ❌ | 改锚点 = 控制滑块行程 |
| Handle | 可拖动滑块（Image/Button） | ✅ | 换图标；加阴影/粒子 |
只删除 Handle 即变成纯进度条；只删除 Fill 可变成纯输入条，二者效果如下图
另外一些做法
| 场景 | 做法简述 |
|---|---|
| 血条 / 蓝条 | 隐藏 Handle，脚本每帧 slider.value = hp / maxHp |
| 音量调节 | 保留 Handle，OnValueChanged → AudioListener.volume = value |
| 难度选择 | 整数值，配合 Whole Numbers = true （这个布尔参数在Slider上的Slider组件里面设置） |
| Loading 进度 | 禁用交互，slider.interactable = false |
2. 具体介绍
一、Slider
这是滑动条的父物体，挂载Slider组件，用来控制整个滑动条具体的交互表现（如下图，此时Transiton为Nono）
这里以Transiton模式为Nono作为例子，介绍一下（Transtiton不同模式是针对背景图 + 滑块 + 填充图，后面会介绍）。
| 属性 | 中文 | 说明 & 常用值 | 示例 |
|---|---|---|---|
| Fill Rect | 填充图片 | 拖 Fill Image | — |
| Handle Rect | 滑块图片 | 拖 Handle Image | — |
| Direction | 方向 | 决定滑块和填充的行进方向： • LeftToRight：从左到右（血条/进度条常见） • RightToLeft：从右到左（镜像 UI） • TopToBottom：从上到下（垂直能量条） • BottomToTop：从下到上（垂直冷却条） | 做横向血条选 LeftToRight，做竖向蓝条选 BottomToTop |
| Min Value | 最小值 | 范围下限，默认 0 | 血量最小 0 |
| Max Value | 最大值 | 范围上限，默认 100 或 1 | 血量最大 100 |
| Whole Numbers | 整数 | 勾选后滑块只能停在整数刻度，适合做难度档位、等级选择 | 难度 0-2 共 3 档 |
| Value | 当前值 | 实时读写；可在代码里用 slider.value = hp / maxHp 同步 | — |
| OnValueChanged(float) | 值变化事件 | 绑定脚本方法，参数为新值；用于音量、灵敏度、进度回调 | void OnVolume(float v){ AudioListener.volume = v;} |
| Interactable | 可交互 | 设为 false 时滑块变灰且无法拖动，但进度仍能更新；常用于冷却禁用、只读进度 | slider.interactable = false; // 冷却中 |
| Transition | 状态过渡 | 控制滑块/背景/填充在交互时的视觉反馈： • Color Tint：颜色渐变（最常用） • Sprite Swap：换图（自定义图标按钮） • Animation：骨骼动画（弹性、闪光） • None：无过渡，性能优先 | 血量条常用 Color Tint；技能冷却条可用 Animation |
| Navigation | 键盘/手柄导航 | 决定按 ↑↓←→ 时焦点跳到下一个 UI 控件： • Automatic：Unity 自动找最近 • Horizontal/Vertical：仅限水平/垂直 • Explicit：手动指定 | 手柄菜单常用 Automatic；竖直列表选 Vertical |
介绍完这些具体参数，介绍一下Transition 作用对象 它只影响 Slider 自身 的 可视状态反馈（背景图 + 滑块 + 填充图）。 不 改变数值逻辑，仅决定“鼠标悬停 / 按下 / 禁用”时这些元素如何变色、换图或做动画。
Transition 四种模式
| 模式 | 中文 | 作用目标 | 效果 |
|---|---|---|---|
| None | 无过渡 | 背景、滑块、填充 | 瞬间切换，无任何视觉变化 |
| Color Tint | 颜色着色 | 背景、滑块、填充 | 用颜色乘法做渐变（最常用） |
| Sprite Swap | 精灵替换 | 背景、滑块、填充 | 直接换整张图（图标按钮常用） |
| Animation | 动画过渡 | 背景、滑块、填充 | 播放 Animator 做缩放、旋转、闪光 |
勾选后即可在下方 Normal / Highlighted / Pressed / Disabled 区域填入对应资源，感兴趣的话，自己做实验，看看效果，这里不赘述了。
二、Background
背景，这是就是一张Image,他是滑动条的底色，具体如下图，滑动条本质是两张图，一个（BackGround）在下面，一个在上面（Fill），上面（Fill）的盖住下面(Background)的，通过改变上面的图片大小（Fill），来实现滑动条改变效果。
三、FillArea&Fill
FillAera 就是限定滑动条滑动的位置大小，而Fill就是滑动条本身图片，通过改变它的大小，来实现改变进度。下图是他们单独拉出来方便看。
四、HandleSlideArea&Handle
HandleSile就是限定Hanlde(滑块)滑动的范围，他本身只有RectTransform组件。Hande就是滑块。
五、脚本控制举例
这里只举脚本例子，UI那部分就不做了，这里的主要是理解如果用脚本控制Slider
① 血量条（实时同步）
using UnityEngine;
using UnityEngine.UI;public class HpSlider : MonoBehaviour
{public Slider hpSlider; // 拖进来public float maxHp = 100;private float currentHp;void Start(){currentHp = maxHp;UpdateHpBar();}public void TakeDamage(float damage){currentHp = Mathf.Max(currentHp - damage, 0);UpdateHpBar();}void UpdateHpBar(){hpSlider.value = currentHp / maxHp; // 0~1}
}
把 Slider 的 MaxValue 设 1，Fill 用红色即可。
② 冷却倒计时（FillAmount 做环形遮罩）
using UnityEngine;
using UnityEngine.UI;public class CooldownSlider : MonoBehaviour
{public Slider cdSlider; // Fill 类型 = Radial360public float cdTime = 3f;private bool isCooling;void Update(){if (isCooling){cdSlider.value -= Time.deltaTime / cdTime;if (cdSlider.value <= 0) isCooling = false;}}public void StartCooldown(){isCooling = true;cdSlider.value = 1f; // 从满开始减}
}
把 Slider 的 Direction 设
Radial360，Fill 即可做环形冷却。
③ 音量滑块（实时生效）
using UnityEngine;
using UnityEngine.UI;public class VolumeSlider : MonoBehaviour
{public Slider volumeSlider;void Start(){volumeSlider.value = AudioListener.volume;volumeSlider.onValueChanged.AddListener(SetVolume);}void SetVolume(float v){AudioListener.volume = v;}
}
把 Slider 的 Min/Max 设 0~1，即可直接控制全局音量。
④ 整数档位选择（难度选择）
using UnityEngine;
using UnityEngine.UI;public class DifficultySlider : MonoBehaviour
{public Slider diffSlider;public Text displayText; // 显示档位readonly string[] names = { "简单", "普通", "困难" };void Start(){diffSlider.wholeNumbers = true;diffSlider.maxValue = names.Length - 1;diffSlider.onValueChanged.AddListener(UpdateText);UpdateText((int)diffSlider.value);}void UpdateText(int idx){displayText.text = names[idx];}
}
勾选
Whole Numbers，滑块只能停在整数刻度。
⑤ 禁用滑块（冷却期间只读）
using UnityEngine;
using UnityEngine.UI;public class LockSlider : MonoBehaviour
{public Slider slider;public Button startBtn;void Start(){startBtn.onClick.AddListener(Lock);}void Lock(){slider.interactable = false; // 变灰，不可拖动Invoke(nameof(Unlock), 3f); // 3 秒后解锁}void Unlock(){slider.interactable = true;}
}
interactable = false时滑块灰色，但仍可脚本改值。
总结
把 Slider 当“可调节的数值接口”，一行 slider.value = x + 一行事件绑定就能完成血条、音量、冷却、难度档位等需求。