Unity3D UGUI下拉菜单/Dropdown组件用法、总结

Unity3D中UGUI实现下拉菜单

---

本文提供全流程，中文翻译。

Chinar 坚持将简单的生活方式，带给世人！

（拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例）

---

Chinar —— 心分享、心创新！

助力快速使用 UGUI 实现 下拉菜单

为新手节省宝贵的时间，避免采坑！

Chinar 教程效果：

---

• 1
  • Create Layout —— 创建布局
    • 1. 创建下拉菜单模板
    • 2. 设置属性
• 2
  • ChinarDemo Script —— Chinar演示脚本
• 3
  • Attentions —— 注意事项
• 4
  • Test Result —— 测试结果
• 支持
  • May Be —— 搞开发，总有一天要做的事！

---

全文高清图片，点击即可放大观看 (很多人竟然不知道)

---

1

Create Layout —— 创建布局

UGUI 最初是没有下拉菜单的组件的

后来更新加入后，用起来方便，可快速创建大量选择项，无需开发者自己写脚本实现

创建页面布局

1. 创建下拉菜单模板

右键层次列表→ UI → Dropdown

即可完成一个下拉菜单的创建

---

2. 设置属性

Unity 会自动帮我们创建一个下拉菜单的模板、并且添加好 Dropdown 组件

做好我们需要的一切

我们需要做的就是，设置我们需要的属性、以及功能即可

将我们的脚本、需要的选择项、UI选项设置好就可以用了

---

2

ChinarDemo Script —— Chinar演示脚本

这里提供一个便于理解的演示脚本

using UnityEngine;
using UnityEngine.UI;


/// <summary>
/// Chinar例子脚本，用以输出
/// </summary>
public class ChinarDemo : MonoBehaviour
{
    void Start()
    {
        //贴心的 Chinar 为新手提供了 代码动态绑定的方法，如果通过代码添加监听事件，外部就无需再做添加
        //GameObject.Find("Dropdown").GetComponent<Dropdown>().onValueChanged.AddListener(ConsoleResult);
    }


    /// <summary>
    /// 输出结果 —— 添加监听事件时要注意，需要绑定动态方法
    /// </summary>
    public void ConsoleResult(int value)
    {
        //这里用 if else if也可，看自己喜欢
        //分别对应：第一项、第二项....以此类推
        switch (value)
        {
            case 0:
                print("第1页");
                break;
            case 1:
                print("第2页");
                break;
            case 2:
                print("第3页");
                break;
            case 3:
                print("第4页");
                break;
            //如果只设置的了4项，而代码中有第五个，是调用不到的
            //需要对应在 Dropdown组件中的 Options属性 中增加选择项即可
            case 4:
                print("第5页");
                break;
        }
    }
}

---

3

Attentions —— 注意事项

注意事项：

1.
手动添加监听事件，需绑定动态方法（Unity会自动生成）

2.
设置自己需要的默认项，默认为0，当下拉菜单弹起时，默认就是第一项

3.
下拉菜单的机制，就是选中的选项，如果再次点击是不会调用方法的！！！
（也就是说，你已经选择了第一页，再次点击第一页，是不会调用任何函数的）

---

4

Test Result —— 测试结果

点击运行测试

请认真看输出结果，某一页为选中状态时，再次点击是不会调用任何函数的


至此：Dropdown的用法结束
后期会出扩展、来匹配每个按钮都可用

---

支持

May Be —— 搞开发，总有一天要做的事！

拥有自己的服务器，无需再找攻略！

Chinar 提供一站式教程，闭眼式创建！

为新手节省宝贵时间，避免采坑！

先点击领取 —— 阿里全产品优惠券 (享受最低优惠)


1 —— 云服务器超全购买流程 (新手必备!)

2 —— 阿里ECS云服务器自定义配置 - 购买教程(新手必备!)

3—— Windows 服务器配置、运行、建站一条龙 !

4 —— Linux 服务器配置、运行、建站一条龙 !

---

$$
技术交流群：806091680 ！ Chinar 欢迎你的加入

---

END

本博客为非营利性个人原创，除部分有明确署名的作品外，所刊登的所有作品的著作权均为本人所拥有，本人保留所有法定权利。违者必究

对于需要复制、转载、链接和传播博客文章或内容的，请及时和本博主进行联系，留言，Email: ichinar@icloud.com

对于经本博主明确授权和许可使用文章及内容的，使用时请注明文章或内容出处并注明网址>