Flutter - Architecture Application معيارية تطبيق الرفرفة فلاطر
Flutter - Architecture Application معيارية تطبيق الرفرفة فلاطر
في هذا الفصل ، دعونا نناقش بنية إطار Flutter.
Flutter widget
المفهوم الأساسي لإطار عمل Flutter هو In Flutter ، كل شيء عبارة عن عنصر واجهة مستخدم . الأدوات المصغّرة هي في الأساس مكونات واجهة مستخدم تُستخدم لإنشاء واجهة مستخدم للتطبيق.
في Flutter ، يعد التطبيق بحد ذاته أداة. التطبيق هو عنصر واجهة المستخدم ذو المستوى الأعلى ويتم إنشاء واجهة المستخدم الخاصة به باستخدام عنصر واحد أو أكثر (عناصر واجهة مستخدم) ، والذي يتم إنشاؤه مرة أخرى باستخدام عناصر واجهة المستخدم الفرعية. تساعدنا ميزة التركيب هذه على إنشاء واجهة مستخدم بأي تعقيد.
على سبيل المثال ، التسلسل الهرمي لعنصر واجهة المستخدم لتطبيق hello world (الذي تم إنشاؤه في الفصل السابق) كما هو محدد في الرسم التخطيطي التالي -
تطبيق Hello World
هنا النقاط التالية تستحق الذكر -
MyApp هو عنصر واجهة المستخدم الذي أنشأه المستخدم ويتم إنشاؤه باستخدام عنصر واجهة مستخدم Flutter الأصلي ، MaterialApp .
يحتوي MaterialApp على خاصية منزلية لتحديد واجهة المستخدم للصفحة الرئيسية ، والتي تعد مرة أخرى أداة تم إنشاؤها بواسطة المستخدم ، MyHomePage .
يتم إنشاء MyHomePage باستخدام عنصر واجهة مستخدم أصلي آخر للرفرفة ، وهو Scaffold
سقالة خاصيتين - body و appBar
يتم استخدام body لتحديد واجهة المستخدم الرئيسية الخاصة به ويتم استخدام شريط التطبيقات لتحديد واجهة مستخدم الرأس الخاصة به
يتم إنشاء Header UI باستخدام عنصر واجهة مستخدم flutter الأصلي ، ويتم إنشاء AppBar و Body UI باستخدام عنصر واجهة المستخدم Center
تحتوي أداة المركز على خاصية " child" ، والتي تشير إلى المحتوى الفعلي ويتم إنشاؤه باستخدام عنصر واجهة المستخدم للنص
إيماءات Flutter gesture
تدعم أدوات Flutter التفاعل من خلال عنصر واجهة مستخدم خاص ، GestureDetector . GestureDetector هو عنصر واجهة مستخدم غير مرئي يتمتع بالقدرة على التقاط تفاعلات المستخدم مثل النقر والسحب وما إلى ذلك من عنصر واجهة المستخدم الفرعي . تدعم العديد من عناصر واجهة المستخدم الأصلية لـ Flutter التفاعل من خلال استخدام GestureDetector . يمكننا أيضًا دمج ميزة تفاعلية في عنصر واجهة المستخدم الحالي عن طريق تكوينها باستخدام أداة GestureDetector . سنتعلم الإيماءات بشكل منفصل في الفصول القادمة.
مفهوم الحالة Flutter state
تدعم أدوات Flutter صيانة الحالة من خلال توفير عنصر واجهة مستخدم خاص ، StatefulWidget . يجب اشتقاق عنصر واجهة المستخدم من عنصر واجهة مستخدم StatefulWidget لدعم صيانة الحالة ويجب اشتقاق جميع عناصر واجهة المستخدم الأخرى من StatefulWidget . أدوات Flutter تفاعلية في اللغة الأصلية. هذا مشابه لـ responsejs وسيتم إعادة تقديم StatefulWidget تلقائيًا كلما تم تغيير حالته الداخلية. تم تحسين إعادة العرض من خلال العثور على الفرق بين واجهة مستخدم الأداة القديمة والجديدة وتقديم التغييرات الضرورية فقط
طبقات Flutter layers
إن أهم مفهوم لإطار Flutter هو أن الإطار يتم تجميعه في فئة متعددة من حيث التعقيد ويتم ترتيبها بوضوح في طبقات من تقليل التعقيد. يتم إنشاء طبقة باستخدام طبقة المستوى التالي مباشرة. الطبقة العليا هي عنصر واجهة مستخدم خاص بنظامي Android و iOS . تحتوي الطبقة التالية على جميع الحاجيات الأصلية للرفرفة. الطبقة التالية هي طبقة التجسيد Rendering layer ، وهي مكون عارض بمستوى منخفض وتعرض كل شيء في تطبيق flutter. تنخفض الطبقات إلى رمز خاص بالمنصة الأساسية
نظرة عامة على طبقة في Flutter محددة في الرسم البياني أدناه -
نظرة عامة على الطبقة
النقاط التالية تلخص بنية Flutter -
في Flutter ، كل شيء عبارة عن عنصر واجهة مستخدم ويتكون عنصر واجهة مستخدم معقد من عناصر واجهة مستخدم موجودة بالفعل.
يمكن دمج الميزات التفاعلية عند الضرورة باستخدام أداة GestureDetector .
يمكن الحفاظ على حالة عنصر واجهة المستخدم عند الضرورة باستخدام عنصر واجهة المستخدم StatefulWidget .
يوفر Flutter تصميمًا متعدد الطبقات بحيث يمكن برمجة أي طبقة وفقًا لمدى تعقيد المهمة.
سنناقش كل هذه المفاهيم بالتفصيل في الفصول القادمة.