SwiftUI — মূল ধারণা: View, State এবং Data Flow

SwiftUI কী?

SwiftUI — Apple এর ডিক্লেয়ারেটিভ UI ফ্রেমওয়ার্ক, যা UIKit থেকে আমূল ভিন্ন। কন্ট্রোলার, ভিউ তৈরি এবং তাদের লাইফসাইকেল ম্যানুয়ালি পরিচালনা করার পরিবর্তে, ডেভেলপার ইন্টারফেসকে ডিক্লেয়ারেশন হিসেবে বর্ণনা করে: স্ক্রিনে কী থাকা উচিত, এটি কীভাবে তৈরি করতে হবে তা নয়। SwiftUI রিঅ্যাক্টিভিটির নীতির উপর ভিত্তি করে তৈরি: ইন্টারফেস স্টেটের একটি ফাংশন। স্টেট পরিবর্তিত হলে, SwiftUI স্বয়ংক্রিয়ভাবে সমস্ত নির্ভরশীল Views-এর body পুনঃগণনা করে এবং স্ক্রিনের শুধুমাত্র পরিবর্তিত অংশগুলি আপডেট করে। SwiftUI iOS 13+, iPadOS 13+, macOS 10.15+, watchOS 6+, tvOS 13+ এবং visionOS 1+ এ উপলব্ধ। SwiftUI কোড ক্রস-প্ল্যাটফর্ম: একটি ফাইল iPhone, iPad, Mac এবং Apple Watch-এ ন্যূনতম প্ল্যাটফর্ম অভিযোজন সহ কাজ করে। Apple WWDC Session 101 (2024) অনুসারে, SwiftUI App Store-এর 90% এরও বেশি স্ট্যান্ডার্ড UI প্যাটার্ন কভার করে।

SwiftUI বনাম UIKit

UIKit — ইম্পেরেটিভ ফ্রেমওয়ার্ক (2008): ডেভেলপার UIViewController তৈরি করে, viewDidLoad-এ subviews কনফিগার করে, UITableView-এর জন্য delegate/datasource ইমপ্লিমেন্ট করে এবং reloadData বা setNeedsLayout-এর মাধ্যমে স্ক্রিন আপডেট করে। SwiftUI কন্ট্রোলারকে সরল View স্ট্রাকচার, ডেলিগেটকে bindings এবং onChange, Auto Layout-কে HStack/VStack/ZStack এবং মডিফায়ার (padding, frame, offset) দিয়ে প্রতিস্থাপন করে। UIKit-এর ARC-এর মাধ্যমে ম্যানুয়াল মেমোরি ব্যবস্থাপনা প্রয়োজন; SwiftUI স্ট্রাকচার ব্যবহার করে যেগুলোর রেফারেন্স কাউন্টিং প্রয়োজন হয় না। SwiftUI-এর কর্মক্ষমতা UIKit-এর তুলনীয়: ফ্রেমওয়ার্কটি ন্যূনতম পরিবর্তন সেটের জন্য diffing অ্যালগরিদম ব্যবহার করে। IT Sectr-এ, iOS 17+ টার্গেট সহ নতুন প্রকল্পের জন্য SwiftUI ব্যবহৃত হয়; iOS 14–15 সমর্থনকারী প্রকল্পগুলির জন্য সীমিত SwiftUI সামঞ্জস্যের কারণে UIKit প্রয়োজন।

SwiftUI ডিক্লেয়ারেটিভ সিনট্যাক্স

SwiftUI-তে, ইন্টারফেস ViewBuilder — একটি result builder-এর মাধ্যমে বর্ণিত হয় যা Views-এর সেটকে tuple বা Group-এ রূপান্তর করে। মডিফায়ার (.padding(), .font(), .foregroundColor()) মূল অবজেক্ট পরিবর্তন না করে পরিবর্তিত সেটিংস সহ নতুন Views তৈরি করে। প্রতিটি মডিফায়ার একটি নতুন View রিটার্ন করে, যা চেইনিং সক্ষম করে। ViewBuilder if/else, switch, ForEach সমর্থন করে — পৃথক কন্ট্রোলার ছাড়াই শর্তসাপেক্ষ এবং চক্রীয় রেন্ডারিং। SwiftUI-তে View একটি value type (struct), যা পূর্বানুমেয় আচরণ নিশ্চিত করে এবং race conditions দূর করে।

View প্রোটোকল এবং computed property body

