UG4L9-15——下拉框

本章代码关键字

1
2
3
4
5
6
7
8
9
GComboBox                    //下拉框控件类
gObject.asComboBox            //将元件类对象as成下拉框控件类对象的属性
gComboBox.items             //下拉框的选项数组属性，赋值可以修改选项
gComboBox.icons             //下拉框的选项图标数组属性，赋值可以修改选项的图标
gComboBox.values            //下拉框的选项的值属性，赋值可以修改选项的值
gComboBox.selectedIndex        //下拉框当前选中项的索引
gComboBox.value                //下拉框当前选中项的值
GRoot.inst.HidePopup()        //关闭下拉框的下拉列表
gComboBox.onChanged.Add()    //添加监听下拉框选中项改变的函数

下拉框控件

参考各种软件菜单栏中的下拉控件，如：

​image​

创建下拉框控件

  1. 自动创建—— 菜单栏—> 资源—> 新建下拉框（或者快捷按钮）

    ​image​

  2. 手动创建—— 创建组件—> 拓展选择为下拉框，创建后，需要关联弹出组件

    1. 弹出组件的构成：背景图（与list宽高关联）+ 垂直滚动列表（命名为list并关联好项目资源）

      ​imageimage​

    2. button 下拉框需要一个按钮控制器（下拉框点击展开时，保持在down页，收回时保持在up也或over页）

      ​image​

    3. title 可以是普通文本、富文本、标签、按钮

    4. icon 可以是装载器、标签、按钮

下拉框控件属性

​image​

  • 可见项目数：决定了下拉框可见的项目数量
  • 弹出方向：决定列表的弹出方向
  • 选择控制：修改下拉框选项时可以修改控制器的索引
  • 编辑列表项目：可以为下拉列表添加项目

在Unity中的使用

  1. 获取下拉框

    1
    GComboBox gComboBox = view.GetChild("comboBoxTest").asComboBox;

  2. 常用API

    1. 代码初始化内容，或者获取当前下拉框的各个选项

      通过代码，使用字符串数组赋值，可以改变下拉框选项，也可以通过该属性使用索引获取某个选项

      1
      2
      3
      gComboBox.items = new string[] { "选项1", "选项2", "选项3", "选项4" };
      gComboBox.icons = new string[] { "ui://teach/quanlity_3", "ui://teach/quanlity_3", "ui://teach/quanlity_3", "ui://teach/quanlity_3" };
      gComboBox.values = new string[] { "一", "二", "三", "四" };

      显示效果：

      ​image​

    2. 当前选中的索引和值，或者设置选项项

      • 获取当前选中项的索引，或者通过索引去修改选中项

        通过索引我们可以通过获取gComboBox.items​、gComboBox.icons​、gComboBox.values​来获取选中项内容，图标，值
        也可以通过为索引赋值来设置选中项

        1
        2
        print(gComboBox.selectedIndex);
        gComboBox.selectedIndex = 2;

      • 快速获取值，或者通过某个选项对应的值来修改选项

        获取下拉框当前项的值，也可以通过value​属性，赋某个选项对应的值来修改当前选中项

        1
        2
        print(gComboBox.value);
        gComboBox.value = "四";

    3. 代码关闭弹出项

      当我们想要用代码关闭下拉列表时，就可以使用该方法

      1
      GRoot.inst.HidePopup();

  3. 事件相关

    • 当下拉框的选中项改变时会执行的监听函数

      1
      2
      3
      4
      gComboBox.onChanged.Add(() =>
      {
          print("下拉框选择改变：" + gComboBox.selectedIndex + "_" + gComboBox.items[gComboBox.selectedIndex]);
      });

      输出内容：image​

‍