3.Panel and Button
3.1 Panel
Panel（面闆）本質上就是預先設定好的 Image。可以作為其他 UI 元素的父級。
在層級視窗右擊選擇 UI -> Panel 即可建立。
如下圖所示：
3.2 Button
在層級視窗中右擊選擇 UI -> Button 即可建立。
Button 元素是由 Image元件、Button元件及其顯示文本的 Text 元件構成的。
如下圖所示：
Button元件的變量：
包括：Interactable 開關區、Transition 過渡區、Navigation 導航區、監聽區四個部分，其中前 3 個區域繼承了 Selectable 類，Selectable 元件包括除監聽區以外的其他 3 個區域，如果給 Image元件添加 Selectable 元件，就可以形成一個沒有監聽區的 Button 按鈕。
3.2.1 Interactable
用于設定是否可以互動。，不勾選的情況下，該按鈕呈不可用狀态。
3.2.2 Transition
互動類 UI 元素的 Transition （過渡方式）包括：
- Color Tint （顔色過渡）
- Sprite Swap （圖像變換）
- Animation （動畫過渡）
每種過渡方式的過渡狀态包括：
- Normal（正常）
- Highlighted（懸停）
- Pressed（按下）
- Selected（選中）
- Disabled（不可用）
1.Color Tint （顔色過渡）
Color Multiplier（顔色倍數）設定顔色的倍增
Fade Duration（陰影持續時間）設定過渡時間（秒）
2.Sprite Swap （圖像變換）
設定不同狀态下的圖像即可。
3.Animation （動畫過渡）
操作步驟：
（1）選擇 Button 元件過渡區的 Auto Generate Animation（生成動畫）按鈕，然後輸入名稱，自動生成一個 Animator 元件，可以通過 Inspector 面闆看到 Button 元件中增加的 Animator 元件，同時，在 Project 面闆中也會自動生成動畫狀态機圖示。
隻有通過 Auto Generate Animation 按鈕生成的動畫才會自帶動畫過渡的 5 種狀态。
（2）輕按兩下動畫狀态機圖示，打開動畫狀态機。
（3）選擇菜單 Windows -> Animation -> Animation，打開 Animation 面闆。
Animation 與 Animator 的差別：Animator 是動畫系統面闆，用于處理多個動畫之間的過渡；Animation 面闆是錄制具體某個動畫關鍵幀的面闆。
（4）在 Animation 面闆的左側 Preview 下面可以通過下拉清單選擇每個狀态，選擇狀态後，單擊紅色點錄制動畫，錄制完畢單擊紅色點關閉。
3.2.3 Navigation
Navigation 是鍵盤或者控制器決定以什麼順序選擇 UI 元素的控制機制。Navigation 的 6 中模式：
None - 不設定導航
Everything - 全部，勾選後下面的 4 種模式全選
Horizontal - 水準方向，選擇鍵盤或控制器的左右鍵時，選擇所按鍵方向的下一個 UI 元素，忽略上下鍵
Vertical - 垂直方向，選擇鍵盤或控制器的上下鍵時，選擇所按鍵方向的下一個 UI 元素，忽略左右鍵
Automatic - 自動，選擇上下左右鍵時，選擇所按鍵方向的下一個最合适的 UI 元素
Explicit - 明确，設定上下左右鍵按鍵方向的下一個選擇的 UI 元素
3.2.4 監聽區
監聽區可以執行預先設定好的指令，進而使 UI 元素具有一定的功能。Button 元素的監聽區為 On Click，也就是單擊滑鼠時的監聽。監聽模式包括：
- Off - 不監聽
- Editor And Runtime - 編輯和運作時都監聽
- Runtime Only - 隻在運作時監聽
單擊監聽區的 “+” 按鈕會自動添加一個事件。一個監聽區可以設定多個監聽事件，運作時按住從上到下的順序來執行。
1.設定監聽區實作功能
示例：通過點選按鈕讓 3D 物體 Cube 換一種材質。
在 Button 的監聽區添加事件，将 Cube 拖拽到監聽區，在 Function 下拉清單中選擇 Mesh Renderer 元件中的變量 Meterial，并設定一個材質，如下圖所示：
2.設定 Button 元件的腳本
在 Project 視窗中右擊選擇 Create -> C# Script，命名為 ButtonClick，輕按兩下腳本并編寫代碼如下：
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class ButtonClick : MonoBehaviour
{
// Start is called before the first frame update
void Start()
{
}
// Update is called once per frame
void Update()
{
}
public void OnButtonClick()
{
Debug.Log("The button is clicked.");
}
} 将 Project 視窗中的 ButtonClick 腳本拖入到 Button 的 Inspector 面闆中使其成為元件。
在 Button 的監聽區設定：将 Button 拖拽到監聽區，選擇腳本中的方法。如下圖所示：
3.通過挂載腳本實作功能
建立腳本并編寫代碼如下：
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class ButtonClick : MonoBehaviour
{
private Button button;
// Start is called before the first frame update
void Start()
{
button = GetComponent<Button>();
button.onClick.AddListener(OnButtonClick);
}
// Update is called once per frame
void Update()
{
}
void OnButtonClick()
{
Debug.Log("The button is clicked.");
}
} 上面的代碼中，在 Start 方法中擷取按鈕并為按鈕添加事件，将腳本挂載到 Button 元件上即可。