SwiftUI-də Section: nədir, bölmə yaratmaq və qruplaşdırma

SwiftUI-də Section nədir?

Section — Form və List konteynerləri daxilində elementlərin qruplaşdırılması üçün nəzərdə tutulmuş SwiftUI struktur komponentidir. VStack və ya HStack-dan fərqli olaraq, Section sistem boşluqları, başlıq və altlıq, həmçinin iOS-da yuvarlaq küncləri olan blok şəklində qrupun vizual vurğulanmasını əlavə edir.

Section alt elementlərin davranışını dəyişmir — o, yalnız onların təqdimatını təşkil edir. Section daxilindəki bütün idarəetmələr — Picker, Toggle, TextField — normal işləyir, lakin vizual olaraq məntiqi qrupda birləşdirilir. Bu, xüsusilə form ekranları üçün vacibdir, burada istifadəçi daxil edilən məlumatların strukturunda sürətlə oriyentasiya olmalıdır.

Sistem bölmələr arasındakı boşluqları avtomatik idarə edir: iOS-da Section arasındakı məsafə 16–20 punkt, Section daxilində elementlər arasında isə 0 (sətirlər arasında ayırıcı) təşkil edir. Tərtibatçı padding modifikatorları vasitəsilə bu boşluqları dəyişə bilməz — onlar vahid görünüşü təmin etmək üçün sistem tərəfindən idarə olunur.

Section-un başlığı və altlığı

Section iki isteğə bağlı parametr qəbul edir: header — qrupun başlığı, və footer — qrupun altında izahlı mətn. Başlıq bölmənin elementlərinin üstündə caption stilində qalın şriftlə, altlıq isə boz rəngdə kiçik şriftlə göstərilir. Hər iki parametr təkcə Text deyil, istənilən SwiftUI View-i qəbul edir.

Section başlığı istifadəçiyə qrup daxilindəki elementlərin hansı kateqoriyaya aid olduğunu anlamağa kömək edir. Məsələn, parametrlər ekranında „Bildirişlər", „Gizlilik" və „Hesab" başlıqları istifadəçini dərhal istiqamətləndirir. Altlıq izahatlar üçün uyğundur: „Görüş vaxtı bildirişləri söndürün" və ya „Şifrə ən azı 8 simvoldan ibarət olmalıdır". Altlıq lazım olduqda avtomatik olaraq bir neçə sətirə bölünür.

Section(
    header: Text("Hesab təhlükəsizliyi"),
    footer: Text("Ən azı 8 simvoldan ibarət güclü şifrə istifadə edin.")
) {
    SecureField("Current password", text: $currentPassword)
    SecureField("New password", text: $newPassword)
}

Nümunədə Section-un „Hesab təhlükəsizliyi" başlığı və şifrə təhlükəsizliyi ilə bağlı məsləhəti olan altlığı var. İstifadəçi başlığı bölmə etiketi kimi görür, iki sahəni doldurur və dərhal onların altındakı xəbərdarlığı oxuyur. Belə struktur UX-i yaxşılaşdırır, çünki bölmə haqqında bütün məlumatlar ayrıca yardım səhifəsinə keçmədən bir ekranda yerləşir.

Form və List daxilində Section

Section həm Form, həm də List daxilində işləyir, lakin vizual təqdimat fərqlənir. Form-da Section yuvarlaq küncləri və sistem fonu olan blok kimi göstərilir, qonşu bölmələrdən boşluqlarla ayrılır. List-də Section plain üslubundan — fon və yuvarlaqlaşdırma olmadan, və ya Form-a bənzər yuvarlaq blokları olan inset-grouped üslubundan istifadə edə bilər.

Konteyner seçimi Section-un üslubuna təsir edir. Eyni məzmunu olan Section-u Form və .insetGrouped üslublu List daxilində yerləşdirmək eyni nəticəni verəcək. Lakin Form sistem boşluqları əlavə edir və standart olaraq grouped üslubundan istifadə edir, halbuki List .listStyle(.insetGrouped) modifikatoru vasitəsilə üslubun açıq şəkildə göstərilməsini tələb edir.

