如何製作圖片捲動視窗-Scroll Rect的使用介紹
這篇介紹如何使用Sroll Rect製作出一個圖片捲動視窗。 Scroll Rect是用在做文字區塊的捲動或是項目的捲軸的一個重要的組件。

首先建立好場景後，在Canvas下建立一個Panel。設定好GameObject–>Panel (Scroll Panel)的大小後，接下來在新增一個GameObject–>Image (Background)物件這裡是有關Image顯示的區域範圍。

從Component–>UI–>Scrill Rect 掛進Background裡面。
放在Scroll Panel下面，因為他們有上下的附屬關係。
在Background的Component 加入Mask (Script)的遮罩組件。
來控制下面的Content裡面Image顯示的範圍。

在Background 下新增一個Panel,更名為Content。這裡面放入6個 Image Icon。在這邊要加入Vertical Layout Group (Script) 跟 Content Size Fitter (Script) 來控制畫面還有圖形間的間距。

在Scroll Panel下面新增Component –> UI –> Scrollbar (Scrollbar Vertical) 建立一個垂直的捲軸。在Inspector裡面的Scrollbar (Script) 裡設定好Scrollbar的顏色及Highlighted..等顏色的設定。這邊我們把Alpha設定為0。

在Handle Rect的 Direction下設定為 Bottom To Top。

接下來回到Scroll Panel的Inspector裡，新增Scroll Rect (Script)的組件。
在Content裡填入，保留Vertiacl的項目。
在Vertical Scrollbar裡把 做好的Scrollbar帶入。
Visibility:Auto Hide and Expand Viewport
Spacing : -3
接下來就可以儲存並撥放看效果了。

呈現效果如下：