Form SwiftUI'da: nima u, formani yaratish va sozlash

SwiftUI'da Form nima?

Form ma'lumot kiritish formalari va sozlash ekranlarini yaratish uchun mo'ljallangan SwiftUI'ning ixtisoslashgan konteyneridir. U List xatti-harakatini meros qilib oladi, lekin platforma uslublarini qo'shadi: iOS'da Form bo'limlarining yumaloq burchaklari bo'lgan grouped-jadval sifatida, macOS'da esa katakcha va boshqaruv elementlariga ega standart tizim ro'yxati sifatida ko'rsatiladi.

VStack va HStack bilan qo'lda joylashtirishdan farqli o'laroq, Form elementlar orasidagi oraliqlarni avtomatik taqsimlaydi, ajratgichlar qo'shadi va tashqi ko'rinishni tizim mavzusiga — yorug' yoki qorong'i — moslashtiradi. Dasturchi faqat mantiqiy tuzilmani tavsiflaydi: guruhlash uchun Section va ichidagi boshqaruv elementlari. Formaning o'zi Picker, Toggle yoki Stepper'ni ma'lum bir platformada vizual qanday joylashtirishni hal qiladi.

Form barcha standart SwiftUI kiritish elementlarini qo'llab-quvvatlaydi: matn uchun TextField, parollar uchun SecureField, ro'yxatdan tanlash uchun Picker, yoqish/o'chirish uchun Toggle, diapazonlar uchun Slider, bosqichli qiymatlar uchun Stepper va sana uchun DatePicker. Har bir element maqsadli platformada Apple'ning HIG (Human Interface Guidelines) standartiga mos uslubni avtomatik oladi.

Form va List: konteynerlarni taqqoslash

Tashqi o'xshashlikka qaramay, Form va List turli vazifalarni hal qiladi. List — surish amallari va qatorlarni tahrirlash imkoniyati bilan aylanuvchi ma'lumotlar ro'yxatlarini ko'rsatish uchun universal konteyner. Form — ma'lumot kiritish va sozlash uchun ixtisoslashgan, boshqaruv elementlarining tizim uslublariga optimallashtirilgan konteyner.

List dinamik ma'lumotlarni ko'rsatish uchun mos: yangiliklar tasmalari, chatlar, mahsulot kataloglari. Form — bashorat qilinadigan maydonlar to'plamiga ega statik ekranlar uchun: foydalanuvchi profili, dastur sozlamalari, ro'yxatdan o'tish anketasi. Asosiy farq: Form elementlari interaktiv boshqaruv elementlari bo'lishi mumkin, List qatorlari esa ko'pincha ma'lumotlarni ko'rsatadi va bosishga navigatsiya yoki amal bilan javob beradi.

Apple Human Interface Guidelines (2025) ma'lumotlariga ko'ra, Form bitta ekranda 3 dan 20 gacha boshqaruv elementi bo'lgan va bo'limlarga bo'linish idrokni yaxshilaydigan sozlash va kiritish ekranlari uchun ishlatilishi kerak.

Form ichidagi Section bo'limlari

Section — mantiqiy bog'liq elementlarni guruhlash imkonini beruvchi Form'ning asosiy qurilish bloki. Har bir Section sarlavha, pastki matn va ichida ixtiyoriy miqdordagi boshqaruv elementlariga ega bo'lishi mumkin. Tizim bo'limlar orasidagi oraliqlarni avtomatik qo'shadi va har birini yumaloq burchakli vizual blokka o'raydi.

Section'dan foydalanish formaning o'qilishi uchun juda muhim: ma'nosiga qarab guruhlangan elementlar foydalanuvchi tomonidan osonroq qabul qilinadi. Masalan, profil sozlamalari ekranida alohida "Shaxsiy ma'lumotlar", "Bildirishnomalar" va "Xavfsizlik" bo'limlarini ajratish mumkin. Har bir bo'lim elementlar guruhi ostida tizim kichikroq shrift bilan ko'rsatadigan tushuntirish matnli pastki matndan iborat bo'lishi mumkin.

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

    Section(header: Text("Bildirishnomalar"),
            footer: Text("Uchrashuvlar paytida o'chirish")) {
        Toggle("Push notifications", isOn: $pushEnabled)
        Toggle("Email notifications", isOn: $emailEnabled)
    }
}

