Dropdown TextMeshPro

NOTE

这是 Dropdown - TextMeshPro，即 TMP 下拉菜单组件。

一、它的作用

用户点击下拉框后：

点击 Dropdown
      ↓
根据 Template 生成下拉列表
      ↓
显示 Options 中的选项
      ↓
用户选择某一项
      ↓
更新 Caption Text
      ↓
触发 On Value Changed(Int32)

TMP_Dropdown 使用 TextMeshProUGUI 显示标题和选项文字。TMP 官方文档

二、截图中的字段

1. 交互过渡

• Interactable：是否允许操作。
• Transition：状态变化方式。
• Target Graphic：当前为 Dropdown (Image)，表示改变下拉框背景。
• Normal Color：正常状态。
• Highlighted Color：鼠标悬停或导航选中。
• Pressed Color：按下状态。
• Selected Color：键盘或手柄选中。
• Disabled Color：不可交互状态。
• Color Multiplier：颜色乘数，当前为 1。
• Fade Duration：颜色过渡时间，当前为 0.1 秒。
• Navigation：键盘或手柄导航方式，当前为 Automatic。
• Visualize：在 Scene 视图显示导航方向。

2. 显示引用

• Template：下拉列表的模板。
• Caption Text：显示当前选中项的 TMP 文字。
• Caption Image：显示当前选中项的图片，可为空。
• Placeholder：没有有效选择时显示的占位 Graphic。
• Item Text：每个下拉选项的 TMP 文字。
• Item Image：每个下拉选项的图片，可为空。

截图中的引用关系：

Caption Text → Label（TextMeshProUGUI）
Item Text    → Item Label（TextMeshProUGUI）
Caption Image → None
Item Image    → None

3. 选择数据

• Value = 0：当前选择第 0 项。
• Multi Select：截图中关闭，表示单选模式。
• Alpha Fade Speed = 0.15：下拉列表显示和隐藏时的淡入淡出时间。
• Options：所有可选择的选项。

索引从 0 开始：

Option A → 0
Option B → 1
Option C → 2

每个 Option 包含：

• 文字内容
• 可选的 Sprite 图片

4. On Value Changed (Int32)

这是下拉菜单的选择事件。

事件参数是 int，表示选中项的索引：

public void OnDropdownChanged(int index)
{
    Debug.Log("选中索引：" + index);
}

截图中 List is Empty 表示还没有绑定事件，不是错误。

三、Template 的典型结构

Dropdown - TextMeshPro
├── Label（TextMeshProUGUI）
├── Arrow（Image）
└── Template
    ├── Viewport
    │   └── Content
    │       └── Item（Toggle）
    │           ├── Item Background
    │           ├── Item Checkmark
    │           └── Item Label（TextMeshProUGUI）

Template 决定下拉列表的外观，Options 决定列表中有哪些内容。

四、代码控制 Dropdown

using System.Collections.Generic;
using TMPro;
using UnityEngine;

public class DropdownDemo : MonoBehaviour
{
    [SerializeField] private TMP_Dropdown dropdown;

    private void Start()
    {
        dropdown.onValueChanged.AddListener(OnValueChanged);
    }

    private void OnDestroy()
    {
        dropdown.onValueChanged.RemoveListener(OnValueChanged);
    }

    private void OnValueChanged(int index)
    {
        string text = dropdown.options[index].text;
        Debug.Log($"索引：{index}，内容：{text}");
    }

    public void SetOptions()
    {
        dropdown.ClearOptions();

        dropdown.AddOptions(new List<string>
        {
            "Option A",
            "Option B",
            "Option C"
        });

        dropdown.SetValueWithoutNotify(0);
        dropdown.RefreshShownValue();
    }
}

五、常见问题

• 下拉列表不出现：检查 Template 是否正确引用。
• 文字为空：检查 Caption Text 和 Item Text 是否指向 TextMeshProUGUI。
• 选项没有更新：修改代码中的 Options 后调用 RefreshShownValue()。
• 图片不显示：同时设置 Item Image 和 Caption Image。
• 点击无反应：检查 Interactable、EventSystem、Graphic Raycaster 和 Raycast Target。
• 只能选一个：检查 Multi Select 是否关闭。