SwiftUI Academy · Pelajaran

Baris dengan HStack

Tempatkan view berdampingan secara horizontal.

Baris dengan HStack adalah pelajaran SwiftUI Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar SwiftUI Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus SwiftUI Academy mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Going Horizontal

Sometimes views belong side by side, not stacked down. For that you reach for the horizontal sibling of VStack. ➡️

Meet HStack

An HStack arranges its children horizontally, left to right. It is perfect for rows like an icon next to a label.

Your First HStack

Put views inside the HStack braces and they line up across the screen in the order you wrote them.

HStack {
    Text("Left")
    Text("Right")
}

Left to Right Order

In an HStack the first child sits on the leading edge and later children follow toward the trailing edge. Code order is left-to-right order.

Icon Plus Label

A classic HStack pairs an Image with a Text so an icon and its caption stay on one line, like a row in a settings screen.

HStack {
    Image(systemName: "bell")
    Text("Alerts")
}

Centered Vertically

By default an HStack aligns its children to the vertical center, so a tall image and short text line up neatly along their middles.

HStack Hugs Its Content

Just like VStack, an HStack shrinks to fit its children rather than filling the whole width. It takes only the space it needs.

Combining HStack and VStack

Nest an HStack inside a VStack to build a card: a title row on top and a detail row below. Mixing both directions builds real layouts.

VStack {
    Text("Title")
    HStack {
        Text("A")
        Text("B")
    }
}

HStack Is a View

An HStack is a view too, so modifiers like padding or background apply to the entire row at once, treating it as a single block.

Mixed Content Rows

An HStack happily holds different view types together, like a number, a label, and a button all sharing one horizontal line.

HStack {
    Text("42")
    Button("Add") { }
}

When to Reach for HStack

Use an HStack whenever items read left to right: a label and value, a toolbar of buttons, or an avatar beside a name.

Quick Check

Let's confirm how HStack lays things out.

Recap: Horizontal Rows

Great progress! An HStack lines views up left to right, centers them vertically, and pairs beautifully with VStack to build cards and rows. 🙌

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Baris dengan HStack” gratis?

Ya — teks lengkap “Baris dengan HStack” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus SwiftUI Academy, upgrade ke CoddyKit PRO. Kursus SwiftUI Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Baris dengan HStack”?

Tempatkan view berdampingan secara horizontal. Kamu berlatih SwiftUI Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai SwiftUI Academy?

Tidak diperlukan pengalaman sebelumnya. SwiftUI Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Baris dengan HStack” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran SwiftUI Academy ini?

Ya. Setiap pelajaran SwiftUI Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke SwiftUI Academy