View — একটি প্রোটোকল যার একমাত্র প্রয়োজন: some View টাইপের computed property body। View অনুসরণকারী প্রতিটি স্ট্রাকচার body-তে স্ক্রিনের নিজস্ব অংশ বর্ণনা করে। some View টাইপটি একটি অস্বচ্ছ রিটার্ন টাইপ যা রিটার্ন করা View-এর কংক্রিট টাইপ লুকায় (VStack, HStack, ZStack, Text, Image ইত্যাদি স্ট্যাকিং)। Swift কম্পাইলার কম্পাইল টাইমে কংক্রিট টাইপ অনুমান করে, টাইপ ইরেজার ছাড়াই সরাসরি কলের কর্মক্ষমতা বজায় রাখে।

import SwiftUI

struct GreetingView: View {
    var name: String
    
    var body: some View {
        VStack(spacing: 12) {
            Text("হ্যালো, \(name)!")
                .font(.largeTitle)
                .foregroundColor(.primary)
            
            Text("SwiftUI-তে স্বাগতম")
                .font(.body)
                .foregroundColor(.secondary)
        }
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 12)
                .fill(.ultraThinMaterial)
        )
    }
}

GreetingView স্ট্রাকচার একটি name প্যারামিটার নেয় এবং একটি উল্লম্ব স্ট্যাকে দুটি টেক্সট ব্লক প্রদর্শন করে। মডিফায়ার .font, .foregroundColor, .padding এবং .background চেহারা কনফিগার করে। SwiftUI প্রতিবার ইনপুট প্যারামিটার (name) পরিবর্তিত হলে body কল করে — পুনরায় আঁকা শুধুমাত্র পরিবর্তিত অংশগুলির জন্য ঘটে। উদাহরণটি RoundedRectangle ব্যবহার করে .ultraThinMaterial সহ — SwiftUI-তে নির্মিত একটি নেটিভ ব্লার ব্যাকগ্রাউন্ড।

@State: SwiftUI-তে লোকাল স্টেট

@State — একটি property wrapper যা একক View-এর অন্তর্গত লোকাল স্টেট ঘোষণা করে। SwiftUI স্বয়ংক্রিয়ভাবে State মেমোরি পরিচালনা করে: মান পরিবর্তিত হলে body পুনরায় আঁকে, কিন্তু শুধুমাত্র সেই Views-গুলির জন্য যারা সেই State ব্যবহার করে। State সরল টাইপের (String, Int, Bool, enum) জন্য source of truth। জটিল ডেটা মডেলের জন্য @State ব্যবহার করবেন না — পরিবর্তে @StateObject এবং @ObservedObject ব্যবহার করুন। State প্রাইভেট হওয়া উচিত এবং View-এর ভিতরেই সংরক্ষিত হওয়া উচিত, কম্পোনেন্টের মধ্যে পাস করা উচিত নয়।

import SwiftUI

struct CounterView: View {
    @State private var count = 0
    
    var body: some View {
        VStack(spacing: 20) {
            Text("গণনা: \(count)")
                .font(.system(size: 48, weight: .bold))
            
            Button(action: { count += 1 }) {
                Label("বৃদ্ধি", systemImage: "plus.circle")
            }
            .buttonStyle(.borderedProminent)
        }
        .padding()
    }
}

প্রাথমিক count মান = 0। প্রতিটি বাটন প্রেস count বৃদ্ধি করে; SwiftUI সম্পূর্ণ CounterView (সমস্ত Views) স্বয়ংক্রিয়ভাবে পুনরায় আঁকে। UIKit-এ, অনুরূপ দৃশ্যের জন্য IBOutlet, IBAction এবং ম্যানুয়াল label.text আপডেটের প্রয়োজন হতো। @State নিশ্চিত করে যে View শুধুমাত্র নির্দিষ্ট State পরিবর্তিত হলে পুনরায় আঁকে — SwiftUI-এর diffing অ্যালগরিদম ট্রিতে ন্যূনতম পরিবর্তন খুঁজে পায়।

@Binding: Views-এর মধ্যে দ্বি-মুখী যোগাযোগ

@Binding — একটি property wrapper যা View এবং সেই ডেটার মধ্যে দ্বি-মুখী সংযোগ তৈরি করে যার মালিক View নয়। Binding, State (বা অন্য source of truth)-এর একটি রেফারেন্স, যা চাইল্ড View-কে প্যারেন্টে সংরক্ষিত মান পড়তে এবং পরিবর্তন করতে দেয়। Binding $ উপসর্গ দ্বারা চিহ্নিত করা হয়: $count চাইল্ড View-এ Binding<Int> পাস করে। Binding ছাড়া, চাইল্ড View প্যারেন্টের ডেটা পরিবর্তন করতে পারে না — শুধু পড়তে পারে।

