Study
SwiftUI

Alert, Sheet & Modal

Penjelasan

Alert dan sheet adalah dua cara umum menampilkan konten di atas layar saat ini. .alert() menampilkan dialog sistem sederhana (judul, pesan, tombol aksi) — cocok untuk konfirmasi singkat seperti 'Hapus item ini?'. .sheet() menampilkan layar penuh atau setengah layar (modal) yang bisa berisi View kompleks apa pun, cocok untuk formulir tambah data atau detail yang butuh interaksi lebih. Keduanya dikontrol lewat binding Bool (isPresented) atau binding item opsional (item:) — pola yang konsisten dengan @State yang sudah kamu pelajari. Saat binding menjadi true (atau item berisi nilai), SwiftUI otomatis menampilkan alert/sheet; saat pengguna menutupnya, SwiftUI otomatis mengembalikan binding ke false/nil.

Contoh Konsep

import SwiftUI

struct DialogView: View {
    @State private var tampilkanAlert = false
    @State private var tampilkanSheet = false

    var body: some View {
        VStack(spacing: 16) {
            Button("Hapus Data") { tampilkanAlert = true }
                .alert("Yakin hapus?", isPresented: $tampilkanAlert) {
                    Button("Batal", role: .cancel) {}
                    Button("Hapus", role: .destructive) { }
                }

            Button("Buka Formulir") { tampilkanSheet = true }
                .sheet(isPresented: $tampilkanSheet) {
                    Text("Ini isi sheet")
                        .padding()
                }
        }
    }
}

Praktikum

Buat @State private var tampilkanInfo = false. Buat Button("Info") yang mengubahnya jadi true, lalu tempelkan modifier .sheet(isPresented:) yang menampilkan Text("Ini halaman info") di dalamnya.

Editor Latihan

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

Tips

Jangan taruh dua modifier .sheet() sekaligus pada View yang sama untuk keperluan berbeda — SwiftUI hanya akan mengenali salah satunya secara konsisten. Kalau butuh menampilkan lebih dari satu jenis sheet dari satu View, gunakan satu binding item opsional (enum) yang menentukan sheet mana yang aktif.