接上篇介紹了 版面元件,內容元件後。繼續介紹功能元件。
功能元件 – Button, Toggle, Slider & Scorllbar, Dropdown, InputField
Button
按鈕組件則組合了圖像和文字的元件外,就是按鈕本身必備的Button元件。
屬性 | 功能描述 |
Interactable | 該組件是否作用 |
Transition | 控件對用戶操作進行可視化響應,改變顏色或圖案 |
Navigation | 確定控件序列的屬性 |
On Click | 當用戶單擊按鈕並釋放按鈕時調用UnityEvent |
Toggle
切換按鈕或複選框,可以配合ToggleGroup使用,讓群組的選項一次只能啟動一個。
屬性 | 功能描述 |
Interactable | 該組件是否作用 |
Transition | 控件對用戶操作進行可視化響應,改變顏色或圖案 |
Navigation | 確定控件序列的屬性 |
Is On | 開關是否預設開啟 |
Toggle Transition | 切換值在更改時以圖形方式反應的方式 |
Graphic | 用於選中標記的圖像 |
Group | 切換群組間的選項(如果有的話) |
On Value Changed | 值產生變化時觸發事件 |
Slider
主要用於形象的拖動以改變目標值的控制元件,他的應用是用來改變一個數值,最大值和最小值自定義,拖動滑塊可在此之間改變,例如改變聲音大小。
屬性 | 功能描述 |
Handle Rect | 當前值處於最小值與最大值之間比例的顯示範圍,也就是整個滑條的最大可控制範圍 |
Direction | 滑動條的方向,從左至右,從上至下還是其他的。 Left To Right 從左到右 Right To Left 從右到左 Bottom To Top 從下到上 Top To Bottom 從上到下 |
Min Value | 滑動條的可變化最小值 |
Max Value | 動條的可變化最大值 |
Whole Numbers | 勾選此項,拖動滑動條將按整型數(最小為1)進行改變指定值 |
Value | 當前滑動條對應的值 |
On Value Changed | 值改變時觸發訊息 |
Scrollbar
是一個主要用於形象的拖動以改變目標比例的控制元件,他的應用是用來改變一個整體值變為他的指定百分比例,最大值1(100%),最小值0(0%),拖動滑塊可在此之間改變,例如改變滾動視野的顯示區域。
屬性 | 功能描述 |
Handle Rect | 當前值處於最小值與最大值之間比例的顯示範圍,也就是整個滑條的最大可控制範圍 |
Direction | 滾動條的方向,從左至右,從上至下還是其他的 |
Value | 當前滾動條對應的值 |
Numbers Of Steps | 滾動條可滾動的位置數目,為0和1時不生效(事實上只有0個可滾動位置或1個可滾動位置那還叫滾動條嗎),例如設為2,則拖動滾動條時滾動條只會處在最小值的位置和最大值的位置,因為他的可滾動位置只有2個,例如設為3,則拖動滾動條時滾動條只會處在最小值的位置、最大值的位置以及中間位置,因為他的可滾動位置只有3個。 |
On Value Changed | 值改變時觸發訊息 |
Dropdown
設定下拉的選項內容,Options可以透過+號新增,還有選項改變時要執行的事件。
屬性 | 功能描述 |
Navigation | None:無 Horizontal:水平 Vertical:垂直 Automatic:自動 Explicit:顯式 Select On Up:向上選擇 Select On Down:向下選擇 Select On Left:向左選擇 Select On Right:向右選擇 Visualize:可視化,把按鍵能夠導航到的路徑可視化,高亮的黃色箭頭為當前按鈕可導航到的目標 |
Template | 下拉使用的模板樣式 |
Caption Text | 當前選擇的顯示文本 |
Caption Image | 當前選擇的顯示圖片 |
Item Text | 下拉框選項模板裡的文字,不填會導致選項列表中的每個選項不會修改模板裡的文字 |
Item Image | 下拉框選項模板裡的圖片,不填會導致選項列表中的每個選項不會修改模板裡的圖片 |
Value | 當前選擇的值(0開始) |
Options | 可選擇項 |
On Value Changed(Int32) | 值調整時觸發的事件 |
InputField
提供了輸入文字的框架,可以用值改變時或結束編輯兩個條件觸發事件,結構下有兩個Text組件分別負責提示文字和實際輸入的文字,對應欄位是Placeholder和Text Component。
主要的元件大致上就是這些,之後再針對各元件的應用逐一介紹。
參考網址
Visual
Components
https://docs.unity3d.com/Manual/comp-UIVisual.html
Interaction Components
https://docs.unity3d.com/Manual/comp-UIInteraction.html