Pohon Visual

Blok bangunan paling dasar di UI(User Interface) Memungkinkan pengguna untuk berinteraksi dengan aplikasi Anda. Unity saat ini mendukung tiga sistem UI. More info
Lihat di Glossary Toolkit adalah elemen visual. Elemen visual dipesan ke pohon hirarki dengan hubungan anak-anak. Diagram di bawah ini menampilkan contoh yang disederhanakan dari pohon hirarki, dan hasilnya di UI Toolkit.

Elemen visual

Kelas VisualElement adalah dasar untuk semua node di pohon visual. Kelas dasar VisualElement mengandung sifat seperti gaya, data tata letak, dan pemegang acara. Elemen visual dapat memiliki elemen visual anak-anak dan keturunan. Sebagai contoh, dalam diagram di atas, elemen visual Box pertama memiliki tiga elemen visual anak: Label, Checkbox, dan Slider.

Anda dapat menyesuaikan tampilan elemen visual melalui stylesheet. Anda juga dapat menggunakan callback acara untuk memodifikasi perilaku elemen visual.

VisualElement derives menjadi subklas yang menentukan perilaku dan fungsi tambahan, seperti kontrol. UI Toolkit termasuk berbagai kontrol built-in dengan perilaku khusus. Misalnya, item berikut tersedia sebagai kontrol bawaan:

• Buttons
• Toggles
• Kolom input teks

Anda juga dapat menggabungkan elemen visual bersama-sama dan memodifikasi perilaku mereka untuk membuat kontrol kustom. Untuk daftar kontrol bawaan, lihat halaman Referensi kontrol.

Panels

Panel adalah objek induk dari pohon visual. Pohon visual harus terhubung ke panel untuk elemen visual di dalam pohon untuk render. Semua panel milik jendela editor atau runtime UIDocument. Panel juga menangani kontrol fokus dan pengiriman acara untuk pohon visual.

Setiap elemen di pohon visual memegang referensi langsung ke panel yang memegang pohon visual. Untuk memverifikasi koneksi VisualElement ke panel, Anda dapat menguji properti panel dari elemen ini. Ketika elemen visual tidak terhubung, tes kembali null.

Menggambar pesanan

Perintah menggambar elemen di pohon visual mengikuti pencarian mendalam pertama. Elemen visual anak muncul di atas elemen induk. UI Toolkit menarik elemen anak dalam urutan daftar saudara. Pesanan penarikan adalah berikut:

1. Elemen visual teratas.
2. Elemen anak pertama dari elemen visual itu.
3. Elemen anak elemen keturunan.

Diagram di bawah ini menunjukkan urutan menggambar contoh sebelumnya:

Untuk mengubah urutan gambar elemen visual, gunakan fungsi berikut:

• BringToFront()
• SendToBack()

Untuk menonaktifkan elemen visual, gunakan berikut:

• PlaceBehind()
• PlaceInFront()

Koordinat dan sistem posisi

UI Toolkit menggunakan sistem tata letak yang kuat yang secara otomatis menghitung posisi dan ukuran elemen individu berdasarkan parameter tata letak dalam sifat gaya mereka. Ini didasarkan pada Flexbox, model tata letak web. Untuk informasi lebih lanjut, lihat Mesin Layout.

UI Toolkit memiliki dua jenis koordinat:

• Relative: Mengkoordinasikan relatif terhadap posisi dihitung elemen. Sistem tata letak menghitung posisi elemen, kemudian menambahkan koordinat sebagai offset. Elemen anak dapat mempengaruhi posisi dan ukuran elemen induk, sebagai mesin tata letak membawa mereka ke akun ketika menghitung posisi elemen.
• Absolute: Mengkoordinasikan relatif terhadap elemen induk. Ini menghindari perhitungan tata letak otomatis dan langsung mengatur posisi elemen. Elemen anak di bawah orang tua yang sama tidak berpengaruh pada posisi elemen. Demikian pula, elemen tidak mempengaruhi posisi dan ukuran sibling lain di bawah induk yang sama.

Setiap elemen visual menentukan sistem koordinat yang digunakan untuk menghitung posisinya. Anda dapat mengkonfigurasi sistem koordinat yang digunakan dalam lembaran gaya elemen.

