unity UGUI提供了Dropdown下拉選單的UI Component,使用起來非常方便。這裡面會應用到Scroll View跟 Scrollbar 這兩個組件。
首先在場景內建立一個Dropdown的元件。Canvas下按右鍵 –> UI –> Dropdown
會看到下圖的結構。

Lable和Arrow是用來顯示初始化的文字和勾選項的,Label會根據選擇的項目做內容自動更改。
Template是Dropdown的模板樣式,裡面包含Scroll View 跟Scroll bar。在Content下的Item Background跟Item Checkmark
可以變更裡面的圖行,顏色,透明度。

回到Dropdown,在Inspector裡看到Dropdown (Script)在裡面做設定。
Caption Text和Caption Image是作為下拉列表首選項的文字和圖片顯示,也是我們每次選擇後的內容(Template裡面的項目)。
Item Text作為下拉列表中每個item的文字顯示。Value值會隨著下拉列表選項的不同而變化,這邊設定為0Options選項欄內:增加Item的選項。


Label :有關文字的顏色,字體…等設定。

Arrow :這邊會放置一個圖形。
Template在這邊看到是隱形的,如果要顯示到Template的Inspector裡打開(打勾)。但是在執行UI時,就要先關上,不然會沒有辦法呈現效果。

陸續做好Template下面Content 跟 Scrollbar的圖形顏色設定後回到
到Template的Scroll Rect (Script) 做設定。
Viewport跟Vertical Scrollbar指定目標。
Scrollbar下面的設定如下:
Visibility 設定為 Auto Hide and Expand Viewport
Spacing 設定為-3

儲存後,呈現的效果如下:
參考資料:
Unity-Ugui-如何製作捲動效果 Scroll Rect & Scroll View
Unity-Ugui-如何製作捲動效果 Scroll Rect & Scroll View(二)