第四十二章 Unity 下拉框 (Dropdown) UI

本章节我们介绍下拉框 (Dropdown),我们点击菜单栏“GameObject”->“UI”->“Dropdown”,然后调整它的位置,效果如下

其实它的本质就是一个下拉列表,然后选择列表中的一个选项而已。大家在很多网页中应该可以看到类似的UI元素。我们在层次面板查看这个游戏对象

我们发现Dropdown这个UI元素的下面有“Label”,“Arrow”和“Template”三个子游戏对象。并且子游戏对象“Template”的下面继续拥有它的子游戏对象。根据名称,我们大致能够理解“Label”就是下拉框提示文本而已,“Arrow”就是那个箭头标识,而“Template”则是点击后的出现的下拉列表框(对应的数据就是一个数组)。我们继续查看它的检视面板

我们简单介绍一下这些属性。

Interactable 表示该UI元素是否接受输入。

Transition 表示该UI元素状态交换效果,默认值就是Color Tint颜色变化。

Target Graphic 表示该UI元素的Image组件,也就是使用图片作为下拉框的背景。

Normal Color 就是下拉框默认状态的颜色。

Highlighted Color 就是下拉框高亮颜色。

Pressed Color 就是下拉框点击时的颜色

Selected Color 就是下拉框选中时候的颜色

Disable Color 就是下拉框失效时候的颜色

Color Multiplier 则是颜色乘数值,默认1即可。

Fade Duration 则是下拉框颜色切换的时间(单位秒)。

Navigation和Visualize表示下拉框的导航设置,这里我们不设置。

Template 就是我们上面提到的“Template”子游戏对象(下拉列表)。

Caption Text 就是我们上面提到的“Lable”子游戏对象,就是下拉框默认提示文字。但是,一般情况下,下拉框会直接使用下拉列表中的第一个选项的文本。

Caption Image 可以使用图片来替换上面的“Lable”子游戏对象。

Item Text 就是下拉框点击后出现的条目的游戏对象。

Item Image 可以使用图片来替换上面的Item Text游戏对象。

Value 当前所选选项的索引。0 代表第一个选项,1 代表第二个,依此类推。默认值是0,就表示下拉框默认使用下拉列表中的第一个选项。

Alpha Fade Speed 就是下拉框淡进淡出的时间。

Options 表示下拉列表,它的本质就是一个数组。可为每个选项指定一个文本字符串或一个图像,也就是对应数组中的一个元素。我们这里使用文本字符串即可,如下所示

当然,我们还可以使用“+”添加新的列表选项。

使用代码来手动修改下拉框的选项。

    // 下拉框元素上的 Dropdown 组件
    private Dropdown dropDown;

    void Start()
    {
        // 获取输入框UI元素上面的 InputField 组件
        inputField = GameObject.Find("InputField").GetComponent<InputField>();

        // 获取下拉框元素上的 Dropdown 组件
        dropDown = GameObject.Find("Dropdown").GetComponent<Dropdown>();
        var options = dropDown.options;
        options.Add(new Dropdown.OptionData("杭州"));
        options.Add(new Dropdown.OptionData("南京"));
        dropDown.options = options;
    }

最终的效果如下所示

接下来,我们继续说一下下拉框的事件。

对于下拉框而言,它能够接受的事件为On Value Changed事件,我们可以使用一个方法来处理这个事件,在这个事件方法中,我们打印出下拉框 (Dropdown),也就是数组下标。

    public void testDropdownChange()
    {
        Debug.Log("DropdownChange:" + dropDown.value);
    }

接下来,我们添加上面的testDropdownChange方法到事件中

接下来,我们就可以运行整个工程查看下拉框的效果了。

当我们从第一个“北京”(Value=0)切换到第二个“上海”(Value=1)的时候

我们的控制台也输出了下拉框 (Dropdown)的Value值就是 1。

当我们再次切换第三个“广州”的时候,控制台就会输出 2。

