Section di SwiftUI: apa itu, membuat bagian dan pengelompokan

Apa itu Section di SwiftUI?

Section adalah komponen struktural SwiftUI yang dirancang untuk mengelompokkan elemen di dalam kontainer Form dan List. Tidak seperti VStack atau HStack, Section menambahkan jarak sistem, header dan footer, serta penyorotan visual grup dalam bentuk blok dengan sudut membulat di iOS.

Section tidak mengubah perilaku elemen anak — hanya mengatur presentasinya. Semua kontrol di dalam Section — Picker, Toggle, TextField — berfungsi normal, tetapi secara visual disatukan dalam grup logis. Ini sangat penting untuk layar formulir di mana pengguna harus dengan cepat menavigasi struktur data yang dimasukkan.

Sistem secara otomatis mengelola jarak antar bagian: jarak antara Section di iOS adalah 16–20 poin, antara elemen di dalam Section — 0 (pemisah antar baris). Pengembang tidak dapat mengubah jarak ini melalui pengubah padding — jarak tersebut dikontrol oleh sistem untuk memastikan tampilan yang seragam.

Header dan footer Section

Section menerima dua parameter opsional: header — judul grup, dan footer — teks penjelasan di bawah grup. Header ditampilkan di atas elemen bagian dengan font tebal gaya caption, footer — dengan font lebih kecil berwarna abu-abu. Kedua parameter menerima SwiftUI View apa pun, bukan hanya Text.

Header Section membantu pengguna memahami kategori mana elemen dalam grup tersebut. Misalnya, pada layar pengaturan, header „Notifikasi“, „Privasi“, dan „Akun“ langsung mengarahkan pengguna. Footer cocok untuk penjelasan: „Nonaktifkan notifikasi selama rapat“ atau „Kata sandi harus mengandung setidaknya 8 karakter“. Footer secara otomatis terbagi menjadi beberapa baris jika diperlukan.

Section(
    header: Text("Keamanan Akun"),
    footer: Text("Gunakan kata sandi yang kuat dengan setidaknya 8 karakter.")
) {
    SecureField("Current password", text: $currentPassword)
    SecureField("New password", text: $newPassword)
}

Dalam contoh, Section memiliki header „Keamanan Akun“ dan footer dengan saran keamanan kata sandi. Pengguna melihat header sebagai label bagian, mengisi dua bidang, dan segera membaca peringatan di bawahnya. Struktur seperti itu meningkatkan UX karena semua informasi tentang bagian berada pada satu layar tanpa perlu mengakses bantuan terpisah.

Section di dalam Form dan List

Section berfungsi baik di dalam Form maupun List, tetapi tampilan visualnya berbeda. Di Form, Section ditampilkan sebagai blok dengan sudut membulat dan latar belakang sistem, dipisahkan dari bagian tetangga oleh jarak. Di List, Section dapat menggunakan gaya plain — tanpa latar belakang dan pembulatan, atau inset-grouped — dengan blok membulat, mirip dengan Form.

Pilihan kontainer memengaruhi gaya Section. Menempatkan Section dengan konten yang sama di dalam Form dan List dengan gaya .insetGrouped akan memberikan hasil yang identik. Namun, Form menambahkan jarak sistem dan secara default menggunakan gaya grouped, sementara List memerlukan penentuan gaya secara eksplisit melalui pengubah .listStyle(.insetGrouped).

Untuk mendapatkan tampilan yang sama di List, gunakan .listStyle(.insetGrouped). Gaya ini meniru tampilan Form dan cocok untuk layar pengaturan yang dibangun di atas List. Untuk daftar data standar, gunakan .plain — tanpa penyorotan bagian, dengan pemisah tipis antar baris.

Konten dinamis melalui ForEach

Section dapat berisi jumlah elemen yang dinamis melalui ForEach. Ini memungkinkan pembuatan grup dengan elemen berulang, sambil mempertahankan header dan footer untuk seluruh grup. ForEach di dalam Section mengulangi koleksi data dan membuat View anak untuk setiap elemen tanpa mengganggu struktur bagian.

