SwiftUI da Section: nima, bo'lim yaratish va guruhlash

SwiftUI da Section nima?

Section — bu Form va List konteynerlari ichida elementlarni guruhlash uchun mo'ljallangan SwiftUI tarkibiy komponentidir. VStack yoki HStack dan farqli o'laroq, Section sistemali bo'shliqlar, sarlavha va pastki matn, shuningdek iOS da yumaloq burchakli blok shaklida guruhning vizual ta'kidlanishini qo'shadi.

Section bolalar elementlarining xatti-harakatlarini o'zgartirmaydi — u faqat ularning taqdimotini tashkil qiladi. Section ichidagi barcha boshqaruv elementlari — Picker, Toggle, TextField — odatdagidek ishlaydi, lekin vizual ravishda mantiqiy guruhga birlashtiriladi. Bu, ayniqsa, form ekranlari uchun muhimdir, bu yerda foydalanuvchi kiritilgan ma'lumotlar tarkibida tez yo'nalishni topishi kerak.

Tizim bo'limlar orasidagi bo'shliqlarni avtomatik boshqaradi: iOS da Section orasidagi masofa 16–20 punkt, Section ichidagi elementlar orasida esa 0 (qatorlar orasidagi ajratuvchi) ni tashkil qiladi. Dasturchi padding modifikatorlari orqali bu bo'shliqlarni o'zgartira olmaydi — ular yagona ko'rinishni ta'minlash uchun tizim tomonidan boshqariladi.

Section sarlavhasi va pastki matni

Section ikkita ixtiyoriy parametrni qabul qiladi: header — guruh sarlavhasi, va footer — guruh ostidagi tushuntirish matni. Sarlavha bo'lim elementlari ustida caption uslubidagi qalin shrift bilan, pastki matn esa kichikroq shriftda kul rangda ko'rsatiladi. Ikkala parametr faqat Text emas, balki istalgan SwiftUI View ni qabul qiladi.

Section sarlavhasi foydalanuvchiga guruh ichidagi elementlar qaysi kategoriyaga tegishli ekanligini tushunishga yordam beradi. Masalan, sozlamalar ekranida „Bildirishnomalar", „Maxfiylik" va „Hisob" sarlavhalari foydalanuvchini darhol yo'naltiradi. Pastki matn tushuntirishlar uchun mos keladi: „Uchrashuv vaqtida bildirishnomalarni o'chiring" yoki „Parol kamida 8 belgidan iborat bo'lishi kerak". Pastki matn kerak bo'lganda avtomatik ravishda bir necha qatorga bo'linadi.

Section(
    header: Text("Hisob xavfsizligi"),
    footer: Text("Kamida 8 belgidan iborat kuchli paroldan foydalaning.")
) {
    SecureField("Current password", text: $currentPassword)
    SecureField("New password", text: $newPassword)
}

Misolda Section „Hisob xavfsizligi" sarlavhasi va parol xavfsizligi bo'yicha maslahat bilan pastki matnga ega. Foydalanuvchi sarlavhani bo'lim belgisi sifatida ko'radi, ikkita maydonni to'ldiradi va darhol ular ostidagi ogohlantirishni o'qiydi. Bunday tuzilma UX ni yaxshilaydi, chunki bo'lim haqidagi barcha ma'lumotlar alohida yordam sahifasiga o'tmasdan bitta ekranda joylashgan.

Form va List ichida Section

Section ham Form, ham List ichida ishlaydi, lekin vizual ko'rinish farqlanadi. Form da Section yumaloq burchaklari va sistem foniga ega blok sifatida ko'rsatiladi, qo'shni bo'limlardan bo'shliqlar bilan ajratiladi. List da Section plain uslubidan — fon va yumaloqlashtirishsiz, yoki Form ga o'xshash yumaloq blokli inset-grouped uslubidan foydalanishi mumkin.

Konteyner tanlovi Section uslubiga ta'sir qiladi. Bir xil tarkibga ega Section ni Form va .insetGrouped uslubli List ichida joylashtirish bir xil natijani beradi. Biroq, Form sistemali bo'shliqlarni qo'shadi va standart ravishda grouped uslubidan foydalanadi, List esa .listStyle(.insetGrouped) modifikatori orqali uslubni aniq ko'rsatishni talab qiladi.

