Section در SwiftUI: چیست، ایجاد بخش و گروه‌بندی

Section در SwiftUI چیست؟

Section یک کامپوننت ساختاری SwiftUI است که برای گروه‌بندی عناصر درون کانتینرهای Form و List طراحی شده است. برخلاف VStack یا HStack، Section فاصله‌های سیستمی، عنوان و پاورقی و همچنین برجسته‌سازی بصری گروه را به صورت بلوکی با گوشه‌های گرد در iOS اضافه می‌کند.

Section رفتار عناصر فرزند را تغییر نمی‌دهد — فقط ارائه آنها را سازماندهی می‌کند. همه کنترل‌های درون Section — Picker، Toggle، TextField — به طور عادی کار می‌کنند، اما از نظر بصری در یک گروه منطقی ترکیب می‌شوند. این به ویژه برای صفحه‌های فرم مهم است، جایی که کاربر باید به سرعت در ساختار داده‌های وارد شده جهت‌یابی کند.

سیستم به طور خودکار فاصله بین بخش‌ها را مدیریت می‌کند: فاصله بین Section در iOS 16–20 پوینت و بین عناصر درون Section 0 (جداساز بین ردیف‌ها) است. توسعه‌دهنده نمی‌تواند این فاصله‌ها را از طریق اصلاح‌کننده‌های padding تغییر دهد — آنها توسط سیستم برای اطمینان از ظاهر یکپارچه کنترل می‌شوند.

عنوان و پاورقی Section

Section دو پارامتر اختیاری می‌پذیرد: header — عنوان گروه، و footer — متن توضیحی زیر گروه. عنوان با فونت ضخیم به سبک caption بالای عناصر بخش نمایش داده می‌شود، پاورقی با فونت کوچک‌تر به رنگ خاکستری. هر دو پارامتر هر SwiftUI View را می‌پذیرند، نه فقط Text.

عنوان Section به کاربر کمک می‌کند بفهمد عناصر درون گروه به کدام دسته تعلق دارند. به عنوان مثال، در صفحه تنظیمات، عناوین «اعلان‌ها»، «حریم خصوصی» و «حساب» کاربر را فوراً راهنمایی می‌کنند. پاورقی برای توضیحات مناسب است: «اعلان‌ها را در زمان جلسه خاموش کنید» یا «رمز عبور باید حداقل ۸ کاراکتر داشته باشد». پاورقی در صورت نیاز به طور خودکار به چند خط می‌شکند.

Section(
    header: Text("امنیت حساب"),
    footer: Text("از یک رمز عبور قوی با حداقل ۸ کاراکتر استفاده کنید.")
) {
    SecureField("Current password", text: $currentPassword)
    SecureField("New password", text: $newPassword)
}

در مثال، Section عنوان «امنیت حساب» و پاورقی با توصیه امنیتی رمز عبور دارد. کاربر عنوان را به عنوان برچسب بخش می‌بیند، دو فیلد را پر می‌کند و بلافاصله هشدار زیر آنها را می‌خواند. چنین ساختاری UX را بهبود می‌بخشد، زیرا تمام اطلاعات مربوط به بخش بدون نیاز به مراجعه به راهنمای جداگانه در یک صفحه قرار دارد.

Section درون Form و List

Section هم درون Form و هم درون List کار می‌کند، اما نمایش بصری متفاوت است. در Form، Section به صورت بلوکی با گوشه‌های گرد و پس‌زمینه سیستمی نمایش داده می‌شود و با فاصله از بخش‌های مجاور جدا می‌شود. در List، Section می‌تواند از سبک plain — بدون پس‌زمینه و گردی، یا inset-grouped — با بلوک‌های گرد مشابه Form استفاده کند.

انتخاب کانتینر بر سبک Section تأثیر می‌گذارد. قرار دادن Section با محتوای یکسان درون Form و List با سبک .insetGrouped نتیجه یکسانی خواهد داشت. با این حال، Form فاصله‌های سیستمی اضافه می‌کند و به طور پیش‌فرض از سبک grouped استفاده می‌کند، در حالی که List نیاز به تعیین صریح سبک از طریق اصلاح‌کننده .listStyle(.insetGrouped) دارد.

برای دستیابی به ظاهر یکسان در List از .listStyle(.insetGrouped) استفاده کنید. این سبک ظاهر Form را تقلید می‌کند و برای صفحه‌های تنظیمات ساخته شده روی List مناسب است. برای لیست‌های داده استاندارد از .plain استفاده کنید — بدون برجسته‌سازی بخش‌ها، با جداکننده‌های نازک بین ردیف‌ها.

محتوی پویا از طریق ForEach

