Unity UGUI的Dropdown（下拉菜單）組件的介紹及使用

1. 什麼是Dropdown組件？

Dropdown（下拉菜單）是Unity UGUI中的一個常用組件，用於在用戶點擊或選擇時顯示一個下拉菜單，提供多個選項供用戶選擇。

2. Dropdown組件的工作原理

Dropdown組件由兩部分組成：一個可點擊的按鈕和一個下拉菜單。當用戶點擊按鈕時，下拉菜單會展開，顯示所有選項。用戶可以通過點擊選項來進行選擇。

3. Dropdown組件的常用屬性

• Options：下拉菜單中的選項列表。
• Caption Text：按鈕上顯示的文本。
• Template：下拉菜單的模板。
• Item Text：下拉菜單中選項的文本。
• On Value Changed：當選擇的值發生變化時觸發的事件。

4. Dropdown組件的常用函數

• ClearOptions()：清空下拉菜單中的選項。
• AddOptions(List options)：向下拉菜單中添加選項。
• SetValueWithoutNotify(int value)：設置當前選擇的值，但不觸發事件。

5. 示例代碼

示例1：創建一個簡單的下拉菜單

using UnityEngine;
using UnityEngine.UI;

public class DropdownExample : MonoBehaviour
{
    public Dropdown dropdown;

    void Start()
    {
        dropdown.ClearOptions();
        dropdown.AddOptions(new List<string> { "Option 1", "Option 2", "Option 3" });
    }
}

操作步驟：

1. 創建一個空物體，並將Dropdown組件添加到該物體上。
2. 將DropdownExample腳本添加到該物體上。
3. 在Inspector面板中，將Dropdown組件的引用拖拽到DropdownExample腳本的dropdown欄位上。
4. 運行游戲，下拉菜單中將顯示"Option 1"、"Option 2"和"Option 3"三個選項。

註意事項：

• 在Start函數中添加選項，確保在游戲開始時下拉菜單已經初始化。

示例2：獲取當前選擇的值

using UnityEngine;
using UnityEngine.UI;

public class DropdownExample : MonoBehaviour
{
    public Dropdown dropdown;

    void Start()
    {
        dropdown.ClearOptions();
        dropdown.AddOptions(new List<string> { "Option 1", "Option 2", "Option 3" });
    }

    public void OnDropdownValueChanged(int value)
    {
        Debug.Log("Selected option: " + dropdown.options[value].text);
    }
}

操作步驟：

1. 創建一個空物體，並將Dropdown組件添加到該物體上。
2. 將DropdownExample腳本添加到該物體上。
3. 在Inspector面板中，將Dropdown組件的引用拖拽到DropdownExample腳本的dropdown欄位上。
4. 在DropdownExample腳本中，創建一個公共方法OnDropdownValueChanged，並將其綁定到Dropdown組件的On Value Changed事件上。
5. 運行游戲，選擇下拉菜單中的選項，控制台將輸出所選選項的文本。

註意事項：

• OnDropdownValueChanged方法的參數value表示當前選擇的索引。

示例3：動態添加選項

using UnityEngine;
using UnityEngine.UI;

public class DropdownExample : MonoBehaviour
{
    public Dropdown dropdown;
    public InputField inputField;

    void Start()
    {
        dropdown.ClearOptions();
        dropdown.AddOptions(new List<string> { "Option 1", "Option 2", "Option 3" });
    }

    public void AddOption()
    {
        string newOption = inputField.text;
        dropdown.options.Add(new Dropdown.OptionData(newOption));
        dropdown.RefreshShownValue();
    }
}

操作步驟：

1. 創建一個空物體，並將Dropdown組件添加到該物體上。
2. 將DropdownExample腳本添加到該物體上。
3. 在Inspector面板中，將Dropdown組件的引用拖拽到DropdownExample腳本的dropdown欄位上。
4. 創建一個InputField組件，並將其引用拖拽到DropdownExample腳本的inputField欄位上。
5. 在DropdownExample腳本中，創建一個公共方法AddOption，並將其綁定到一個按鈕的OnClick事件上。
6. 運行游戲，輸入一個新選項的文本，點擊按鈕，下拉菜單中將添加一個新選項。

註意事項：

• AddOption方法通過inputField獲取新選項的文本，並使用dropdown.options.Add方法添加新選項。
• 添加新選項後，需要調用dropdown.RefreshShownValue方法刷新下拉菜單的顯示。

示例4：設置預設選項

using UnityEngine;
using UnityEngine.UI;

public class DropdownExample : MonoBehaviour
{
    public Dropdown dropdown;

    void Start()
    {
        dropdown.ClearOptions();
        dropdown.AddOptions(new List<string> { "Option 1", "Option 2", "Option 3" });
        dropdown.SetValueWithoutNotify(1);
    }
}

操作步驟：

1. 創建一個空物體，並將Dropdown組件添加到該物體上。
2. 將DropdownExample腳本添加到該物體上。
3. 在Inspector面板中，將Dropdown組件的引用拖拽到DropdownExample腳本的dropdown欄位上。
4. 在Start函數中，使用dropdown.SetValueWithoutNotify方法設置預設選項的索引。
5. 運行游戲，下拉菜單中將預設選擇第二個選項。

註意事項：

• SetValueWithoutNotify方法用於設置當前選擇的值，但不觸發On Value Changed事件。

示例5：自定義下拉菜單模板

using UnityEngine;
using UnityEngine.UI;

public class DropdownExample : MonoBehaviour
{
    public Dropdown dropdown;
    public GameObject customTemplate;

    void Start()
    {
        dropdown.ClearOptions();
        dropdown.AddOptions(new List<string> { "Option 1", "Option 2", "Option 3" });
        dropdown.template = customTemplate.transform as RectTransform;
    }
}

操作步驟：

1. 創建一個空物體，並將Dropdown組件添加到該物體上。
2. 創建一個空物體作為自定義模板，設置其佈局和樣式。
3. 將DropdownExample腳本添加到第一個物體上。
4. 在Inspector面板中，將Dropdown組件的引用拖拽到DropdownExample腳本的dropdown欄位上。
5. 將自定義模板的引用拖拽到DropdownExample腳本的customTemplate欄位上。
6. 運行游戲，下拉菜單將使用自定義模板進行顯示。

註意事項：

• 自定義模板需要是一個RectTransform組件。

參考資料

• Unity官方文檔：Dropdown

__EOF__