List-də eyni görünüşü əldə etmək üçün .listStyle(.insetGrouped) istifadə edin. Bu üslub Form-un görünüşünü təqlid edir və List üzərində qurulmuş parametr ekranları üçün uyğundur. Standart məlumat siyahıları üçün .plain istifadə edin — bölmələri vurğulamadan, sətirlər arasında nazik ayırıcılarla.

ForEach ilə dinamik məzmun

Section ForEach vasitəsilə dinamik sayda element ehtiva edə bilər. Bu, başlıq və altlığı bütün qrup üçün saxlayaraq təkrarlanan elementlərlə qruplar yaratmağa imkan verir. Section daxilində ForEach məlumat kolleksiyasını iterasiya edir və hər element üçün alt View-lər yaradır, bölmənin strukturunu pozmadan.

Dinamik bölmələr dəyişən sayda seçimləri olan parametr ekranları üçün faydalıdır: seçim üçün mövcud dillərin siyahısı, qoşulmuş cihazların siyahısı və ya push abunəliklərinin siyahısı. Bölmənin başlığı statik qalır, məzmun isə məlumatlardan asılı olaraq dəyişir.

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

    var body: some View {
        Form {
            Section(header: Text("Kateqoriyalar"),
                    footer: Text("Seçdiyiniz kateqoriyaları seçin")) {
                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("Seçildi: \(selected.count) kateqoriya")
                    .foregroundStyle(.secondary)
            }
        }
    }
}

Bu nümunədə ForEach categories massivindən hər kateqoriya üçün Toggle yaradır. Bölmənin başlığı və altlığı bir dəfə təyin edilir və bütün qrupa tətbiq olunur. İkinci bölmə seçilmiş kateqoriyaların sayını göstərir — ForEach-dən asılı deyil və statik qalır. Bu yanaşma başlıq və altlığın dinamik elementlər qrupunu kontekstləşdirdiyi çevik formalar yaratmağa imkan verir.

Section kod nümunələri

Məlumatların qruplaşdırılması üçün Section-dan istifadə edən profil ekranının tam nümunəsinə baxaq. Form üç bölmədən ibarətdir: istifadəçi haqqında məlumat, gizlilik parametrləri və statistika. Hər bölmə öz başlığından, sonuncu isə yekun məlumatı olan altlıqdan istifadə edir.

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

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

            Section(header: Text("Statistika"),
                    footer: Text("Son yeniləmə bu gün saat 14:30-da")) {
                LabeledContent("Posts", value: "42")
                LabeledContent("Followers", value: "1,280")
                LabeledContent("Following", value: "346")
            }
        }
        .navigationTitle("Profile")
    }
}

Üç Section funksional blokları aydın şəkildə ayırır: profilin redaktə edilə bilən sahələri, gizlilik açarları və statistika. İkinci bölmə validasiyanı nümayiş etdirir: „E-poçtu göstər" Toggle-i profil ictimai deyilə qədər söndürülür. Üçüncü bölmənin altlığı son yeniləmə vaxtını göstərir — əlavə kontekst məlumatı üçün altlıqdan istifadə nümunəsi. LabeledContent Form-da „açar-dəyər" cütünü göstərmək üçün standart SwiftUI komponentidir.

Fərdi başlıqlı Section

Section(
    header: HStack {
        Image(systemName: "bell.fill")
            .foregroundStyle(.blue)
        Text("Bildirişlər")
            .font(.headline)
    },
    footer: Text("Push və e-poçt xəbərdarlıqlarını idarə edin")
) {
    Toggle("Push notifications", isOn: $push)
    Toggle("Email notifications", isOn: $email)
    Stepper("Quiet hours: \(quietStart) — \(quietEnd)",
            value: $quietStart,
            in: 0...23)
}

Bu nümunə header-in istənilən SwiftUI View ola biləcəyini göstərir. Image və Text ilə HStack-dan istifadə başlığın yanında ikon əlavə etməyə imkan verir, bölməni vizual olaraq daha ifadəli edir. Fərdi başlıqlar interfeysdə vacib bölmələri vurğulamaq üçün faydalıdır: bildiriş parametrləri, ödənişli funksiyalar və ya xəbərdarlıq bölmələri. Bununla belə, fərdi başlıqlardan çox istifadə etmək olmaz — hər ekranda interfeysin vahidliyini qorumaq üçün 1–2 qeyri-standart görünüşlü bölmə kifayətdir.