使用 Unity UI 下拉列表

更新页 : 2023年12月27日星期三

页面创建日期 : 2022年3月24日星期四

验证环境

窗户

窗户11

Unity 编辑器

2020.3.25f1

此提示的先决条件

作为解释这些提示的先决条件，已预先进行了以下设置。

起先

下拉列表可用于允许用户选择多个选项之一。即使有很多项目可供选择，屏幕上也只显示所选项目，这对于节省空间很有用，并使用户更容易理解他们正在选择的内容。

放置下拉列表

从层次结构中选择一个“下拉列表”以将其添加到视图中。

自行决定调整下拉列表的位置。如果尺寸看起来很小，请拖动框架以使其变大。

若要 Dropdown 设置文本内部的大小，请选择“它位于内部”而不是“内部 Label ”。

运行它时，您可以看到下拉列表的运行情况。在初始状态下，有三个项目可供选择，因此您可以切换选择。但是，如果更改下拉列表的大小或 Label 的字体大小，它将与下拉列表中显示的文本大小不匹配。

调整下拉项的大小

如果在放置下拉列表时未更改对象的大小或字体大小，则无需执行此操作，但如果这样做，则还需要设置下拉列表项。

下拉对象包含所选项目在显示时如何显示的定义。 Dropdown Template 情况就是这样。如果你不设置一些设置，它看起来就不漂亮。

首先，假设放置下拉列表的每个参数设置如下。如果您使用不同的参数进行设置，请替换数字并读取它们。在此示例中，还设置了其他参数，但省略了这些参数，因为它们与下拉项无关。

对象	参数名称	值
下拉列表	高度	72
下拉列表>标签	字体大小	40

项目字体大小

首先，更改项目的字体大小。为对象选择> > >Dropdown Template Content > > Viewport Item Item Label。指定字体大小为 40，与 Label 相同。如果要显示更多选择，可以将它们缩小一点。

即使增加字体大小，一个项目的显示大小也不会改变，因此即使运行它也可能看不到任何内容。

项目尺寸

接下来，设置一个项目的大小。要选择的对象是 > >Dropdown Template Viewport > > 。 Content Item 将高度设置为 72。如果要显示更多选择，可以将它们缩小一点。

这使得项目的元素可见，但由于某种原因，无论滚动如何，所选项目的顶部和底部都会被稍微切断。

若要解决此问题，请将 > > >Dropdown Viewport ContentTemplate Item 的高度设置为 72，这与相同。这将使您能够正确查看顶部和底部项目。

顺便说一句，在默认的下拉设置中，设置 Item 的高度略大于 Content 。因此，所选项目的上方和下方会显示轻微的边距，从而减少压力感。

复选标记大小

复选标记的大小也很小，所以我会修复它。目标对象是“Dropdown> > Viewport > > >Item CheckmarkTemplate Item Content”。

如果更改宽度和高度，复选标记也会增加，因此请在此处将其设置为 72。

当我运行它时，复选标记更大，但位置错误，所以我也会解决这个问题。

Item Checkmark首先，将枢轴 X 设置为 0，然后将位置 X 也设置为 0。这使您可以将其放置在一个好的位置，而不管支票或标签的大小如何。

此外，由于它与标签重叠， Item Lebel 因此选择使左侧位置与复选标记的大小相同。

滚动条大小

滚动条也很小，很难点击，所以要把它放大一些。每个人都对大小很讲究，所以这不是可以确定的。在本例中，我们设置 48，即下拉列表高度的 2/3。

要选择的对象将设置为宽度值（以 >Dropdown Template > Scrollbar为单位）。

下拉图标大小

它不在项目端，但下拉图标仍然很小，所以我会更改它。要选择的对象是 >Dropdown Arrow。

至于图标的大小，您可以通过设置宽度和高度来更改大小。在这里，我们将其设置为 72，这与下拉列表的高度相同。

如果是这种情况，则位置将关闭，因此将枢轴 X 设置为 1，将位置 X 设置为 0。这使您可以在一个不错的位置显示图标，而不管大小如何。

显示的下拉项数

通过增加项目的大小，一次可以显示的选定项目更少，因此我们将尝试增加它。此设置在 >Dropdown Template中指定。由于要显示的项目数不是由项目数指定的，而是按高度设置大小的，因此指定的值为“项目数×高度”。在这里，我们要展示大约 10 件，所以 72 x 10 = 720 设置 .

