Scroll View 捲動視窗
建立好場景後，從Hierarchy裡按右鍵新增一個Scroll View 物件。
在Scroll View下面會有Viewport，Scrollbar Horizontal (水平捲動)跟 Scrollbar Vertical (垂直捲動)。
在 Scroll View的 Inspector裡的 Scroll Rect (Script) 裡把Horizontal的選項取消。這邊只保留 Vertical的 Scroll bar。
在 Viewport這邊，設定Mask的Component。主要是因為內容會超出捲動視窗的大小，所以加入Mask可以將顯示的範圍設定在固定的大小裡面。
Mask 遮罩效果
*將 Mask 元件放在父物件，可限制子物件顯示範圍 (只顯示父物件範圍內的內容)。
*必須要有Image元件。
在 Content下面新增Text 。 設定好文字大小跟顏色，Save後，按Play就可以看到捲動的效果。但是會發現沒有辦法捲動。
**在初次使用Scroll View 時可能遇到的問題, 比如在Content 下邊添加了子物體之後不能進行滑動。原因就是Content 的大小沒有調整好，不能滿足滑動的需求。
那麼就要手動調整Content 的大小，這樣才可以呈現。
所以接下來要回到Content這邊，在這邊要新增兩個Component—Grid Layout Group (Script) & Content Size Fitter (Script) 。
Grid Layout Group (Script)
| 屬性 | 功能描述 |
| Padding (left, Right, Top, Bottom) | Content上下左右邊界的距離 |
| Cell Size (X/Y) | 每個元素的寬跟高 |
| Spacing (X/Y) | 每個元素間的間隔 |
| Start Corner (Upper Left, Upper Right, Lower Left, Lower Right) | 開始排列的角落(位置)，分別是左上，右上，左下，右下。 |
| Start Axis | ”水平” 或是 “垂直” 排列 |
| Child Alignment | 當沒有填滿全部空間時，子物件對齊位置 |
| Constraint | 排列限制 Flexible：0, //自動根據大小彈性排列 Fixed Column Count：1, //限制排列 “行數(直)” Fixed Row Count：2, //限制排列 “列數(橫)” |
Content Size Fitter (Script)
控制著 Layout Controllers (父物件)自身大小，大小取決於子物件的 Minimum 或是 Preferred 大小，能透過 Pivot 改變縮放方向
| 屬性 | 功能描述 |
| Horizontal Fit 水平調整 | Unconstrained 不調整 |
| Vertical Fit 垂直調整 | Min Size 根據子物件的 Minimum 大小進行調整 Preferred Size 根據子物件的 Preferred 大小進行調整 |
呈現效果如下：