【Unity学习笔记】ScrollView和ScrollRect组件

声明：此篇文章是个人学习笔记，并非教程，所以内容可能不够严谨。可作参考，但不保证绝对正确。如果你发现我的文章有什么错误，非常欢迎指正，谢谢哦

1.ScrollView简介

ScrollView是滚动视图，当我们要呈现的内容长宽大于显示区域时，就可以用到ScrollView，用户可以在指定区域内拖拽而查看内容的全貌（如下图）。

2.结构分析

1.结构看似繁琐，但只要稍微理一下，还是比较容易理清的。大体可以看作三个部分：

(1)最外层的ScrollView,

(2)内层的Viewport

(3)内层的Scrollbar Horizontal和Scrollbar Vertical

下面由简入繁，挨个击破。

2.1 Scrollbar Horizontal和Scrollbar Vertical

不管是Scrollbar Horizontal还是Scrollbar Vertical，都只是一个普通的Scrollbar。只不过他们在这里与要展示的内容绑定了（怎么绑定下面有提）

当要展示的内容宽度超过了显示区域的宽度，就可以用Scrollbar Horizontal水平移动

当要展示的内容长度超过了显示区域的长度，就可以用Scrollbar Vertical竖直移动

如果不需要，删除即可。

2.2 Viewport

Viewport包含两层：外层的Viewport和内层的Content。Content就是我们要显示的内容。Viewport即视口，意为显示窗口，即用来确定显示区域的。它确定显示区域是通过Mask组件实现的。

2.3 ScrollView

最外层的ScrollView物体包含两个特别的组件：Image组件和ScrollRect组件。其中Image仅仅作为背景图片使用，不需要背景图片或背景颜色即可删除。这里着重记录ScrollRect组件

2.3.1 属性

属性	功能
Content	要展示的内容，其他UI控件。即Viewport物体的子项Content物体。
Horizontaol	水平方向是否可以拖拽
Vertical	竖直方向是否可以拖拽
Movement Type	移动类型（自己动手尝试一下会比较好理解）; Unrestricted:不受限制的; Elastic：弹性，就像有四条弹簧分别把Content的四边与Viewport的四边绑定了（没有指定Viewport时，就像Content四边与Scroll Rect的四边绑定) ; 　　　　当把content的边界拖拽进显示区域依然继续拖拽，松开鼠标就会有一个弹性效果。 Elasticity:弹性强度; Clamped:显示出边界就不能继续拖拽那边了
Inertia	是否有惯性。当我们往某个方向拖拽，松开鼠标后，它是否会因为惯性继续往该方向移动一段距离 .Deceleration Rate: 减速率。它决定开启惯性后Content要多久才停下来，0是立马停下来，1是永远不停下来，大于1就移动的越来越块。
Scroll Sensitivity	使用滚轮和触控板滚动的灵敏度(速度)
Viewport	一般是指content的父控件的引用。即前面说过的Viewport物体，作为显示区域而存在。因为mask组件的特性，我们要把需要展示的内容（Content）作为观察窗口的子物体。因此这里把content的父项viewport拖拽进来就行。 注意：当我们指定了Horizontal Scrollbar和Vertical Scrollbar时，将不能通过拖拽的方式调整viewport的大小，而是通过Spacing属性调节
Horizontal Scrollbar	当内容（Content）横向超出了显示区域之后，用来横向移动的scrollbar。 Visibility：可见性;Permanent:水平scrollbar滚动条总是可见;Auto ;Hide:当Content水平长度小于显示区域时，将会隐藏水平滚动条，反之会显示。;Auto Hide And Expand Viewport:此项要求必须指定Viewport，并且Viewport和horizontal scrollbar均为scroll rect组件所在物体的子物体。选择此项会多出一个Spacing属性，用来调节Viewport的宽度（暂时没看懂有啥用，多了此项后不能通过拖拽随意改变viewport大小）
Vertical Scrollbar	同上

3.OnValueChange事件参考这里

4.关于互动范围

拖拽互动检测范围：ScrollView物体及其任意子物体中，所有包含Raycast Target属性的组件构成的范围。

这么说可能不够生动，举个简单的例子：在ScrollView物体新建两个子项Image和Text，其分别包含有Image组件和Text组件，这两个组件都有Raycast Target属性。这两个物体所在范围也会充当ScrollView拖拽的检测范围。