23 - UGUI - 滚动列表UI

作用：一个滚动列表

层级

xxxListPanel面板
|-Slider滚动条
|-ScrollRect滚动范围
|-|-Layout布局

准备一个xxxListPanel以下都是在xxxListPanel里

开始

ScrollRect滚动范围

添加 - UI - Image - 命名ScrollRect - 作为滚动范围（可能与xxxListPanel相同）
Image里添加 - 组件Scroll Rect - 滚动组件

Layout布局

Image里添加 - 空物体 - 命名Layout布局
Layout空物体里添加 - 组件layout Group（有纵向、横向、双向）
Layout - 组件layout Group - Childen Force Expand扩展方式的Width/Height取消 - 得到Item子方框跟着一个一个，否则会平分

调整ScrollRect、Layout

调整ScrollRect、Layout大小一致，手动调就可以

每一条信息的样子

Layout里添加 - Image - 命名UserItem/RoomItem
ctrl + D复制多个Item测试
Layout - 组件layout Group - Spacing上下间隔

滚动

ScrollRect里添加 - 组件mask - 遮罩
ScrollRect里添加 - 组件Image - 可以设置透明

让Layout可以滚动

ScrollRect - 组件Scroll Rect - Content - 把Layout拖入
ScrollRect - 组件Scroll Rect - Horizontal左右移动/Vertical上下移动，固定方向

这样就可以写一个滚动列表，但是还要通过代码设置Layout的高度才行，不然会回弹

添加Slider滚动条 Scrollbar滚动条 （不齐）

在ScrollRect同级/xxxListPanel下 - 添加Slider滚动条
Slider滚动条 - Direction方向 - 下->上 上->下 左->右 右->左
ScrollRect滚动范围 - Horizontal Scrollbar左右移动滚动条/Vertica Scrollbar上下移动滚动条 - 拖入