Bagian dinamis berguna untuk layar pengaturan dengan jumlah opsi yang bervariasi: daftar bahasa yang tersedia untuk dipilih, daftar perangkat yang terhubung, atau daftar langganan push. Header bagian tetap statis, sementara konten berubah tergantung pada data.

struct DynamicSectionView: View {
    let categories = ["Work", "Personal", "Finance", "Health"]
    @State private var selected = Set<String>()

    var body: some View {
        Form {
            Section(header: Text("Kategori"),
                    footer: Text("Pilih kategori yang Anda sukai")) {
                ForEach(categories, id: \.self) { category in
                    Toggle(category, isOn: Binding(
                        get: { selected.contains(category) },
                        set: { if $0 { selected.insert(category) }
                                     else { selected.remove(category) } }
                    ))
                }
            }

            Section {
                Text("Dipilih: \(selected.count) kategori")
                    .foregroundStyle(.secondary)
            }
        }
    }
}

Dalam contoh ini, ForEach menghasilkan Toggle untuk setiap kategori dari array categories. Header dan footer bagian diatur sekali dan berlaku untuk seluruh grup. Bagian kedua menampilkan jumlah kategori yang dipilih — tidak bergantung pada ForEach dan tetap statis. Pendekatan ini memungkinkan pembuatan formulir fleksibel di mana header dan footer mengontekstualisasikan grup elemen dinamis.

Contoh kode Section

Mari kita lihat contoh lengkap layar profil menggunakan Section untuk mengelompokkan data. Formulir berisi tiga bagian: informasi pengguna, pengaturan privasi, dan statistik. Setiap bagian menggunakan headernya sendiri, dan yang terakhir — footer dengan informasi ringkasan.

struct ProfileView: View {
    @State private var displayName = "Alex Johnson"
    @State private var bio = "iOS developer"
    @State private var isProfilePublic = true
    @State private var showEmail = false

    var body: some View {
        Form {
            Section(header: Text("Info Profil")) {
                TextField("Display name", text: $displayName)
                TextField("Bio", text: $bio, axis: .vertical)
                    .lineLimit(3)
            }

            Section(header: Text("Privasi")) {
                Toggle("Public profile", isOn: $isProfilePublic)
                Toggle("Show email", isOn: $showEmail)
                    .disabled(!isProfilePublic)
            }

            Section(header: Text("Statistik"),
                    footer: Text("Terakhir diperbarui hari ini pukul 14:30")) {
                LabeledContent("Posts", value: "42")
                LabeledContent("Followers", value: "1,280")
                LabeledContent("Following", value: "346")
            }
        }
        .navigationTitle("Profile")
    }
}

Tiga Section dengan jelas memisahkan blok fungsional: bidang profil yang dapat diedit, sakelar privasi, dan statistik. Bagian kedua mendemonstrasikan validasi: Toggle „Tampilkan email“ dinonaktifkan sampai profil menjadi publik. Footer bagian ketiga menunjukkan waktu pembaruan terakhir — contoh penggunaan footer untuk informasi kontekstual tambahan. LabeledContent adalah komponen SwiftUI standar untuk menampilkan pasangan „kunci-nilai“ di Form.

Section dengan header khusus

Section(
    header: HStack {
        Image(systemName: "bell.fill")
            .foregroundStyle(.blue)
        Text("Notifikasi")
            .font(.headline)
    },
    footer: Text("Kelola notifikasi push dan email")
) {
    Toggle("Push notifications", isOn: $push)
    Toggle("Email notifications", isOn: $email)
    Stepper("Quiet hours: \(quietStart) — \(quietEnd)",
            value: $quietStart,
            in: 0...23)
}

Contoh ini menunjukkan bahwa header dapat berupa SwiftUI View apa pun. Penggunaan HStack dengan Image dan Text memungkinkan penambahan ikon di samping header, membuat bagian secara visual lebih ekspresif. Header khusus berguna untuk menyorot bagian penting dalam antarmuka: pengaturan notifikasi, fitur berbayar, atau bagian dengan peringatan. Namun, jangan berlebihan dengan header khusus — 1–2 bagian dengan tampilan tidak standar per layar sudah cukup untuk menjaga keseragaman antarmuka.