SwiftUI'da Section: Nedir, bölüm oluşturma ve gruplama

SwiftUI'da Section Nedir?

Section, Form ve List kapsayıcıları içinde öğeleri gruplamak için tasarlanmış yapısal bir SwiftUI bileşenidir. VStack veya HStack'ın aksine Section, sistem boşluğu, bir başlık ve altbilgi ve iOS'ta yuvarlatılmış köşeli blok şeklinde görsel grup vurgulaması ekler.

Section, alt öğelerin davranışını değiştirmez — yalnızca sunumlarını düzenler. Section içindeki tüm kontroller — Picker, Toggle, TextField — normal şekilde çalışır, ancak görsel olarak mantıksal bir grupta birleştirilir. Bu, kullanıcının veri giriş yapısında hızla yön bulması gereken ekran formları için özellikle önemlidir.

Sistem, bölümler arasındaki boşluğu otomatik olarak yönetir: iOS'ta Section'lar arasındaki mesafe 16–20 punto, Section içindeki öğeler arasında 0'dır (satırlar arası ayırıcı). Geliştirici bu boşlukları padding değiştiricileri aracılığıyla değiştiremez — tek tip bir görünüm sağlamak için sistem tarafından kontrol edilir.

Section Başlığı ve Altbilgisi

Section iki isteğe bağlı parametre kabul eder: header — grubun başlığı ve footer — grubun altında açıklayıcı metin. Başlık, bölüm öğelerinin üzerinde kalın başlık stili yazı tipiyle, altbilgi daha küçük yazı tipiyle gri renkte görüntülenir. Her iki parametre de yalnızca Text değil, herhangi bir SwiftUI View'ı kabul eder.

Section başlığı, kullanıcının grup içindeki öğelerin hangi kategoriye ait olduğunu anlamasına yardımcı olur. Örneğin, bir ayarlar ekranında “Bildirimler”, “Gizlilik” ve “Hesap” gibi başlıklar kullanıcıyı anında yönlendirir. Altbilgi açıklamalar için kullanışlıdır: “Toplantılar sırasında bildirimleri kapatın” veya “Şifre en az 8 karakter içermelidir.” Altbilgi gerektiğinde otomatik olarak birden çok satıra bölünür.

Section(
    header: Text("Account Security"),
    footer: Text("Use a strong password with at least 8 characters.")
) {
    SecureField("Current password", text: $currentPassword)
    SecureField("New password", text: $newPassword)
}

Örnekte, Section “Account Security” başlığına ve şifre güvenliği tavsiyesi içeren bir altbilgiye sahiptir. Kullanıcı başlığı bölüm etiketi olarak görür, iki alanı doldurur ve hemen altlarındaki uyarıyı okur. Bu yapı, bölümle ilgili tüm bilgiler ayrı bir yardım sayfasına gitmeye gerek kalmadan tek bir ekranda olduğu için kullanıcı deneyimini iyileştirir.

Form ve List İçinde Section

Section hem Form hem de List içinde çalışır, ancak görsel temsil farklılık gösterir. Form'da Section, yuvarlatılmış köşeler ve sistem arka planı ile bir blok olarak görüntülenir ve boşlukla bitişik bölümlerden ayrılır. List'te Section, plain stili — arka plan ve yuvarlatılmış köşeler olmadan veya inset-grouped — Form'a benzer yuvarlatılmış bloklarla kullanabilir.

Kapsayıcı seçimi Section stilini etkiler. Aynı içeriğe sahip bir Section'ı Form ve List'te .insetGrouped stiliyle yerleştirirseniz, sonuç aynı olacaktır. Ancak Form, varsayılan olarak sistem boşluğu ekler ve grouped stilini kullanırken, List .listStyle(.insetGrouped) değiştiricisi aracılığıyla açık stil belirtimi gerektirir.

List'te aynı görünümü elde etmek için .listStyle(.insetGrouped) kullanın. Bu stil, Form görünümünü taklit eder ve List üzerine inşa edilmiş ayarlar ekranları için uygundur. Standart veri listeleri için, bölüm vurgulaması olmadan, satırlar arasında ince ayırıcılarla .plain kullanın.

ForEach ile Dinamik İçerik

Section, ForEach aracılığıyla dinamik sayıda öğe içerebilir. Bu, tüm grup için başlık ve altbilgiyi korurken yinelenen öğelerle gruplar oluşturmayı sağlar. Section içindeki ForEach, bir veri koleksiyonu üzerinde yinelenir ve bölüm yapısını bozmadan her öğe için alt View'lar oluşturur.

Dinamik bölümler, değişken sayıda seçeneğe sahip ayarlar ekranları için kullanışlıdır: mevcut dillerin listesi, bağlı cihazlar veya push abonelikleri. Bölüm başlığı statik kalırken içerik verilere göre değişir.

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

    var body: some View {
        Form {
            Section(header: Text("Categories"),
                    footer: Text("Select your preferred categories")) {
                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("Selected: \(selected.count) categories")
                    .foregroundStyle(.secondary)
            }
        }
    }
}

Bu örnekte, ForEach, categories dizisindeki her kategori için bir Toggle oluşturur. Bölümün başlığı ve altbilgisi bir kez ayarlanır ve tüm gruba uygulanır. İkinci bölüm, seçilen kategori sayısını görüntüler — ForEach'e bağlı değildir ve statik kalır. Bu yaklaşım, başlık ve altbilginin dinamik öğelerden oluşan bir grubu bağlamsallaştırdığı esnek formlar oluşturmayı sağlar.

Section Kod Örnekleri

Veri gruplaması için Section kullanan tam bir profil ekranı örneğine bakalım. Form üç bölüm içerir: kullanıcı bilgileri, gizlilik ayarları ve istatistikler. Her bölüm kendi başlığını kullanır ve sonuncusunda özet bilgiler içeren bir altbilgi bulunur.

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("Profile Info")) {
                TextField("Display name", text: $displayName)
                TextField("Bio", text: $bio, axis: .vertical)
                    .lineLimit(3)
            }

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

            Section(header: Text("Stats"),
                    footer: Text("Last updated today at 2:30 PM")) {
                LabeledContent("Posts", value: "42")
                LabeledContent("Followers", value: "1,280")
                LabeledContent("Following", value: "346")
            }
        }
        .navigationTitle("Profile")
    }
}

Üç Section işlevsel alanları net bir şekilde ayırır: düzenlenebilir profil alanları, gizlilik anahtarları ve istatistikler. İkinci bölüm doğrulamayı gösterir: “Show email” anahtarı, profil herkese açık olana kadar devre dışıdır. Üçüncü bölümün altbilgisi son güncelleme zamanını gösterir — ek bağlamsal bilgiler için altbilgi kullanımına bir örnek. LabeledContent, Form'da anahtar-değer çiftlerini görüntülemek için standart bir SwiftUI bileşenidir.

Özel Başlıklı Section

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

Bu örnek, header'ın herhangi bir SwiftUI View olabileceğini gösterir. Image ve Text ile HStack kullanmak, başlığın yanına bir simge ekleyerek bölümü görsel olarak daha etkileyici hale getirir. Özel başlıklar, arayüzdeki önemli bölümleri vurgulamak için kullanışlıdır: bildirim ayarları, ücretli özellikler veya uyarı içeren bölümler. Ancak, özel başlıkların aşırı kullanımı önerilmez — arayüz tutarlılığını korumak için ekran başına 1–2 standart olmayan stilde bölüm yeterlidir.