本课程涉及的内容已经共享到百度网盘:https://pan.baidu.com/s/1e1jClK3MnN66GlxBmqoJWA?pwd=b2id

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/17965.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Vue框架

目录 简单介绍 MVVM 下载安装Node.js 安装Vue.js插件 新建Vue.js项目 下载vue依赖库 Vue工程目录结构 修改代码模板 vue组件中&#xff0c;添加模型数据 Vue双向绑定 动态绑定 vue组件中&#xff0c;显示图片 单选框绑定 复选框绑定 Vue的script表达式 Vue实例声…

MySQL概述 -- 数据模型SQL简介DDL数据库操作

一. 数据模型 介绍完了Mysql数据库的安装配置之后&#xff0c;接下来我们再来聊一聊Mysql当中的数据模型。学完了这一小节之后&#xff0c;我们就能够知道在Mysql数据库当中到底是如何来存储和管理数据的。 在介绍 Mysql的数据模型之前&#xff0c;需要先了解一个概念&#x…

【Linux】进程地址空间

目录 引入 进程地址空间 虚拟地址与物理地址 如何理解虚拟地址的不同区域 写时拷贝 动态开辟的细节 为什么存在进程地址空间 避免地址被随意访问 进程管理和内存管理解耦合 使进程用统一的视角看待代码和数据 引入 &#x1f383;我们写一个这样的程序&#xff0c;运…

算法记录 | Day50 动态规划

123.买卖股票的最佳时机III 思路&#xff1a; 1.确定dp数组以及下标的含义 最多可完成两笔交易意味着总共有三种情况&#xff1a;买卖一次&#xff0c;买卖两次&#xff0c;不买卖。 具体到每一天结束总共有 5 种状态&#xff1a; 未进行买卖状态&#xff1b;第一次买入状…

springboot - spring.factories

spring.factories 是什么&#xff1f; spring.factories 是 Spring Boot 自动配置的核心机制之一&#xff0c;它用于自动注册 Spring Boot 中的各种自动配置类&#xff0c;从而实现自动化配置的目的。在 Spring Boot 应用程序启动时&#xff0c;Spring Boot 会自动扫描 classp…

深度解读:《数字孪生世界白皮书(2023)》全方位剖析

2023年初&#xff0c;中国信息通信研究院发布了《数字孪生城市产业图谱研究报告&#xff08;2022&#xff09;》&#xff0c;报告中提出我国数字孪生产业四阶段体系&#xff0c;2020年到2030年是我国数字孪生产业增长期&#xff0c;当前数字孪生市场需求和技术均处于高速发展阶…

5月跳槽有风险,不跳也有?

今天讲讲跳槽。 说实话跳槽是为了寻求更好的发展&#xff0c;但在跳槽前我们也不能确定下家就是更好的归宿&#xff0c;这就更加需要我们审慎地去对待&#xff0c;不能盲目跳槽。 其次&#xff0c;我们离职和跳槽&#xff0c;其中的原因很大一部分是目前薪资不符合预期。 那…

C. Permutation Game(博弈 + 拓扑的思想)

Problem - C - Codeforces 经过漫长的一天&#xff0c; Aice和Bob决定玩一个小游戏。游戏棋盘由n个格子组成&#xff0c;在一条直线上&#xff0c;编号从1到n,每个格子包含一个数字4;,qy在1到n.之间&#xff0c;而且没有两个格子包含相同的数字。 一个棋子被放在其中一个格子里…

什么牌子蓝牙耳机好用不贵?国产性价比高的蓝牙耳机推荐

相较于有线耳机&#xff0c;无线蓝牙耳机更便携、功能更丰富&#xff0c;不用受到耳机孔与线的限制。那么&#xff0c;什么牌子的蓝牙耳机好用不贵&#xff1f;针对这个问题&#xff0c;我给大家推荐几款国产性价比高的蓝牙耳机&#xff0c;可以当个参考。 一、南卡小音舱Lite…

Spring使用注解存储和读取对象

