@FocusState — یہ کیا ہے، SwiftUI میں فوکس اور کی بورڈ کا انتظام

SwiftUI میں @FocusState کیا ہے

@FocusState ایک property wrapper ہے جو فوکس کی حالت کو SwiftUI میں ایک مخصوص ان پٹ فیلڈ یا دیگر فوکس ایبل عنصر سے باندھتا ہے۔ UIKit کے برعکس، جہاں فوکس کا انتظام becomeFirstResponder اور resignFirstResponder طریقوں کے ذریعے ہوتا ہے، SwiftUI ایک اعلانیہ طریقہ استعمال کرتا ہے: آپ ایک حالت (@FocusState) کا اعلان کرتے ہیں اور اسے .focused() موڈیفائر کے ذریعے ایک عنصر سے باندھتے ہیں۔ حالت تبدیل کرنے سے خود بخود فوکس تبدیل ہو جاتا ہے۔

iOS 15 میں @FocusState کے متعارف ہونے سے پہلے، ڈویلپرز کو UITextField کے ارد گرد UIViewRepresentable ریپر بنانے یا تھرڈ پارٹی لائبریریاں استعمال کرنی پڑتی تھیں۔ @FocusState براہ راست SwiftUI میں ضم ہے اور TextField، TextEditor، SecureField اور SearchField کے ساتھ کام کرتا ہے۔ یہ کوڈ کو صاف ستھرا بناتا ہے، UIKit پلوں کی تعداد کم کرتا ہے اور جانچ کی صلاحیت کو بہتر بناتا ہے۔

WWDC Session 10136 — What's new in SwiftUI (2024) کے مطابق، @FocusState عناصر کے درمیان فوکس کی معلومات منتقل کرنے کے لیے SwiftUI کے preference key سسٹم کا استعمال کرتا ہے۔ جب کوئی فیلڈ فوکس حاصل کرتا ہے، SwiftUI خود بخود متعلقہ @FocusState پراپرٹی کو اپ ڈیٹ کرتا ہے، جس سے آپ کوڈ میں فوکس تبدیلیوں پر ردعمل دے سکتے ہیں۔

Bool کے ساتھ فوکس کا انتظام

@FocusState استعمال کرنے کا سب سے آسان طریقہ Bool قسم کے ساتھ ہے۔ جب کوئی فیلڈ فوکس میں ہوتی ہے، پراپرٹی true ہوتی ہے۔ جب فوکس ختم ہو جاتا ہے — false۔ آپ اسے true پر سیٹ کر کے فوکس مجبور کر سکتے ہیں، یا false پر سیٹ کر کے ہٹا سکتے ہیں۔

struct LoginForm: View {
    @State var email = ""
    @FocusState var isEmailFocused: Bool
    
    var body: some View {
        VStack {
            TextField("Email", text: $email)
                .focused($isEmailFocused)
            
            Button("کی بورڈ دکھائیں") {
                isEmailFocused = true
            }
            Button("کی بورڈ چھپائیں") {
                isEmailFocused = false
            }
        }
    }
}

اس مثال میں، isEmailFocused خود بخود true ہو جاتا ہے جب صارف ٹیکسٹ فیلڈ پر ٹیپ کرتا ہے، اور false جب کی بورڈ چھپ جاتا ہے۔ بٹن آپ کو پروگرامی طور پر فوکس منظم کرنے کی اجازت دیتے ہیں — کسٹم کی بورڈز، "اگلا" بٹن، اور ان حالات کے لیے مفید جہاں آپ کو فارم جمع کروانے کے بعد زبردستی کی بورڈ چھپانے کی ضرورت ہوتی ہے۔

متعدد فیلڈز کے لیے Enum کے ساتھ فوکس کا انتظام

متعدد فیلڈز والے فارم کے لیے، @FocusState FocusStateValue (یا Hashable) پروٹوکول کی پیروی کرنے والے enum کو سپورٹ کرتا ہے۔ ہر enum case ایک مخصوص فیلڈ سے مطابقت رکھتا ہے۔ یہ فیلڈز کے درمیان فوکس تبدیل کرنے کی اجازت دیتا ہے — مثال کے طور پر، جب صارف اگلے فیلڈ میں جانے کے لیے کی بورڈ پر "اگلا" دباتا ہے۔

struct RegistrationForm: View {
    enum Field: Hashable {
        case email
        case password
        case confirmPassword
    }
    
    @State var email = ""
    @State var password = ""
    @State var confirmPassword = ""
    @FocusState var focusedField: Field?
    
    var body: some View {
        Form {
            TextField("Email", text: $email)
                .focused($focusedField, equals: .email)
                .onSubmit { focusedField = .password }
            
            SecureField("Password", text: $password)
                .focused($focusedField, equals: .password)
                .onSubmit { focusedField = .confirmPassword }
            
            SecureField("Confirm", text: $confirmPassword)
                .focused($focusedField, equals: .confirmPassword)
                .onSubmit { submitForm() }
        }
    }
}

.onSubmit موڈیفائر پر غور کریں — یہ اس وقت کال ہوتا ہے جب صارف کی بورڈ پر "Return" دباتا ہے۔ .onSubmit کے اندر ہم focusedField کو اگلے فیلڈ پر سوئچ کرتے ہیں، جو خود بخود فوکس منتقل کر دیتا ہے۔ آخری فیلڈ فارم جمع کروانے کے لیے submitForm() کو کال کرتا ہے۔

