首页/ 第 10 章 · UI 界面系统/ 第 151 课
LESSON 151 · UI 界面系统

Slider 滑动条

Slider 已掌握。下一课学 InputField 输入框。

⏱ 约 12 分钟📊 难度:入门🗂 第 10 章 · UI 界面系统📍 第 151 / 300 课
课程进度
151 / 300

🎯本节学习目标

  • 掌握 Slider 创建
  • 掌握读取数值
  • 掌握数值变化事件

🚀课程导读

音量滑块、难度条、加载进度条都是 Slider。本课掌握滑动条。

Slider 组件

拖一个滑动条。

  1. Hierarchy 右键 → UI → Slider,创建滑动条。
  2. 结构:Slider(根)→ Background(背景条)→ Fill Area → Fill(填充)+ Handle Slide Area → Handle(滑块)。
  3. 【组件属性】
  4. Min Value / Max Value:最小值/最大值。
  5. Value:当前值。
  6. Direction:方向(左到右/右到左/上到下…)。
  7. Whole Numbers:只取整数。
  8. 【读取】slider.value 返回当前值。
  9. 【设置】slider.value = 50;
  10. 【事件 On Value Changed】值变化时调用方法(音量实时调整)。
  11. 【注意】Fill 填充条需要 Image Type 设为 Filled 或 Sliced(第 149 课)。
💡
Slider 本体“长相”由子物体决定:Fill 是填充、Handle 是滑块。

实战:音量设置

拖动调节音量。

  1. 在场景放一个 AudioSource(第 172 课),准备一首背景音乐。
  2. 创建脚本 AudioSettings:
  3. public Slider volumeSlider;
  4. public AudioSource bgm;
  5. void Start() { volumeSlider.value = 1f; volumeSlider.onValueChanged.AddListener(SetVolume); }
  6. void SetVolume(float v) { bgm.volume = v; Debug.Log("音量:" + v); }
  7. 把 Slider 与 AudioSource 拖到对应槽。
  8. 播放:拖动滑块,背景音乐音量实时变化。
  9. 【自动朗读】把 Slider 的 Min 0 / Max 1 / Value 1,配合音量天然 0-1。
  10. 【其他用途】难度滑块(1-5)、敏感度滑块、加载进度条(配合协程更新 value)。
  11. 【禁用】slider.interactable = false 时不可拖。
  12. 【事件参数】onValueChanged 的回调会自动传入新值(float)。
音量调节 = Slider 值 → AudioSource.volume。两行代码打通。

常见错误与排查

错误:滑动条拖动没反应?
原因:Handle 的 Image 缺 Raycast Target,或 Slider 被遮挡
解决:确认 Handle Slide Area 可点击;检查是否有 UI 遮挡。

动手练习

课后小任务(做出来才算真的学会)

  • 做一个音量滑块实时调音量
  • 做一个 0-100 的难度滑块
  • 用 onValueChanged 打印数值变化

本节小结

Slider 已掌握。下一课学 InputField 输入框。

完成打卡后,主站会实时更新你的学习进度 🎯

← 上一课Button 按钮详解