Kode berikut menunjukkan cara mengatur ruang koordinat dan posisi elemen visual melalui kode:

    var newElement = new VisualElement();
    newElement.style.position = Position.Relative;
    newElement.style.left = 15;
    newElement.style.top = 35;

Asal dari elemen adalah sudut kiri atas.

Sistem tata letak menghitung VisualElement.layoutproperty (tipe Rect) untuk setiap elemen, yang mencakup posisi akhir elemen. Ini mengambil posisi relatif atau absolut elemen ke akun.

layout.position dinyatakan dalam poin, relatif terhadap ruang koordinat orang tuanya.

Setiap VisualElement memiliki properti transformasi (ITransform) yang dapat Anda gunakan untuk menambahkan offset lokal tambahan ke posisi dan rotasi elemen. Offset tidak diwakili dalam properti tata letak yang dihitung. Secara default, transform adalah identitas.

Gunakan properti worldBound untuk mengambil koordinasi ruang jendela akhir dari VisualElement, memperhitungkan posisi tata letak dan transformasi. Posisi ini termasuk ketinggian header jendela.

Example

Sampel kode berikut menunjukkan perbedaan antara posisi relatif dan absolut. Menggunakan sistem tata letak otomatis untuk menambahkan kotak ke jendela dan menghitung posisi mereka. Satu kotak menunjukkan offset relatif 25 px, sementara kotak lain menunjukkan posisi absolut 25 px, 25 px.

Untuk melihat contoh ini dalam tindakan, lakukan berikut:

1. Di bawah Assets > Scripts > Editor, buat skrip C# yang disebut PositioningTestWindow.
2. Salin kode di bawah ke dalam skrip C#.
3. Dari Editor Toolbar, pilih Window > UI Toolkit > Positioning Test Window

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class PositioningTestWindow : EditorWindow
{
    [MenuItem("Window/UI Toolkit/Positioning Test Window")]
    public static void ShowExample()
    {
        var wnd = GetWindow<PositioningTestWindow>();
        wnd.titleContent = new GUIContent("Positioning Test Window");
    }

    public void CreateGUI()
    {
        for (int i = 0; i < 2; i++)
        {
            var temp = new VisualElement();
            temp.style.width = 70;
            temp.style.height = 70;
            temp.style.marginBottom = 2;
            temp.style.backgroundColor = Color.gray;
            rootVisualElement.Add(temp);
        }

        // Relative positioning
        var relative = new Label("Relative\nPos\n25, 0");
        relative.style.width = 70;
        relative.style.height = 70;
        relative.style.left = 25;
        relative.style.marginBottom = 2;
        relative.style.backgroundColor = new Color(0.2165094f, 0, 0.254717f);
        rootVisualElement.Add(relative);

        for (int i = 0; i < 2; i++)
        {
            var temp = new VisualElement();
            temp.style.width = 70;
            temp.style.height = 70;
            temp.style.marginBottom = 2;
            temp.style.backgroundColor = Color.gray;
            rootVisualElement.Add(temp);
        }

        // Absolute positioning
        var absolutePositionElement = new Label("Absolute\nPos\n25, 25");
        absolutePositionElement.style.position = Position.Absolute;
        absolutePositionElement.style.top = 25;
        absolutePositionElement.style.left = 25;
        absolutePositionElement.style.width = 70;
        absolutePositionElement.style.height = 70;
        absolutePositionElement.style.backgroundColor = Color.black;
        rootVisualElement.Add(absolutePositionElement);
    }
}

Transformasi antara sistem koordinat

Sifat VisualElement.layout.position dan VisualElement.transform menentukan cara mengubah antara sistem koordinat lokal dan sistem koordinat induk.

Kelas statis VisualElementExtensions menyediakan metode ekstensi berikut yang mengubah poin dan persegi panjang antara sistem koordinat:

• WorldToLocal mengubah Vector2 atau Rect dari ruang Panel ke referensi dalam elemen.
• LocalToWorld mengubah Vector2 atau Rect untuk referensi ruang Panel.
• ChangeCoordinatesTo mengubah Vector2 atau Rect dari ruang lokal satu elemen ke ruang lokal yang lain.