الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

رفرفة

  • مقدمة

ماذا

  • نطاق
  • المصدر المفتوح
  • تطبيق متعدد اللوانب من قاعدة الكود الفردية (pateform cross).

لماذا تستخدم الرفرفة

الرفرفة يحول عملية تطوير التطبيق. قم ببناء واختبار ونشر التطبيقات المحمولة الجميلة والويبات وسطح المكتب والتطبيقات المدمجة من قاعدة كود واحدة.

الذي يطور

  • تم تطويره بواسطة Google.
  • تم تقديمه في عام 2015.
  • صدر في عام 2017.

تثبيت

الإعداد invoirement

  • افتح لوحة الأوامر. .

  • Shift+CMD+P على نظام التشغيل Mac OS.

  • Shift+Ctrl+P على Windows.

  • اكتب مشروع رفرفة جديد

  • حدد تحديد مشروع Flutter الجديد

  • حدد التطبيق

  • حدد Project Path حيث تريد وضع مشروعك.

  • أدخل اسم مشروعك

  • اضغط على Enter

ooooo ... لقد تم ذلك

  • يمكنك فعل أي شيء هنا تريده في مشروعك.
  • هنا يعني lib/main.dart ## تحت مجلد lib main.dart متاح.

أول تطبيق رفرفة

نسخ لصق من الوثائق الرسمية اتبع عنوان URL؟ https://codelabs.developers.google.com/codelabs/flutter-codelab-first#2

إضافة زر

ElevatedButton (OnPressed: () {
طباعة ("زر التالي الضغط") ؛ } ، الطفل: نص ('التالي') ،) ،) ،

الوظيفة الرئيسية () أو الرئيسية

إنه أمر فقط لتشغيل تطبيق Flutter. تم تعريفه في وظيفة myfunction () ex. void main () {runApp (myfunction ()) ؛ }

الأدوات هي العناصر التي تقوم بها بإنشاء كل تطبيق رفرفة.

كما ترون ، حتى التطبيق نفسه عبارة عن عنصر واجهة مستخدم.

السابق. 1.StatelessWidget 2.StatefulWidget

class myApp () { #نقطة انطلاق تطبيقك.

}

  • MyAppState # يحدد حالة تطبيقك

  • MyAppState # يحدد البيانات التي يحتاجها التطبيق إلى العمل. في الوقت الحالي ، لا يحتوي إلا على متغير واحد مع زوج كلمة عشوائي - - توريث. سوف تضيف إلى هذا لاحقًا.

  • changenotifier

  • طريقة لإدارة حالة التطبيق في رفرفة. أيضا Maney powefull طرق قابلة للشفاء.

  • يمتد فئة الدولة changenotifier مما يعني أنه يمكنه إخطار الآخرين بتغييراتها الخاصة.

  • تحدد كل عنصر واجهة مستخدمًا طريقة build () تُسمى تلقائيًا في كل مرة تتغير فيها ظروف عنصر واجهة المستخدم بحيث تكون القطعة دائمًا محدثة.

  • MyHomePage يتتبع التغييرات على الحالة الحالية للتطبيق باستخدام طريقة الساعة.

  • Scaffold (): # إنه عنصر واجهة مستخدم مفيدة ويوجد في الغالبية العظمى من تطبيقات الرفرفة في العالم الحقيقي.

  • العمود (): # هو واحد من أهم واجهة المستخدم في الرفرفة.

  • يوفر WordPair # العديد من getters المفيدة ، مثل Aspascalcase أو AssnakeCase. هنا ، نستخدم Aslowercase

تنسيق رمز الرفرفة

https://docs.flutter.dev/development/tools/formatting

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

  • getNext ()
  • كل ما تبقى هو استدعاء طريقة getNext من رد اتصال الزر.
  • جعل التطبيق أجمل
  • استخراج عنصر واجهة مستخدم
  • يبدو الخط المسؤول عن إظهار زوج الكلمات الحالي هكذا الآن: Text (AppState.Current.Aslowercase). لتغييره إلى شيء أكثر تعقيدًا ، من الجيد استخراج هذا الخط في عنصر واجهة مستخدم منفصلة. يعد وجود أجهزة واجهة مستخدم منفصلة لأجزاء منطقية منفصلة من واجهة المستخدم طريقة مهمة لإدارة التعقيد في الرفرفة.

أضف بطاقة

Refactor

استخراج القطعة

  • حدد نص انقر فوق Refactor
  • انقر على استخراج القطعة
  • أدخل اسم القطعة
  • سيتم إنشاء فصل كأسماء مدخل

حشوة

  • حدد النص
  • انقر بزر الماوس الأيمن
  • حدد Refactor
  • حدد التفاف مع الحشو
  • اضغط على Enter

// ملاحظة: يستخدم Flutter التكوين على الميراث كلما استطاعت. هنا ، بدلاً من كونها حشوة كونها سمة للنص ، إنها عنصر واجهة مستخدم!

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

الموضوع والأناقة

الوظيفة

  1. حدد عنصرًا تخطيطًا.
  2. أداة مرئية (نص ، صورة ، أيقونات).
  3. أضف عنصر واجهة المستخدم المرئية إلى عنصر واجهة المستخدم.
  4. تطبيقات المواد.
  5. التطبيقات غير المادية.

