Sử dụng menu thả xuống Unity UI

Trang Cập Nhật : Thứ Tư, 27 tháng 12, 2023

Ngày tạo trang : Thứ Năm, 24 tháng 3, 2022

Môi trường xác minh

Windows

cửa sổ 11

Biên tập viên Unity

2020.3.25f1

Điều kiện tiên quyết cho mẹo này

Các cài đặt sau đây đã được thực hiện trước như một điều kiện tiên quyết để giải thích các mẹo này.

Lúc đầu

Danh sách thả xuống có thể được sử dụng để cho phép người dùng chọn một trong một số lựa chọn. Ngay cả khi có nhiều mục để lựa chọn, chỉ các mục đã chọn mới được hiển thị trên màn hình, điều này rất hữu ích cho việc tiết kiệm dung lượng và giúp người dùng dễ dàng hiểu những gì họ đang chọn.

Định vị menu thả xuống

Chọn một "menu thả xuống" từ hệ thống phân cấp để thêm nó vào chế độ xem.

Điều chỉnh vị trí của menu thả xuống theo ý của bạn. Nếu kích thước có vẻ nhỏ, hãy kéo khung để làm cho nó lớn hơn.

Để Dropdown đặt kích cỡ của văn bản bên trong, hãy chọn Nó ở bên trong Label thay vì .

Khi bạn chạy nó, bạn có thể thấy menu thả xuống đang hoạt động. Ở trạng thái ban đầu, có ba mục để lựa chọn, vì vậy bạn có thể chuyển đổi lựa chọn. Tuy nhiên, nếu bạn thay đổi kích thước của menu thả xuống hoặc Label kích thước phông chữ của , nó sẽ không khớp với kích thước của văn bản được hiển thị trong menu thả xuống.

Điều chỉnh kích thước của các mục thả xuống

Nếu bạn chưa thay đổi kích thước của đối tượng hoặc kích thước phông chữ khi bạn đặt menu thả xuống, bạn không cần phải làm điều này, nhưng nếu bạn làm vậy, bạn cũng sẽ cần đặt mục thả xuống.

Đối tượng thả xuống chứa định nghĩa về cách hiển thị mục đã chọn khi nó được hiển thị. Dropdown Template là trường hợp. Nếu bạn không đặt một vài cài đặt, nó sẽ trông không đẹp.

Trước hết, giả định rằng mỗi tham số của menu thả xuống được đặt được đặt như sau. Nếu bạn đang cài đặt với các tham số khác nhau, hãy thay thế các số và đọc chúng. Trong ví dụ này, các tham số khác cũng được đặt, nhưng chúng bị bỏ qua vì chúng không liên quan đến các mục thả xuống.

Giá trị	tên tham số	đối tượng
Danh sách thả xuống	chiều cao	72
Danh sách thả xuống > nhãn	Cỡ chữ	40

Kích thước phông chữ mục

Đầu tiên, thay đổi kích thước phông chữ của mục. Chọn > > >Dropdown Template Content > > Viewport Item Item Labelcho đối tượng. Chỉ định kích thước phông chữ là 40, giống như Nhãn. Nếu bạn muốn hiển thị nhiều lựa chọn hơn, bạn có thể làm cho chúng nhỏ hơn một chút.

Ngay cả khi bạn tăng kích thước phông chữ, kích thước hiển thị của một mục không thay đổi, vì vậy bạn có thể không nhìn thấy bất cứ điều gì ngay cả khi bạn chạy nó.

Kích thước mặt hàng

Tiếp theo, đặt kích thước của một mục. Các đối tượng để chọn là > > > >Dropdown . Content Item Template Viewport Đặt chiều cao thành 72. Nếu bạn muốn hiển thị nhiều lựa chọn hơn, bạn có thể làm cho chúng nhỏ hơn một chút.

Điều này làm cho các yếu tố của mục hiển thị, nhưng vì một số lý do, trên cùng và dưới cùng của mục đã chọn bị cắt một chút bất kể cuộn.

Để khắc phục điều này, hãy đặt chiều cao của > > >Dropdown Viewport ContentTemplate thành Item 72, giống như . Điều này sẽ cho phép bạn xem các mục trên cùng và dưới cùng đúng cách.

Nhân tiện, trong cài đặt thả xuống mặc định , chiều cao của được đặt Item lớn hơn một chút so Content với . Kết quả là, một lề nhẹ được hiển thị phía trên và bên dưới mục đã chọn, làm giảm cảm giác áp lực.

Kích thước dấu kiểm

Kích thước của dấu kiểm cũng nhỏ, vì vậy tôi sẽ sửa nó. Đối tượng mục tiêu là "Dropdown> > Viewport > > > Template Content Item Item Checkmark".

Nếu bạn thay đổi chiều rộng và chiều cao, dấu kiểm cũng sẽ tăng lên, vì vậy hãy đặt nó thành 72 ở đây.

Khi tôi chạy nó, dấu kiểm lớn hơn, nhưng vị trí sai, vì vậy tôi cũng sẽ sửa lỗi này.

Item Checkmark Đầu tiên, đặt trục X thành 0, sau đó đặt vị trí X thành 0. Điều này cho phép bạn đặt nó ở một nơi tốt bất kể kích thước của séc hoặc nhãn.

Ngoài ra, vì nó chồng lên nhãn, Item Lebel hãy chọn để làm cho vị trí bên trái giống với kích thước của dấu kiểm.

Kích thước thanh cuộn

Thanh cuộn cũng nhỏ và khó nhấp, vì vậy hãy làm cho nó lớn hơn. Mọi người đều đặc biệt về kích thước, vì vậy nó không phải là thứ có thể xác định được. Trong trường hợp này, chúng tôi đặt 48, bằng 2/3 chiều cao của menu thả xuống.