import SwiftUI

struct StepperControl: View {
    @Binding var value: Int
    let range: ClosedRange<Int>
    
    var body: some View {
        HStack {
            Button(action: { if value > range.lowerBound { value -= 1 } }) {
                Image(systemName: "minus.circle")
            }
            Text("\(value)")
                .frame(minWidth: 40)
            Button(action: { if value < range.upperBound { value += 1 } }) {
                Image(systemName: "plus.circle")
            }
        }
    }
}

struct ParentView: View {
    @State private var quantity = 5
    
    var body: some View {
        StepperControl(value: $quantity, range: 1...10)
    }
}

ParentView State quantity-এর মালিক এবং $quantity-এর মাধ্যমে Binding পাস করে। StepperControl মান পরিবর্তন করতে পারে, এবং প্যারেন্টের quantity স্বয়ংক্রিয়ভাবে সিঙ্ক হয়। Binding ডেটার কপি নয়, বরং source of truth-এর একটি সেতু। কাস্টম কন্ট্রোল, এডিটর এবং পুনঃব্যবহারযোগ্য কম্পোনেন্টের জন্য @Binding ব্যবহার করুন যেগুলোর প্যারেন্টের ডেটা পরিবর্তন করার প্রয়োজন হয়।

@ObservedObject এবং @StateObject: বাহ্যিক ডেটা মডেল

@StateObject — ObservableObject অনুসরণকারী একটি ক্লাসের ইনস্ট্যান্স তৈরি এবং মালিকানার জন্য property wrapper। View লাইফসাইকেলে একবার অবজেক্ট তৈরি করে এবং এর @Published প্রপার্টি পরিবর্তিত হলে পুনরায় আঁকে। @ObservedObject — অনুরূপ wrapper, কিন্তু View অবজেক্টের মালিক নয় — অবজেক্ট View-এর বাইরে তৈরি এবং সংরক্ষিত হয় (ইনিশিয়ালাইজারের মাধ্যমে পাস করা হয়)। Apple View হায়ারার্কিতে source of truth-এর জন্য @StateObject এবং ডিপেন্ডেন্সি ইনজেকশনের জন্য @ObservedObject সুপারিশ করে।

import SwiftUI
import Combine

class UserSettings: ObservableObject {
    @Published var username: String = "Guest"
    @Published var isLoggedIn = false
}

struct ProfileView: View {
    @StateObject private var settings = UserSettings()
    
    var body: some View {
        VStack {
            TextField("Username", text: $settings.username)
                .textFieldStyle(.roundedBorder)
            
            Toggle("Logged In", isOn: $settings.isLoggedIn)
            
            if settings.isLoggedIn {
                Text("\(settings.username), স্বাগতম!")
                    .font(.headline)
            }
        }
        .padding()
    }
}

UserSettings — দুটি @Published প্রপার্টি সহ একটি ObservableObject। ProfileView @StateObject-এর মাধ্যমে অবজেক্টের মালিক। username বা isLoggedIn-এর পরিবর্তন স্বয়ংক্রিয়ভাবে ProfileView পুনরায় আঁকে। @Published SwiftUI-কে পরিবর্তন সম্পর্কে জানাতে Combine Publisher ব্যবহার করে। চাইল্ড Views-এ settings পাস করতে @ObservedObject ব্যবহার করুন:

SwiftUI-তে Data Flow: সম্পূর্ণ চিত্র

Apple SwiftUI-তে Data Flow-এর চারটি স্তর সংজ্ঞায়িত করে: @State (লোকাল, value type), @Binding (দ্বি-মুখী), @StateObject/@ObservedObject (ObservableObject সহ reference type), @EnvironmentObject (গ্লোবাল, পরিবেশের মাধ্যমে ইনজেক্ট)। EnvironmentObject ইনিশিয়ালাইজারে স্পষ্ট পাসিং ছাড়াই সম্পূর্ণ View হায়ারার্কিতে ডেটা পাস করার অনুমতি দেয়। অতিরিক্তভাবে, @AppStorage UserDefaults-এর সাথে কাজ করে, @SceneStorage সিন স্টেটের সাথে, @FetchRequest Core Data-এর সাথে। Data Flow স্তরের পছন্দ অ্যাপ্লিকেশন আর্কিটেকচার নির্ধারণ করে: সরল স্ক্রিনগুলি State/Binding ব্যবহার করে, মডিউলারগুলি ObservedObject ব্যবহার করে, বড় আকারেরগুলি EnvironmentObject + Redux-সদৃশ সমাধান (TCA, Composable Architecture) ব্যবহার করে।