Menggunakan juntai bawah UI Perpaduan

Laman dikemaskini : Rabu, 27 Disember 2023

Tarikh penciptaan halaman : Khamis, 24 Mac 2022

Persekitaran pengesahan

Windows

Windows 11

Penyunting Perpaduan

2020.3.25f1

Prasyarat untuk petua ini

Tetapan berikut telah dibuat terlebih dahulu sebagai prasyarat untuk penjelasan petua ini.

Pada mulanya

Juntai bawah boleh digunakan untuk membolehkan pengguna memilih salah satu daripada beberapa pilihan. Walaupun terdapat banyak item untuk dipilih, hanya item yang dipilih dipaparkan pada skrin, yang berguna untuk menjimatkan ruang dan memudahkan pengguna memahami apa yang mereka pilih.

Letakkan juntai bawah

Pilih "juntai bawah" daripada hierarki untuk menambahkannya pada pandangan.

Laraskan kedudukan drop-down mengikut budi bicara anda. Jika saiznya kelihatan kecil, seret bingkai untuk menjadikannya lebih besar.

Untuk Dropdown mengesetkan saiz teks di dalam, pilih Ia berada di dalam Label dan bukannya .

Apabila anda menjalankannya, anda boleh melihat juntai bawah dalam tindakan. Dalam keadaan awal, terdapat tiga item untuk dipilih, jadi anda boleh menukar pilihan. Walau bagaimanapun, jika anda menukar saiz juntai bawah atau Label saiz fon , ia tidak akan sepadan dengan saiz teks yang dipaparkan dalam juntai bawah.

Laraskan saiz item lungsur

Jika anda belum mengubah saiz objek atau saiz fon apabila anda meletakkan juntai bawah, anda tidak perlu melakukan ini, tetapi jika anda melakukannya, anda juga perlu mengesetkan item juntai bawah.

Objek juntai bawah mengandungi definisi cara item yang dipilih dipaparkan apabila ia dipaparkan. Dropdown Template adakah kes itu. Jika anda tidak mengesetkan beberapa tetapan, ia tidak akan kelihatan cantik.

Pertama sekali, diandaikan bahawa setiap parameter juntai bawah diletakkan ditetapkan seperti berikut. Jika anda menetapkan dengan parameter yang berbeza, gantikan nombor dan bacanya. Dalam contoh ini, parameter lain juga ditetapkan, tetapi ia ditinggalkan kerana ia tidak berkaitan dengan item drop-down.

Nilai	Nama Parameter	Objek
Dropdown	Ketinggian	72
Label > Juntai Bawah	Saiz fon	40

Saiz fon item

Mula-mula, ubah saiz fon item. Pilih > > >Dropdown Template Content > > Viewport Item Item Labeluntuk objek. Tentukan saiz fon 40, yang sama dengan Label. Jika anda ingin menunjukkan lebih banyak pilihan, anda boleh menjadikannya lebih kecil.

Walaupun anda meningkatkan saiz fon, saiz paparan satu item tidak berubah, jadi anda mungkin tidak dapat melihat apa-apa walaupun anda menjalankannya.

Saiz Item

Seterusnya, tetapkan saiz satu item. Objek yang dipilih ialah > > > >Dropdown . Content Item Template Viewport Setkan ketinggian kepada 72. Jika anda ingin menunjukkan lebih banyak pilihan, anda boleh menjadikannya lebih kecil.

Ini menjadikan unsur item kelihatan, tetapi atas sebab tertentu, bahagian atas dan bawah item yang dipilih dipotong sedikit tanpa mengira skrol.

Untuk membetulkannya, tetapkan ketinggian > > >Dropdown Viewport ContentTemplate hingga Item 72, yang sama dengan . Ini akan membolehkan anda melihat item atas dan bawah dengan betul.

Dengan cara ini, dalam tetapan Item juntai bawah lalai , ketinggian ditetapkan sedikit lebih besar daripada Content . Akibatnya, margin sedikit dipaparkan di atas dan di bawah item yang dipilih, mengurangkan rasa tekanan.

Saiz tanda semak

Saiz tanda semak juga kecil, jadi saya akan membetulkannya. Objek sasaran ialah "> > Viewport > > > Item CheckmarkContent Item Template ".Dropdown

Jika anda menukar lebar dan ketinggian, tanda semak juga akan meningkat, jadi tetapkannya kepada 72 di sini.

Apabila saya menjalankannya, tanda semak lebih besar, tetapi kedudukannya salah, jadi saya juga akan membetulkannya.

Item Checkmark Mula-mula, setkan pangsi X kepada 0, kemudian setkan kedudukan X kepada 0 juga. Ini membolehkan anda meletakkannya di tempat yang baik tanpa mengira saiz cek atau label.

Selain itu, kerana ia bertindih dengan label, Item Lebel pilih untuk menjadikan kedudukan kiri sama dengan saiz tanda semak.

Saiz bar skrol

Bar tatal juga kecil dan sukar diklik, jadi jadikannya lebih besar. Semua orang adalah khusus tentang saiz, jadi ia bukan sesuatu yang boleh ditentukan. Dalam kes ini, kami menetapkan 48, iaitu 2/3 ketinggian penurunan.