Đối tượng được chọn được đặt thành giá trị chiều rộng trong >Dropdown Template > Scrollbar.

Kích thước biểu tượng thả xuống

Nó không ở phía mục, nhưng biểu tượng thả xuống vẫn còn nhỏ, vì vậy tôi sẽ thay đổi nó. Đối tượng cần chọn là >Dropdown Arrow.

Đối với kích thước của biểu tượng, bạn có thể thay đổi kích thước bằng cách đặt chiều rộng và chiều cao. Ở đây, chúng tôi đặt nó thành 72, giống như chiều cao của menu thả xuống.

Nếu đúng như vậy, vị trí sẽ bị tắt, vì vậy hãy đặt trục X thành 1 và vị trí X thành 0. Điều này cho phép bạn hiển thị biểu tượng ở một vị trí đẹp bất kể kích thước.

Số lượng mục thả xuống được hiển thị

Bằng cách tăng kích thước của mục, có ít mục được chọn hơn có thể được hiển thị cùng một lúc, vì vậy chúng tôi sẽ cố gắng tăng điều này. Cài đặt này được chỉ định trong >Dropdown Template. Vì số lượng mục được hiển thị không được chỉ định bởi số lượng mục, nhưng kích thước được đặt theo chiều cao, giá trị được chỉ định là "chiều cao × số lượng mục". Ở đây, chúng tôi muốn hiển thị khoảng 10 miếng, vì vậy 72 x 10 = 720 hãy đặt .

Khu vực trưng bày được mở rộng, nhưng hiện tại chỉ có 3 mục, vì vậy chỉ có 3 mục được hiển thị.

Đặt lựa chọn

Theo mặc định, ba mục của "Tùy chọn A ~ Tùy chọn C" được đặt. Các mục này nằm Dropdown trong thành phần của đối tượng Dropdown .

Nếu bạn cuộn xuống trình kiểm tra, bạn sẽ tìm thấy mục "Tùy chọn", nơi bạn có thể tự do thay đổi tên hoặc thêm hoặc xóa.

Đặt lựa chọn ban đầu

Việc lựa chọn các mặt hàng được xác định bởi số. Dropdown Dropdown Bạn có thể chỉ định lựa chọn ban đầu trong giá trị của thành phần của đối tượng. Đánh số mục bắt đầu từ 0, vì vậy hãy đặt 3 nếu bạn muốn mục thứ tư là lựa chọn ban đầu.

Thực hiện xử lý khi chọn một mục

Bạn có thể muốn làm điều gì đó khi chọn một mục trong menu thả xuống. Điều này có thể được thực hiện theo cách tương tự như khi một nút được nhấp.

Đối tượng có một danh sách thả xuống và một văn bản tại một thời điểm. Sau khi chọn một mục trong menu thả xuống, hãy đảm bảo rằng nội dung được hiển thị trong một đối tượng văn bản ở bên phải. Nó không quan trọng bất cứ điều gì khác ngoài vị trí của các đối tượng, vì vậy bạn có thể thiết lập nó theo cách bạn muốn.

Đầu tiên, tạo một kịch bản trong dự án của bạn. DropdownItemSelector Trong trường hợp này, nó được đặt tên là .

Mở tập lệnh và thêm mã vào mục sau:

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}";
  }
}

Sau khi bạn lưu tập lệnh, hãy đính kèm nó vào đối EventSystem tượng. Như đã giải thích trong các nút Mẹo cho, mẹo này luôn đính kèm các EventSystem tập lệnh trừ khi có lý do cụ thể để làm như vậy.

Đính kèm một đối tượng thả xuống để lấy giá trị từ và một đối tượng văn bản để đặt giá trị.

Tiếp theo, chọn đối tượng thả xuống mà bạn muốn làm việc và thêm "On Value Change (Int32)" vào Dropdown thành phần Inspector.

Ở mục dưới bên trái, chúng ta cần đặt đối tượng mà tập lệnh sẽ được vận hành được đính kèm, vì vậy chúng ta đặt nó ở đây EventSystem .

OnSelectionChanged Chọn từ Không có chức năng DropdownItemSelector .

Hãy thử chạy nó để xem nó có hoạt động bình thường không.

Tự động thêm các mục

Bạn có thể chỉ định vật phẩm nào có thể được chọn trong trình chỉnh sửa, nhưng có thể đôi khi trạng thái thay đổi trong trò chơi và bạn muốn thay đổi các mục bạn chọn. Trong trường hợp này, bạn sẽ thay đổi mục đã chọn trong chương trình.

Đối tượng sắp xếp "thả xuống" và "nút x2" như hình dưới đây. Bạn có thể tự do thiết lập các tham số khác ngoài căn chỉnh.

Tạo một kịch bản và đặt tên cho DropdownDynamic nó . Mã sẽ trông như thế này:

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 Có quyền kiểm soát các mục sẽ được chọn, vì vậy Add bạn có thể tự động điều khiển các mục bằng cách thực hiện hoặc Remove trên chúng.

EventSystem Đính kèm tập lệnh và đối tượng vào .

Gán một phương thức cho sự kiện nhấp chuột của các nút thêm và xóa tương ứng.

Khi bạn hoàn tất, hãy chạy nó. Nếu mục bị xóa trong trình chỉnh sửa, mục sẽ không được hiển thị ngay cả khi bạn nhấp vào nó.

Nếu bạn nhấp vào nút thêm bốn lần, bạn có thể thấy rằng bốn mục đã được thêm vào.

Nếu bạn nhấp vào nút xóa hai lần, bạn có thể thấy rằng hai mục đã bị xóa.

Sử dụng các nút trong giao diện người dùng Unity

Cuộn để mục đã chọn ở đầu danh sách các mục thả xuống