【Unity UGUI 交互组件——Scrollbar(8)】

发布于:2025-09-15 ⋅ 阅读:(18) ⋅ 点赞:(0)

Unity UGUI 滚动条 (Scrollbar) 速览

Scrollbar ≠ Slider:Slider 用来 选数值,Scrollbar 用来 滚动视图


在这里插入图片描述

1. 概述

Scrollbar 是 “滚动视图专用滑动器”,常见于

  • 聊天框右侧 垂直滚动
  • 地图查看器 水平滚动
  • 时间轴 水平滚动

2.三个组成

Hierarchy 对象 作用一句话 可删? 常用修改
Scrollbar (根) Scrollbar 脚本,统筹一切 改方向、范围、事件
Sliding Area 轨道 容器,决定把手行程 改锚点/大小控制行程
Handle 可拖动把手 (Image/Button) 换图标、加阴影、调尺寸

没有单独的 Background / Fill,背景直接由 Sliding Area 的 Image 充当,把手大小由 Handle Rect + Size 控制。


3. 滚动条 vs 滑动条

维度 Scrollbar Slider
目的 滚动视图 选数值
Handle 大小可变 表示可滚动范围 固定大小
典型值 Value 0-1 表示 滚动位置 Value 0-100 表示 数值
用例 文本、地图、时间轴 音量、血量、难度

4. SCrollbar参数

在这里插入图片描述

属性 中文 说明 & 常用值
Fill Rect 背景图 装饰轨道底色
Handle Rect 控制柄 拖控制柄 Image
Direction 方向 LeftToRight / RightToLeft / TopToBottom / BottomToTop
Value 当前位置 0-1 的百分比,0 代表起点,1 代表终点
Size 控制柄比例 0-1,表示 可见区域 / 总长度(滚动条特有)
Number Of Steps 步数 0 = 连续;>0 = 离散滚动格数
OnValueChanged(float) 事件 拖动时回调,参数为当前 Value
Interactable 可交互开关 false 时禁止拖动,但脚本仍可改值
Transition / Navigation 同 Slider 见 Slider 章节

5. 常见用法

场景 做法简述
垂直文字滚动 Direction = TopToBottomSize = 0.2,绑定 ScrollRect
水平地图滚动 Direction = LeftToRightSize = 0.3,绑定 ScrollRect
时间轴滚动 NumberOfSteps = 100,让时间轴一格一格跳

6. 脚本控制示例

using UnityEngine;
using UnityEngine.UI;

public class ScrollbarDemo : MonoBehaviour
{
    public Scrollbar scrollbar;   // 拖进来

    void Start()
    {
        // 初始位置 50%
        scrollbar.value = 0.5f;

        // 监听滚动事件
        scrollbar.onValueChanged.AddListener(OnScroll);
    }

    void OnScroll(float v)
    {
        Debug.Log("当前滚动位置:" + v);
    }
}

7. 一句话总结

Scrollbar 就是 “可拖动的滚动把手”,用它 + ScrollRect 即可实现 文字、地图、时间轴 的平滑滚动;记住 Size 决定把手长度,Value 决定滚动位置即可。