Canvas في Xcode — ما هو، محرر SwiftUI والعمل مع المعاينات

ما هو Canvas في Xcode؟

Canvas هو محرر معاينة مدمج في Xcode، تم تقديمه لأول مرة في Xcode 11 مع SwiftUI. يقع في اللوحة اليمنى للمحرر بجانب الكود ويعرض معاينة حية لـ SwiftUI View الحالية. يعمل Canvas في الوقت الفعلي: كل تغيير في الكود ينعكس فوراً على المعاينة دون إعادة ترجمة يدوية.

من الناحية المعمارية، Canvas هو عملية منفصلة (Preview Provider Extension) يقوم Xcode بتشغيلها عند فتح Canvas. تقوم العملية بتحميل PreviewProvider المُجمَّع، وتعرض النتيجة عبر Metal، وتعرضها في لوحة المحرر. إذا لم يتم تنفيذ PreviewProvider، يعرض Canvas رسالة “Preview paused — No preview provider found”.

واجهة Canvas

واجهة Canvas تتضمن شريط أدوات مع اختيار الجهاز والاتجاه ونظام الألوان والمقياس. تقوم أزرار Live Preview و Selectable و Embed In Diagram بتبديل أوضاع التفاعل. يدعم Canvas العرض المقسم: يمكن فتح عدة Canvas لملفات مختلفة في نفس مساحة العمل.

كيف يعمل Canvas التفاعلي

Live Preview هي الميزة الرئيسية لـ Canvas التي تجعل المعاينات تفاعلية. في هذا الوضع، يقوم Canvas بعرض View في عملية منفصلة ويمرر الإيماءات (النقر، التمرير، السحب) مرة أخرى إلى بيئة تشغيل SwiftUI. يمكن للمستخدم الضغط على الأزرار وملء حقول النص واختبار التنقل دون تشغيل المحاكي.

SwiftUI يعالج الإيماءات في Canvas من خلال نفس نظام الأحداث الموجود على الجهاز الحقيقي. الفرق في الأداء: يستخدم Canvas العرض عبر البرنامج من خلال Metal، بينما يستخدم المحاكي رسومات المضيف. هذا يعني أن الرسوم المتحركة المعقدة في Canvas قد تعمل بشكل أبطأ أو تظهر بشكل مختلف بصرياً.

عملية تحديث Canvas

تحديث Canvas يحدث على ثلاث مراحل. أولاً، يكتشف Xcode تغيير الملف ويقوم بتجميع PreviewProvider المُعدَّل فقط بشكل تدريجي. ثم يتم تحميل الوحدة الثنائية الجديدة في عملية PreviewProviderExtension. أخيراً، يعيد SwiftUI إنشاء View ويقوم بعرضها عبر Metal. تستغرق الدورة بأكملها من 0.5 إلى 2 ثانية اعتماداً على تعقيد View.

struct TappableButton: View {
    @State private var count = 0
    
    var body: some View {
        Button("Tapped \(count) times") {
            count += 1
        }
        .buttonStyle(.borderedProminent)
    }
}

struct TappableButton_Previews: PreviewProvider {
    static var previews: some View {
        TappableButton()
    }
}

التفاعلية: عند تشغيل Live Preview، يعمل الزر في Canvas كزر حقيقي — يزداد العداد مع كل نقرة، وتظهر حركة الضغط. هذا يتيح اختبار منطق الأزرار دون المحاكي.

إعداد Canvas

الإعدادات الأساسية لـ Canvas متاحة من خلال قائمة Editor → Canvas أو من خلال أزرار شريط أدوات Canvas. تشمل الخيارات الرئيسية اختيار الجهاز والاتجاه والسمة الداكنة ومقياس Dynamic Type. للإعدادات الدائمة، استخدم معدّلات PreviewProvider في الكود.

الإعدادات المتقدمة تشمل: Auto Activate Preview — التنشيط التلقائي لـ Canvas عند فتح ملف SwiftUI؛ Live Preview — وضع الإيماءات؛ Draw Live Edges — عرض حدود العرض؛ Show Preview Sizes — حجم منطقة المعاينة. يحفظ Xcode هذه الإعدادات بشكل محمول في ملفات مساحة العمل/المشروع.

الإعداد عبر PreviewProvider

الإعداد البرمجي يمنح تحكماً أكثر دقة في Canvas. المعدّلات المطبقة في المعاينات تتجاوز إعدادات شريط الأدوات ويتم حفظها في الكود — يراها جميع أعضاء الفريق عبر git.

struct SettingsView_Previews: PreviewProvider {
    static var previews: some View {
        SettingsView()
            .previewDevice("iPhone 16 Pro")
            .previewLayout(.device)
            .preferredColorScheme(.dark)
            .dynamicTypeSize(.xxxLarge)
            .previewDisplayName("Dark + XL Text")
    }
}

previewLayout مع .device يعرض شاشة الجهاز بالكامل، بينما .sizeThatFits يعرض معاينة مضغوطة بحجم يتناسب مع المحتوى. للعناصر الصغيرة والمكونات الصغرى، استخدم .sizeThatFits — يوفر مساحة في المحرر.

