Dropdown (Legacy)

NOTE

这是旧版 UGUI 的 Dropdown (Legacy)，用于让用户从多个选项中选择一项。

一、整体结构

Dropdown (Legacy)
├── RectTransform
├── CanvasRenderer
├── Image
├── Dropdown
├── Label（Legacy Text）
├── Arrow（Image）
└── Template（下拉列表模板）

它与 TMP Dropdown 的逻辑基本一致，主要区别是文字使用旧版 Text，而不是 TextMeshProUGUI。

二、截图中的配置

Rect Transform

• Position：X=35.38287，Y=-133.5418，Z=0
• Width：160
• Height：30
• Anchor：中心
• Pivot：0.5, 0.5
• Rotation：0
• Scale：1

它决定下拉框在界面中的位置和大小。

Image

• Source Image：UISprite
• Color：背景颜色。
• Material：当前使用默认 UI 材质。
• Raycast Target：允许用户点击下拉框。
• Maskable：允许被父级 Mask 裁剪。
• Image Type：Sliced，使用九宫格拉伸。
• Fill Center：开启，绘制 Sprite 中间区域。
• Pixels Per Unit Multiplier：当前为 1。

Sliced 需要在 Sprite Editor 中设置 Border，否则九宫格效果可能不明显。

三、Dropdown 组件

Interactable

当前开启，表示可以点击并展开列表。关闭后：

• 无法打开列表。
• 使用 Disabled Color。
• 不会触发选择事件。

Transition

当前为 Color Tint，用于显示不同交互状态：

• Normal Color：正常。
• Highlighted Color：鼠标悬停。
• Pressed Color：按下。
• Selected Color：键盘或手柄选中。
• Disabled Color：不可交互。

Target Graphic

当前为：

Dropdown (Legacy) (Image)

表示颜色变化作用于背景 Image，不会自动改变子物体 Label 的文字颜色。

Navigation

当前为 Automatic，Unity 会自动寻找键盘或手柄的下一个 UI 控件。

四、Template 模板

Template 是下拉列表的模板，通常默认处于 inactive 状态。

典型结构：

Template
├── Viewport
│   └── Content
│       └── Item（Toggle）
│           ├── Item Background
│           ├── Item Checkmark
│           └── Item Label（Text）

运行时流程：

点击 Dropdown
      ↓
根据 Template 创建列表
      ↓
复制 Item
      ↓
为每个 Item 填入 Options
      ↓
用户选择一项
      ↓
更新 Label
      ↓
触发 On Value Changed

每个选项通常使用一个 Toggle，因此下拉列表默认是单选模式。

五、Caption Text 与 Item Text

Caption Text

显示当前选中的选项文字。

例如：

Value = 1
Caption Text = Option B

Item Text

显示下拉列表中每一项的文字。

两者都需要引用正确的 Text 组件，否则可能出现：

• 列表有内容，但主框不显示。
• 主框显示内容，但列表文字为空。
• 选择后 Label 不更新。

Caption Image 与 Item Image

可选，用于显示每个选项对应的图片。

如果只使用文字，可以为空。

六、Value、Options 和事件

Value

当前选项的索引：

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

Options

保存所有可选内容，每项可以包含：

• 文字。
• 可选图片。

On Value Changed (Int32)

选择完成后触发，参数是选项索引。

using UnityEngine;
using UnityEngine.UI;

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

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

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

    public void Refresh()
    {
        dropdown.RefreshShownValue();
    }
}

On Value Changed 绑定步骤：

1. 点击事件列表中的 +。
2. 拖入目标 GameObject。
3. 选择脚本中的 public void 方法。
4. 运行后选择选项测试。

七、常见问题

• 列表不出现：检查 Template、EventSystem 和 Graphic Raycaster。
• 文字为空：检查 Caption Text 和 Item Text 引用。
• 列表位置不对：检查 Template 的 Anchor 和 Pivot。
• 选项更新后显示旧内容：调用 RefreshShownValue()。
• 图片不显示：同时设置 Caption Image 和 Item Image。
• 需要多选：Legacy Dropdown 默认是单选，需要改用 Toggle 列表或自定义多选组件。

Unity 官方说明，Dropdown 的 Value 返回当前选项索引，On Value Changed 会在用户选择选项后触发。Dropdown 官方文档