文章目录 一、存储Bean对象配置扫描添加注解存储Bean对象注解使用范围Bean的命名五大类注解的关系为什么需要五大类注解? 二、方法注解BeanBean重命名 三、对象注入属性注入Setter注入构造方法注入Autowired 和 Resource 的区别 一、存储Bean对象 之前我们存储Bean时&#xff…

5 Redis缓存穿透、击穿、雪崩、分布式锁、布隆过滤器

1 Redis 应用问题解决 1.1 缓存穿透 1.1.1 问题描述 key 对应的数据在数据源并不存在&#xff0c;每次针对此 key 的请求从缓存获取不到&#xff0c;请求都会压到数据源&#xff08;数据库&#xff09;&#xff0c;从而可能压垮数据源。比如 用一个不存在的用户 id 获取用户…

一份标准的软件测试方案模板

第一章 概述 ​ 软件的错误是不可避免的&#xff0c;所以必须经过严格的测试。通过对本软件的测试&#xff0c;尽可能的发现软件中的错误&#xff0c;借以减少系统内部各模块的逻辑&#xff0c;功能上的缺陷和错误&#xff0c;保证每个单元能正确地实现其预期的功能。检测和排…

亚马逊云科技开启您的云财务管理之旅:云财务运营

亚马逊云科技“开启您的云财务管理之旅”系列内容提出了关于如何启动和实施一个成功的云财务管理CFM战略的建议。云财务管理CFM的三个原则&#xff1a;SEE-查看、SAVE-节省和PLAN-计划。接下来介绍的是第四个阶段&#xff1a;RUN-运营。 在这一阶段&#xff0c;可以了解云财务管…

vue 做一个文本展示 点击文本弹出element ui的时间选择器 但不会出现element ui时间组件的那个输入框

我们先来创建一个vue2项目 引入element ui 然后 找到一个组件 这样写 <template><div><el-date-pickerv-model"value"type"datetimerange"align"right"unlink-panelsrange-separator"至"start-placeholder"开始日…

C/C++的命名空间和调用函数的详细讲解

目录 空函数 调用函数 调用 执行流程 命名空间 在创建函数时&#xff0c;必须编写其定义。所有函数定义包括以下组成部分&#xff1a; 名称&#xff1a;每个函数都必须有一个名称。通常&#xff0c;适用于变量名称的规则同样也适用于函数名称。形参列表&#xff1a;调用函…

手机摄影笔记(二)

第5章 镜头语言 镜头语言分类&#xff08;8个&#xff09;&#xff1a; 推&#xff1a;从远到近 拉&#xff1a;从近到远 摇&#xff1a;机位固定&#xff0c;旋转手机拍全景或者跟着拍摄对象进行摇摄&#xff08;跟摇&#xff09;.通常用此方式来介绍环境时&#xff0c;表现的…

开放原子训练营(第三季)inBuilder低代码开发实验室---报销单录入系统

作为一名低代码初学者&#xff0c;我使用inBuilder系统设计了一款报销单录入系统&#xff0c;实现了报销单录入与显示报销单列表的功能&#xff08;如图1与图2所示&#xff09;&#xff0c;并获得了很多开发心得。从inBuilder系统的优点、缺点以及开发过程三方面出发&#xff0…

基于SpringBoot,vue的家政服务平台的设计与实现

背景 以往的家政服务管理平台的管理&#xff0c;一般都是纸质文件来管理家政服务信息&#xff0c;传统的管理方式已经无法满足现代人们的需求&#xff1b;使用家政服务管理平台, 首先可以大幅提高家政服务信息检索&#xff0c;只需输入家政服务相关信息就能在数秒内反馈想要的…

JavaScript学习(一)

一、JavaScript的背景及知识结构 1、三个问题 什么是JavaScript&#xff1f;JavaScript能干什么&#xff1f;JavaScript是由什么构成的&#xff1f;怎样学习JavaScript&#xff1f; 2、什么是JavaScript&#xff1f; ①JavaScript是一种轻量级的编程语言&#xff1b;借鉴了J…

【SSA-LSTM】基于麻雀算法优化LSTM 模型预测研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…