Section می‌تواند تعداد پویایی از عناصر را از طریق ForEach شامل شود. این امکان ایجاد گروه‌هایی با عناصر تکراری را فراهم می‌کند و عنوان و پاورقی را برای کل گروه حفظ می‌کند. ForEach درون Section مجموعه داده را پیمایش می‌کند و برای هر عنصر Viewهای فرزند ایجاد می‌کند بدون اینکه ساختار بخش را مختل کند.

بخش‌های پویا برای صفحه‌های تنظیمات با تعداد متغیر گزینه‌ها مفید هستند: لیست زبان‌های موجود برای انتخاب، لیست دستگاه‌های متصل یا لیست اشتراک‌های push. عنوان بخش ثابت می‌ماند و محتوا بسته به داده‌ها تغییر می‌کند.

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

    var body: some View {
        Form {
            Section(header: Text("دسته‌ها"),
                    footer: Text("دسته‌های ترجیحی خود را انتخاب کنید")) {
                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.count) دسته")
                    .foregroundStyle(.secondary)
            }
        }
    }
}

در این مثال، ForEach برای هر دسته از آرایه categories یک Toggle تولید می‌کند. عنوان و پاورقی بخش یک بار تنظیم شده و برای کل گروه اعمال می‌شود. بخش دوم تعداد دسته‌های انتخاب شده را نمایش می‌دهد — به ForEach وابسته نیست و ثابت می‌ماند. این رویکرد امکان ایجاد فرم‌های انعطاف‌پذیری را فراهم می‌کند که در آن عنوان و پاورقی گروه عناصر پویا را زمینه‌سازی می‌کنند.

نمونه کدهای Section

بیایید یک مثال کامل از صفحه پروفایل با استفاده از Section برای گروه‌بندی داده‌ها بررسی کنیم. فرم شامل سه بخش است: اطلاعات کاربر، تنظیمات حریم خصوصی و آمار. هر بخش از عنوان خود استفاده می‌کند و آخرین بخش دارای پاورقی با اطلاعات خلاصه است.

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("اطلاعات پروفایل")) {
                TextField("Display name", text: $displayName)
                TextField("Bio", text: $bio, axis: .vertical)
                    .lineLimit(3)
            }

            Section(header: Text("حریم خصوصی")) {
                Toggle("Public profile", isOn: $isProfilePublic)
                Toggle("Show email", isOn: $showEmail)
                    .disabled(!isProfilePublic)
            }

            Section(header: Text("آمار"),
                    footer: Text("آخرین به‌روزرسانی امروز ساعت ۱۴:۳۰")) {
                LabeledContent("Posts", value: "42")
                LabeledContent("Followers", value: "1,280")
                LabeledContent("Following", value: "346")
            }
        }
        .navigationTitle("Profile")
    }
}

سه Section بلوک‌های عملکردی را به وضوح جدا می‌کنند: فیلدهای قابل ویرایش پروفایل، کلیدهای حریم خصوصی و آمار. بخش دوم اعتبارسنجی را نشان می‌دهد: Toggle «نمایش ایمیل» تا زمانی که پروفایل عمومی نباشد غیرفعال است. پاورقی بخش سوم زمان آخرین به‌روزرسانی را نشان می‌دهد — مثالی از استفاده از پاورقی برای اطلاعات زمینه‌ای اضافی. LabeledContent یک کامپوننت استاندارد SwiftUI برای نمایش جفت «کلید-مقدار» در Form است.

Section با عنوان سفارشی

Section(
    header: HStack {
        Image(systemName: "bell.fill")
            .foregroundStyle(.blue)
        Text("اعلان‌ها")
            .font(.headline)
    },
    footer: Text("مدیریت اعلان‌های push و ایمیل")
) {
    Toggle("Push notifications", isOn: $push)
    Toggle("Email notifications", isOn: $email)
    Stepper("Quiet hours: \(quietStart) — \(quietEnd)",
            value: $quietStart,
            in: 0...23)
}

این مثال نشان می‌دهد که header می‌تواند هر SwiftUI View باشد. استفاده از HStack با Image و Text امکان افزودن آیکون در کنار عنوان را فراهم می‌کند و بخش را از نظر بصری برجسته‌تر می‌کند. عناوین سفارشی برای برجسته‌سازی بخش‌های مهم در رابط مفید هستند: تنظیمات اعلان‌ها، ویژگی‌های پولی یا بخش‌های هشدار. با این حال، استفاده بیش از حد از عناوین سفارشی توصیه نمی‌شود — ۱–۲ بخش با ظاهر غیراستاندارد در هر صفحه برای حفظ یکپارچگی رابط کافی است.