Unity UGUI

Dropdown 组件

　该组件可以用来让用户选择列表中的一个选项。

　控件显示当前选择的选项。单击后，它会打开选择列表，可以在列表当中选择一个新的选项。

　选择新的选项后，列表将再次关闭，并且控件将显示新选择的选项。

　如果用户单击控件本身或者“画布”中的其他任意位置，该列表也将关闭。

　Template：（模板）

　　下拉列表模板的 Rect 转换

　Caption Text：（标题文字）

　　文本组件，用于保存当前所选选项的文本（可选）

　Caption Image：（标题图片）

　　Image组件，用于保存当前所选选项的图像（可选）

　Item Text：（项目文字）

　　用于保存项目文本的Text组件（可选）

　Item Image：（项目图片）

　　Image组件，用于保存项目的图像（可选）

　Value：（值）

　　当前所选选项的索引。0是第一个选项，1是第二个选项，依此类推。

　Options：（选控件）

　　可选项的列表。可以为每个选项指定文本字符串和图像。

　该按钮具有一个称为 On Value Changed 的事件，该事件在用户完成对列表中选项之一的单击时响应，它支持发送整数值，该值便是所选选项的索引。

　在模板中必须包含一个项目，并且要启用 Toggle 组件。当单击下拉控件创建实际的下拉列表时，此项会重复多次，并且列表中的每个选项都使用同一个副本。

设置文字和图像内容

　下拉菜单为每个选项提供了一个文本内容和一个图像内容。文本和图像都是可选的，仅在将下拉菜单设置为支持下拉菜单时才能使用它们。

　如果同时设置了标题文本和项目文本属性，则下拉菜单支持每个选项的文本。

　使用 GameObject> UI> Dropdown 菜单项时，默认情况下会进行设置。

- 标题文本是用于保存当前所选选项的文本的文本组件，它通常是 Dropdown GameObject 的子级
- 项目文本是用于保存每个选项文本的文本组件，它通常是 Item GameObject 的子级

　如果同时设置了标题图像和项目图像属性，则该下拉菜单将为每个选项提供一个图像。这些在默认情况下未设置。

- 标题图像是图像组件，用于保存当前所选选项的图像。它通常是Dropdown GameObject的子级
- 项目图像是图像组件，用于保存每个选项的图像。它通常是Item GameObject的子级

　用于下拉菜单的实际文本和图像是在下拉菜单组件的“选项”属性中指定的，或者可以通过代码进行设置。

下拉列表的位置

　下拉列表相对于下拉控件的位置由模板 Rect 变换的锚点和枢纽决定。

　默认情况下，该列表将显示在控件下方，这是通过将模板锚定到控件的底部来实现的。

　模板的枢轴也需要在顶部，以便随着模板的扩展以容纳可变数量的选项，它只会向下扩展。

　Dropdown 控件具有简单的逻辑，可以防止下拉列表显示在 Canvas 的边界之外，因为这将使某些选项无法选择。

　如果默认位置的下拉菜单不在 Canvas 矩形中，则其相对于控件的位置相反。

　例如：在默认下方不足以显示的情况下，该控件下方显示的列表将会显示在其上方。

　但这种逻辑有一定的局限性：下拉模板的大小不得超过 Canvas 大小减去下拉控件的大小的一半,

　否则，如果将下拉控件放在 Canvas 的中间，则在任一位置上可能都没有列表显示的空间。

实例运用

　运用 Dropdown 下拉列表组件，在列表中选择并改变场景中 Cube 的颜色。代码如下：

 1     public Dropdown dropdown;
 2     public GameObject Cube;
 3     public Image image;
 4 
 5     void Update()
 6     {
 7         int values = dropdown.value;
 8         ChangeColor(values);
 9     }
10 
11     public void ChangeColor(int value)
12     {
13         switch (value)
14         {
15             case 0:
16                 Cube.GetComponent<MeshRenderer>().material.color = Color.blue;
17                 image.color = Color.blue;
18                 break;
19             case 1:
20                 Cube.GetComponent<MeshRenderer>().material.color = Color.green;
21                 image.color = Color.green;
22                 break;
23             case 2:
24                 Cube.GetComponent<MeshRenderer>().material.color = Color.red;
25                 image.color = Color.red;
26                 break;
27             case 3:
28                 Cube.GetComponent<MeshRenderer>().material.color = Color.white;
29                 image.color = Color.white;
30                 break;
31             case 4:
32                 Cube.GetComponent<MeshRenderer>().material.color = Color.yellow;
33                 image.color = Color.yellow;
34                 break;
35         }
36     }

　实际效果：

*** | 以上内容仅为学习参考、学习笔记使用 | ***