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 }
实际效果:
*** | 以上内容仅为学习参考、学习笔记使用 | ***