ToB企服应用市场:ToB评测及商务社交产业平台

标题: Unity UGUI的Dropdown（下拉菜单）组件的介绍及使用 [打印本页]

---

作者: 莱莱    时间: 2023-9-4 15:56
标题: Unity UGUI的Dropdown（下拉菜单）组件的介绍及使用
Unity UGUI的Dropdown（下拉菜单）组件的介绍及使用

1. 什么是Dropdown组件？

Dropdown（下拉菜单）是Unity UGUI中的一个常用组件，用于在用户点击或选择时显示一个下拉菜单，提供多个选项供用户选择。
2. Dropdown组件的工作原理

Dropdown组件由两部分组成：一个可点击的按钮和一个下拉菜单。当用户点击按钮时，下拉菜单会展开，显示所有选项。用户可以通过点击选项来进行选择。
3. Dropdown组件的常用属性

• Options：下拉菜单中的选项列表。
  
• Caption Text：按钮上显示的文本。
  
• Template：下拉菜单的模板。
  
• Item Text：下拉菜单中选项的文本。
  
• On Value Changed：当选择的值发生变化时触发的事件。
  

4. Dropdown组件的常用函数

• ClearOptions()：清空下拉菜单中的选项。
  
• AddOptions(List options)：向下拉菜单中添加选项。
  
• SetValueWithoutNotify(int value)：设置当前选择的值，但不触发事件。
  

5. 示例代码

示例1：创建一个简单的下拉菜单

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class DropdownExample : MonoBehaviour
5. {
6.     public Dropdown dropdown;
8.     void Start()
9.     {
10.         dropdown.ClearOptions();
11.         dropdown.AddOptions(new List<string> { "Option 1", "Option 2", "Option 3" });
12.     }
13. }

复制代码

操作步骤：

• 创建一个空物体，并将Dropdown组件添加到该物体上。
  
• 将DropdownExample脚本添加到该物体上。
  
• 在Inspector面板中，将Dropdown组件的引用拖拽到DropdownExample脚本的dropdown字段上。
  
• 运行游戏，下拉菜单中将显示"Option 1"、"Option 2"和"Option 3"三个选项。
  

注意事项：

• 在Start函数中添加选项，确保在游戏开始时下拉菜单已经初始化。
  

示例2：获取当前选择的值

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class DropdownExample : MonoBehaviour
5. {
6.     public Dropdown dropdown;
8.     void Start()
9.     {
10.         dropdown.ClearOptions();
11.         dropdown.AddOptions(new List<string> { "Option 1", "Option 2", "Option 3" });
12.     }
14.     public void OnDropdownValueChanged(int value)
15.     {
16.         Debug.Log("Selected option: " + dropdown.options[value].text);
17.     }
18. }

复制代码

操作步骤：

• 创建一个空物体，并将Dropdown组件添加到该物体上。
  
• 将DropdownExample脚本添加到该物体上。
  
• 在Inspector面板中，将Dropdown组件的引用拖拽到DropdownExample脚本的dropdown字段上。
  
• 在DropdownExample脚本中，创建一个公共方法OnDropdownValueChanged，并将其绑定到Dropdown组件的On Value Changed事件上。
  
• 运行游戏，选择下拉菜单中的选项，控制台将输出所选选项的文本。
  

注意事项：

• OnDropdownValueChanged方法的参数value表示当前选择的索引。
  

示例3：动态添加选项

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class DropdownExample : MonoBehaviour
5. {
6.     public Dropdown dropdown;
7.     public InputField inputField;
9.     void Start()
10.     {
11.         dropdown.ClearOptions();
12.         dropdown.AddOptions(new List<string> { "Option 1", "Option 2", "Option 3" });
13.     }
15.     public void AddOption()
16.     {
17.         string newOption = inputField.text;
18.         dropdown.options.Add(new Dropdown.OptionData(newOption));
19.         dropdown.RefreshShownValue();
20.     }
21. }

复制代码

操作步骤：

• 创建一个空物体，并将Dropdown组件添加到该物体上。
  
• 将DropdownExample脚本添加到该物体上。
  
• 在Inspector面板中，将Dropdown组件的引用拖拽到DropdownExample脚本的dropdown字段上。
  
• 创建一个InputField组件，并将其引用拖拽到DropdownExample脚本的inputField字段上。
  
• 在DropdownExample脚本中，创建一个公共方法AddOption，并将其绑定到一个按钮的OnClick事件上。
  
• 运行游戏，输入一个新选项的文本，点击按钮，下拉菜单中将添加一个新选项。
  

注意事项：

• AddOption方法通过inputField获取新选项的文本，并使用dropdown.options.Add方法添加新选项。
  
• 添加新选项后，需要调用dropdown.RefreshShownValue方法刷新下拉菜单的显示。
  

示例4：设置默认选项

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class DropdownExample : MonoBehaviour
5. {
6.     public Dropdown dropdown;
8.     void Start()
9.     {
10.         dropdown.ClearOptions();
11.         dropdown.AddOptions(new List<string> { "Option 1", "Option 2", "Option 3" });
12.         dropdown.SetValueWithoutNotify(1);
13.     }
14. }

复制代码

操作步骤：

• 创建一个空物体，并将Dropdown组件添加到该物体上。
  
• 将DropdownExample脚本添加到该物体上。
  
• 在Inspector面板中，将Dropdown组件的引用拖拽到DropdownExample脚本的dropdown字段上。
  
• 在Start函数中，使用dropdown.SetValueWithoutNotify方法设置默认选项的索引。
  
• 运行游戏，下拉菜单中将默认选择第二个选项。
  

注意事项：

• SetValueWithoutNotify方法用于设置当前选择的值，但不触发On Value Changed事件。
  

示例5：自定义下拉菜单模板

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class DropdownExample : MonoBehaviour
5. {
6.     public Dropdown dropdown;
7.     public GameObject customTemplate;
9.     void Start()
10.     {
11.         dropdown.ClearOptions();
12.         dropdown.AddOptions(new List<string> { "Option 1", "Option 2", "Option 3" });
13.         dropdown.template = customTemplate.transform as RectTransform;
14.     }
15. }

复制代码

操作步骤：

• 创建一个空物体，并将Dropdown组件添加到该物体上。
  
• 创建一个空物体作为自定义模板，设置其布局和样式。
  
• 将DropdownExample脚本添加到第一个物体上。
  
• 在Inspector面板中，将Dropdown组件的引用拖拽到DropdownExample脚本的dropdown字段上。
  
• 将自定义模板的引用拖拽到DropdownExample脚本的customTemplate字段上。
  
• 运行游戏，下拉菜单将使用自定义模板进行显示。
  

注意事项：

• 自定义模板需要是一个RectTransform组件。
  

参考资料

• Unity官方文档：Dropdown
  

            本文作者：                            Blank                            
        本文链接：        
        版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
        声援博主：如果您觉得文章对您有帮助，可以点击文章右下角            【                推荐】                    一下。您的鼓励是博主的最大动力！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4