显示区域扩大了，但目前只有 3 个项目，因此只显示 3 个项目。

设置选择

默认情况下，设置“选项 A ~ 选项 C”的三个项目。这些项目位于 Dropdown 对象 Dropdown 的组件中。

如果向下滚动检查器，您将找到“选项”项，您可以在其中自由更改名称或添加或删除。

设置初始选择

项目的选择由数字决定。 Dropdown Dropdown 您可以在对象组件的值中指定初始选择。项目编号从 0 开始，因此，如果您希望将第四个编号作为初始选择，请设置 3。

选择项目时执行处理

当您在下拉列表中选择一个项目时，您可能希望执行某些操作。这可以通过与单击按钮时相同的方式实现。

该对象具有下拉列表和文本，一次一个。在下拉列表中选择项目后，请确保内容显示在右侧的文本对象中。除了对象的位置之外，其他任何事情都无关紧要，因此您可以根据需要进行设置。

首先，在项目中创建一个脚本。 DropdownItemSelector 在本例中，它被命名为。

打开脚本并将代码添加到以下内容中：

using UnityEngine;
using UnityEngine.UI;

public class DropdownItemSelector : MonoBehaviour
{
  /// <summary>ドロップダウンで選択したアイテムの内容を表示するテキストオブジェクト。</summary>
  [SerializeField] Text TextValueSetter;

  /// <summary>値を取得するドロップダウンオブジェクト。</summary>
  [SerializeField] Dropdown Dropdown;

  /// <summary>ドロップダウンでアイテムを選択したときに呼ばれます。</summary>
  public void OnSelectionChanged()
  {
    // ドロップダウンの選択値と選択しているアイテムのテキストを表示
    TextValueSetter.text = $"value={Dropdown.value}, options.text={Dropdown.options[Dropdown.value].text}";
  }
}

保存脚本后，将其附加到 EventSystem 对象。如按钮提示中所述，除非有特定原因，否则此提示会始终将脚本 EventSystem 附加到。

附加一个下拉对象以从中获取值，并附加一个文本对象以设置值。

接下来，选择要使用的下拉对象，并在 Inspector 组件中 Dropdown 添加“On Value Change （Int32）”。

在左下角的项中，我们需要放置要操作的脚本所附加的对象，因此我们将其设置在这里 EventSystem 。

从“无功能DropdownItemSelector”中选择。OnSelectionChanged

尝试运行它以查看它是否正常工作。

动态添加项目

您可以在编辑器中指定可以选择哪些项目，但有时状态可能会在游戏过程中发生变化，并且您想要更改所选项目。在这种情况下，您将更改在程序中选择的项目。

该对象排列“下拉列表”和“按钮 x2”，如下所示。您可以自由设置对齐以外的参数。

创建一个脚本并将其命名为 DropdownDynamic 。代码应如下所示：

using UnityEngine;
using UnityEngine.UI;

public class DropdownDynamic : MonoBehaviour
{
  /// <summary>アイテム処理を行うドロップダウンオブジェクト。</summary>
  [SerializeField] Dropdown Dropdown;

  /// <summary>追加ボタンをクリックしたとき。</summary>
  public void OnClickAdd()
  {
    // アイテムを追加します
    Dropdown.options.Add(new Dropdown.OptionData { text = $"Item {Dropdown.options.Count}" });

    // ドロップダウンの内容を更新します
    Dropdown.RefreshShownValue();
  }

  /// <summary>削除ボタンをクリックしたとき。</summary>
  public void OnClickRemove()
  {
    // アイテムを削除します
    if (Dropdown.options.Count >= 1)
		{
      Dropdown.options.RemoveAt(Dropdown.options.Count - 1);
    }

    // ドロップダウンの内容を更新します
    Dropdown.RefreshShownValue();
  }
}

Dropdown.options 可以控制要选择的项目，因此 Add 您可以通过对项目执行操作或对项目执行操作 Remove 来动态控制这些项目。

EventSystem 将脚本和对象附加到。

分别为添加按钮和删除按钮的单击事件分配一个方法。

完成后，运行它。如果在编辑器中擦除该项目，则即使单击该项目，也不会显示该项目。

如果单击添加按钮四次，则可以看到已添加四个项目。

如果单击删除按钮两次，则可以看到已删除两个项目。

在Unity UI中使用按钮

滚动以使所选项目位于下拉项目列表的顶部