使用 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。如果要顯示更多選擇，可以將它們縮小一點。

這使得專案的元素可見，但由於某種原因，無論滾動如何，所選項目的頂部和底部都會被稍微切斷。

若要解決此問題，請將 > > >DropdownTemplate Viewport ContentItem 的高度設置為72，這與相同。這將使您能夠正確查看頂部和底部專案。

順便說一句，在預設的下拉設置中，設置 Item 的高度略大於 Content 。因此，所選專案的上方和下方會顯示輕微的邊距，從而減少壓力感。

複選標記大小

複選標記的大小也很小，所以我會修復它。目標物件是“Dropdown> > Viewport > > > ItemItem CheckmarkTemplate 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中使用按鈕

滾動以使所選項目位於下拉專案清單的頂部