SwiftUI-এ Section: এটি কী, সেকশন তৈরি এবং গ্রুপিং

SwiftUI-এ Section কী?

Section হল SwiftUI-এর একটি কাঠামোগত কম্পোনেন্ট যা Form এবং List কন্টেইনারের ভিতরে উপাদান গ্রুপ করার জন্য ডিজাইন করা হয়েছে। VStack বা HStack-এর বিপরীতে, Section সিস্টেম স্পেসিং, হেডার ও ফুটার এবং iOS-এ গোলাকার কোণযুক্ত ব্লকের আকারে ভিজুয়াল গ্রুপ হাইলাইটিং যোগ করে।

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

সিস্টেম স্বয়ংক্রিয়ভাবে সেকশনের মধ্যে স্পেসিং পরিচালনা করে: iOS-এ Section-গুলির মধ্যে দূরত্ব 16–20 পয়েন্ট, Section-এর ভিতরে উপাদানগুলির মধ্যে 0 (সারির মধ্যে বিভাজক)। ডেভেলপার padding মডিফায়ারের মাধ্যমে এই স্পেসিং পরিবর্তন করতে পারে না — এগুলি সিস্টেম দ্বারা নিয়ন্ত্রিত হয় একটি সামঞ্জস্যপূর্ণ চেহারা নিশ্চিত করতে।

Section-এর হেডার এবং ফুটার

Section দুটি ঐচ্ছিক প্যারামিটার গ্রহণ করে: header — গ্রুপের শিরোনাম, এবং footer — গ্রুপের নিচে ব্যাখ্যামূলক টেক্সট। হেডার সেকশনের উপাদানগুলির উপরে বোল্ড ক্যাপশন-স্টাইল ফন্টে প্রদর্শিত হয়, ফুটার ছোট ফন্টে ধূসর রঙে। উভয় প্যারামিটার যেকোনো SwiftUI View গ্রহণ করে, শুধু Text নয়।

Section-এর হেডার ব্যবহারকারীকে বুঝতে সাহায্য করে যে গ্রুপের ভিতরের উপাদানগুলি কোন বিভাগের অন্তর্গত। উদাহরণস্বরূপ, সেটিংস স্ক্রিনে, “বিজ্ঞপ্তি”, “গোপনীয়তা” এবং “অ্যাকাউন্ট”-এর মতো হেডার ব্যবহারকারীকে তৎক্ষণাৎ অভ্যস্ত করে। ফুটার ব্যাখ্যার জন্য উপযোগী: “মিটিংয়ের সময় বিজ্ঞপ্তি বন্ধ করুন” বা “পাসওয়ার্ডে কমপক্ষে 8টি অক্ষর থাকতে হবে।” ফুটার প্রয়ােজনে স্বয়ংক্রিয়ভাবে একাধিক লাইনে বিভক্ত হয়।

Section(
    header: Text("Account Security"),
    footer: Text("Use a strong password with at least 8 characters.")
) {
    SecureField("Current password", text: $currentPassword)
    SecureField("New password", text: $newPassword)
}

উদাহরণে, Section-এর হেডার “Account Security” এবং পাসওয়ার্ড নিরাপত্তা পরামর্শসহ একটি ফুটার রয়েছে। ব্যবহারকারী হেডারটিকে সেকশন লেবেল হিসেবে দেখে, দুটি ফিল্ড পূরণ করে এবং তাদের নিচে সতর্কতা পড়ে। এই কাঠামো UX উন্নত করে কারণ সেকশন সম্পর্কে সব তথ্য একই স্ক্রিনে রয়েছে, আলাদা সাহায্য পৃষ্ঠায় যাওয়ার প্রয়োজন ছাড়াই।

Form এবং List-এর ভিতরে Section

Section Form এবং List উভয়ের ভিতরেই কাজ করে, কিন্তু ভিজুয়াল উপস্থাপনা ভিন্ন। Form-এ, Section গোলাকার কোণ এবং সিস্টেম ব্যাকগ্রাউন্ডসহ একটি ব্লক হিসেবে প্রদর্শিত হয়, যা স্পেসিং দ্বারা সংলগ্ন সেকশন থেকে পৃথক। List-এ, Section প্লেইন স্টাইল — ব্যাকগ্রাউন্ড এবং গোলাকার কোণ ছাড়া, বা inset-grouped — Form-এর মতো গোলাকার ব্লকসহ ব্যবহার করতে পারে।

