Slider

Unity UGUI 的 Slider 滑动条组件，用来让用户在一个数值范围内拖动选择值。

1. 截图中的当前状态

截图中的 Slider 配置是：

• Interactable：开启
• Transition：Color Tint
• Target Graphic：Handle (Image)
• Navigation：Automatic
• Fill Rect：Fill
• Handle Rect：Handle
• Direction：Left To Right
• Min Value：0
• Max Value：1
• Whole Numbers：关闭
• Value：0
• On Value Changed：空列表

因此当前 Slider 的值为 0，手柄位于最左端。

2. Slider 的层级结构

一个常见的 Slider 层级如下：

Slider
├── Background
├── Fill Area
│   └── Fill
└── Handle Slide Area
    └── Handle

各对象作用：

• Background：完整滑动条的背景轨道。
• Fill Area：填充区域的容器。
• Fill：表示已经填充的部分。
• Handle Slide Area：限制手柄移动范围。
• Handle：用户可以拖动的滑块。

Fill Rect 和 Handle Rect 字段引用的是 RectTransform，而不是直接引用 Image。

3. Rect Transform

截图中的 Slider：

• Position 约为 0.1627, 0.0033, 0
• Width：160
• Height：20
• Pivot：0.5, 0.5
• Scale：1,1,1

说明它是一个位于父级中心附近的水平滑动条。

Rect Transform 决定：

• 滑动条的显示尺寸
• 可点击区域
• 手柄的移动范围
• 滑动条的位置和缩放

如果 Slider 看起来很难拖动，可以适当增大它的 RectTransform 高度。

4. Fill Rect

截图中：

Fill Rect = Fill

Fill 表示从最小值位置到当前值位置之间的填充区域。

例如：

Value = 0       没有填充
Value = 0.5     填充一半
Value = 1       全部填充

如果 Slider 的数值在变化，但蓝色或绿色填充区域不动，检查：

• Fill Rect 是否引用了 Fill。
• Fill 子物体是否有 Image。
• Fill 的锚点是否被 Slider 正确控制。
• Fill 的 Image 是否被禁用。

5. Handle Rect

截图中：

Handle Rect = Handle

Handle 是用户拖动的滑块手柄。

它负责：

• 显示当前位置
• 接收拖动操作
• 根据位置计算 Slider 的 Value
• 触发 On Value Changed

如果手柄不动，检查：

• Handle Rect 是否引用了正确的 Handle。
• Handle 是否有 Image。
• Handle 是否被禁用。
• Slider 是否开启 Interactable。

6. Direction

截图中：

Direction = Left To Right

表示数值从左向右增加：

左端 = Min Value
右端 = Max Value

Slider 的方向有四种：

• Left To Right：从左向右增加。
• Right To Left：从右向左增加。
• Bottom To Top：从下向上增加。
• Top To Bottom：从上向下增加。

方向只改变数值的增长方向，不会改变 Min Value 和 Max Value。

Unity 官方对 Slider 的说明见：Slider 官方手册。

7. Min Value 与 Max Value

截图中：

Min Value = 0
Max Value = 1

表示 Slider 的值范围为 0~1。

常见配置：

• 音量：0~1
• 亮度：0~1
• 血量：0~100
• 速度：0~20
• 难度：1~3
• 角度：0~360

Slider 当前值可以理解为：

Value = Min Value 到 Max Value 之间的一个数

归一化比例可以表示为：

比例 = (Value - Min Value) / (Max Value - Min Value)

8. Whole Numbers

截图中没有勾选：

Whole Numbers = Off

表示 Slider 可以产生小数，例如：

0.25
0.5
0.75

如果勾选：

Whole Numbers = On

Slider 只会产生整数，例如：

0、1、2、3

适合：

• 等级选择
• 难度选择
• 整数数量
• 武器等级
• 分辨率档位

9. Value

Value 是 Slider 当前的数值。

截图当前为：

Value = 0

所以手柄在起点，Fill 也没有填充。

代码修改：

slider.value = 0.5f;

读取当前值：

float currentValue = slider.value;

注意，Value 不能超出 Min Value 和 Max Value 范围。

10. Transition

截图中：

Transition = Color Tint
Target Graphic = Handle (Image)

表示鼠标悬停、点击或禁用时，会改变 Handle 的颜色。

Color Tint 的常见状态：

• Normal Color：正常状态。
• Highlighted Color：悬停或获得焦点。
• Pressed Color：按下状态。
• Selected Color：键盘或手柄选中状态。
• Disabled Color：不可交互状态。
• Color Multiplier：颜色强度。
• Fade Duration：颜色过渡时间。

Transition 还可以选择：

• None：没有状态反馈。
• Color Tint：颜色变化。
• Sprite Swap：替换不同 Sprite。
• Animation：使用 Animator 制作动画。

Selectable 过渡选项官方文档

11. Navigation

截图中：

Navigation = Automatic

表示可以使用键盘方向键、手柄方向键或 D-pad 在 UI 之间移动焦点。

常见选项：

• None：不参与键盘或手柄导航。
• Horizontal：只允许左右导航。
• Vertical：只允许上下导航。
• Automatic：自动寻找相邻控件。
• Explicit：手动指定导航目标。
• Visualize：显示导航连线。

12. On Value Changed

截图中：

On Value Changed (Single)
空列表

表示 Slider 值改变时，目前没有绑定任何脚本方法。

Slider 的事件参数类型是：

float

示例：

using UnityEngine;

public class SliderDemo : MonoBehaviour
{
    public void OnSliderChanged(float value)
    {
        AudioListener.volume = value;
        Debug.Log("当前音量：" + value);
    }
}

在 Inspector 中点击 +，拖入脚本对象，选择：

SliderDemo → OnSliderChanged(float)

Unity 会在拖动 Slider 时自动传入当前值。

13. 常用代码

using UnityEngine;
using UnityEngine.UI;

public class SliderController : MonoBehaviour
{
    [SerializeField] private Slider slider;

    private void Start()
    {
        slider.minValue = 0f;
        slider.maxValue = 100f;
        slider.value = 50f;
        slider.wholeNumbers = true;
    }

    public void OnSliderChanged(float value)
    {
        Debug.Log("当前数值：" + value);
    }
}

如果不想在代码修改 Value 时触发事件，可以使用：

slider.SetValueWithoutNotify(50f);

14. 常见问题

Slider 不能拖动：

• 检查 Interactable。
• 检查 Canvas 是否有 Graphic Raycaster。
• 检查场景是否有 EventSystem。
• 检查前面是否有其他 UI 遮挡。

Fill 不变化：

• 检查 Fill Rect 是否引用 Fill。
• 检查 Fill 是否有 Image。
• 检查 Fill 的 RectTransform 锚点。

Handle 不移动：

• 检查 Handle Rect 是否引用 Handle。
• 检查 Handle 是否激活。
• 检查 Handle 是否有 Image。

方向反了：

• 检查 Direction。
• 左右滑动用 Left To Right。
• 竖直滑动用 Bottom To Top。

Slider 和 Scrollbar 的区别：

• Slider：用于选择数值。
• Scrollbar：主要用于控制 Scroll View 的滚动位置。

一句话记忆：

Fill 显示进度，Handle 接受拖动，Value 保存数值，Direction 决定方向，On Value Changed 把数值交给脚本。

SVG 已完成预览检查，文字和代码块没有越框或重叠。