一、ScrollView简介
ScrollView是滚动视图，当我们要呈现的内容长宽大于显示区域时，就可以用到ScrollView，用户可以在指定区域内拖拽而查看内容的全貌（如下图）。
二、结构分析
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 | 同上 |
三、OnValueChange事件
四、关于互动范围
拖拽互动检测范围：ScrollView物体及其任意子物体中，所有包含Raycast Target属性的组件构成的范围。
这么说可能不够生动，举个简单的例子：在ScrollView物体新建两个子项Image和Text，其分别包含有Image组件和Text组件，这两个组件都有Raycast Target属性。这两个物体所在范围也会充当ScrollView拖拽的检测范围。
今天的文章UnityUI—ScrollView分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/21313.html