List da bir xil ko'rinishga erishish uchun .listStyle(.insetGrouped) dan foydalaning. Bu uslub Form ko'rinishini taqlid qiladi va List da qurilgan sozlamalar ekranlari uchun mos keladi. Standart ma'lumotlar ro'yxatlari uchun .plain dan foydalaning — bo'limlarni ta'kidlamasdan, qatorlar orasida yupqa ajratuvchilar bilan.

ForEach orqali dinamik tarkib

Section ForEach orqali dinamik sonli elementlarni o'z ichiga olishi mumkin. Bu sarlavha va pastki matnni butun guruh uchun saqlab, takrorlanuvchi elementlar bilan guruhlar yaratishga imkon beradi. Section ichidagi ForEach ma'lumotlar to'plamini iteratsiya qiladi va har bir element uchun bolalar View larini yaratadi, bo'lim tuzilishini buzmasdan.

Dinamik bo'limlar o'zgaruvchan sonli variantlarga ega sozlamalar ekranlari uchun foydalidir: tanlash uchun mavjud tillar ro'yxati, ulangan qurilmalar ro'yxati yoki push obunalari ro'yxati. Bo'lim sarlavhasi statik qoladi, tarkib esa ma'lumotlarga qarab o'zgaradi.

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

    var body: some View {
        Form {
            Section(header: Text("Kategoriyalar"),
                    footer: Text("O'zingiz yoqtirgan kategoriyalarni tanlang")) {
                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("Tanlangan: \(selected.count) kategoriya")
                    .foregroundStyle(.secondary)
            }
        }
    }
}

Bu misolda ForEach categories massividan har bir kategoriya uchun Toggle yaratadi. Bo'limning sarlavhasi va pastki matni bir marta o'rnatiladi va butun guruhga qo'llaniladi. Ikkinchi bo'lim tanlangan kategoriyalar sonini ko'rsatadi — ForEach ga bog'liq emas va statik qoladi. Bu yondashuv sarlavha va pastki matn dinamik elementlar guruhini kontekstlashtiradigan moslashuvchan formalar yaratishga imkon beradi.

Section kod misollari

Ma'lumotlarni guruhlash uchun Section dan foydalangan holda profil ekranining to'liq misolini ko'rib chiqamiz. Form uchta bo'limdan iborat: foydalanuvchi haqida ma'lumot, maxfiylik sozlamalari va statistika. Har bir bo'lim o'z sarlavhasidan, oxirgisi esa yakuniy ma'lumot bilan pastki matndan foydalanadi.

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

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

            Section(header: Text("Statistika"),
                    footer: Text("Oxirgi yangilanish bugun soat 14:30 da")) {
                LabeledContent("Posts", value: "42")
                LabeledContent("Followers", value: "1,280")
                LabeledContent("Following", value: "346")
            }
        }
        .navigationTitle("Profile")
    }
}

Uchta Section funksional bloklarni aniq ajratadi: profilning tahrirlanadigan maydonlari, maxfiylik kalitlari va statistika. Ikkinchi bo'lim validatsiyani namoyish etadi: „E-pochni ko'rsatish" Toggle i profil ochiq bo'lmaguncha o'chirilgan. Uchinchi bo'limning pastki matni oxirgi yangilanish vaqtini ko'rsatadi — qo'shimcha kontekst ma'lumoti uchun pastki matndan foydalanish namunasi. LabeledContent Form da „kalit-qiymat" juftligini ko'rsatish uchun standart SwiftUI komponentidir.

Maxsus sarlavhali Section

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

Bu misol header istalgan SwiftUI View bo'lishi mumkinligini ko'rsatadi. Image va Text bilan HStack dan foydalanish sarlavha yonida ikona qo'shish imkonini beradi, bo'limni vizual ravishda yanada ifodali qiladi. Maxsus sarlavhalar interfeysda muhim bo'limlarni ta'kidlash uchun foydalidir: bildirishnoma sozlamalari, pullik funksiyalar yoki ogohlantirish bo'limlari. Biroq, maxsus sarlavhalardan haddan tashqari foydalanmaslik kerak — interfeysning bir xilligini saqlash uchun har bir ekranda 1–2 ta nostandart ko'rinishdagi bo'lim yetarli.