Objek yang dipilih disetkan kepada nilai lebar dalam >Dropdown Template > Scrollbar.

Saiz ikon juntai bawah

Ia bukan di sisi item, tetapi ikon drop-down masih kecil, jadi saya akan mengubahnya. Objek yang dipilih ialah >Dropdown Arrow.

Bagi saiz ikon, anda boleh menukar saiz dengan menetapkan lebar dan ketinggian. Di sini, kami menetapkannya kepada 72, yang sama dengan ketinggian penurunan.

Jika ini berlaku, kedudukan akan dimatikan, jadi tetapkan pangsi X kepada 1 dan kedudukan X kepada 0. Ini membolehkan anda memaparkan ikon dalam kedudukan yang bagus tanpa mengira saiz.

Bilangan item juntai bawah yang dipaparkan

Dengan meningkatkan saiz item, terdapat lebih sedikit item terpilih yang boleh dipaparkan pada satu masa, jadi kami akan cuba meningkatkannya. Seting ini dinyatakan dalam >Dropdown Template. Oleh kerana bilangan item yang akan dipaparkan tidak ditentukan oleh bilangan item, tetapi saiz ditetapkan mengikut ketinggian, nilai yang ditentukan ialah "ketinggian × bilangan item". Di sini, kami mahu memaparkan kira-kira 10 keping, jadi 72 x 10 = 720 tetapkan .

Kawasan paparan diperbesarkan, tetapi pada masa ini terdapat hanya 3 item, jadi hanya 3 item dipaparkan.

Mengesetkan pilihan

Secara lalai, tiga item "Pilihan A ~ Pilihan C" ditetapkan. Item Dropdown ini terletak dalam komponen objek Dropdown .

Jika anda menatal ke bawah pemeriksa, anda akan menemui item "Pilihan", di mana anda boleh menukar nama dengan bebas atau menambah atau memadam.

Mengesetkan pilihan awal

Pemilihan item ditentukan oleh nombor. Dropdown Dropdown Anda boleh menentukan pemilihan awal dalam nilai komponen objek. Penomboran item bermula pada 0, jadi tetapkan 3 jika anda inginkan keempat menjadi pilihan awal.

Menjalankan pemprosesan apabila memilih item

Anda mungkin mahu melakukan sesuatu apabila anda memilih item dalam juntai bawah. Ini boleh dilaksanakan dengan cara yang sama seperti apabila butang diklik.

Objek mempunyai juntai bawah dan teks satu demi satu. Selepas memilih item dalam juntai bawah, pastikan kandungan dipaparkan dalam objek teks di sebelah kanan. Tidak kira apa-apa selain penempatan objek, jadi anda boleh menyediakannya mengikut kehendak anda.

Mula-mula, buat skrip dalam projek anda. DropdownItemSelector Dalam kes ini, ia dinamakan .

Buka skrip dan tambah kod kepada yang berikut:

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

Selepas anda menyimpan skrip, pasangkannya pada EventSystem objek. Seperti yang dijelaskan dalam butang Petua untuk butang, petua ini secara konsisten melampirkan skrip EventSystem melainkan ada sebab tertentu untuk melakukannya.

Lampirkan objek juntai bawah untuk mendapatkan nilai daripada dan objek teks untuk mengesetkan nilai.

Seterusnya, pilih objek juntai bawah yang anda ingin bekerjasama dan tambah "Pada Perubahan Nilai (Int32)" dalam Dropdown komponen Pemeriksa.

Di bahagian bawah kiri, kita perlu meletakkan objek yang mana skrip yang akan dikendalikan dilampirkan, jadi kami menetapkannya di sini EventSystem .

Pilih daripada OnSelectionChanged Tiada Fungsi DropdownItemSelector .

Cuba jalankannya untuk melihat sama ada ia berfungsi dengan betul.

Menambah item secara dinamik

Anda boleh menentukan item mana yang boleh dipilih dalam editor, tetapi mungkin ada masa apabila keadaan berubah semasa permainan dan anda ingin menukar item yang anda pilih. Dalam kes ini, anda akan menukar item yang dipilih dalam program ini.

Objek mengatur "drop-down" dan "butang x2" seperti yang ditunjukkan di bawah. Anda boleh menetapkan parameter selain penjajaran dengan bebas.

Buat skrip dan namakannya DropdownDynamic . Kod harus kelihatan seperti ini:

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 mempunyai kawalan ke atas item yang akan dipilih, jadi Add anda boleh mengawal item secara dinamik dengan melakukan atau Remove menghidupkannya.

EventSystem Lampirkan skrip dan objek kepada .

Berikan kaedah kepada acara klik butang tambah dan padam, masing-masing.

Apabila anda selesai, jalankannya. Jika item dipadamkan dalam editor, item tidak akan dipaparkan walaupun anda mengkliknya.

Jika anda mengklik butang tambah empat kali, anda dapat melihat bahawa empat item telah ditambah.

Jika anda mengklik butang padam dua kali, anda dapat melihat bahawa dua item telah dipadamkan.

Menggunakan butang dalam UI Perpaduan

Skrol supaya item yang dipilih berada di bahagian atas senarai item juntai bawah