Unity3D-UGUI系列Dropdown 下拉菜单组件详解

Posted 2021-09-14 恬静的小魔龙

一、前言

首先，介绍一个UGUI，NGUI是UGUI的前身，Unity开发团队将NGUI的开发团队收到自己开发团队下，并且由此开发了UGUI。
UGUI系统是从Unity 4.6版本后才开始集成到Unity编辑器中。

UGUI的特点：

• 灵活
• 快速
• 可视化

对于开发者来说有很多的优点，比如说：

• 效率高
• 实现效果好
• 易于使用和拓展
• 与Unity编辑器的兼容性高

这是本系列文章的第一篇：

二、Dropdown 下拉菜单组件介绍

Dropdown 下拉菜单，可快速创建大量选择项，无需开发者自己写脚本实现。

首先，我们来新建一个Dropdown 下拉菜单，在Unity的Hierarchy视图中选择“Create→UI→Dropdown”：

在Hierarchy视图中可以查看Dropdown的层级结构：

对象	介绍
Label	显示初始化的文字
Arrow	显示初始化的下拉箭头
Template	Dropdown的模板样式
Item Background	每一个Item的背景图片
Item Checkmark	每一个Item的下拉框图片
Item Label	每一个Item的文字显示内容
Scrollbar	下拉框

其中Item Background 背景图片和Item Checkmark下拉框图片的图片资源可以修改。

三、Dropdown 下拉菜单组件属性

接下来，我们来看一下Dropdown下拉菜单的属性面板：

属性	介绍
Interactable	是否启动组件
Transition	过渡方式，跟Button类似
Navigation	导航，跟Button类似
Template	Dropdown的模板样式，生成的选项都是这个样式
Caption Text	下拉列表首选项的文字显示，可用代码调用获取
Caption Image	下拉列表首选项的图片显示，可用代码调用获取
Item Text	每个Item的文字显示
Item Image	每个Item的图片显示
Value	会随着Dropdown选择的选项不同而变化
Options	下拉菜单的选项列表
On Value Changed	添加监听事件，当Value值变化后，监听事件响应

Dropdown下拉菜单的属性主要有两个方面，一个就是显示的标题的文字和图片，另一个就是Item的文字和图片。

然后就是Template 模板样式，这个样式决定了Dropdown的下拉菜单的列表的样式。

Dropdown 下拉菜单主要代码调用比较常见，下面就演示如何用代码构建Dropdown下拉菜单。

四、Dropdown 下拉菜单组件代码调用

4-1、初始化Dropdown

初始化文字内容

using UnityEngine;
using UnityEngine.UI;

public class TestDropdown : MonoBehaviour
{
    public Dropdown Drd_IPList;

    private void Start()
    {
        InitDropdown();
    }

    private void InitDropdown()
    {
        //清空默认节点
        Drd_IPList.options.Clear();

        //初始化
        Dropdown.OptionData op1 = new Dropdown.OptionData();
        op1.text = "220.110.1.10";
        Drd_IPList.options.Add(op1);

        Dropdown.OptionData op2 = new Dropdown.OptionData();
        op2.text = "220.110.1.11";
        Drd_IPList.options.Add(op2);

        Dropdown.OptionData op3 = new Dropdown.OptionData();
        op3.text = "220.110.1.12";
        Drd_IPList.options.Add(op3);
    }
}

---

同时初始化文字和图片

using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class TestDropdown : MonoBehaviour
{
    public Dropdown Drd_IPList;
    public List<Sprite> m_Sprite;

    List<string> m_TextContent;
    Dropdown.OptionData m_TempData;

    private void Start()
    {
        AddTextContent();
        InitDropdown();
    }

    private void AddTextContent()
    {
        for (int i = 0; i < 3; i++)
        {
            m_TextContent.Add("220.110.1.1" + i);
        }
    }

    private void InitDropdown()
    {
        //清空默认节点
        Drd_IPList.options.Clear();

        //初始化
        for (int i = 0; i < 3; i++)
        {
            m_TempData = new Dropdown.OptionData();
            m_TempData.text = m_TextContent[i];
            m_TempData.image = m_Sprite[i];
            Drd_IPList.options.Add(m_TempData);
        }
        //初始选项的显示
        Drd_IPList.captionText.text = m_TextContent[0];
    }
}

4-2、增加节点和删除节点

添加节点：

    //添加节点
    public void AddItem()
    {
        m_TempData = new Dropdown.OptionData();
        m_TempData.text = "新添加的节点";
        Drd_IPList.options.Add(m_TempData);
    }

添加节点前：

添加节点后：

---

删除节点：

	//删除节点
    public void DelectItem()
    {
        //删除第一个节点
        m_TempData = Drd_IPList.options[0];
        Drd_IPList.options.Remove(m_TempData);
    }

删除节点前：

删除节点后：

4-3、添加监听事件

使用Dropdown自带的监听事件：

using UnityEngine;
using UnityEngine.UI;
[RequireComponent(typeof(Dropdown))]
public class Drop : MonoBehaviour
{
    private Dropdown drop;
    void Start()
    {
        drop = this.GetComponent<Dropdown>();
        drop.onValueChanged.AddListener(Change);
    }
    private void Change(int index)
    {
        Debug.Log(index);       
        switch (index)
        {
            case 0: break;
            case 1: break;
            default: break;
        }
    }

---

使用ISelectHandler接口进行事件监听：

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
public class Drop : MonoBehaviour,ISelectHandler
{
    public Dropdown drop;
    private int lastIndex;
   
    public void OnSelect(BaseEventData eventData)
    {
        //避免点击下拉列表item和dropdown重复调用
        if (drop.value == lastIndex) return;
        
        //处理逻辑
        //
 
        Debug.Log("OnSelect=" + drop.value);
        lastIndex = drop.value;
    }

---

在Dropdown面板中使用脚本监听：

using UnityEngine;
using UnityEngine.UI;

public class TestDropdown : MonoBehaviour
{
    public Dropdown Drd_IPList;

    //事件监听
    public void EventListening()
    {
        switch (Drd_IPList.value)
        {
            case 0:
                Debug.Log(0);
                break;
            case 1:
                Debug.Log(1);
                break;
            case 2:
                Debug.Log(2);
                break;
            default:
                break;
        }
    }
}

Dropdown下面的On Value Changed增加方法：

运行结果：