কন্টেইনারের পছন্দ Section-এর স্টাইলকে প্রভাবিত করে। যদি আপনি একই কন্টেন্টসহ Section Form এবং List-এ .insetGrouped স্টাইলের সাথে রাখেন, ফলাফল একই হবে। তবে, Form ডিফল্টরূপে সিস্টেম স্পেসিং যোগ করে এবং grouped স্টাইল ব্যবহার করে, যেখানে List-কে .listStyle(.insetGrouped) মডিফায়ারের মাধ্যমে স্পষ্টভাবে স্টাইল নির্দিষ্ট করতে হয়।

List-এ একই চেহারা পেতে, .listStyle(.insetGrouped) ব্যবহার করুন। এই স্টাইল Form-এর চেহারা অনুকরণ করে এবং List-এ তৈরি সেটিংস স্ক্রিনের জন্য উপযুক্ত। স্ট্যান্ডার্ড ডেটা তালিকার জন্য, .plain ব্যবহার করুন — সেকশন হাইলাইটিং ছাড়া, সারির মধ্যে পাতলা বিভাজকসহ।

ForEach-এর সাথে ডায়নামিক কন্টেন্ট

Section ForEach-এর মাধ্যমে ডায়নামিক সংখ্যক উপাদান ধারণ করতে পারে। এটি পুরো গ্রুপের জন্য হেডার এবং ফুটার সংরক্ষণ করে পুনরাবৃত্ত উপাদানসহ গ্রুপ তৈরি করতে দেয়। Section-এর ভিতরে ForEach একটি ডেটা কালেকশনের উপর পুনরাবৃত্তি করে এবং সেকশন কাঠামো না ভেঙে প্রতিটি উপাদানের জন্য চাইল্ড Views তৈরি করে।

ডায়নামিক সেকশন পরিবর্তনশীল সংখ্যক অপশনযুক্ত সেটিংস স্ক্রিনের জন্য উপযোগী: উপলব্ধ ভাষার তালিকা, সংযুক্ত ডিভাইস বা পুশ সাবস্ক্রিপশন। সেকশনের হেডার স্থির থাকে যখন কন্টেন্ট ডেটা অনুযায়ী পরিবর্তিত হয়।

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

    var body: some View {
        Form {
            Section(header: Text("Categories"),
                    footer: Text("Select your preferred categories")) {
                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: \(selected.count) categories")
                    .foregroundStyle(.secondary)
            }
        }
    }
}

এই উদাহরণে, ForEach ক্যাটাগরির অ্যারে থেকে প্রতিটি ক্যাটাগরির জন্য একটি 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("Profile Info")) {
                TextField("Display name", text: $displayName)
                TextField("Bio", text: $bio, axis: .vertical)
                    .lineLimit(3)
            }

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

            Section(header: Text("Stats"),
                    footer: Text("Last updated today at 2:30 PM")) {
                LabeledContent("Posts", value: "42")
                LabeledContent("Followers", value: "1,280")
                LabeledContent("Following", value: "346")
            }
        }
        .navigationTitle("Profile")
    }
}

তিনটি Section স্পষ্টভাবে কার্যকরী এলাকাগুলি পৃথক করে: সম্পাদনাযোগ্য প্রোফাইল ফিল্ড, গোপনীয়তা টগল এবং পরিসংখ্যান। দ্বিতীয় সেকশন যাচাইকরণ প্রদর্শন করে: “Show email” টগলটি নিষ্ক্রিয় যতক্ষণ না প্রোফাইল পাবলিক হয়। তৃতীয় সেকশনের ফুটার শেষ আপডেটের সময় দেখায় — অতিরিক্ত প্রাসঙ্গিক তথ্যের জন্য ফুটার ব্যবহারের একটি উদাহরণ। LabeledContent হল Form-এ কী-ভ্যালু জোড়া প্রদর্শনের জন্য একটি স্ট্যান্ডার্ড SwiftUI কম্পোনেন্ট।

কাস্টম হেডারসহ Section

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

এই উদাহরণটি দেখায় যে header যেকোনো SwiftUI View হতে পারে। Image এবং Text-সহ HStack ব্যবহার হেডারের পাশে একটি আইকন যোগ করে, যা সেকশনটিকে দৃশ্যত আরও প্রকাশভঙ্গিমাপূর্ণ করে। কাস্টম হেডার ইন্টারফেসের গুরুত্বপূর্ণ সেকশন হাইলাইট করার জন্য উপযোগী: বিজ্ঞপ্তি সেটিংস, পেইড ফিচার বা সতর্কতা সহ সেকশন। তবে, কাস্টম হেডারের অতিরিক্ত ব্যবহার সুপারিশ করা হয় না — ইন্টারফেসের সামঞ্জস্য বজায় রাখতে প্রতি স্ক্রিনে 1–2টি নন-স্ট্যান্ডার্ড স্টাইলিংয়ের সেকশন যথেষ্ট।