【Unity3D】UGUI Dropdown控件研究

28 Feb 2020 3132字 11分 Unity3D
BY-SA 4.0（除特别声明或转载文章外）

一、前言

Dropdown下拉列表，控件还是很强大的，做UI的时候用的比较多，现在就将Dropdown使用中的一些经验总结起来，分享给大家了

二、参考资料

UGUI 中Dropdown控件的使用经验 Unity3D UGUI中的dropdown控件使用总结 Unity(一)关于Unity Dropdown控件的使用心得

三、正文

对于Dropdown控件的研究，我将分成这么几个部分：

1、控件的组成以及属性面板介绍
2、控件的初始化以及内容显示
3、增加节点以及删除节点
4、事件监听方式

1、控件的组成以及属性面板介绍

在这里插入图片描述 Label是显示初始化的文字 Arrow是显示初始化的下拉箭头 Template是Dropdown的模板样式 Item Background是每一个Item的背景图片 Item Checkmark是每一个Item的下拉框图片 Item Label是每一个Item的文字显示内容 Scrollbar是一个下拉框其中Item Background和Item Checkmark的图集资源我们可以提前更改。

然后我们看一下Dropdown的属性面板：在这里插入图片描述 Caption Text和Caption Image是作为下拉列表首选项的文字和图片显示，也是我们每次选择后的内容，因此可代码调用获取

Item Text作为下拉列表中每个item的文字显示，Item Image可以用来扩展模板增加内容

Value值会随着下拉列表选项的不同而变化，dropdown.value

Options选项栏内：可以动态赋值给Item对象 Dropdown.OptionData

2、控件的初始化以及内容显示

初始化文字内容

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];
    }
}

在这里插入图片描述

3、增加节点以及删除节点

添加节点

    //添加节点
    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、事件监听方式

使用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;
        }
    }
}

将脚本挂在Main Camera上面（当然，任何物体都可以），然后将Dropdown拖入卡槽中：在这里插入图片描述将Dropdown下面的On Value Changed增加方法运行起来，可以看到控制台打印的信息

【Unity3D】UGUI Dropdown控件研究 764424567