فرم در SwiftUI: چیست، ایجاد فرم و تنظیمات

Form در SwiftUI چیست؟

Form یک کانتینر تخصصی SwiftUI است که برای ساخت فرم‌های ورود داده و صفحه‌های تنظیمات طراحی شده است. این کانتینر رفتار List را به ارث می‌برد، اما استایل‌های پلتفرمی اضافه می‌کند: در iOS، Form به‌صورت جدول grouped با گوشه‌های گرد بخش‌ها نمایش داده می‌شود و در macOS — به‌صورت فهرست سیستمی استاندارد با چک‌باکس‌ها و کنترل‌های مختلف.

برخلاف چیدمان دستی با VStack و HStack، Form به‌طور خودکار فاصله‌ها را بین عناصر تنظیم می‌کند، جداکننده اضافه می‌کند و ظاهر را با تم سیستمی — روشن یا تاریک — تطبیق می‌دهد. توسعه‌دهنده فقط ساختار منطقی را توصیف می‌کند: Section برای گروه‌بندی و عناصر کنترلی درون آن. خود فرم تصمیم می‌گیرد که Picker، Toggle یا Stepper را به‌صورت بصری در پلتفرم خاص چگونه قرار دهد.

Form از تمام عناصر استاندارد ورود داده SwiftUI پشتیبانی می‌کند: TextField برای متن، SecureField برای رمز عبور، Picker برای انتخاب از فهرست، Toggle برای روشن/خاموش، Slider برای محدوده‌ها، Stepper برای مقادیر پله‌ای و DatePicker برای تاریخ. هر عنصر به‌طور خودکار استایلی مطابق HIG (Human Interface Guidelines) اپل در پلتفرم هدف دریافت می‌کند.

Form در برابر List: مقایسه کانتینرها

با وجود شباهت ظاهری، Form و List وظایف متفاوتی را حل می‌کنند. List یک کانتینر عمومی برای نمایش فهرست‌های قابل پیمایش داده‌ها با امکان اکشن‌های کشیدن و ویرایش سطرها است. Form یک کانتینر تخصصی برای ورود داده و تنظیمات است که برای استایل‌های سیستمی کنترل‌های مختلف بهینه شده است.

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

طبق Apple Human Interface Guidelines (2025)، Form باید برای صفحه‌های تنظیمات و ورود داده استفاده شود، جایی که در یک صفحه از ۳ تا ۲۰ عنصر کنترلی وجود دارد و تقسیم به بخش‌ها درک را بهبود می‌بخشد.

بخش‌های Section درون Form

Section بلوک ساختاری اصلی Form است که امکان گروه‌بندی عناصر مرتبط منطقی را فراهم می‌کند. هر Section می‌تواند عنوان، پاورقی و تعداد دلخواه کنترل درون خود داشته باشد. سیستم به‌طور خودکار فاصله‌ها را بین بخش‌ها اضافه می‌کند و هر کدام را در یک بلوک بصری با گوشه‌های گرد قرار می‌دهد.

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

Form {
    Section(header: Text("پروفایل")) {
        TextField("نام", text: $name)
        TextField("Email", text: $email)
    }

    Section(header: Text("اعلان‌ها"),
            footer: Text("غیرفعال در طول جلسات")) {
        Toggle("Push notifications", isOn: $pushEnabled)
        Toggle("Email notifications", isOn: $emailEnabled)
    }
}

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

عناصر کنترلی در Form

Form از تمام عناصر استاندارد ورود داده SwiftUI پشتیبانی می‌کند. Picker در Form به‌طور خودکار به‌صورت یک سطر ناوبری با انتقال به صفحه انتخاب جداگانه در iOS نمایش داده می‌شود. Toggle به‌صورت سطری با سوییچ ترازشده در لبه راست نمایش داده می‌شود. TextField استایل سیستمی ورود با placeholder دریافت می‌کند.

برای مقادیر عددی از Stepper (تغییر پله‌ای) و Slider (تغییر پیوسته در محدوده) استفاده می‌شود. DatePicker از چند حالت پشتیبانی می‌کند: date، time، dateAndTime. برای انتخاب رنگ ColorPicker در دسترس است. هر عنصر بدون کد اضافی با پلتفرم سازگار می‌شود — در iOS کنترل‌ها از استایل‌های بومی UIKit و در macOS از AppKit استفاده می‌کنند.

برای کنترل‌های سفارشی درون Form می‌توان از هر View سوئیفت یوآی استفاده کرد — آن‌ها رفتار استاندارد بخش را به ارث می‌برند. با این حال توصیه می‌شود به عناصر سیستمی پایبند باشید، زیرا سازگاری با HIG را تضمین می‌کنند و بدون تنظیمات اضافی از Accessibility (VoiceOver، Dynamic Type) پشتیبانی می‌کنند.

نمونه‌های کد Form

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

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("اطلاعات شخصی")) {
                    TextField("Name", text: $name)
                    TextField("Email", text: $email)
                        .keyboardType(.emailAddress)
                }

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

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

                Section {
                    Button("ثبت‌نام") {
                        submitForm()
                    }
                    .disabled(!agreedToTerms)
                }
            }
            .navigationTitle("Registration")
        }
    }

    private func submitForm() { }
}

فرم به چهار Section تقسیم شده است: اطلاعات شخصی با دو فیلد متنی، انتخاب نقش از طریق Picker، موافقت با شرایط از طریق Toggle و دکمه ثبت‌نام. دکمه تا زمانی که کاربر با شرایط موافقت نکند غیرفعال است — این نمونه‌ای از اعتبارسنجی درون Form است. NavigationStack عنوان را اضافه می‌کند و به Picker اجازه می‌دهد در iOS صفحه انتخاب جداگانه‌ای باز کند.

فرم تنظیمات با زیربخش‌ها

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("ظاهر")) {
                    Toggle("Dark mode", isOn: $isDarkMode)
                    Slider(value: $volume, in: 0...1) {
                        Text("صدا")
                    }
                }

                Section(header: Text("یادآوری‌ها"),
                        footer: Text("در زمان انتخاب‌شده اعلان دریافت خواهید کرد")) {
                    DatePicker("Remind at",
                        selection: $reminderDate,
                        displayedComponents: .hourAndMinute)
                }

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

این مثال ترکیب Slider، DatePicker و NavigationLink را درون Form نشان می‌دهد. DatePicker از حالت hourAndMinute برای نمایش فقط زمان استفاده می‌کند. NavigationLink در بخش آخر انتقال به صفحه تنظیمات پیشرفته ایجاد می‌کند — الگویی رایج برای رابط‌های شبیه Settings. عنوان‌ها و پاورقی‌های بخش‌ها فرم را خودتوضیح می‌کنند: کاربر بلافاصله می‌فهمد هر عنصر کنترلی به کدام گروه تعلق دارد.