Layout dengan VStack, HStack, dan ZStack

Penjelasan

Karena body hanya boleh mengembalikan satu View, kamu butuh container untuk menggabungkan banyak View jadi satu kesatuan. SwiftUI menyediakan tiga stack utama: VStack menyusun child secara vertikal (atas ke bawah), HStack menyusun secara horizontal (kiri ke kanan), dan ZStack menumpuk child di sumbu kedalaman (child belakang dulu, lalu di atasnya). Setiap stack punya parameter alignment (mis. .leading, .center, .trailing untuk VStack) dan spacing untuk mengatur jarak antar child. Stack bisa disarangkan (nested) sebebas yang kamu mau — VStack berisi HStack, HStack berisi VStack, dan seterusnya — inilah cara SwiftUI membangun layout kompleks dari blok-blok sederhana.

Contoh Konsep

import SwiftUI

struct LayoutView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Text("Judul Utama")
                .font(.title)
            HStack {
                Text("Kiri")
                Spacer()
                Text("Kanan")
            }
            ZStack {
                Color.blue
                Text("Di atas warna")
                    .foregroundColor(.white)
            }
            .frame(height: 100)
        }
    }
}

Praktikum

Susun VStack berisi dua Text ("Baris 1" dan "Baris 2"), lalu di bawahnya HStack berisi Text("Kiri") dan Text("Kanan") yang dipisahkan Spacer().

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Spacer() di dalam HStack/VStack akan mendorong View di sekitarnya menjauh sejauh mungkin — cara paling umum untuk membuat elemen menempel ke ujung kiri dan kanan tanpa hitung manual posisi.