UGUI系列-Dropdown控件研究(Unity3D)

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

一、前言

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增加方法

网络异常,图片无法展示
|

运行起来,可以看到控制台打印的信息

网络异常,图片无法展示
|



相关文章
|
11天前
|
人工智能 数据可视化 安全
王炸组合!阿里云 OpenClaw X 飞书 CLI,开启 Agent 基建狂潮!(附带免费使用6个月服务器)
本文详解如何用阿里云Lighthouse一键部署OpenClaw,结合飞书CLI等工具,让AI真正“动手”——自动群发、生成科研日报、整理知识库。核心理念:未来软件应为AI而生,CLI即AI的“手脚”,实现高效、安全、可控的智能自动化。
34610 28
王炸组合!阿里云 OpenClaw X 飞书 CLI,开启 Agent 基建狂潮!(附带免费使用6个月服务器)
|
3天前
|
人工智能 机器人 开发工具
Windows 也能跑 Hermes Agent!完整安装教程 + 飞书接入,全程避坑
Hermes Agent 是一款自学习AI智能体系统,支持一键安装与飞书深度集成。本教程详解Windows下从零部署全流程,涵盖依赖自动安装、模型配置、飞书机器人接入及四大典型兼容性问题修复,助你快速构建企业级AI协作平台。(239字)
4682 10
|
5天前
|
人工智能 自然语言处理 安全
Claude Code 全攻略:命令大全 + 实战工作流(建议收藏)
本文介绍了Claude Code终端AI助手的使用指南,主要内容包括:1)常用命令如版本查看、项目启动和更新;2)三种工作模式切换及界面说明;3)核心功能指令速查表,包含初始化、压缩对话、清除历史等操作;4)详细解析了/init、/help、/clear、/compact、/memory等关键命令的使用场景和语法。文章通过丰富的界面截图和场景示例,帮助开发者快速掌握如何通过命令行和交互界面高效使用Claude Code进行项目开发,特别强调了CLAUDE.md文件作为项目知识库的核心作用。
4920 19
Claude Code 全攻略:命令大全 + 实战工作流(建议收藏)
|
22天前
|
人工智能 JSON 机器人
让龙虾成为你的“公众号分身” | 阿里云服务器玩Openclaw
本文带你零成本玩转OpenClaw:学生认证白嫖6个月阿里云服务器,手把手配置飞书机器人、接入免费/高性价比AI模型(NVIDIA/通义),并打造微信公众号“全自动分身”——实时抓热榜、AI选题拆解、一键发布草稿,5分钟完成热点→文章全流程!
45457 151
让龙虾成为你的“公众号分身” | 阿里云服务器玩Openclaw
|
12天前
|
人工智能 JSON 监控
Claude Code 源码泄露:一份价值亿元的 AI 工程公开课
我以为顶级 AI 产品的护城河是模型。读完这 51.2 万行泄露的源码,我发现自己错了。
5245 21
|
5天前
|
机器学习/深度学习 存储 人工智能
还在手写Skill?hermes-agent 让 Agent 自己进化能力
Hermes-agent 是 GitHub 23k+ Star 的开源项目,突破传统 Agent 依赖人工编写Aegnt Skill 的瓶颈,首创“自我进化”机制:通过失败→反思→自动生成技能→持续优化的闭环,让 Agent 在实践中自主构建、更新技能库,持续自我改进。
1078 3

热门文章

最新文章

下一篇
开通oss服务