Menu
CoddyTech

Spacer dan ZStack

Termasuk bagian Pengenalan SwiftUI dalam perjalanan Swift di Coddy. Pelajaran 12 dari 50.

Spacer mengisi semua ruang kosong dalam stack. Di dalam HStack, komponen ini mendorong view yang berada sebelumnya ke kiri dan view yang berada setelahnya ke kanan:

HStack {
    Text("Total")
    Spacer()
    Text("$12.50")
}

Di dalam VStack, Spacer mendorong tampilan agar saling berjauhan secara vertikal.

ZStack menumpuk view di atas satu sama lain. View pertama berada di belakang dan setiap view berikutnya berada di atasnya:

ZStack {
    Color.blue
    Text("On top")
        .foregroundStyle(.white)
}

Color.blue yang digunakan sebagai tampilan mengisi seluruh ruang yang diberikan kepadanya, jadi di sini tampil sebagai latar belakang biru di belakang teks.

challenge icon

Tantangan

Mudah

Buat baris total membentang selebar mungkin: tambahkan Spacer di antara Total dan $12.50 agar harga terdorong ke tepi kanan.

Coba sendiri

import SwiftUI

@main
struct CoddyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}
quiz iconUji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Pengenalan SwiftUI

Latihan sendiri: Playground SwiftUI