HStack: apa itu, HStack VStack ZStack di SwiftUI

Apa itu HStack di SwiftUI?

HStack (Horizontal Stack) — adalah container SwiftUI yang menempatkan tampilan anak dalam satu garis horizontal. Setiap elemen anak menempati ruang sebanyak yang dibutuhkan, kecuali ditentukan lain. HStack menerima dua parameter wajib: alignment (perataan vertikal, default .center) dan spacing (jarak antar elemen, default nil — jarak sistem). Menurut Apple Human Interface Guidelines (2025), HStack adalah pilihan utama untuk panel tombol, baris input, dan daftar ikon horizontal.

HStack(alignment: .center, spacing: 16) {
    Image("star")
        .resizable()
        .frame(width: 24, height: 24)
    Text("Favorit")
        .font(.body)
    Spacer()
    Image("chevron.right")
        .foregroundColor(.gray)
}
.padding()

Dalam contoh ini HStack membuat baris dari tiga elemen: ikon, teks, dan panah. Spacer() mendorong elemen-elemen — ikon dengan teks menempel ke tepi kiri, dan panah ke tepi kanan. Alignment .center meratakan ketiga elemen di tengah sumbu vertikal.

VStack: tata letak vertikal dan perataan

VStack (Vertical Stack) — adalah container SwiftUI untuk menempatkan elemen anak secara vertikal dari atas ke bawah. Mirip dengan HStack, ia menerima alignment (perataan horizontal: .leading, .center, .trailing) dan spacing. VStack adalah dasar untuk membangun formulir, kartu, profil, dan daftar pengaturan. Menurut Apple Docs (2025), VStack bersama LazyVStack mencakup 85% skenario tata letak vertikal di SwiftUI.

VStack(alignment: .leading, spacing: 8) {
    Text("Nama resep")
        .font(.headline)
    Text("Waktu persiapan: 30 menit")
        .font(.subheadline)
        .foregroundColor(.secondary)
    HStack(spacing: 4) {
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.8")
    }
}

VStack dengan alignment .leading meratakan semua baris ke tepi kiri. Di dalam VStack terdapat HStack untuk rating — ini adalah pola umum membangun tata letak kompleks melalui stack bersarang. Spacing 8 menciptakan jarak seragam antar baris teks.

ZStack: menumpuk elemen secara kedalaman

ZStack (Z-axis Stack) — adalah container SwiftUI untuk menumpuk tampilan anak di atas satu sama lain pada sumbu kedalaman. Elemen pertama di body ZStack digambar di latar belakang, yang terakhir di latar depan. ZStack digunakan untuk gambar latar dengan teks di atasnya, indikator kustom, tombol overlay, dan animasi transisi. Menurut Apple Docs (2025), ZStack secara default meratakan semua elemen di tengah (alignment: .center), tetapi mendukung kombinasi Alignment apa pun.

ZStack(alignment: .bottomLeading) {
    Image("mountains")
        .resizable()
        .scaledToFill()
        .frame(height: 200)
        .clipped()
    Color.black
        .opacity(0.3)
    Text("Pemandangan gunung")
        .font(.title)
        .bold()
        .foregroundColor(.white)
        .padding()
}

Dalam contoh ini ZStack menumpuk tiga lapisan: gambar gunung, warna hitam semi-transparan untuk penggelapan, dan teks dengan judul. Alignment .bottomLeading menempelkan teks ke sudut kiri bawah. Penggelapan (Color.black.opacity(0.3)) meningkatkan keterbacaan teks pada bagian gambar yang terang.

Perbandingan HStack, VStack dan ZStack: kapan menggunakan yang mana

Pemilihan stack tergantung pada arah tata letak: HStack — tata letak horizontal (tombol, baris input), VStack — tata letak vertikal (formulir, kartu), ZStack — tumpukan (latar belakang, overlay). Menurut Apple Human Interface Guidelines (2025), untuk tata letak kompleks stack ditempatkan bersarang: VStack luar berisi HStack dan ZStack di dalamnya. LazyHStack dan LazyVStack adalah versi malas untuk koleksi besar.

Alignment dan Spacing: penyesuaian halus stack

Parameter alignment dan spacing memberikan kontrol penuh atas penempatan elemen anak di stack SwiftUI. Alignment di HStack mengontrol perataan vertikal elemen dengan tinggi berbeda. Alignment di VStack mengontrol perataan horizontal. Spacing menentukan jarak antar semua elemen anak di stack. Menurut SwiftUI Lab (2025), alignment bisa standar (.top, .center, .bottom) maupun kustom melalui AlignmentID.

HStack(alignment: .top, spacing: 12) {
    Text("Judul")
        .font(.largeTitle)
    VStack(alignment: .leading) {
        Text("Subjudul")
        Text("Deskripsi dengan teks tambahan")
            .font(.caption)
            .foregroundColor(.gray)
    }
}
.padding()

Di sini alignment .top meratakan judul besar dan VStack bersarang ke tepi atas. Spacing 12 menciptakan jarak di antara mereka. VStack bersarang dengan alignment .leading meratakan subjudul dan deskripsi ke tepi kiri. Kombinasi alignment berbeda di dalam stack bersarang memungkinkan kontrol tata letak yang presisi.

Stack bersarang: contoh membangun tata letak kompleks

Antarmuka nyata dibangun dengan kombinasi HStack, VStack dan ZStack bersarang. Kartu produk — contoh tipikal: VStack luar berisi gambar (ZStack dengan overlay), judul (Text), rating (HStack) dan harga. Menurut Apple Sample Projects (2025), kedalaman bersarang stack jarang melebihi 4 level — bersarang lebih dalam mengurangi keterbacaan kode dan performa.

VStack(spacing: 12) {
    ZStack(alignment: .topTrailing) {
        Image("product")
            .resizable()
            .scaledToFit()
        Text("-20%")
            .font(.caption)
            .bold()
            .foregroundColor(.white)
            .padding(6)
            .background(Color.red)
            .cornerRadius(4)
    }
    Text("Smartphone Model X")
        .font(.headline)
    HStack(spacing: 8) {
        Text("$999")
            .font(.title2)
            .bold()
        Spacer()
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.7")
    }
}
.padding()

Dalam contoh ini VStack menggabungkan ZStack (gambar dengan lencana diskon), nama produk dan HStack (harga + rating). ZStack menggunakan alignment .topTrailing untuk menempatkan lencana «-20%» di sudut kanan atas. Spacer di HStack mendorong harga ke tepi kiri dan rating ke tepi kanan.