zoukankan      html  css  js  c++  java
  • Unity UGUI

    Dropdown 组件

     该组件可以用来让用户选择列表中的一个选项。

     控件显示当前选择的选项。单击后,它会打开选择列表,可以在列表当中选择一个新的选项。

     选择新的选项后,列表将再次关闭,并且控件将显示新选择的选项。

     如果用户单击控件本身或者“画布”中的其他任意位置,该列表也将关闭。

     

     Template:(模板)

      下拉列表模板的 Rect 转换

     Caption Text:(标题文字)

      文本组件,用于保存当前所选选项的文本(可选)

     Caption Image:(标题图片)

      Image组件,用于保存当前所选选项的图像(可选)

     Item Text:(项目文字)

      用于保存项目文本的Text组件(可选)

     Item Image:(项目图片)

      Image组件,用于保存项目的图像(可选)

     Value:(值)

      当前所选选项的索引。0是第一个选项,1是第二个选项,依此类推。

     Options:(选控件)

      可选项的列表。可以为每个选项指定文本字符串和图像。

     该按钮具有一个称为 On Value Changed 的事件,该事件在用户完成对列表中选项之一的单击时响应,它支持发送整数值,该值便是所选选项的索引。

     在模板中必须包含一个项目,并且要启用 Toggle 组件。当单击下拉控件创建实际的下拉列表时,此项会重复多次,并且列表中的每个选项都使用同一个副本。

     

    设置文字和图像内容

     下拉菜单为每个选项提供了一个文本内容和一个图像内容。文本和图像都是可选的,仅在将下拉菜单设置为支持下拉菜单时才能使用它们。

     如果同时设置了标题文本和项目文本属性,则下拉菜单支持每个选项的文本。

     使用 GameObject> UI> Dropdown 菜单项时,默认情况下会进行设置。

      • 标题文本是用于保存当前所选选项的文本的文本组件,它通常是 Dropdown GameObject 的子级

      • 项目文本是用于保存每个选项文本的文本组件,它通常是 Item GameObject 的子级

     如果同时设置了标题图像和项目图像属性,则该下拉菜单将为每个选项提供一个图像。这些在默认情况下未设置。

      • 标题图像是图像组件,用于保存当前所选选项的图像。它通常是Dropdown GameObject的子级

      • 项目图像是图像组件,用于保存每个选项的图像。它通常是Item GameObject的子级

     用于下拉菜单的实际文本和图像是在下拉菜单组件的“选项”属性中指定的,或者可以通过代码进行设置。

    下拉列表的位置

     下拉列表相对于下拉控件的位置由模板 Rect 变换的锚点和枢纽决定。

     默认情况下,该列表将显示在控件下方,这是通过将模板锚定到控件的底部来实现的。

     模板的枢轴也需要在顶部,以便随着模板的扩展以容纳可变数量的选项,它只会向下扩展。

     Dropdown 控件具有简单的逻辑,可以防止下拉列表显示在 Canvas 的边界之外,因为这将使某些选项无法选择。

     如果默认位置的下拉菜单不在 Canvas 矩形中,则其相对于控件的位置相反。

     例如:在默认下方不足以显示的情况下,该控件下方显示的列表将会显示在其上方。

     但这种逻辑有一定的局限性:下拉模板的大小不得超过 Canvas 大小减去下拉控件的大小的一半,

     否则,如果将下拉控件放在 Canvas 的中间,则在任一位置上可能都没有列表显示的空间。

    实例运用

     运用 Dropdown 下拉列表组件,在列表中选择并改变场景中 Cube 的颜色。代码如下:

     1     public Dropdown dropdown;
     2     public GameObject Cube;
     3     public Image image;
     4 
     5     void Update()
     6     {
     7         int values = dropdown.value;
     8         ChangeColor(values);
     9     }
    10 
    11     public void ChangeColor(int value)
    12     {
    13         switch (value)
    14         {
    15             case 0:
    16                 Cube.GetComponent<MeshRenderer>().material.color = Color.blue;
    17                 image.color = Color.blue;
    18                 break;
    19             case 1:
    20                 Cube.GetComponent<MeshRenderer>().material.color = Color.green;
    21                 image.color = Color.green;
    22                 break;
    23             case 2:
    24                 Cube.GetComponent<MeshRenderer>().material.color = Color.red;
    25                 image.color = Color.red;
    26                 break;
    27             case 3:
    28                 Cube.GetComponent<MeshRenderer>().material.color = Color.white;
    29                 image.color = Color.white;
    30                 break;
    31             case 4:
    32                 Cube.GetComponent<MeshRenderer>().material.color = Color.yellow;
    33                 image.color = Color.yellow;
    34                 break;
    35         }
    36     }

     实际效果:

     

    *** |  以上内容仅为学习参考、学习笔记使用  | ***

  • 相关阅读:
    node path.resolve()和path.join()
    完美替代postman的接口测试工具—— apipost
    localforage indexedDB如何使用索引
    ApiPost V5 升级指南
    Chrome升级到91版本以上后Cookies SameSite问题,IdentityServer4登录不上问题?
    React直接调用Bootstrap的方案
    Golang的module模式下项目组织结构
    Linux部署SpringBoot项目jar包,输出日志到文件并追踪
    mybatis plus 查询语句
    springboot 引入AOP 切面 @Aspect 注解使用
  • 原文地址:https://www.cnblogs.com/ChenZiRong1999/p/13265467.html
Copyright © 2011-2022 走看看