معمارية Flutter

تهدف هذه المقالة إلى تقديم نظرة عامة عالية المستوى على بنية Flutter ، بما في ذلك المبادئ والمفاهيم الأساسية التي تشكل تصميمها.

Flutter عبارة عن مجموعة أدوات لواجهة المستخدم عبر الأنظمة الأساسية تم تصميمها للسماح بإعادة استخدام التعليمات البرمجية عبر أنظمة التشغيل مثل iOS و Android ، مع السماح أيضًا للتطبيقات بالتفاعل مباشرة مع خدمات النظام الأساسي الأساسية. الهدف هو تمكين المطورين من تقديم تطبيقات عالية الأداء تبدو طبيعية على منصات مختلفة ، مع احتضان الاختلافات حيثما وجدت مع مشاركة أكبر قدر ممكن من التعليمات البرمجية.

أثناء التطوير ، تعمل تطبيقات Flutter في جهاز افتراضي يوفر إعادة تحميل سريعة للتغييرات دون الحاجة إلى إعادة ترجمة كاملة. للإصدار ، يتم تجميع تطبيقات Flutter مباشرة إلى رمز الجهاز ، سواء أكانت تعليمات Intel x64 أو ARM ، أو إلى JavaScript في حالة استهداف الويب. إطار العمل مفتوح المصدر ، مع ترخيص BSD مسموح به ، ولديه نظام بيئي مزدهر من حزم الطرف الثالث التي تكمل وظائف المكتبة الأساسية.

هذه النظرة العامة مقسمة إلى عدد من الأقسام:

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

الطبقات المعمارية
تم تصميم Flutter كنظام قابل للتوسيع متعدد الطبقات. توجد كسلسلة من المكتبات المستقلة التي تعتمد كل منها على الطبقة الأساسية. لا توجد طبقة لها حق وصول مميز إلى الطبقة أدناه ، وكل جزء من مستوى إطار العمل مصمم ليكون اختياريًا وقابل للاستبدال.

بالنسبة إلى نظام التشغيل الأساسي ، يتم تجميع تطبيقات Flutter بنفس الطريقة مثل أي تطبيق أصلي آخر. توفر أداة التضمين الخاصة بالمنصة نقطة دخول ؛ ينسق مع نظام التشغيل الأساسي للوصول إلى خدمات مثل عرض الأسطح وإمكانية الوصول والمدخلات ؛ ويدير حلقة حدث الرسالة. تمت كتابة أداة التضمين بلغة مناسبة للنظام الأساسي: حاليًا Java و C ++ لنظام Android و Objective-C / Objective-C ++ لنظامي التشغيل iOS و macOS و C ++ لنظامي التشغيل Windows و Linux. باستخدام أداة التضمين ، يمكن دمج كود Flutter في تطبيق موجود كوحدة نمطية ، أو قد يكون الرمز هو المحتوى الكامل للتطبيق. يتضمن Flutter عددًا من أدوات التضمين للأنظمة الأساسية المستهدفة الشائعة ، ولكن توجد أيضًا أدوات تضمين أخرى.

في قلب Flutter يوجد محرك Flutter ، والذي تتم كتابته في الغالب بلغة C ++ ويدعم الأساسيات اللازمة لدعم جميع تطبيقات Flutter. المحرك مسؤول عن تنقيط المشاهد المركبة كلما دعت الحاجة إلى رسم إطار جديد. يوفر مستوى منخفض من التنفيذ لواجهة برمجة تطبيقات Flutter الأساسية ، بما في ذلك الرسومات (من خلال Skia) ، وتخطيط النص ، وإدخال / إخراج الملفات والشبكة ، ودعم إمكانية الوصول ، وبنية المكونات الإضافية ، ووقت تشغيل Dart وتجميع أدوات التحويل.

يتعرض المحرك لإطار عمل Flutter من خلال dart: ui ، والذي يلف كود C ++ الأساسي في فئات Dart. تعرض هذه المكتبة العناصر الأولية ذات المستوى الأدنى ، مثل فئات إدخال القيادة والرسومات والأنظمة الفرعية لعرض النص.

عادةً ما يتفاعل المطورون مع Flutter من خلال إطار عمل Flutter ، والذي يوفر إطارًا حديثًا تفاعليًا مكتوبًا بلغة Dart. يتضمن مجموعة غنية من النظام الأساسي والتخطيط والمكتبات التأسيسية المكونة من سلسلة من الطبقات. نعمل من الأسفل إلى الأعلى ، لدينا:

