Unity UGUI系列八 Dropdown

参考
【Unity3D-UGUI系列】（七）Dropdown 下拉菜单组件详解
https://docs.unity.cn/cn/2019.4/Manual/script-Dropdown.html

一、组件介绍

image.png

Create→UI→Dropdown创建完毕后，点击运行，展开下拉菜单后，能看到如上图中，多出来的红框部分。

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

1.组件属性

image.png

• Template Dropdown的模板样式，生成的选项都是这个样式
• Caption Text 下拉列表首选项的文字显示，可用代码调用获取
• Caption Image 下拉列表首选项的图片显示，可用代码调用获取
• Item Text 每个Item的文字显示
• Item Image 每个Item的图片显示
• Value 会随着Dropdown选择的选项不同而变化
• Options 下拉菜单的选项列表
• On Value Changed 添加监听事件，当Value值变化后，监听事件响应

二、代码调用

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

1.初始化文字内容

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

2.同时初始化文字和图片

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

4.删除节点

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

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

6.在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增加方法：

image.png