كيفية إنشاء الحاجيات عديمي الجنسية

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

في الفيديو التالي ، أتفقد ما هي أداة Flutter ، وكيفية استخدام StatelessWidgets في تطبيق Flutter:

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

الجزء 1 - جعل التطبيق الكلب باستخدام الحاجيات عديمي الجنسية

للحفاظ على الأمور سريعة ، أبدأ بتطبيق أساسي هنا. أنه يحتوي على عنصر واجهة تعامل Scaffold ، عنصر واجهة تعامل تطبيق AppBar ، وعناصر واجهة تعامل نصية تعرض معلومات عن بلدي الأصفر Labrador ، روكي.

الحاجيات هي لبنات البناء الأساسية لتطبيق Flutter. كل واحد هو إعلان ثابت لجانب من جوانب واجهة المستخدم ، ويمكنهم القيام بالعديد من المهام.

على سبيل المثال ، هناك:

  • الحاجيات الهيكلية - مثل زر أو القائمة
  • الحاجيات الأسلوبية التي تنشر الخط أو نظام الألوان
  • الحاجيات المتعلقة بالتخطيط - مثل الحشو
  • و أكثر من ذلك بكثير

يمكنك أيضًا إنشاء عناصر واجهة تعامل مستخدم جديدة من عناصر واجهة تعامل مستخدم ، وبالتالي فإن المجموعات لا حصر لها. دعني أريك ما أقصده.

قل أنني أريد لونًا خلف كلبي.

يمكنني القيام بذلك عن طريق التفاف عنصر واجهة تعامل النص مع DecoratedBox.

والآن يحتوي عنصر واجهة النص على لون الخلفية.

ربما أحب الحشو حول النص.

يمكنني تحقيق ذلك عن طريق إضافة القطعة الحشو. سأحدد 8 وحدات بكسل منطقية للحشو حول اسم روكي.

والآن لدي حشوة.

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

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

أستخدم عنصر واجهة مستخدم يسمى SizedBox لإضافة مساحة فارغة بينهم ، مما ينتج عنه:

لكنك تعلم ، لقد حصلت على الكثير من الأكواد المتكررة (وتسمى أيضًا boilerplate) في مربعات الأسماء الثلاثة هذه. ألن يكون رائعًا لو تمكنت من إنشاء أداة مصغّرة خاصة بي تحمل اسمًا وتعاملت مع التفاصيل الخاصة بي؟

حسنا استطيع ان.

سأنشئ StatelessWidget وأطلق عليه اسم DogName. عنصر واجهة المستخدم بدون جنسية عبارة عن عنصر واجهة مستخدم يتكون من الأطفال (وهذا هو السبب في أنه يحتوي على أسلوب build ()) ولا يحتوي على أي حالة قابلة للتغيير يحتاج إلى تتبعها. عندما أقول حالة قابلة للتغيير ، أقصد أي خصائص تتغير مع مرور الوقت. على سبيل المثال ، مربع نص يحتوي على سلسلة يقوم المستخدم بتحديثها ، أو دفق بيانات يقوم بتحديث الوافدين / المغادرين.

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

يمكنني تحديد السلسلة عبر المنشئ ، ولأن جميع خصائصه نهائية ، يمكنني وضع علامة على هذا على أنه مُنشئ const.

الآن ، أحتاج فقط إلى تحديد طريقة الإنشاء باستخدام نفس عناصر واجهة المستخدم ، والآن فقط تعرض عنصر واجهة تعامل النص السلسلة من خاصية اسم عنصر واجهة التعامل.

أنا استخدم هذه القطعة لتبسيط الرمز الأصلي.

كما ترون ، ينتج عن ذلك واجهة المستخدم نفسها ، لكن الشفرة أكثر تشددًا بفضل استخدام StatelessWidget و Flutter للتكوين.

الجزء 2 - القطعة الأشجار والعنصر الأشجار

هذا مثال بسيط على كيفية عمل إنشاء StatelessWidget. في هذه المرحلة ، قد تسأل نفسك ، "أرى كيف تعمل طرق الإنشاء هذه ، لكن متى يتم الاتصال بها؟" حسنًا ، لنبدأ بمجرد عنصر واجهة مستخدم DogName واحد.

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

كل فئة عنصر واجهة مستخدم لها فئة عنصر مقابلة وطريقة لإنشاء مثيل.

StatelessWidget ، على سبيل المثال ، ينشئ StatelessElement.

عندما يتم تثبيت عنصر واجهة مستخدم على الشجرة ، يستدعي Flutter طريقة createElement (). يسأل Flutter عنصر واجهة المستخدم لعنصر ، وينبثق هذا العنصر على شجرة العنصر مع الرجوع مرة أخرى إلى عنصر واجهة المستخدم الذي قام بإنشائه.

ثم يسألك StatefulElement "أتساءل عما إذا كان لديّ أي أطفال؟" وتدعو طريقة build () الخاصة بـ Widget.

في هذا التطبيق ، لديه عدة. هذه الحاجيات ثم إنشاء عناصر المقابلة الخاصة بهم.

وتلك التي شنت على شجرة العنصر كذلك.

وبالتالي ، أصبح للتطبيق الآن شجرتان: واحدة تمثل ما هو موجود فعليًا على الشاشة (العناصر) ، والأخرى التي تحمل المخططات التي تم إنشاؤها من (التطبيقات المصغّرة).

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

فئة DogApp ، التي تمثل التطبيق بأكمله ، هي في حد ذاتها StatelessWidget.

قلت لك أن القطع يمكن أن تفعل كل شيء تقريبا ، أليس كذلك؟ إذا نظرت إلى main () ، وهي نقطة دخول التطبيق ، يمكنك أن ترى أنها تستدعي طريقة runApp () ، وهذه هي نقطة البداية. تأخذ طريقة runApp () عنصر واجهة مستخدم وتحملها كعنصر أساسي للتطبيق مع قيود الطول والعرض التي تتوافق مع حجم الشاشة.

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

وهو كيف يعرض ثلاثة مربعات صغيرة تحتوي على أسماء المعامل الصفراء.

هذه مقدمة حول التأليف مع StatelessWidgets وبناء واجهة. شيء واحد لم أذكره هو كيفية تحديث أو إعادة إنشاء واجهة عندما تتغير البيانات. ذلك لأن StatelessWidgets لا يفعل ذلك. إنهم عديمو الجنسية ، وبالتالي لا يمكنهم تتبع البيانات مع مرور الوقت ، أو تشغيل عمليات إعادة البناء من تلقاء أنفسهم.

لحسن الحظ ، يحتوي Flutter أيضًا على StatefulWidgets ، والتي سنخبرك بها في الحلقة التالية من هذه السلسلة.

لمزيد من المعلومات حول Flutter وجميع أدواتها المتعددة ، توجه إلى flutter.io.

يمكنك أيضًا مشاهدة الحلقات الأخرى في السلسلة هنا أو تجربة Codelab flutter.