SwiftUI'da Form: nedir, form oluşturma ve yapılandırma

SwiftUI'da Form Nedir?

Form, giriş formları ve ayar ekranları oluşturmak için tasarlanmış özel bir SwiftUI kapsayıcısıdır. List'in davranışını devralır ancak platforma özgü stiller ekler: iOS'ta Form, yuvarlak köşeli bölümlerle gruplanmış bir tablo olarak görüntülenir; macOS'ta, onay kutuları ve kontrollerle standart bir sistem listesi olarak görünür.

VStack ve HStack ile manuel düzenden farklı olarak, Form öğeler arasındaki boşluğu otomatik olarak düzenler, ayırıcılar ekler ve sistem temasına (açık veya koyu) göre görünümünü uyarlar. Geliştirici yalnızca mantıksal yapıyı tanımlar: gruplama için Section ve içindeki kontroller. Form, belirli bir platformda Picker, Toggle veya Stepper'ın görsel olarak nasıl düzenleneceğine kendisi karar verir.

Form, tüm standart SwiftUI giriş öğelerini destekler: metin için TextField, şifreler için SecureField, liste seçimi için Picker, açma/kapama için Toggle, aralıklar için Slider, adım adım değerler için Stepper ve tarihler için DatePicker. Her öğe, hedef platformda Apple'ın HIG (Human Interface Guidelines)'ına uygun bir stili otomatik olarak alır.

Form vs List: Kapsayıcı Karşılaştırması

Görsel benzerliklerine rağmen, Form ve List farklı görevleri çözer. List, kaydırma eylemleri ve satır düzenleme özellikleriyle kaydırılabilir veri listeleri görüntülemek için evrensel bir kapsayıcıdır. Form, veri girişi ve ayarlar için sistem kontrol stillerine optimize edilmiş özel bir kapsayıcıdır.

List, dinamik verileri görüntülemek için uygundur: haber akışları, sohbetler, ürün katalogları. Form, tahmin edilebilir bir alan kümesine sahip statik ekranlar içindir: kullanıcı profili, uygulama ayarları, kayıt formu. Temel fark: Form öğeleri etkileşimli kontroller olabilirken, List satırları çoğunlukla verileri görüntüler ve dokunmaya gezinme veya eylemle yanıt verir.

Apple Human Interface Guidelines (2025)'a göre, Form, bir ekranda 3 ila 20 kontrol bulunan ve bunları bölümlere ayırmanın kullanılabilirliği artırdığı ayar ve giriş ekranları için kullanılmalıdır.

Form İçindeki Section

Section, Form'un ana yapı taşıdır ve mantıksal olarak ilişkili öğelerin bir arada gruplanmasını sağlar. Her Section bir başlığa, altbilgiye ve içinde herhangi bir sayıda kontrole sahip olabilir. Sistem, bölümler arasına otomatik olarak boşluk ekler ve her birini yuvarlak köşeli görsel bir blokla sarar.

Section kullanımı form okunabilirliği için kritiktir: anlamlarına göre gruplanmış öğeler kullanıcı tarafından daha kolay işlenir. Örneğin, bir profil ayarları ekranında «Kişisel Veriler», «Bildirimler» ve «Güvenlik» ayrı bölümlere ayrılabilir. Her bölüm, sistemin öğe grubunun altında daha küçük bir yazı tipiyle görüntülediği açıklayıcı metin içeren bir altbilgiye sahip olabilir.

Form {
    Section(header: Text("Profil")) {
        TextField("Ad", text: $name)
        TextField("Email", text: $email)
    }

    Section(header: Text("Bildirimler"),
            footer: Text("Toplantılar sırasında devre dışı bırak")) {
        Toggle("Push notifications", isOn: $pushEnabled)
        Toggle("Email notifications", isOn: $emailEnabled)
    }
}

Örnekte, ilk bölüm «Profile» altbilgisiz iki metin alanı içerir, ikinci bölüm «Notifications» grup altında bir açıklama ile iki anahtar içerir. Altbilgi otomatik olarak boşluk ekler ve caption yazı tipi stilini kullanır. Bir Section, başlıksız bir altbilgiye veya altbilgisiz bir başlığa sahip olabilir.

Form'daki Kontroller

