Unity UGUI - Dropdown 下拉列表框

时间:2024-03-18 09:06:13

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     }

实际效果:

 

 

 

 

 

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