Misolda birinchi "Profile" bo'limi pastki matnsiz ikkita matn maydonini, ikkinchi "Notifications" bo'limi esa guruh ostida tushuntirish bilan ikkita kalitni o'z ichiga oladi. Pastki matn avtomatik ravishda oraliq qo'shadi va caption shrift uslubidan foydalanadi. Section sarlavhasiz pastki matn yoki pastki matnsiz sarlavhani o'z ichiga olishi mumkin.

Formdagi boshqaruv elementlari

Form SwiftUI'ning barcha standart kiritish elementlarini qo'llab-quvvatlaydi. Picker Form ichida avtomatik ravishda iOS'da tanlash uchun alohida ekranga o'tishli navigatsiya qatori sifatida ko'rsatiladi. Toggle o'ng chetga tekislangan kalitli qator sifatida ko'rsatiladi. TextField placeholder'li tizim kiritish uslubini oladi.

Raqamli qiymatlar uchun Stepper (bosqichli o'zgarish) va Slider (diapazonda silliq o'zgarish) ishlatiladi. DatePicker bir nechta rejimni qo'llab-quvvatlaydi: date, time, dateAndTime. Rang tanlash uchun ColorPicker mavjud. Har bir element qo'shimcha kodsiz platformaga moslashadi — iOS'da boshqaruv elementlari UIKit'ning mahalliy uslublaridan, macOS'da esa AppKit'dan foydalanadi.

Form ichidagi maxsus boshqaruv elementlari uchun istalgan SwiftUI View'dan foydalanish mumkin — ular bo'limning standart xatti-harakatini meros qilib oladi. Biroq tavsiya etiladi tizim elementlariga amal qilish, chunki ular HIG'ga muvofiqligini kafolatlaydi va qo'shimcha sozlashsiz Accessibility (VoiceOver, Dynamic Type) ni qo'llab-quvvatlaydi.

Form kodi misollari

Form'dan foydalanib ro'yxatdan o'tish ekranini yaratishni ko'rib chiqamiz. Forma to'rt bo'limdan iborat: shaxsiy ma'lumotlar, rol tanlash, obuna sozlamalari va yuborish tugmasi. Guruhlash uchun Section va standart SwiftUI boshqaruv elementlari ishlatiladi.

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("Shaxsiy ma'lumotlar")) {
                    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("Ro'yxatdan o'tish") {
                        submitForm()
                    }
                    .disabled(!agreedToTerms)
                }
            }
            .navigationTitle("Registration")
        }
    }

    private func submitForm() { }
}

Forma to'rtta Section'ga bo'lingan: ikkita matn maydoni bilan shaxsiy ma'lumotlar, Picker orqali rol tanlash, Toggle orqali shartlarga rozilik va ro'yxatdan o'tish tugmasi. Tugma foydalanuvchi shartlarga rozi bo'lmaguncha o'chirilgan — bu Form ichida validatsiya misolidir. NavigationStack sarlavha qo'shadi va Picker'ga iOS'da alohida tanlash ekranini ochish imkonini beradi.

Pastki bo'limli sozlamalar formasi

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("Ko'rinish")) {
                    Toggle("Dark mode", isOn: $isDarkMode)
                    Slider(value: $volume, in: 0...1) {
                        Text("Ovoz balandligi")
                    }
                }

                Section(header: Text("Eslatmalar"),
                        footer: Text("Tanlangan vaqtda bildirishnoma olasiz")) {
                    DatePicker("Remind at",
                        selection: $reminderDate,
                        displayedComponents: .hourAndMinute)
                }

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

Bu misol Form ichida Slider, DatePicker va NavigationLink kombinatsiyasini namoyish etadi. DatePicker faqat vaqtni ko'rsatish uchun hourAndMinute rejimidan foydalanadi. Oxirgi bo'limdagi NavigationLink kengaytirilgan sozlamalar ekraniga o'tishni yaratadi — Settings uslubidagi interfeyslar uchun keng tarqalgan naqsh. Bo'limlarning sarlavhalari va pastki matnlari formani o'z-o'zini tushuntiruvchi qiladi: foydalanuvchi har bir boshqaruv elementi qaysi guruhga tegishli ekanligini darhol tushunadi.