أمثلة على العمل مع Canvas

مثال 1: اختبار التكيف. استخدم ForEach مع أجهزة متعددة وأنظمة ألوان للتأكد من أن الواجهة تبدو جيدة على جميع الشاشات. يقوم Canvas بتحديث جميع المعاينات في وقت واحد، مما يتيح اكتشاف مشكلات التخطيط قبل تشغيل المحاكي.

مثال 2: معاينة مع بيانات. لـ Views التي تعرض محتوى ديناميكياً (قوائم، ملفات شخصية، بطاقات)، قم بإنشاء عدة نسخ ببيانات مختلفة في المعاينات. هذا أسرع من التبديل بين الشاشات في المحاكي وإدخال البيانات.

معاينة بحالات مختلفة

مجموعة المعاينات عبر Group أو ForEach تتيح عرض جميع حالات المكون في لوحة واحدة. بالنسبة للقوائم، هذا مناسب بشكل خاص: القائمة الفارغة، التحميل، الخطأ، والقائمة الممتلئة مرئية في وقت واحد.

struct LoadingStateView: View {
    let state: LoadingState
    
    var body: some View {
        switch state {
        case .loading:
            ProgressView()
        case .loaded(let items):
            List(items, id: \.self) { Text($0) }
        case .error(let message):
            Text(message).foregroundColor(.red)
        }
    }
}

struct LoadingStateView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            LoadingStateView(state: .loading)
                .previewDisplayName("Loading")
            LoadingStateView(state: .loaded(["Item 1", "Item 2"]))
                .previewDisplayName("Loaded")
            LoadingStateView(state: .error("Failed to load"))
                .previewDisplayName("Error")
        }
    }
}

Canvas مقابل المحاكي — مقارنة

Canvas والمحاكي يكملان بعضهما البعض، بدلاً من أن يحل أحدهما محل الآخر. Canvas مثالي للتكرار السريع أثناء التصميم: تحرير الكود مع ردود فعل فورية. المحاكي ضروري للتحقق النهائي: الأداء الحقيقي، الإيماءات المخصصة، تنبيهات النظام، والتكامل مع وظائف الأجهزة (الكاميرا، أجهزة الاستشعار).

وفقاً لمؤتمر WWDC 2024، تضع Apple Canvas كأداة للمراحل المبكرة من التطوير، والمحاكي لاختبارات التكامل. يُوصى بقضاء 60% من وقت تطوير واجهة المستخدم في Canvas و 40% — للاختبار على المحاكي أو الجهاز.

توصية: صمم في Canvas، واختبر على المحاكي. استخدم Live Preview لمنطق الإيماءات للأزرار والتنقل، لكن الاختبارات النهائية للرسوم المتحركة وطلبات الشبكة ووظائف الأجهزة يجب أن تتم على المحاكي أو جهاز حقيقي.

نصائح للعمل مع Canvas

نصيحة 1: استخدم الوضع القابل للتحديد. في الوضع القابل للتحديد (أيقونة المؤشر)، يمكنك النقر على أي عنصر في المعاينة ورؤية تسلسله الهرمي ومعدّلاته وإطاره في المفتش. هذا مفيد لتصحيح التخطيط: ترى فوراً الحشوة والإزاحة وحجم العنصر دون طباعة.

نصيحة 2: Embed In Diagram. يمكن لـ Canvas تجميع العناصر: حدد اثنتين أو أكثر من Views، انقر على Embed In Diagram — سيقوم Canvas بإنشاء VStack/HStack/ZStack وإعادة بناء الكود تلقائياً. هذا يسرع إنشاء التسلسل الهرمي المعقد دون كتابة الأقواس يدوياً.

نصيحة 3: مسح ذاكرة التخزين المؤقت لمعاينة Canvas. إذا توقف Canvas عن التحديث، امسح Product → Preview Cache. سيقوم Xcode بحذف ملفات PreviewProvider الثنائية المخزنة مؤقتاً وإعادة بنائها من الصفر. هذا يحل 90% من مشاكل تجميد Canvas.

تحسين سرعة Canvas

Canvas البطيء يحدث عادة بسبب العدد الزائد من المعاينات. لـ Views المعقدة، استخدم معاينة واحدة فقط بدلاً من مجموعة من 6–8. أوقف تشغيل Live Preview لـ Views بدون إيماءات — الوضع الثابت يعرض بشكل أسرع. تأكد من أن PreviewProvider يستخدم بيانات وهمية بدلاً من طلبات الشبكة الحقيقية.

// Quick debug: minimal preview
struct ComplexView_Previews: PreviewProvider {
    static var previews: some View {
        ComplexView()
            .previewLayout(.sizeThatFits) // compact mode
    }
}

previewLayout(.sizeThatFits) هو أسرع وضع في Canvas لأنه يعرض محتوى View فقط بدون حدود الجهاز. استخدمه للتصميم اليومي، وقم بتشغيل .device فقط للفحوصات النهائية.