Elemen posisi

Posisi relatif dan flexbox

UI Toolkit menggunakan versi Yoga yang dimodifikasi, implementasi Flexbox mesin tata letak. Flexbox adalah mesin tata letak CSS umum. Beberapa sifat gaya utama adalah:

Flex > Direction (flex-direction di USS): Mengatur arah tata letak elemen mana, atau main-axis. default adalah column dan itu berarti bahwa, tanpa override lain, elemen anak di bawah elemen induk dengan properti gaya ini akan muncul di atas elemen anak kedua di kolom.
Flex > Grow (flex-grow di USS): Properti ini menentukan bagaimana elemen harus tumbuh di main-axis. Ini adalah rasio yang dibagikan dengan semua orang tua yang sama. Properti ini berguna ketika mencoba membuat elemen peregangan untuk mengambil seluruh ukuran orang tuanya (meninggalkan saudara). Untuk melakukan ini, set nilai Flex > Grow ke 1. Jika Anda memiliki dua saudara dengan set flex-grow ke 1, mereka akan setiap mengambil 50% dari ukuran induk yang tersedia sepanjang main-axis.
Align > Align Items (align-items di USS): Properti ini mendefinisikan penyelarasan elemen dalam sumbu cross-axis, atau tegak lurus ke main-axis. Sebagai contoh, jika Anda memiliki dua Tombol dalam VisualElement yang memiliki set flex-direction: column dan align-items: flex-end, dua Tombol akan digoreng ke tepi kanan kontainer. Pilihan untuk align-items memiliki nama seperti flex-start dan flex-end karena mereka tergantung pada nilai flex-direction.
Align > Justify Content (justify-content di USS): Properti ini mendefinisikan penyelarasan elemen di main-axis. Sebagai contoh, jika Anda memiliki dua Tombol dalam VisualElement yang memiliki set flex-direction: column dan align-items: flex-end, dua Tombol kerusuhan terhadap tepi bawah kontainer. Pilihan untuk justify-content dinamakan seperti flex-start dan flex-end karena mereka tergantung pada nilai flex-direction.

Jika elemen yang dipilih memiliki elemen anak, Anda dapat beralih sifat gaya yang berhubungan dengan flex di ViewportThe user’s visible area of an app on their screen.
See in Glossary menggunakan toggles di header. Gambar di bawah ini menunjukkan pilihan yang tersedia untuk elemen #menu:

Disarankan untuk mempelajari cara kerja Flexbox. Lihat Panduan Flexbox untuk informasi lebih lanjut.

Anda dapat membuat tata letak dinamis yang kompleks dengan menggunakan kombinasi properti gaya Flexbox di atas dan hirarki VisualElements. Berikut adalah contoh tata letak yang membanjiri Button di tepi kanan bawah layar:

UXML untuk tata letak ini, menunjukkan gaya inline yang ditetapkan pada setiap kontainer VisualElement, di bawah ini:

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <ui:VisualElement name="screen-is-blue" style="flex-grow: 1; justify-content: flex-end; background-color: blue;">
        <ui:VisualElement name="toolbar-is-orange" style="align-items: flex-end; background-color: orange;">
            <ui:Button text="Button" display-tooltip-when-elided="true" />
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

Wadah berwarna untuk mengungkapkan bentuk mereka. Anda dapat menggunakan kontainer VisualElement bersarang untuk mencapai tata letak dinamis tanpa resor untuk secara eksplisit mengatur posisi dan ukuran setiap elemen. Ini membuat tata letak dinamis dan secara otomatis menyesuaikan dengan ukuran perubahan kontainer yang lebih besar, seperti ukuran perubahan layar.

Posisi mutlak

UI Builder juga mengekspos sifat gaya Position. Untuk menggunakan sifat gaya Position, Anda harus mengatur tipe Position > Position ke Absolute. Mode Absolute ini membuat elemen tidak terlihat pada mesin tata letak berbasis Flexbox default. Ini seolah-olah tidak lagi mengambil ruang. Meme it Elemen posisi Absolute akan muncul di atas setiap saudara yang masih menggunakan posisi Relative.

Didiskusikan untuk menggunakan mode posisi Absolute, karena melewati mesin tata letak bawaan di UI(User Interface) Memungkinkan pengguna untuk berinteraksi dengan aplikasi Anda. Unity saat ini mendukung tiga sistem UI. More info
Lihat di Glossary Toolkit. Ini mungkin juga menyebabkan UI pemeliharaan tinggi di mana mengubah tata letak keseluruhan akan memerlukan elemen individu yang updating secara manual.

Sementara menggunakan posisi Absolute, Anda dapat menggunakan Position > Left, Top, Right, sifat gaya Bottom untuk mengimbangi dan ukuran elemen dari tepi masing-masing induknya. Ini tidak menetapkan koordinat absolut di layar tetapi set mengimbangi relatif ke elemen induk. Anda masih dapat menggunakan mode Relative untuk memposisikan elemen induk. Jika Anda mengatur offset Left dan offset Right, properti gaya Width elemen diabaikan dan lebar yang sebanding sekarang akan berasal dari rumus berikut:

element-computed-width = parent-width - left-offset - right-offset

Left, Top, Right, Bottom juga dapat ditafsirkan sebagai jangkar. Misalnya, Anda dapat menunda Button di kanan bawah layar:

UXML di bawah menampilkan gaya inline:

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <ui:Button text="Button" style="position: absolute; right: 0; bottom: 0;" />
</ui:UXML>

Dengan posisi, ada perbedaan antara memiliki set Left untuk 0 dan memiliki unset Left:

Left set to 0 berarti mengatur offset 0.
Left unset tidak mengatur offset dan memungkinkan sifat gaya lain menentukan lebar atau tinggi elemen.

Anda juga dapat memodifikasi sifat gaya offset ini langsung di Canvas melalui pegangan ukuran tambahan di setiap tepi dan sudut perbatasan pemilihan biru elemen. Penting untuk membedakan antara apa yang ditetapkan dan apa yang tidak diatur, sehingga Canvas juga mencakup “anchor” toggles sebagai kotak oranye dari setiap sisi elemen. Pegangan Canvas akan menyesuaikan sifat gaya yang ditetapkan ketika mengubah elemen secara visual, tergantung pada yang “anchors” ditetapkan. Misalnya, katakanlah Anda mengubah elemen di Canvas melalui pegangan kanannya:

Jika Anda mengatur sifat Left dan Right, pegangan akan memperbarui properti Right.
Jika Anda mengatur Left tetapi tidak Right, pegangan akan memperbarui properti Width.

Menggunakan Relatif dan Absolute

Salah satu kasus penggunaan yang sah untuk mode posisi Absolute adalah untuk overlays. Ini berguna untuk overlay beberapa UI kompleks di atas UI kompleks lainnya, seperti popup atau dropdown. Anda dapat menggunakan posisi Absolute hanya untuk wadah overlay itu sendiri, sambil terus menggunakan mode Relative di dalam overlay. Berikut adalah contoh popup berpusat sederhana:

Sitemap Dan ini UXML untuk referensi Anda: AbsolutePositionOverlayWithPopup And here’s the UXML for your reference:

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <ui:VisualElement name="complex-ui-screen">
        <ui:Toggle label="Toggle" />
        <ui:MinMaxSlider picking-mode="Ignore" label="Min/Max Slider" min-value="10" max-value="12" low-limit="-10" high-limit="40" />
        <ui:Label text="Label" />
        <ui:Button text="Button" />
        <ui:Button text="Button" />
    </ui:VisualElement>
    <ui:VisualElement name="overlay" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.71); align-items: center; justify-content: center;">
        <ui:VisualElement name="popup" style="background-color: rgba(70, 70, 70, 255);">
            <ui:Label text="Exit?" name="message" />
            <ui:Button text="Ok" name="ok-button" style="width: 108.3333px;" />
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

Contoh di atas menyoroti penggunaan posisi Absolute. Mengatur semua Position > Left, Top, Right, Bottom ke 0, sehingga posisinya adalah piksel 0 dari tepi layar. Ini membuat elemen #overlay tumpang tindih elemen kontainer #complex-ui-screen. Anda juga dapat mengatur latar belakang semi transparan ke elemen #overlay untuk membuat UI lain muncul gelap. Gunakan #overlay untuk mengatur posisi Relative ke pusat kontainer #popup VisualElement kami.

Variabel AS dalam Pembuat UI

Mengatur gambar latar belakang