Seri SwiftUI 02｜Pengantar sistem tata letak SwiftUI: VStack, HStack, ZStack, Spacer, dan bingkai

Saat saya pertama kali mempelajari konten ini, cara termudah untuk masuk ke dalam keadaan saat mendesain tata letak SwiftUI:

• VStack Saya bisa
• HStack Saya juga akan melakukannya
• Spacer sepertinya mengerti
• frame juga sering menulis

Namun ketika halaman menjadi lebih kompleks, masalah-masalah umum berikut mulai muncul:

• Tampilan ini tidak penuh
• Menambahkan frame tetapi masih belum selaras
• Spacer Segera setelah ditempatkan, itu akan menggantikan hal-hal lain.
• Setelah beberapa tingkat bersarang, halaman “tidak dapat mengatakan apa yang salah, tetapi tampaknya tidak benar”

Ini menunjukkan bahwa sering kali kita tidak begitu memahami apa yang dilakukan tata letak SwiftUI.

1. Hal terpenting tentang tata letak SwiftUI adalah proses negosiasi ukuran

Jika Anda hanya memahami tata letak sebagai “Tumpukan mana yang digunakan untuk menempatkan elemen”, Anda akan segera mengalami kebuntuan. Karena inti sebenarnya dari tata letak SwiftUI adalah proses negosiasi ukuran, yang secara kasar dapat dipahami sebagai:

1. Superview memberikan ruang yang tersedia atau ukuran yang diusulkan
2. Subview memutuskan seberapa besar yang diinginkan berdasarkan proposal ini
3. Wadah induk kemudian mengatur tata letak sesuai dengan ukuran yang dikembalikan oleh subview.

Dengan kata lain, tata letaknya merupakan negosiasi terus-menerus antara ayah dan anak.

Setelah premis ini dipahami, banyak pertanyaan yang tampaknya metafisik menjadi jelas:

• Beberapa frame hanya ditutupi cangkang
• Text dan Spacer berperilaku sangat berbeda saat disatukan
• Beberapa masalah penyelarasan pada dasarnya diimbangi selama tahap proposal ukuran.

2. VStack, HStack, ZStack Perbedaan sebenarnya adalah “siapa yang memimpin logika penempatan yang mana”

Di permukaan:

• VStack Disusun secara vertikal
• HStack disusun secara horizontal
• Baris bertumpuk ZStack

Hal ini memang ada benarnya, namun jika hanya mengingatnya saja, Anda tetap akan bingung saat menjumpai layout yang rumit.

Pemahaman yang lebih praktis adalah:

• VStack terutama mengatur sub-elemen secara vertikal
• HStack terutama mengatur sub-elemen secara horizontal
• ZStack terutama menumpuk banyak elemen di area yang sama

Poin kuncinya adalah berpikir jernih:

• Apa poros inti halaman saat ini?
• Lapisan mana yang bertanggung jawab atas tata letak utama -Lapisan mana yang hanya penyelarasan dan dekorasi lokal

Banyak tata letak yang ditulis berantakan, dan tingkat dasar dan menengah tidak dibedakan dengan jelas.

3. Nilai Spacer adalah “memakan sisa ruang”

Saat Anda menggunakan Spacer untuk pertama kalinya, Anda secara intuitif akan memahaminya sebagai “menambahkan kotak kosong”.

Hal ini dapat menyebabkan banyak penyalahgunaan.

Lebih tepatnya, apa yang dilakukan Spacer adalah:

Makan sebanyak mungkin sisa ruang pada arah sumbu utama wadah saat ini.

Misalnya, di HStack, ia memakan ruang horizontal; di VStack, ia memakan ruang vertikal.

Setelah dipahami seperti ini, akan lebih mudah untuk menilai:

-Apakah perlu memiliki jarak yang tetap atau mengalokasikan ruang yang tersisa?

• Haruskah padding atau Spacer digunakan di sini?
• Spacer Jika ditempatkan pada posisi yang salah, pusat gravitasi seluruh tata letak akan bergeser.

Banyak halaman “terlihat sedikit lebih buruk” karena Spacer digunakan di mana batasan tetap harus digunakan. Akibatnya, tata letak diam-diam diubah oleh logika alokasi ruang yang tersisa.

4. frame paling mudah disalahpahami: frame belum tentu “memodifikasi ukuran konten”, dalam banyak kasus hanya membungkus lapisan kotak tata letak

Ini adalah salah satu poin termudah bagi pemula SwiftUI untuk mengalami kebuntuan.