کی بورڈ چھپانا اور دکھانا

@FocusState کی بورڈ چھپانے کا ایک آسان طریقہ فراہم کرتا ہے — بس پراپرٹی کو nil (enum کے لیے) یا false (Bool کے لیے) پر سیٹ کریں۔ تاہم، بعض اوقات آپ کو کی بورڈ کو کسی مخصوص فیلڈ سے باندھے بغیر چھپانے کی ضرورت ہوتی ہے — مثال کے طور پر، خالی جگہ پر ٹیپ کرتے وقت۔ اس صورت میں، کئی طریقے ہیں۔

struct DismissKeyboardView: View {
    @State var text = ""
    @FocusState var isFocused: Bool
    
    var body: some View {
        TextField("Enter text", text: $text)
            .focused($isFocused)
            .toolbar {
                ToolbarItemGroup(placement: .keyboard) {
                    Spacer()
                    Button("مکمل") {
                        isFocused = false
                    }
                }
            }
    }
}

placement .keyboard کے ساتھ .toolbar موڈیفائر کی بورڈ کے اوپر ایک بٹن شامل کرتا ہے۔ کی بورڈ چھپانے کے لیے iOS میں یہ ایک معیاری UX پیٹرن ہے۔ ایک متبادل طریقہ پس منظر پر ٹیپ کرنے پر فوکس ری سیٹ کرنے کے لیے روٹ VStack پر .onTapGesture استعمال کرنا ہے۔

فوکس اور فارم کی توثیق

@FocusState فارم کی توثیق کے ساتھ بہترین طور پر مل جاتا ہے۔ ایک عام پیٹرن: "جمع کروائیں" بٹن دبانے کے بعد، تمام فیلڈز کی توثیق کریں اور پہلی غلطی والے فیلڈ پر فوکس سیٹ کریں۔ یہ صارف کے تجربے کو بہتر بناتا ہے — صارف فوراً دیکھ لیتا ہے کہ کس فیلڈ کو درست کرنے کی ضرورت ہے۔

struct ValidatedForm: View {
    enum Field: Hashable { case name; case phone }
    
    @State var name = ""
    @State var phone = ""
    @FocusState var focusedField: Field?
    @State var errors: [String] = []
    
    var body: some View {
        Form {
            TextField("Name", text: $name)
                .focused($focusedField, equals: .name)
            TextField("Phone", text: $phone)
                .focused($focusedField, equals: .phone)
            
            Button("جمع کروائیں") { validateAndSubmit() }
        }
    }
    
    func validateAndSubmit() {
        if name.isEmpty {
            focusedField = .name
            return
        }
        if phone.isEmpty {
            focusedField = .phone
            return
        }
        // فارم جمع کروائیں
    }
}

اس مثال میں، اگر name فیلڈ خالی ہے، تو فوکس اس کی طرف چلا جاتا ہے، اور صارف فوراً دیکھ لیتا ہے کہ غلطی کہاں ہے۔ اگر name بھرا ہوا ہے، تو phone چیک کیا جاتا ہے۔ یہ فارموں کے لیے قدرتی رویہ ہے — صارف اوپر سے نیچے فیلڈز بھرتا ہے، اور توثیق اسی ترتیب کی پیروی کرتی ہے۔

@FocusState کے ساتھ عام غلطیاں

سب سے عام غلطی Hashable کی پیروی نہ کرنے والی قسم کے ساتھ @FocusState استعمال کرنے کی کوشش کرنا ہے۔ @FocusState کے لیے ضروری ہے کہ پراپرٹی کی قسم Hashable ہو (Bool اور اختیاری enum پہلے ہی پیروی کرتے ہیں)۔ اگر آپ کسٹم سٹرکچر استعمال کرنے کی کوشش کر رہے ہیں، تو یقینی بنائیں کہ یہ Hashable کو لاگو کرتا ہے۔

• .focused() موڈیفائر بھول گئے — @FocusState خود بخود فوکس کا انتظام نہیں کرتا۔ اسے .focused($property) یا .focused($property, equals: .case) کے ذریعے فیلڈ سے باندھنا ضروری ہے۔
• ایک View میں متعدد @FocusState — متعدد فیلڈز کے لیے، متعدد @FocusState پراپرٹیز کے بجائے enum کے ساتھ ایک @FocusState استعمال کریں۔ متعدد Bool پراپرٹیز آپس میں مطابقت نہیں رکھیں گی۔
• @FocusState کو مرکزی تھریڈ سے باہر تبدیل کرنا — @FocusState کو صرف مرکزی تھریڈ پر تبدیل کیا جانا چاہیے، جیسے SwiftUI میں تمام UI پراپرٹیز۔ غیر مطابقت پذیر کارروائیوں کو تبدیل کرنے سے پہلے MainActor پر سوئچ ہونا چاہیے۔
• View دوبارہ بنانے پر فوکس ری سیٹ — اگر View دوبارہ بنایا جاتا ہے، تو @FocusState ری سیٹ ہو سکتا ہے۔ مستحکم View شناخت کے لیے .id() موڈیفائر استعمال کریں۔

// ❌ غلط: enum کے بجائے دو @FocusState Bool
@FocusState var isNameFocused: Bool
@FocusState var isEmailFocused: Bool

// ✅ صحیح: ایک enum @FocusState
enum Field: Hashable { case name; case email }
@FocusState var focusedField: Field?