المهمة المنجز

  • إنشاء تخطيط
  • أضف الصورة
  • إضافة العنوان
  • إضافة الترجمة
  • أضف مثل أيقونات التقييم
  • أضف أيقونة استدعاء
  • إضافة التسمية
  • أضف أيقونة الطريق
  • إضافة التسمية
  • أضف أيقونة مشاركة
  • إضافة التسمية
  • أضف نصًا (وصفًا)

إنشاء تطبيقات سريعة الاستجابة وتكيفية

  • فئة LayoutBuilder "تقوم بإنشاء شجرة عنصر واجهة مستخدم يمكن أن تعتمد على حجم أداة الوالد."

  • SideRatio ('عنصر واجهة مستخدم يحاول حجم الطفل إلى نسبة عرضية محددة. ").

  • CustomSingleChildLayout ("عنصر واجهة مستخدم يزيل تخطيط طفلها الفردي إلى مندوب.")

  • singlechildlayoutdlegate ، ('الذي يتحكم في تخطيط الطفل.')

  • custommultichildlayout ("الذي يستخدم مندوبًا لوضع العديد من الأطفال.")

  • FittedBox ("المقاييس وتضع طفلها داخل نفسه وفقًا لـ FIT.")

  • practionallysizedbox

  • LayoutBuilder

  • ميديكويري

  • MediaQuerydata

  • توجيهات

مصغرة التصميم

طفل واحد

  • محاذاة- aligns- طفل داخل نفسه. يستغرق قيمة مزدوجة بين -1 و 1 ، لكل من المحاذاة الرأسية والأفقية.

  • يحاول SideRatio حجم الطفل إلى نسبة عرضية محددة.

  • يفرض CournateDbox قيود الحجم على طفلها ، مما يوفر التحكم في الحد الأدنى أو الحد الأقصى للحجم.

  • CustomSingleChildLayout - يستخدم وظيفة مندوب لوضع طفل واحد. يمكن للمندوب تحديد قيود التصميم وتحديد المواقع للطفل.

  • موسع ومرن - يسمح لطفل من صف أو عمود بالتقلص أو النمو لملء أي مساحة متوفرة.

  • practionallysizedbox - أحجام طفلها إلى جزء صغير من المساحة المتاحة.

  • LayoutBuilder - يبني عنصر واجهة مستخدم يمكن أن يعكس نفسه بناءً على حجم والديه.

  • SinglechildScrollView - يضيف التمرير إلى طفل واحد. غالبًا ما تستخدم مع صف أو عمود.

متعددة

  • العمود والصف والمرنة - يخرج الأطفال في سباق أفقي أو عمودي واحد. كل من العمود والصف تمد عنصر واجهة المستخدم المرنة.

  • custommultichildlayout - يستخدم وظيفة مندوب لوضع العديد من الأطفال خلال مرحلة التصميم.

  • التدفق - على غرار custommultichildlayout ، ولكن أكثر كفاءة لأنه يتم تنفيذه خلال مرحلة الطلاء بدلاً من مرحلة التصميم.

  • ListView و GridView و CustomScrollView - يقدم قوائم الأطفال القابلة للتمرير.

  • Stack - Tlysers ومواقع أطفال متعددة نسبة إلى حواف المكدس. وظائف مماثلة للموضع الثابت في CSS.

  • الجدول - يستخدم خوارزمية تخطيط الجدول الكلاسيكية لأطفالها ، تجمع بين صفوف وأعمدة متعددة.

  • التفاف - يعرض أطفالها في أشواط أفقية أو رأسية متعددة.

  • الرسوم المتحركة "لبنة البناء الأساسية لنظام الرسوم المتحركة هي فئة الرسوم المتحركة. تمثل الرسوم المتحركة قيمة لنوع معين يمكن أن يتغير على مدى عمر الرسوم المتحركة. تتلقى معظم الأدوات المصغرة التي تؤدي الرسوم المتحركة كائن الرسوم المتحركة كمعلمة ، يقرأون منها القيمة الحالية للرسوم المتحركة والتي يستمعون إليها للتغييرات على هذه القيمة. "

  • AddListener 'عندما تتغير قيمة الرسوم المتحركة ، تقوم الرسوم المتحركة بإخطار جميع المستمعين المضافة باستخدام AddListener. عادةً ما يستدعي كائن الحالة الذي يستمع إلى الرسوم المتحركة setState على نفسه في رد الاتصال المستمع لإخطار نظام المستخدم الذي يحتاج إلى إعادة البناء مع القيمة الجديدة للرسوم المتحركة. '

  • AnimatedWidget ، "مفيدة للغاية بالنسبة لرسومات الرسوم المتحركة عديمة الجنسية"

  • AnimatedBuilder ، "مفيدة للعناصر واجهة مستخدمة أكثر تعقيدًا ترغب في تضمين الرسوم المتحركة كجزء من وظيفة بناء أكبر."

  • توفر الرسوم المتحركة AddStatusListener أيضًا الرسوم المتحركة ، والتي تشير إلى كيفية تطور الرسوم المتحركة مع مرور الوقت. '

  • AnimationController '' '

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل