当需要在较小的区域中显示大量的内容时,需要用到Scroll Rect组件,该组件提供了滚动此内容的功能。通常情况下,Scroll Rect组件经常与Layout Group、Content Size Fitter及Mask组件配合使用。
1.Scroll Rect
Content:需要滑动的内容
Horizontal:是否启用水平滑动
Vertical:是否启用垂直滑动
Movement Type:包含三种类型 1.Unrestricted不受限制的;2.Clamped可以将内容强制保持在滑动矩形的边界内;3.Elastic在内容到达滑动矩形的边缘时弹回
Elasticity:Movement Type为Elastic模式时的弹性值
Inertia:开启状态下,停止拖动时内容将保持一定惯性继续移动
Deceleration Rate:在开启Inertia的情况下,该值决定了惯性的大小
Scroll Sensitivity:滚轮控制滑动的灵敏度
Viewport:Content内容的父级
Horizontal Scrollbar:水平滑动条
Vertical Scrollbar:垂直滑动条
以开篇中的图片内容为例,它是一个垂直滑动的列表,因此我们只需要开启Vertical,滑动模式使用Clamped将内容限制在矩形区域内:
使用Unrestricted模式则是这种情况:
使用Elastic模式则是这种情况:
2.Layout Group
自动布局有三种类型,它们分别是既包含水平方向也包含垂直方向、水平方向、垂直方向:
上例中,我们只开启垂直方向滑动,因此需要给Content添加Vertical Layout Group组件:
有了该组件后,给Content添加子项时将自动进行垂直排列布局。比如我们复制几项:
这里的一个要点是,Child Alignment对齐方式使用的是Upper Center,即添加元素时希望从上往下自动布局,我们需要将Content物体的Rect Transform组件中的Pivot轴心点设为(0.5,1),即这个位置:
假设我们使用默认的中心点(0.5,0.5)将是如下这样的情况,Content内容在矩形的中心:
假设我们再将其设为(0.5,0),即底部的中点,则是如下这样的情况,Content内容在矩形的底部:
3.Content Size Fitter
为Content添加该组件,可以实现根据元素的多少自适配大小,同样的,我们需要适配垂直方向的大小,Vertical Fit选择Preferred Size:
给Content添加元素时,可见Content已经可以自适配大小:
4.Mask
当Content的大小超出Scroll Rect的大小时,需要给Content的父级添加Mask组件,将Conent超出的内容进行遮罩: