KivyMD - تستمر الحياة

تحياتي!

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

في بعض الأحيان أثناء زيارة مستودع KivyMD الرسمي ، وجدت للأسف أنه لا يوجد شيء يتغير فيه ولن يتغير:



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

أصلحت الأخطاء التي تعرضت لها بعض الأدوات. على سبيل المثال ، تم حرمان عنصر واجهة المستخدم MDDropDownMenu من وظيفة التمرير وتحديد عنصر. الآن يبدو هذا:


بالإضافة إلى مجموعة من التصحيحات الأخرى ، أضيفت أدوات وعناصر تحكم جديدة كبيرة وليست كذلك. بالإضافة إلى MDFlatButton الموجودة ، MDRaisedButton ، MDIconButton MDFloatingActioButton ...


... نفذت عددًا من عناصر التحكم: MDRectangleFlatButton ، MDRectangleFlatIconButton ، MDRoundFlatIconButton ، MDRoundFlatButton ، MDFillRoundFlatButton ، والتي كانت مفقودة بشكل واضح في المجموعة:


أحاول أيضًا تبسيط العمل مع KivyMD قدر الإمكان. سيبدو استخدام عناصر التحكم الجديدة الموضحة أعلاه في ترميزك كما يلي:

MDRectangleFlatButton: text: "MDRectangleFlatButton" MDRectangleFlatIconButton: text: "I love Python" icon: "language-python" MDRoundFlatButton: text: "I love Python" icon: "language-python" MDRoundFlatIconButton: text: "I love Python" icon: "language-python" MDFillRoundFlatButton: text: "I love Python" 

في الآونة الأخيرة ، تمت إضافة منشور إلى مجموعة فكونتاكتي الخاصة بي حيث طلب شخص المساعدة في تنفيذ بطاقة الاتصال:

تحياتي!

سؤال عن التخطيط.

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

أ) لم تمتد ، وتم ترتيب العناصر واحدًا تلو الآخر عموديًا

ب) لم تكن هناك فجوات كبيرة بين العناصر

حول BoxLayout المجربة ، StackLayout - لسبب ما الفجوات بين العناصر. أرفق شاشة النموذج ورمز كيلو فولت.

يمكن ملاحظة أنه بعد الكتلة الأولى مع الصورة الرمزية ، هناك فجوة ، بعد كتل النص أيضًا. كيفية الإصلاح بحيث تكون هناك مسافات متساوية في كل مكان ، بحيث تكون جميع العناصر من النوع valign: True؟

ها هي النتيجة:


لقد قمت بتصحيح الرمز ، وفي الوقت نفسه أضفت أداة بطاقة إلى KivyMD - MDUserAnimationCard ، والتي تنفذ هذا السلوك:


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


بعد ذلك ، ما عليك سوى إضافة فئة المحتوى الذي قمت بإنشائه إلى MDUserAnimationCard :

  def show_user_card(self): user_animation_card = MDUserAnimationCard( user_name="Lion Lion", path_to_avatar="./assets/african-lion-951778_1280.jpg", callback=main_back_callback) user_animation_card.box_content.add_widget(ContentForAnimCard()) user_animation_card.open() 

MDStackFloatingButtons ، المعروفة لك بالفعل من قبل المقالة ، انتقلت إلى KivyMD:


تم تبسيط استخدام هذه الأداة إلى أقصى حد:

  def example_add_stack_floating_buttons(self): def set_my_language(instance_button): toast(instance_button.icon) screen = self.main_widget.ids.scr_mngr.get_screen('stack buttons') screen.add_widget(MDStackFloatingButtons( icon='lead-pencil', floating_data={ 'Python': 'language-python', 'Php': 'language-php', 'C++': 'language-cpp'}, callback=set_my_language)) 

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


مثال للاستخدام:

 MDCardPost(text_post='Card with text', swipe=True, callback=callback)) 

 menu_items = [ {'viewclass': 'MDMenuItem', 'text': 'Example item %d' % i, 'callback': self.callback_for_menu_items} for i in range(2) ] MDCardPost( right_menu=menu_items, swipe=True, callback=callback text_post='Card with a button to open the menu MDDropDown')) 

 MDCardPost( likes_stars=True, callback=callback, swipe=True, text_post='Card with asterisks for voting.')) 

 buttons = ['facebook', 'vk', 'twitter'] text_post = \ "This is my favorite cat. He's only six months " "old. He loves milk and steals sausages :) " "And he likes to play in the garden." MDCardPost( source="./assets/kitten-1049129_1280.jpg", tile_text="Little Baby", tile_font_style="Headline", text_post=text_post, with_image=True, swipe=True, callback=callback, buttons=buttons)) 

تقدم تنزيل المحتوى من الخادم ، مدير ملفات بسيط ، أداة PullToUpdate:


عرض فيديو كامل لأدوات المكتبة:


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