الفصول التأسيسية الأساسية وخدمات البناء مثل الرسوم المتحركة والرسم والإيماءات التي تقدم تجريدات شائعة الاستخدام على الأساس الأساسي.
توفر طبقة التجسيد فكرة تجريدية للتعامل مع التخطيط. باستخدام هذه الطبقة ، يمكنك بناء شجرة من الكائنات القابلة للتقديم. يمكنك معالجة هذه الكائنات ديناميكيًا ، حيث تقوم الشجرة تلقائيًا بتحديث التخطيط لتعكس تغييراتك.
طبقة عناصر واجهة المستخدم عبارة عن تكوين تجريدي. يحتوي كل كائن تجسيد في طبقة التجسيد على فئة مقابلة في طبقة عناصر واجهة المستخدم. بالإضافة إلى ذلك ، تتيح لك طبقة عناصر واجهة المستخدم تحديد مجموعات من الفئات التي يمكنك إعادة استخدامها. هذه هي الطبقة التي يتم فيها تقديم نموذج البرمجة التفاعلية.
تقدم مكتبات المواد وكوبرتينو مجموعات شاملة من عناصر التحكم التي تستخدم العناصر الأولية لتكوين طبقة عنصر واجهة المستخدم لتطبيق مواد التصميم أو لغات تصميم iOS.
إطار Flutter صغير نسبيًا ؛ يتم تنفيذ العديد من الميزات عالية المستوى التي قد يستخدمها المطورون كحزم ، بما في ذلك المكونات الإضافية للنظام الأساسي مثل الكاميرا وعرض الويب ، بالإضافة إلى ميزات لا تعتمد على النظام الأساسي مثل الأحرف و http والرسوم المتحركة التي تعتمد على مكتبات Dart و Flutter الأساسية. تأتي بعض هذه الحزم من النظام البيئي الأوسع ، والتي تغطي خدمات مثل المدفوعات داخل التطبيق ومصادقة Apple والرسوم المتحركة.

تتنقل بقية هذه النظرة العامة على نطاق واسع إلى أسفل الطبقات ، بدءًا من النموذج التفاعلي لتطوير واجهة المستخدم. بعد ذلك ، نصف كيفية تكوين عناصر واجهة المستخدم معًا وتحويلها إلى كائنات يمكن عرضها كجزء من أحد التطبيقات. نصف كيف يتفاعل Flutter مع التعليمات البرمجية الأخرى على مستوى النظام الأساسي ، قبل إعطاء ملخص موجز لكيفية اختلاف دعم الويب لـ Flutter عن الأهداف الأخرى.

واجهات المستخدم التفاعلية
على السطح ، يعد Flutter إطارًا تفاعليًا لواجهة مستخدم إعلاني زائف ، حيث يوفر المطور تعيينًا من حالة التطبيق إلى حالة الواجهة ، ويتولى الإطار مهمة تحديث الواجهة في وقت التشغيل عندما تتغير حالة التطبيق. هذا النموذج مستوحى من العمل الذي جاء من Facebook لإطار عمل React الخاص به ، والذي يتضمن إعادة التفكير في العديد من مبادئ التصميم التقليدية.

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

هناك العديد من الأماكن التي يمكن فيها تغيير الحالة: مربع الألوان ، ومنزلق تدرج الألوان ، وأزرار الاختيار. عندما يتفاعل المستخدم مع واجهة المستخدم ، يجب أن تنعكس التغييرات في كل مكان آخر. والأسوأ من ذلك ، ما لم يتم توخي الحذر ، يمكن أن يتسبب تغيير طفيف في جزء واحد من واجهة المستخدم في حدوث تأثيرات متتالية لأجزاء من التعليمات البرمجية تبدو غير ذات صلة.

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

يتخذ Flutter ، إلى جانب الأطر التفاعلية الأخرى ، مقاربة بديلة لهذه المشكلة ، من خلال فصل واجهة المستخدم صراحة عن حالتها الأساسية. باستخدام واجهات برمجة التطبيقات على نمط React ، يمكنك فقط إنشاء وصف واجهة المستخدم ، ويتولى إطار العمل استخدام هذا التكوين لإنشاء و / أو تحديث واجهة المستخدم بالشكل المناسب.

في Flutter ، يتم تمثيل عناصر واجهة المستخدم (على غرار المكونات في React) بفئات غير قابلة للتغيير تُستخدم لتكوين شجرة من الكائنات. تُستخدم هذه الأدوات لإدارة شجرة منفصلة للكائنات للتخطيط ، والتي تُستخدم بعد ذلك لإدارة شجرة منفصلة للكائنات للتركيب. Flutter هو ، في جوهره ، سلسلة من الآليات للمشي بكفاءة في الأجزاء المعدلة من الأشجار ، وتحويل أشجار الكائنات إلى أشجار منخفضة المستوى من الكائنات ، ونشر التغييرات عبر هذه الأشجار.