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

这篇具有很好参考价值的文章主要介绍了第四十二章 Unity 下拉框 (Dropdown) UI。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

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

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

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

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表示下拉框的导航设置,这里我们不设置。

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

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

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

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

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

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

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

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

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

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

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

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

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

    // 下拉框元素上的 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;
    }

最终的效果如下所示

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

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

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

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

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

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

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

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

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

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

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

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

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

本课程涉及的内容已经共享到百度网盘:https://pan.baidu.com/s/1e1jClK3MnN66GlxBmqoJWA?pwd=b2id文章来源地址https://www.toymoban.com/news/detail-439842.html

到了这里,关于第四十二章 Unity 下拉框 (Dropdown) UI的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 第四十四章 Unity 滑动条 (Slider) UI

    本章节我们介绍滑动条 (Slider),它允许用户通过拖动鼠标从预定范围中选择数值。首先,我们点击菜单栏“GameObject”-“UI”-“Slider”,调整其位置,最终效果如下   我们发现滑动条 (Slider)下面有三个子游戏对象Background,Fill Area和Handle Slide Area。他们分别代表了横条背景,以

    2024年02月13日
    浏览(63)
  • 第四十五章 Unity 滚动视图 (Scroll View) UI

    我们介绍一下滚动条 (Scrollbar),它允许用户滚动由于太大而无法完全看到的图像或其他视图。这种效果在我们网页中经常看到,尤其是网页内容太长的时候,就会在垂直方向出现滚动条。当然,有时候也会在水平方向出现滚动条。我们拖动滚动条就能看到剩余的内容。通常情

    2024年02月05日
    浏览(21)
  • 第四十一章 Unity 输入框 (Input Field) UI

    本章节我们学习输入框 (Input Field),它可以帮助我们获取用户的输入。我们点击菜单栏“GameObject”-“UI”-“Input Field”,我们调整一下它的位置,效果如下 我们在层次面板中发现,这个InputField UI元素包含两个子元素,一个是Placeholder,另一个是Text。如下所示 同样,我们查看

    2024年02月04日
    浏览(27)
  • 第四十二回:DateRangePickerDialog Widget

    我们在上一章回中介绍了DatePickerDialog Widget相关的内容,本章回中将介绍 DateRangePickerDialog Widget .闲话休提,让我们一起Talk Flutter吧。 我们在这里说的 DateRangePickerDialog 是一种弹出窗口,只不过窗口的内容固定显示为日期,它和DatePickerDialog类似,也是用来让用户选择日期,选择

    2024年02月07日
    浏览(30)
  • ROS学习第四十二节——地图服务

    https://download.csdn.net/download/qq_45685327/87721374 上一节我们已经实现通过gmapping的构建地图并在rviz中显示了地图,不过,上一节中地图数据是保存在内存中的,当节点关闭时,数据也会被一并释放,我们需要将栅格地图序列化到的磁盘以持久化存储,后期还要通过反序列化读取磁

    2024年02月12日
    浏览(34)
  • Element UI更改下拉菜单el-dropdown-menu样式

    源代码: 这个样式更改还是有点费劲的,如图: 我想更改el-dropdown-item的样式,但是正常覆盖更改无法生效的,从渲染结构可以看出来这个下拉菜单的渲染列表是在文档最底部的。 vue文件新建一个 style样式, 不加scoped; 为保证这个组件的样式 不会影响到其他页面组件样式

    2024年02月09日
    浏览(45)
  • Unity中的【Dropdown(包括TMP_Dropdown)下拉框当只有一个下拉值时多次点击 OnValueChange事件无效】的改进方法

    Dropdown(包括TMP_Dropdown)下拉框当只有一个下拉值时,多次点击下拉框,并选择选项时, OnValueChange事件不响应 当下拉框值变化的时候,代表用户选择了新的值,于是执行对应逻辑 在当前情形之下,用户onValueChanged事件无法响应,因为value没有改变,那么如何补救呢? (1)如图

    2024年02月15日
    浏览(37)
  • vue+element-ui Dropdown下拉菜单(获取某行数据)

    1、通过command方法直接传当前选中行的整个数据 html js 效果:

    2024年02月16日
    浏览(40)
  • Unity UGUI的Dropdown(下拉菜单)组件的介绍及使用

    Dropdown(下拉菜单)是Unity UGUI中的一个常用组件,用于在用户点击或选择时显示一个下拉菜单,提供多个选项供用户选择。 Dropdown组件由两部分组成:一个可点击的按钮和一个下拉菜单。当用户点击按钮时,下拉菜单会展开,显示所有选项。用户可以通过点击选项来进行选择

    2024年02月13日
    浏览(32)
  • Unity Dropdown(可编辑,可输入)下拉选择框,带文本联想

    由于 Unity 没有直接实现该效果的组件,所以以上效果是用Dropdown和InputField这个两个组件 组合实现的。 UI布局 核心代码 项目Doem 源码GitEE 地址:https://gitee.com/Andy_Yi/drop-down-dome

    2024年02月11日
    浏览(29)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包