Study
SwiftUI

Button & Aksi

Penjelasan

Button adalah komponen dasar untuk menangkap ketukan/klik pengguna. Inisialisasinya paling umum menerima dua bagian: label (bisa String sederhana atau View kustom lewat trailing closure) dan action — closure yang dijalankan setiap kali tombol ditekan. Karena action adalah closure biasa, kamu bebas menaruh logic apa pun di dalamnya: mengubah @State, memanggil method pada ObservableObject, memicu navigasi, dan sebagainya. Untuk label yang lebih kompleks dari sekadar teks (mis. ikon + teks, atau tampilan kustom penuh), gunakan bentuk Button(action: { ... }) { /* label View */ }. SwiftUI juga menyediakan role bawaan seperti .destructive untuk tombol hapus/berbahaya, yang otomatis memberi styling warna merah di beberapa konteks seperti alert.

Contoh Konsep

import SwiftUI

struct TombolView: View {
    @State private var pesan = "Belum ditekan"

    var body: some View {
        VStack(spacing: 16) {
            Text(pesan)

            Button("Tekan Saya") {
                pesan = "Tombol ditekan!"
            }
            .buttonStyle(.borderedProminent)

            Button(action: {
                pesan = "Dihapus"
            }) {
                Label("Hapus", systemImage: "trash")
            }
            .foregroundColor(.red)
        }
    }
}

Praktikum

Buat @State private var jumlahLike = 0. Buat Button dengan label Label("Suka", systemImage: "heart") yang menambah jumlahLike setiap ditekan, lalu tampilkan Text jumlahLike-nya.

Editor Latihan

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

Tips

Kalau Button berada di dalam List atau row yang punya banyak kontrol interaktif, pastikan area tap-nya jelas — bungkus label dengan .contentShape(Rectangle()) kalau area kosong di sekitar teks/ikon ternyata tidak ikut merespons tap.