Form, tüm standart SwiftUI giriş öğelerini destekler. Picker, Form içinde otomatik olarak iOS'ta ayrı bir seçim ekranına geçiş yapan bir gezinme satırı olarak görüntülenir. Toggle, sağa hizalanmış bir anahtarla birlikte bir satır olarak görünür. TextField, yer tutucu ile sistem giriş stilini alır.

Sayısal değerler için Stepper (adım adım değişiklik) ve Slider (aralıkta yumuşak değişiklik) kullanılır. DatePicker birden çok modu destekler: date, time, dateAndTime. Renk seçimi için ColorPicker mevcuttur. Her öğe ek kod olmadan platforma uyum sağlar — iOS'ta kontroller yerel UIKit stillerini kullanır, macOS'ta AppKit kullanır.

Form içindeki özel kontroller için herhangi bir SwiftUI View kullanılabilir — standart bölüm davranışını devralırlar. Ancak, HIG uyumluluğunu garanti ettikleri ve ek yapılandırma olmadan Erişilebilirliği (VoiceOver, Dynamic Type) destekledikleri için sistem öğelerine bağlı kalınması önerilir.

Form Kod Örnekleri

Form kullanarak bir kayıt ekranı oluşturalım. Form dört bölüm içerir: kişisel veriler, rol seçimi, abonelik ayarları ve bir gönderme düğmesi. Gruplama için Section ve standart SwiftUI kontrolleri kullanılır.

struct RegistrationForm: View {
    @State private var name = ""
    @State private var email = ""
    @State private var role = "Developer"
    @State private var agreedToTerms = false

    let roles = ["Developer", "Designer", "Manager"]

    var body: some View {
        NavigationStack {
            Form {
                Section(header: Text("Kişisel Bilgiler")) {
                    TextField("Name", text: $name)
                    TextField("Email", text: $email)
                        .keyboardType(.emailAddress)
                }

                Section(header: Text("Rol")) {
                    Picker("Select role", selection: $role) {
                        ForEach(roles, id: \.self) { role in
                            Text(role).tag(role)
                        }
                    }
                }

                Section {
                    Toggle("Agree to terms", isOn: $agreedToTerms)
                }

                Section {
                    Button("Kaydol") {
                        submitForm()
                    }
                    .disabled(!agreedToTerms)
                }
            }
            .navigationTitle("Registration")
        }
    }

    private func submitForm() { }
}

Form dört Section'a ayrılmıştır: iki metin alanıyla kişisel veriler, Picker ile rol seçimi, Toggle ile şartları kabul etme ve bir kayıt düğmesi. Düğme, kullanıcı şartları kabul edene kadar devre dışıdır — bu, Form içinde doğrulamaya bir örnektir. NavigationStack bir başlık ekler ve Picker'ın iOS'ta ayrı bir seçim ekranı açmasını sağlar.

Alt Bölümlerle Ayarlar Formu

struct SettingsForm: View {
    @State private var volume: Double = 0.5
    @State private var isDarkMode = false
    @State private var reminderDate = Date()

    var body: some View {
        NavigationStack {
            Form {
                Section(header: Text("Görünüm")) {
                    Toggle("Dark mode", isOn: $isDarkMode)
                    Slider(value: $volume, in: 0...1) {
                        Text("Ses")
                    }
                }

                Section(header: Text("Hatırlatıcılar"),
                        footer: Text("Seçilen saatte bir bildirim alacaksınız")) {
                    DatePicker("Remind at",
                        selection: $reminderDate,
                        displayedComponents: .hourAndMinute)
                }

                Section {
                    NavigationLink("Advanced Settings",
                        destination: AdvancedSettingsView())
                }
            }
            .navigationTitle("Settings")
        }
    }
}

Bu örnek, Form içinde Slider, DatePicker ve NavigationLink kombinasyonunu gösterir. DatePicker, yalnızca saati görüntülemek için hourAndMinute modunu kullanır. Son bölümdeki NavigationLink, gelişmiş ayarlar ekranına geçiş oluşturur — Ayarlar benzeri arayüzler için yaygın bir desen. Bölüm başlıkları ve altbilgileri formu kendi kendini belgeleyen yapar: kullanıcı her kontrolün hangi gruba ait olduğunu hemen anlar.