Situasi yang umum adalah menulis:

Text("Hello")
  .frame(maxWidth: .infinity)

Kupikir aku sedang melakukan peregangan Text. Lebih tepatnya, dalam banyak kasus, area tata letak yang lebih besar disediakan di luar Text, daripada mengubah ukuran konten internal Text itu sendiri.

Hal ini menjelaskan banyak kebingungan umum:

• Kelihatannya lebih lebar, tapi teksnya masih belum sejajar dengan yang saya inginkan.
• Gunakan saja dengan alignment
• frame yang sama memiliki efek berbeda pada tampilan berbeda

Oleh karena itu, kunci frame bukanlah “mengubah ukuran”, tetapi “batas tata letak apa yang ditambahkan ke tampilan”.

5. Akar penyebab sebenarnya dari banyak masalah tata letak adalah “lapisan tata letak utama” dan “lapisan modifikasi lokal” tercampur menjadi satu

Mari kita ambil anti-pola yang sangat umum:

• Satu lapisan luar VStack
• Ada beberapa lapisan di dalam HStack
• Tambahkan frame ke setiap lapisan
• Campur lagi Spacer
• Terakhir, andalkan padding untuk memperbaikinya hingga Anda dapat melihatnya.

Cara penulisan seperti ini tentu bisa membuahkan hasil dalam jangka pendek, namun begitu Anda mengubah panjang salinan, lebar layar, atau font dinamis, tata letaknya akan mulai menyimpang.

Akar masalahnya sering kali adalah:

• Lapisan mana yang bertanggung jawab atas struktur utama
• Lapisan mana yang bertanggung jawab atas penyelarasan lokal -Lapisan manakah yang hanya merupakan modifikasi visual?

Tidak ada pelapisan.

Setelah tata letak kehilangan rasa hierarkinya, tata letak tersebut akan menjadi “mengandalkan sekelompok pengubah untuk sementara waktu menarik posisinya” alih-alih mengandalkan struktur yang akan dibuat secara alami.

6. Cara berpikir yang lebih praktis tentang tata letak: tentukan dulu sumbu utama, lalu tentukan sisa ruang, lalu tentukan perataan lokal

Jika saya ingin membuat halaman yang sedikit lebih rumit hari ini, saya biasanya berpikir dalam urutan ini:

1. Apakah kawasan ini didominasi secara horizontal atau vertikal?
2. Kepada siapa sisa ruang tersebut harus diberikan?
3. Tempat mana yang memerlukan jarak tetap dan tempat mana yang memerlukan ruang fleksibel.
4. Bidang mana yang hanya selaras secara lokal dan tidak boleh mempengaruhi struktur global pada gilirannya.

Perintah ini secara signifikan dapat mengurangi situasi “lebih banyak perbaikan dan lebih banyak kekacauan”. Karena memaksa Anda untuk memutuskan strukturnya terlebih dahulu baru kemudian memutuskan modifikasinya, daripada hanya mengandalkan modifikator untuk menumpuk hasilnya.

7. Banyak halaman SwiftUI “selalu terlihat sedikit lebih buruk”

Banyak masalah halaman sebenarnya disebabkan oleh ekspresi struktur yang kurang jelas.

Manifestasi umum meliputi:

• Hubungan antar blok informasi tidak cukup stabil
• Selama teksnya panjang, akan mengesampingkan hal-hal lain.
• Kartu yang sama memiliki proporsi yang aneh pada layar yang berbeda

Pertanyaan-pertanyaan seperti itu sering kali berupa:

• Logika alokasi ruang tidak jelas
• Sumbu tata letak utama dan modifikasi lokal dicampur
• Tempat tetap tidak tetap
• Fleksibilitas telah dituliskan kembali

Oleh karena itu, untuk benar-benar mempelajari tata letak berarti belajar menilai bagaimana ruang harus dialokasikan.

8. Kesimpulan: Yang benar-benar perlu Anda pelajari saat memulai tata letak SwiftUI adalah negosiasi ruang, bukan nama kontrol.

Singkatnya, saya akan mengatakan:

Yang benar-benar perlu Anda kuasai tentang tata letak SwiftUI adalah bagaimana tampilan induk mengusulkan ukuran, bagaimana subview merespons ukuran, dan bagaimana wadah ditempatkan berdasarkan hasil ini.

Setelah hubungan dasar ini terbentuk, banyak masalah tata letak akan berubah dari “metafisik” menjadi “masuk akal”.