SwiftUI-এ Form: এটি কী, ফর্ম তৈরি এবং কনফিগারেশন

SwiftUI-এ Form কী?

Form একটি বিশেষায়িত SwiftUI কন্টেইনার যা ইনপুট ফর্ম এবং সেটিংস স্ক্রিন তৈরির জন্য ডিজাইন করা হয়েছে। এটি List-এর আচরণ উত্তরাধিকারসূত্রে পায় কিন্তু প্ল্যাটফর্ম-নির্দিষ্ট স্টাইল যোগ করে: iOS-এ, Form গোলাকার কোণা সহ grouped টেবিল হিসেবে প্রদর্শিত হয়; macOS-এ, এটি চেকবক্স এবং নিয়ন্ত্রণ সহ একটি স্ট্যান্ডার্ড সিস্টেম তালিকা হিসেবে দেখা যায়।

VStack এবং HStack-এর সাথে ম্যানুয়াল লেআউটের বিপরীতে, Form স্বয়ংক্রিয়ভাবে উপাদানগুলির মধ্যে স্পেসিং সাজায়, সেপারেটর যোগ করে এবং সিস্টেম থিম — হালকা বা গাঢ় — অনুসারে তার চেহারা খাপ খাইয়ে নেয়। ডেভেলপার শুধু লজিক্যাল স্ট্রাকচার বর্ণনা করে: গ্রুপিংয়ের জন্য Section এবং ভেতরে নিয়ন্ত্রণ। ফর্ম নিজেই সিদ্ধান্ত নেয় কিভাবে একটি নির্দিষ্ট প্ল্যাটফর্মে Picker, Toggle বা Stepper দৃশ্যমানভাবে সাজানো হবে।

Form সমস্ত স্ট্যান্ডার্ড SwiftUI ইনপুট উপাদান সমর্থন করে: টেক্সটের জন্য TextField, পাসওয়ার্ডের জন্য SecureField, তালিকা নির্বাচনের জন্য Picker, চালু/বন্ধের জন্য Toggle, রেঞ্জের জন্য Slider, ক্রমিক মানের জন্য Stepper এবং তারিখের জন্য DatePicker। প্রতিটি উপাদান স্বয়ংক্রিয়ভাবে লক্ষ্য প্ল্যাটফর্মে Apple-এর HIG (Human Interface Guidelines)-এর সাথে সামঞ্জস্যপূর্ণ স্টাইল পায়।

Form বনাম List: কন্টেইনার তুলনা

দৃশ্যমান সাদৃশ্য সত্ত্বেও, Form এবং List ভিন্ন কাজ সমাধান করে। List সোয়াইপ অ্যাকশন এবং সারি সম্পাদনা ক্ষমতা সহ স্ক্রলযোগ্য ডেটা তালিকা প্রদর্শনের জন্য একটি সার্বজনীন কন্টেইনার। Form ডেটা ইনপুট এবং সেটিংসের জন্য একটি বিশেষায়িত কন্টেইনার, সিস্টেম নিয়ন্ত্রণ স্টাইলের জন্য অপ্টিমাইজ করা।

List গতিশীল ডেটা প্রদর্শনের জন্য উপযুক্ত: নিউজ ফিড, চ্যাট, পণ্য ক্যাটালগ। Form একটি পূর্বানুমানযোগ্য ফিল্ড সেট সহ স্থির স্ক্রিনের জন্য: ব্যবহারকারী প্রোফাইল, অ্যাপ সেটিংস, রেজিস্ট্রেশন ফর্ম। মূল পার্থক্য: Form উপাদান ইন্টারঅ্যাকটিভ নিয়ন্ত্রণ হতে পারে, যেখানে List সারিগুলি বেশিরভাগ ডেটা প্রদর্শন করে এবং নেভিগেশন বা অ্যাকশনের সাথে ট্যাপে সাড়া দেয়।

Apple Human Interface Guidelines (2025) অনুসারে, Form সেটিংস এবং ইনপুট স্ক্রিনের জন্য ব্যবহার করা উচিত যেখানে একটি স্ক্রিনে 3 থেকে 20টি নিয়ন্ত্রণ থাকে এবং সেগুলিকে সেকশনে ভাগ করা ব্যবহারযোগ্যতা উন্নত করে।

Form-এর ভিতরে Section

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 প্লেসহোল্ডার সহ সিস্টেম ইনপুট স্টাইল পায়।

সংখ্যাসূচক মানের জন্য, Stepper (ক্রমিক পরিবর্তন) এবং Slider (রেঞ্জে মসৃণ পরিবর্তন) ব্যবহার করা হয়। DatePicker একাধিক মোড সমর্থন করে: date, time, dateAndTime। রঙ নির্বাচনের জন্য ColorPicker উপলব্ধ। প্রতিটি উপাদান অতিরিক্ত কোড ছাড়াই প্ল্যাটফর্মে খাপ খায় — iOS-এ নিয়ন্ত্রণগুলি নেটিভ UIKit স্টাইল ব্যবহার করে, macOS-এ AppKit ব্যবহার করে।

Form-এর ভিতরে কাস্টম নিয়ন্ত্রণের জন্য, যেকোনো SwiftUI View ব্যবহার করা যেতে পারে — তারা স্ট্যান্ডার্ড সেকশন আচরণ উত্তরাধিকারসূত্রে পায়। তবে, সুপারিশ করা হয় সিস্টেম উপাদানগুলি মেনে চলার, কারণ তারা HIG সম্মতি নিশ্চিত করে এবং অতিরিক্ত কনফিগারেশন ছাড়াই অ্যাক্সেসিবিলিটি (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")
        }
    }
}

এই উদাহরণটি Form-এর ভিতরে Slider, DatePicker এবং NavigationLink-এর সমন্বয় প্রদর্শন করে। DatePicker শুধুমাত্র সময় প্রদর্শনের জন্য hourAndMinute মোড ব্যবহার করে। শেষ সেকশনে NavigationLink একটি উন্নত সেটিংস স্ক্রিনে রূপান্তর তৈরি করে — Settings-এর মতো ইন্টারফেসের জন্য একটি সাধারণ প্যাটার্ন। সেকশন হেডার এবং ফুটার ফর্মটিকে স্ব-ডকুমেন্টিং করে তোলে: ব্যবহারকারী অবিলম্বে বুঝতে পারেন প্রতিটি নিয়ন্ত্রণ কোন গ্রুপের অন্তর্গত।