6.Scrollbar and Scroll View

6.1Scrollbar

Scrollbar（滚动条）是用来操控 Scroll View（视窗）的，与 Slider 一样，可以通过滑块来操作 UI 元素。

Scollbar 的构成如下图所示：

其中：Sliding Area 是子级空物体，可限制滑块的活动范围，Handle 是滑块图。

Scrollbar 的变量与 Slider 类似，如下图所示：

• Direction - 滑块的方向
• Value - 滑块的值，取值范围 0 ~ 1
• Size - 滑块大小，数值越大滑块越长
• Number of Steps - 滑块的最小单位，取值范围 0 ~ 11，当设置为 0 或 1 时，滑块的位置数没有限制

Scrollbar 的事件监听：

Scrollbar 的事件监听是 On Value Changed(Single)。

示例：用 Scrollbar 控制图像的显示范围。

将一张 Image 设置为 Filled 模式，并设置 Fill Method 为 Horizontal，Fill Amount 为 0；然后将 Image 拖拽到 Scrollbar 的监听区，选择 No Function 为 Image.fillAmount ，即可实现将 Scrollbar 的事件监听On Value Changed 与 Image 的 Fill Amount 联动。

6.2 Scroll View

Scroll View（视窗）可以动态呈现屏幕中无法全部显示的内容，通过滚动条的拖拽来显示不同的内容。

6.2.1 Scroll View 的构成和变量

Scroll View 的构成如下图所示：

• Viewport - 图像遮罩，遮罩可以遮挡子物体；当勾选 Viewport 的 Mask 时，只能看到 Viewport 大小的内容。
• Content - 子物体，要显示的所有内容
• Scrollbar - 滚动条

Scroll View 的变量如下图所示：

Scroll View 的组件是 Scroll Rect。

• Movement Type - 滑块滚动到顶端时的动作，选项为：Unrestricted - 不受约束，当滑块移动到顶端时继续操作会使内容移动到显示区域之外；Elastic - 弹性滚动，当滑块移动到顶端时继续操作会向反方向再滚动一定的量后马上回到顶端，也就是说会有一个弹性的动作；Clamped - 受限滚动，当滑块移动到顶端时继续操作内容不再继续滚动。
• Visibility - Scrollbar 的可见方式，选项为：Permanent - 始终显示；Auto Hide - 自动隐藏；Auto Hide and Expand Viewport - 自动隐藏及扩展。
• Spacing - Scrollbar 与 Viewport 之间的距离。

示例：操作如下

创建一个 Scroll View，并在 Content 的子级中加入多个 Button，然后去掉 Viewport 中 Mask 选项的勾选，结果如下图所示：

6.2.2 Scroll View 的事件监听

操作 Scroll View 时会触发 On Value Changed 事件，其参数为 Vector2 向量。

示例：通过 Scroll View 来控制 Image 的长度和宽度。

1.创建一个 Image，设置其 width 和 Height 为 0 ~ 1 之间的值，设置 Scale 为 100 来放大显示；

2.创建一个 Scroll View，设置 On Value Changed，将 Image 拖拽到监听区，选择 No Function 为 RectTransform.sizeDelta。