إلكتروني

إنشاء حساب مطور Google Play – مركز المساعدة – Pandasuite ، MDC -102: بنية المواد والتخطيط | codelabs Google

<h1>MDC-102: بنية المواد والتخطيط</h1>
<blockquote>يوفر تصميم المواد تنسيقات ملاحة تضمن سهولة الاستخدام بشكل كبير. أحد أكثر المكونات وضوحا هو شريط التطبيق العلوي.</blockquote>
<h2>إنشاء حساب مطور Google Play</h2>
أبلغ معلوماتك الشخصية والعنوان الذي تختاره وكلمة المرور الخاصة بك.
قبول الشروط العامة للبيع (GTC).
أضف صورة جميلة لنفسك.
<h2>إنشاء حساب مطور Google Play</h2>
الإجراء الخاص بإنشاء حساب مطور Google Play أبسط بكثير من Apple.
تواصل مع عنوان Gmail الخاص بك.
قبول GTC.
ضبط رسوم التسجيل: دفعة واحدة من 25 يورو لنشر جميع الطلبات التي تختارها !
أبلغ المعلومات المتعلقة بحسابك: اسم المطور وعنوان البريد الإلكتروني ورقم الهاتف.
لقد أجاب هذا على سؤالك ?
شكرا لك على التعليقات كانت هناك مشكلة لتقديم تعليقاتك. الرجاء معاودة المحاولة في وقت لاحق.
آخر تحديث في 9 نوفمبر 2021
<h3>المقالات المرتبطة</h3>
<ul>
<li>قم بإنشاء تطبيق على وحدة التحكم في Google Play</li>
<li>قم بإنشاء شهادة Android P12</li>
<li>قم بتصدير ملف APK أو AAB</li>
<li>نشر تطبيق Android</li>
<li>نشر تطبيق Android خارج متجر Play</li>
<li>نشر على متجر Google Play</li>
</ul>
<h2>MDC-102: بنية المواد والتخطيط</h2>
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/8c0dd3b666dcdb8_36.png?hl=fr” alt=”logo_components_color_2x_web_96dp.png” width=”” />
مكونات المواد (MDC) تساعد المطورين على تنفيذ تصميم المواد. صممه فريق من المهندسين وأخصائيي تجربة المستخدم في Google ، تقدم MDC العشرات من مكونات واجهة المستخدم الأنيقة والوظيفية. إنه متوفر لنظام Android و iOS و Web و Flutter.مادة.IO/تطوير.
في ورشة البرمجة MDC-101 ، استخدمت عنصرين مكونين للمواد لإنشاء صفحة اتصال: حقول نصية وأزرار تشتمل على الرسوم المتحركة “الحبر”. على هذه القواعد ، دعنا نثري تطبيقنا عن طريق إضافة التنقل والهيكل والبيانات.
<h2>أهداف ورشة العمل</h2>
في ورشة البرمجة هذه ، ستقوم بإنشاء شاشة منزلية مزار, طلب للتجارة الإلكترونية لبيع الملابس والعناصر للمنزل. سوف تحتوي هذه الشاشة على:
<ul>
<li>شريط تطبيق أعلى</li>
<li>قائمة المنتجات في شكل شبكة</li>
</ul>
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/219fcb9db8bad064_36.png?hl=fr” alt=”تطبيق للتجارة الإلكترونية مع شريط تطبيق أعلى وشبكة مليئة بالمنتجات” width=”” />
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/dd79d882e2422adb_36.png?hl=fr” alt=”تطبيق للتجارة الإلكترونية مع شريط تطبيق أعلى وشبكة مليئة بالمنتجات” width=”” />
يرجى ملاحظة أن ورشة البرمجة هذه تم استبدالها بالمواد 3 ، باستثناء لقطات الشاشة. ومع ذلك ينقلون نفس المعلومات.
ورشة البرمجة هذه هي الثانية من ورش العمل الأربعة التي ستساعدك على إنشاء طلب لمنتج يسمى Sanctuary. نوصيك بمتابعة جميع ورش عمل البرمجة بالترتيب ، للتقدم في المهام شيئًا فشيئًا. ستجد ورش عمل البرمجة الخاصة بك هنا:
<ul>
<li>MDC-101 Flutter: المبادئ الأساسية للمكونات المادية</li>
<li>MDC-103 Flutter: استخدام موضوعات تصميم المواد (اللون والأشكال والارتفاع والنوع)</li>
<li>MDC-104 Flutter: مكونات تصميم المواد المتقدمة</li>
</ul>
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/91be5f7919ab5154_36.png?hl=fr” alt=”تطبيق التجارة الإلكترونية استنادًا إلى سمة وردية وبنية ، مع شريط تطبيق أعلى وشبكة منتج غير متناظرة تتم التمرير أفقياً” width=”” />
<h2>مكونات مواد رفرفة المواد والأنظمة الفرعية في ورشة البرمجة هذه</h2>
<ul>
<li>العلوي</li>
<li>شبكات</li>
<li>البطاقات</li>
</ul>
في ورشة البرمجة هذه ، سوف تستخدم المكونات الافتراضية التي توفرها رفرف المواد. سوف تتعلم تخصيصها في قسم MDC-103: استخدام موضوعات تصميم المواد (اللون والأشكال والارتفاع والنوع).
<h4>كيف يمكنك تقييم مستوى خبرتك في التنمية مع الرفرفة ?</h4>
<h2>2. تكوين بيئة تطوير الرفرفة</h2>
لهذه ورشة العمل ، تحتاج إلى برنامجين: SDK Flutter و Publisher.
يمكنك تشغيل ورشة البرمجة على أحد الأجهزة التالية:
<ul>
<li>جهاز Android أو جهاز iOS الفعلي متصل بجهاز الكمبيوتر الخاص بك ويعطي في وضع المطور.</li>
<li>محاكاة iOS (أدوات Xcode للتثبيت).</li>
<li>محاكي Android (الذي يجب تكوينه في Android Studio).</li>
<li>متصفح (مطلوب كروم لتصحيح الأخطاء).</li>
<li>مثل Windows أو Linux أو MacOS سطح المكتب. يجب عليك تطوير تطبيقك على النظام الأساسي حيث تخطط لنشره. على سبيل المثال ، إذا كنت ترغب في تطوير تطبيق لسطح مكتب Windows ، فيجب عليك القيام بذلك على Windows للوصول إلى سلسلة التجميع المناسبة. تعرف أيضًا على المتطلبات المحددة لأنظمة التشغيل ، والتي يتم تفصيلها على المستندات.رفرفة.Dev/Desktop.</li>
</ul>
<h2>3. قم بتنزيل تطبيق المغادرة لورشة البرمجة</h2>
<h2>لقد تابعت بالفعل ورشة MDC-101 ?</h2>
إذا كنت قد انتهيت من ورشة برمجة MDC-101 ، فيجب أن يكون الكود جاهزًا لبدء ورشة العمل هذه. انتقل إلى المرحلة التالية: أضف شريط تطبيق أعلى.
<h2>تبدأ من الصفر ?</h2>
<h3>قم بتنزيل تطبيق رحيل ورشة العمل</h3>
تطبيق البداية موجود في مواد التراجع عن مواد التراجع -102-starter_and_101-complete/mdc_100_series .
<h2>… أو استنساخ ورشة العمل من جيثب</h2>
لاستنساخ ورشة البرمجة هذه من Github ، قم بتشغيل الأوامر التالية:
<pre>git clone https: // github.com/materials/materials-components-flutter-codelabs.GIT CD مواد مواد مواد-فلاور-مرفحة/mdc_100_series git headout 102-starter_and_101 complete</pre>
للحصول على المساعدة ، راجع قسم الاستنساخ من Github
<h2>اختر الفرع الصحيح</h2>
تعتمد ورش عمل برمجة MDC-101 في 104 على بعضها البعض. لذلك عند الانتهاء من رمز ورشة عمل MDC-102 ، يصبح رمز البداية لورشة MDC-103. ينقسم الرمز إلى عدة فروع ، يمكنك عرض القائمة باستخدام هذا الأمر:
فرع git -قائمة
لعرض الرمز النهائي ، انتقل إلى الفرع 103-starter_and_102 .
<h2>افتح المشروع وتنفيذ التطبيق</h2>
<ol>
<li>افتح المشروع في الناشر الذي تختاره.</li>
<li>اتبع الإرشادات المتعلقة بالناشر الذي اخترته. يمكن الوصول إليها في الفقرة “تشغيل التطبيق” (تنفيذ التطبيق) في صفحة القيادة> اختبار محرك الاختبار (الخطوات الأولى> الاختبار).</li>
</ol>
العملية الناجحة. يجب عرض صفحة اتصال Sanctuary من ورشة برمجة MDC-101 على جهازك.
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/77c93e89ac594afe_36.png?hl=fr” alt=”صفحة الاتصال التي تضم الحقول”Nom d’utilisateur” et “Mot de passe”, et les boutons “Annuler” et “Suivant”” width=”” />
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/679775b6deb65c3f_36.png?hl=fr” alt=”صفحة الاتصال التي تضم الحقول”Nom d’utilisateur” et “Mot de passe”, et les boutons “Annuler” et “Suivant”” width=”” />
الآن وبعد أن أصبحت شاشة الاتصال في مكانها ، دعنا نضيف بعض المنتجات إلى التطبيق.
<h2>4. أضف شريط تطبيق أعلى</h2>
في الوقت الحالي ، إذا قمت بالنقر فوق الزر “التالي” ، يتم عرض الشاشة الرئيسية مع الرسالة “لقد فعلت ذلك!” (أنت تمكنت.))). ممتاز. ومع ذلك ، فإن المستخدم لدينا ليس لديه ما يفعله ولا يعرف مكان وجوده في التطبيق. لمساعدتك ، حان الوقت لإضافة التنقل.
هناك ملاحة و إبحار يشير إلى المكونات والتفاعلات والمؤشرات المرئية والهندسة المعمارية للمعلومات التي تسمح للمستخدمين بالتنقل في التطبيق. يتيح لك اكتشاف المحتوى والميزات ، وأداء المهام بسهولة.
لمعرفة المزيد ، استشر المقالة المخصصة للتنقل في تعليمات تصميم المواد.
يوفر تصميم المواد تنسيقات ملاحة تضمن سهولة الاستخدام بشكل كبير. أحد أكثر المكونات وضوحا هو شريط التطبيق العلوي.
قد تعرف هذا العنصر تحت اسم “شريط التنقل” تحت iOS ، أو ببساطة “شريط تطبيق” أو “رأس”.
لتقديم وصول سريع للمستخدمين إلى إجراءات أخرى ، دعنا نضيف شريط تطبيق أعلى.
<h2>أضف أداة تطبيق AppBar</h2>
في المنزل.دارت ، أضف appbar إلى “Scaffold” ، ثم حذف Const المبرمة:
<pre><code translate=”no” dir=”ltr”>إرجاع Const Scaffold (// todo: إضافة App Bar (102) Appbar: Appbar (// todo: إضافة أزرار وعنوان (102)),</code> </pre>
إضافةappbar في حقل appbar: يتيح لنا السقالات الحصول على تصميم مثالي ومجاني ، وترك شريط التطبيق في أعلى الصفحة وتحت الجسم.
سقالة هو أداة مهمة في المواد. يوفر واجهات برمجة التطبيقات العملية لعرض جميع أنواع مكونات المسائل الحالية ، مثل اللوحات ، وأشرطة الإخطار “Snackbar” وعناصر الورقة السفلية. حتى أنه يسهل وضع زر الإجراء العائم.
راجع وثائق الرفرفة لمعرفة المزيد عن السقالات.
سجل المشروع. بمجرد تحديث الضريح ، انقر فوق التالي (التالية) لعرض الشاشة الرئيسية.
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/fdda22f7ad3e128a_36.png?hl=fr” alt=”شاشة تشير”Vous avez réussi !”” width=”” />
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/7aac9159c56aa110_36.png?hl=fr” alt=”شاشة تشير”Vous avez réussi !”” width=”” />
العنصر في وضع جيد ، لكنه يفتقر إلى العنوان.
<h2>أضف عنصر واجهة مستخدم نص</h2>
في المنزل.Dart ، أضف عنوانًا إلى شريط تطبيق AppBar:
<pre><code translate=”no” dir=”ltr”>// todo: إضافة شريط التطبيق (102) Appbar: AppBar (// todo: إضافة أزرار وعنوان (102) العنوان: نص const (‘ضريح’) ، // todo: إضافة أزرار زائدة (102)</code> </pre>
سجل المشروع.
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/e45285cdb72b486d_36.png?hl=fr” alt=”شريط تطبيقات عنوانه ملاذ” width=”” />
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/392491678976939f_36.png?hl=fr” alt=”شريط تطبيقات عنوانه ملاذ” width=”” />
ربما لاحظت اختلافات لكل منصة. يأخذ نظام تصميم المواد في الاعتبار أن كل منصة (Android ، iOS ، Web) مختلفة وأن توقعات المستخدم مختلفة. على سبيل المثال ، على نظام التشغيل iOS ، تتمحور العناوين دائمًا تقريبًا. هذا هو السلوك الافتراضي الذي توفره Uikit. على Android ، تصطف على اليسار. لذلك ، إذا كنت تستخدم محاكيًا أو جهاز Android ، فيجب محاذاة عنوانك على اليسار. في حالة جهاز محاكاة أو جهاز iOS ، يجب تركيزه.
لمعرفة المزيد ، راجع هذه المقالة حول التكيف مع منصات مختلفة مع تصميم المواد.
تحتوي العديد من أشرطة التطبيق على زر بجوار العنوان. أضف أيقونة قائمة إلى تطبيقنا.
<h2>أضف زر Iconbutton في بداية السطر</h2>
دائما في المنزل.Dart ، حدد عنصر iconbutton للحقل الرائد: شريط تطبيق AppBar. (ضعه قبل حقل العنوان: وفقًا للبدء من البداية إلى نهاية السطر):
<pre> <code translate=”no” dir=”ltr”>// TODO: إضافة أزرار وعنوان (102) الرائدة: ICONBUTTON (أيقونة: رمز const (أيقونات.القائمة ، الدلالي: ‘menu’ ،) ، onpressed: () < print(‘Menu button’); >, ))),</code> </pre>
سجل المشروع.
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/794577d0ea758040_36.png?hl=fr” alt=”شريط تطبيق مع عنوان وأيقونة قائمة الهامبرغر” width=”” />
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/598cf2815d829b9b_36.png?hl=fr” alt=”شريط تطبيق مع عنوان وأيقونة قائمة الهامبرغر” width=”” />
يظهر أيقونة القائمة (تسمى أيضًا “الهامبرغر”) في الموقع المطلوب.
القسم Iconbutton هي طريقة عملية لدمج أيقونات المواد في تطبيقك. تستخدم عنصر واجهة مستخدم أيقونة. تتمتع Flutter بمجموعة كاملة من الرموز في الفصل الدراسي أيقونات. يتم استيراد الرموز تلقائيًا وفقًا لمراسات القناة “const”.
لمعرفة المزيد حول فئة الرموز ، راجع وثائق الرفرفة. لمعرفة المزيد حول عنصر واجهة الأيقونة ، راجع وثائق الرفرفة.
يمكنك أيضًا إضافة أزرار في نهاية الخط. في الرفرفة ، تسمى هذه الأزرار “الإجراءات”.
مصطلحات بداية و نهاية التعبير عن معنى القراءة ، بغض النظر عن اللغة المعنية. عندما تعمل في لسان القراءة من اليسار إلى اليمين ، مثل اللغة الإنجليزية, بداية يعني على اليسار و نهاية يعني على اليمين. بلغة تقرأ من اليمين إلى اليسار ، مثل العربية ، المصطلح بداية يعني على اليمين, و نهاية يعني على اليسار.
لمعرفة المزيد حول انعكاس واجهة المستخدم ، راجع تعليمات تصميم المواد حول ثنائي الاتجاه.
<h2>أضف الإجراءات</h2>
هناك مساحة كافية لعنصر اثنين من iconbutton.
أضفها إلى مثيل appbar بعد العنوان:
<pre><code translate=”no” dir=”ltr”>// TODO: إضافة أزرار زائدة (102) الإجراءات: [ICONBUTTON (ICON: CONST ICON (أيقونات.البحث ، الدلالي: “البحث” ،) ، ontpresd: () < print(‘Search button’); >, ) ، iconbutton (أيقونة: رمز const (الرموز.Tune ، SemanticLabel: ‘filter’ ،) ، Onpresd: () < print(‘Filter button’); >, ) ،],</code> </pre>
سجل المشروع. يجب أن تنشأ شاشتك الرئيسية على النحو التالي:
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/d3a33ae1359e9801_36.png?hl=fr” alt=”شريط تطبيق مع Sanctuary كعنوان وقائمة الهامبرغر ، وأيقونات البحث والتخصيص في النهاية” width=”” />
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/a383f4dcd3267d2a_36.png?hl=fr” alt=”شريط تطبيق مع Sanctuary كعنوان وقائمة الهامبرغر ، وأيقونات البحث والتخصيص في النهاية” width=”” />
يحتوي التطبيق الآن على زر في بداية السطر وعنوان واثنين من الإجراءات على اليمين. يحتوي شريط التطبيق أيضًا على تأثيرارتفاع نظرًا للظل الطفيف الذي يشير إلى أنه على مستوى مختلف عن مستوى المحتوى.
في فئة الأيقونة ، الحقل الدلالي هي وسيلة شائعة لإضافة معلومات إمكانية الوصول إلى الرفرفة. إنه نظام قريب جدًا من صياغة محتوى Android ووظائف uiaccession على iOS AccessibilityLabelbel . ستجدها في العديد من الدورات التدريبية.
المعلومات الواردة في هذا الحقل تجعل من الممكن توفير معلومات على قراء الشاشة حول دور هذا الزر.
إذا لم يكن لدى عنصر واجهة مستخدم حقل دلاليوم: يمكنك تغليفه في عنصر واجهة مستخدم دلالات. لمعرفة المزيد عن عنصر واجهة الدلالات ، راجع وثائق الرفرفة.
<h2>5. أضف ورقة في شبكة</h2>
الآن بعد أن أصبح تطبيقنا أكثر تنظيماً ، دعنا ننظم محتواه عن طريق وضعها في الملفات.
ال البطاقات هي عناصر مستقلة تعرض المحتوى والإجراءات المرتبطة بموضوع معين. أنها توفر طريقة مرنة لتقديم محتوى مماثل في شكل مجموعة.
لمعرفة المزيد ، راجع المقالة المخصصة للملفات في تعليمات تصميم المواد.
لمعرفة المزيد حول عنصر واجهة عنصر البطاقة (ورقة) ، راجع المقالة حول إنشاء تخطيطات في الرفرفة.
<h2>أضف عنصر واجهة مستخدم Gridview</h2>
لنبدأ بإضافة ورقة تحت شريط التطبيق العلوي. حاليا ، القطعة بطاقة (ورقة) لا تحتوي على معلومات كافية لوضع نفسك بشكل واضح. وبالتالي ، سنقوم بتغليفه في عنصر واجهة مستخدم عرض شبكي.
استبدل المركز في جسم عنصر السقالة بعناية Gridview:
<pre><code translate=”no” dir=”ltr”>// TODO: أضف عرض شبكة (102) الجسم: GridView.Count (Crossaxiscount: 2 ، Padding: Const Edgeinsts.الكل (16.0) ، childaspectratio: 8.0/9.0 ، // TODO: بناء شبكة من البطاقات (102) الأطفال: [CARD ()] ،) ،),</code> </pre>
دعونا نحلل هذا الرمز. يدعو عنصر واجهة مستخدم Griver Count () Count () ، لأنه يمكن حساب عدد العناصر التي يعرضها وليست غير محدودة. لكنه يحتاج إلى معلومات إضافية لتحديد تصميمه.
متغير Crossaxiscount: يشير إلى عدد العناصر لكل سطر. نريد الحصول على عمودين.
ل ‘محور مستعرض في الرفرفة يتوافق مع المحور الذي لا نخوضه. يسمى الشعور بالتمرير المحور الرئيسي. إذا كنت تستخدم التمرير الرأسي ، كما هو الحال في الحالة الافتراضية مع GridView ، فإن المحور المستعرض هو أفقي.
لمعرفة المزيد ، راجع الصفحة المخصصة لإنشاء تخطيطات.
حقل الحشو: يحدد مساحة خالية على الجوانب الأربعة لعنصر واجهة مستخدم Gridview. بالطبع ، هذا الهامش غير مرئي كنتيجة للعنصر أو تحته ، لأنه لم يتم وضع أي طفل شبكية بجوار هذا العنصر في الوقت الحالي.
حقل childaspecto: يحدد حجم العناصر في شكل نسب (عرض على الارتفاع).
بشكل افتراضي ، يخلق GridView كتل ذات حجم متطابق.
لدينا ورقة ، لكنها فارغة. أضف عناصر واجهة المستخدم إلى هذه الورقة.
<h2>ضع المحتويات</h2>
يجب أن تتضمن الأوراق مناطق لصورة وعنوان ونص ثانوي.
قم بتحديث الأطفال من أداة GridView:
<pre><code translate=”no” dir=”ltr”>// TODO: بناء شبكة من البطاقات (102) أطفال: [بطاقة (ClipBehavior: مقطع.Antialias ، الطفل: العمود (crossaxisalignment: crossaxisalignment.ابدأ ، الأطفال: [SideRatio (SideRatio: 18.0/11.0 ، الطفل: الصورة.الأصول (‘الأصول/الماس.PNG ‘) ،) ، حشوة (حشو: const edgeinsts.FromLtrb (16.0 ، 12.0 ، 16.0 ، 8.0) ، الطفل: العمود (crossaxisalignment: crossaxisalignment.ابدأ ، الأطفال: [نص (“العنوان”) ، const sizebox (الارتفاع: 8.0) ، نص (“نص ثانوي”) ،] ،) ،) ،] ،) ،)]]]]]]]]]]] سنوات,</code> </pre>
يضيف هذا الرمز عنصر واجهة عمود (عمود) يتيح لك أن يكون لديك واجهة مستخدم للأطفال رأسياً.
معلمة crossaxIsalignment: الحقل يحدد قيمة crossaxisalignment.ابدأ ، مما يعني “محاذاة النص على” بداية السطر “” الجانب “.
القطعة ابعاد متزنة يحدد نسب الصورة المعروضة ، بغض النظر عن نوع الصورة المقدمة.
العنصر حشوة يحدد هامش النص.
العناصر اللغوية نص يتم وضع واحد فوق الآخر وفصله بثمانية نقاط مساحة فارغة (الحجم))). نقوم بإنشاء عنصر آخر عمود لمنحهم هوامش داخلية.
سجل المشروع.
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/4ffb1e8e3bd8de3_36.png?hl=fr” alt=”عنصر واحد مع صورة وعنوان ونص ثانوي” width=”” />
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/3dd2be5afeb20072_36.png?hl=fr” alt=”عنصر واحد مع صورة وعنوان ونص ثانوي” width=”” />
في هذه النظرة العامة ، يمكنك أن ترى أن الورقة موضوعة بهامش ، وتتم تقريب زواياها وتسدد ظلًا (تمثل ارتفاعها). يسمى النموذج بأكمله “حاوية” في نظام تصميم المواد (لا ينبغي الخلط بينه وبين فئة القطعة التي تسمى الحاوية).
بصرف النظر عن الحاوية ، فإن جميع عناصر الأوراق اختيارية في المواد. يمكنك إضافة نص رأس أو ملصق أو تجسيد أو نص فرعي وفواصل وحتى البثور والأيقونات.
لمعرفة المزيد حول محتوى الأوراق ، راجع هذه المقالة في تعليمات تصميم المواد.
يتم عرض الأوراق عمومًا في مجموعة مع أوراق أخرى. ترتيبها في شكل مجموعة في شبكة.
<h2>6. إنشاء مجموعة من الملفات</h2>
عندما توجد عدة أوراق على الشاشة ، يتم تجميعها في مجموعة أو أكثر. ملفات المجموعة هي Coplanar: لديهم نفس الارتفاع في الراحة (أي متى لا يتم اختيارهم أو نقلهم ، وهو ما لن نفعله هنا).
<h2>إنشاء مجموعة من الملفات</h2>
في الوقت الحالي ، يتم وضع ورقةنا داخل حقل الأطفال: شبكة Gridview. هذا يؤدي إلى كمية كبيرة من الشفرة المتداخلة التي قد يكون من الصعب قراءتها. دعنا نحول هذا الجزء من الكود إلى وظيفة تسمح بإنشاء أكبر عدد ممكن.
قم بإنشاء وظيفة خاصة أعلى وظيفة Build () (تذكر أن الوظائف التي تبدأ بخط خط خطية هي واجهات برمجة التطبيقات الخاصة):
<pre><code translate=”no” dir=”ltr”>// TODO: اصنع مجموعة من البطاقات (102) قائمة _BuildGridCards (int cent) < Listcards = List.generate( count, (int index) < return Card( clipBehavior: Clip.antiAlias, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ AspectRatio( aspectRatio: 18.0 / 11.0, child: Image.asset(‘assets/diamond.png’), ), Padding( padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: const [ Text(‘Title’), SizedBox(height: 8.0), Text(‘Secondary Text’), ], ), ), ], ), ); >, ) ؛ بطاقات إرجاع ></code> </pre>
قم بتعيين الملفات التي تم إنشاؤها في حقل الأطفال لعنصر GridView. لا تنسى أن استبدل جميع العناصر الواردة في أداة GridView باستخدام هذا الرمز الجديد ::
<pre><code translate=”no” dir=”ltr”>// TODO: أضف عرض شبكة (102) الجسم: GridView.Count (Crossaxiscount: 2 ، Padding: Const Edgeinsts.الكل (16.0) ، childaspectratio: 8.0/9.0 ، الأطفال: _buildgridcards (10) // استبدال),</code> </pre>
سجل المشروع.
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/80f9295ef83cd7dd_36.png?hl=fr” alt=”شبكة من العناصر مع صورة وعنوان ونص ثانوي” width=”” />
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/3fcdcd16de1258b0_36.png?hl=fr” alt=”شبكة من العناصر مع صورة وعنوان ونص ثانوي” width=”” />
البطاقات موجودة ، لكنها لا تعرض أي شيء في الوقت الحالي. لقد حان الوقت لإضافة بيانات المنتج.
<h2>أضف بيانات المنتج</h2>
يحتوي التطبيق على بعض المنتجات ذات الصور والأسماء والأسعار. أضف هذا إلى الحاجيات الموجودة بالفعل في الملف
ثم في المنزل.Dart ، استيراد حزمة جديدة وبعض الملفات المقدمة لنموذج البيانات:
<pre><code translate=”no” dir=”ltr”>حزمة استيراد: رفرفة/مادة.سهم ‘؛ حزمة الاستيراد: intl/intl.سهم ‘؛ استيراد نموذج/منتج.سهم ‘؛ استيراد نموذج/منتجات _repository.سهم ‘؛</code> </pre>
أخيرًا ، تعديل _buildgridcards () لاسترداد معلومات المنتج واستخدام هذه البيانات في الملفات:
<pre><code translate=”no” dir=”ltr”>// TODO: قم بعمل مجموعة من البطاقات (102) // استبدل قائمة الطريقة بأكملها _buildGridCards (سياق BuildContext) < Listproducts = ProductsRepository.loadProducts(Category.all); if (products.isEmpty) < return const []; > موضوع الطابع النهائي = السمة.من (السياق) ؛ numberformatformat formatter = numberFormat.SimpleCurrent (محلي: المباني.localof (السياق).إلى سلسلة ())؛ إرجاع المنتجات.خريطة ((منتج) < return Card( clipBehavior: Clip.antiAlias, // TODO: Adjust card heights (103) child: Column( // TODO: Center items on the card (103) crossAxisAlignment: CrossAxisAlignment.start, children: [ AspectRatio( aspectRatio: 18 / 11, child: Image.asset( product.assetName, package: product.assetPackage, // TODO: Adjust the box size (102) ), ), Expanded( child: Padding( padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( // TODO: Align labels to the bottom and center (103) crossAxisAlignment: CrossAxisAlignment.start, // TODO: Change innermost Column (103) children: [ // TODO: Handle overflowing labels (103) Text( product.name, style: theme.textTheme.titleLarge, maxLines: 1, ), const SizedBox(height: 8.0), Text( formatter.format(product.price), style: theme.textTheme.titleSmall, ), ], ), ), ), ], ), ); >))).لإدراج ()؛ ></code> </pre>
تعليق : انتظر قبل إطلاق التجميع والتنفيذ. لا يزال هناك تعديل للقيام به.
لتنسيق النص ، نستخدم بيانات السمة موضوع من القيمة BuildContext حاضِر.
لمعرفة المزيد حول تنسيق النص ، راجع المقالة حول الطباعة في تعليمات تصميم المواد. لمعرفة المزيد حول التنسيق من موضوع ما ، تابع بعد ورشة البرمجة هذه مع MDC-103: استخدام موضوعات تصميم المواد (اللون والأشكال والارتفاع والنوع).
قم أيضًا بتعديل وظيفة Build () لنقل القيمة BuildContext في _buildgridcards () قبل إطلاق التجميع:
<pre><code translate=”no” dir=”ltr”>// TODO: أضف عرض شبكة (102) الجسم: GridView.Count (Crossaxiscount: 2 ، Padding: Const Edgeinsts.الكل (16.0) ، childaspectratio: 8.0/9.0 ، الأطفال: _buildgridcards (سياق) // تغيير الكود),</code> </pre>
أعد تشغيل التطبيق الساخن.
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/5e00c256e1c3c9f4_36.png?hl=fr” alt=”شبكة من العناصر مع صورة وعنوان وسعر” width=”” />
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/5afa8b0e625e6b0c_36.png?hl=fr” alt=”شبكة من العناصر مع صورة وعنوان وسعر” width=”” />
قد تلاحظ أننا لا نضيف مساحة عمودية بين الملفات. لأن لديهم أربعة هوامش في الأعلى والأسفل لديهم.
سجل المشروع.
يتم عرض البيانات المنتجة ، ولكن الصور محاطة بمساحة غير ضرورية. بشكل افتراضي ، يتم رسم الصور مع الحقل Boxfit مُعرف .Scaledown (في هذه الحالة). استبدل هذه القيمة بـ .Fitwidth حتى تتمكن من تكبير المساحة غير الضرورية وإزالة.
أضف حقل مناسب: مثل قيمة BoxFit.العرض المناسب:
<pre> <code translate=”no” dir=”ltr”>// TODO: اضبط حجم المربع (102) FIT: BONDFIT.العرض المناسب,</code> </pre>
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/219fcb9db8bad064_36.png?hl=fr” alt=”شبكة من المقالات ذات صورة اقتصاص وعنوان المنتج والسعر” width=”” />
<img src=”https://codelabs.developers.google.com/static/codelabs/mdc-102-flutter/img/dd79d882e2422adb_36.png?hl=fr” alt=”شبكة من المقالات ذات صورة اقتصاص وعنوان المنتج والسعر” width=”” />
يتم عرض منتجاتنا الآن بشكل مثالي في التطبيق.
<h2>7. تهانينا !</h2>
يوفر تطبيقنا العملية الأساسية التي تسمح للمستخدم بالانتقال من شاشة الاتصال إلى شاشة منزلية حيث يتم عرض المنتجات. كانت بعض الأسطر من التعليمات البرمجية كافية لإضافة شريط تطبيق أعلى (مع عنوان وثلاثة أزرار) والملفات (لتقديم محتوى تطبيقنا). الشاشة الرئيسية التي تم الحصول عليها بسيطة وعملية ، ولها بنية أساسية ومحتوى قابل للاستخدام.
يتوفر الإصدار المكتمل من تطبيق MDC-102 في فرع 103-starter_and_102 .
يمكنك مقارنة نسختك على الصفحة بتطبيق هذا الفرع.
<h2>الخطوات التالية</h2>
مع شريط التطبيق والورقة وحقل النص والزر الموجود في الجزء العلوي من الصفحة ، استخدمنا الآن أربعة مكونات رئيسية لمكتبة رفرفة المواد. لمعرفة المزيد ، راجع كتالوج مكونات المواد.
حتى لو كان تطبيقنا يعمل بشكل مثالي ، فإنه لا يعكس هوية العلامة التجارية أو وجهة نظر معينة. في ورشة عمل MDC-103: استخدام موضوعات تصميم المواد (اللون والأشكال والارتفاع والنوع) ، سنقوم بتخصيص أسلوب هذه المكونات للتعبير عن علامة تجارية حديثة وديناميكية.
<h4>طلب مني تحقيق ورشة البرمجة هذه وقتًا وجهودًا معقولة</h4>
أتفق تماما
لا توافق ولا توافق
لست موافق تماما
<h4>أريد متابعة استخدام مكونات المواد</h4>
أتفق تماما
لا توافق ولا توافق
لست موافق تماما
ما لم يرد خلاف ذلك ، فإن محتوى هذه الصفحة يحكمه ترخيص Creative Commons 4.0 ، وتخضع عينات الرمز لترخيص Apache 2.0. لمزيد من المعلومات ، راجع قواعد موقع مطوري Google. Java هي علامة تجارية مسجلة لشركات Oracle و/أو شركاتها التابعة لها.

إنشاء حساب مطور Google Play – مركز المساعدة – Pandasuite ، MDC -102: بنية المواد والتخطيط | codelabs Google

Leave a Reply Cancel reply