تحية! اليوم سنتحدث مرة أخرى عن مكتبة
KivyMD - مجموعة من الأدوات المصغّرة لتطوير الأنظمة الأساسية في Python بأسلوب تصميم المواد. في هذه المقالة ، لن أراجع أدوات KivyMD ، كما هو الحال في
مقال حديث ، ولكن سيكون أكثر عن تحديد موضع الأدوات المصغّرة. لن يكون هناك شيء مثل البرنامج التعليمي حول تطوير تطبيقات الأجهزة المحمولة في Python للمبتدئين ، لذا إذا سمعت أولاً عن إطار عمل Kivy ، فمن غير المرجح أن تكون مهتمًا بكل هذا. حسنا ، سافرنا تحت خفض!
في اليوم الآخر قمت بتنزيل التطبيق التجريبي Flutter UIKit من Google Play:
والآن سنحاول تكرار شاشة واحدة من هذا التطبيق. دعونا نلقي نظرة على النتائج على الفور: رفرفة على اليسار ، Kivy و KivyMD على اليمين.
تختلف بعض عناصر واجهة المستخدم ، وليس بسبب بعض الميزات التقنية ، والتي بسببها كان من المستحيل الحصول على نتيجة مماثلة ، لكنني اعتقدت أنها ستكون أكثر طبيعية (على سبيل المثال ، شريط الأدوات الأسود ، في رأيي ، لا ينظر إلى كل شيء).
لذلك! ما هو ملفت للنظر عند النظر إلى الشاشة التي سنلعبها؟ تخطيط خلفية شفافة الجبهة. في Kivy ، يتم توفير هذا الخيار بواسطة FloatLayout ، والذي يسمح لك بوضع عناصر واجهة تعامل وتحكم في واحدة فوق الأخرى كما يلي:
بشكل تخطيطي ، ستبدو شاشتنا كما يلي:
تصميم هذه الشاشة بسيط للغاية:
لماذا أتحدث عن FloatLayout إذا كانت شاشتنا موروثة من الشاشة؟
<ProductScreen@Screen>: ...
فقط لأن الشاشة -> RelativeLayout -> FloatLayout.
يتم وضع جميع الأدوات المصغّرة في FloatLayout من الركن الأيسر السفلي ، أي على الشاشة يتم تعيين الموضع تلقائيًا لها (0 ، 0). في الترميز ، ليس من الصعب تتبع ترتيب إضافة عناصر إلى الشاشة من الأعلى إلى الأسفل:
إذا قام شخص ما بالاهتمام ، فقد أشرنا إلى موضع أداة واحدة فقط:
MDToolbar: ... pos_hint: {"top": 1}
بالإضافة إلى الإحداثيات المحددة (س ، ص) ، يمكن إعطاء كل أداة في Kivy تلميحًا للموضع:
pos_hint: {"top": 1}
لذلك ، صورة الخلفية السفلية ...
BoxLayout: size_hint_y: None height: root.height - toolbar.height FitImage: source: "smokestackheather.jpeg"
... بفضل تطبيق FitImage (مكتبة KivyMD) ، يتم تمديده تلقائيًا إلى جميع المساحة المخصصة له مع الحفاظ على نسب الصورة:
بشكل افتراضي ، يتم منح كل عنصر واجهة مستخدم وتخطيط في Kivy 100٪ من المساحة ، ما لم ينص على خلاف ذلك. على سبيل المثال ، إذا كنت ترغب في إضافة زر واحد إلى الشاشة ، فمن الواضح أنك ستقوم بما يلي:
from kivy.app import App from kivy.lang import Builder KV = """ Button: text: "Button" """ class MyApp(App): def build(self): return Builder.load_string(KV) MyApp().run()
واحصل على النتيجة:
استغرق الزر حتى 100 ٪ من المساحة. لوضع زر في وسط الشاشة ، تحتاج أولاً إلى تعيين الحجم المطلوب له ، وثانياً ، للإشارة إلى موقعه:
from kivy.app import App from kivy.lang import Builder KV = """ Button: text: "Button" size_hint: None, None size: 100, 50 pos_hint: {"center_y": .5, "center_x": .5} """ class MyApp(App): def build(self): return Builder.load_string(KV) MyApp().run()
الآن تغيرت الصورة:
يمكنك أيضًا تحديد خاصية
size_hint ، من 0 إلى 1 ، (أي ما يعادل 0-100٪) ، أي تلميح الحجم:
from kivy.app import App from kivy.lang import Builder KV = """ BoxLayout: Button: text: "Button" size_hint_y: .2 Button: text: "Button" size_hint_y: .1 Button: text: "Button" """ class MyApp(App): def build(self): return Builder.load_string(KV) MyApp().run()
أو نفس الشيء ، ولكن تلميح العرض (
size_hint_x ):
from kivy.app import App from kivy.lang import Builder KV = """ BoxLayout: Button: text: "Button" size_hint_x: .2 Button: text: "Button" size_hint_x: .1 Button: text: "Button" """ class MyApp(App): def build(self): return Builder.load_string(KV) MyApp().run()
يبلغ طول شريط MDToolbar 56 نقطة في الثانية ، ولا يمكنه شغل كل المساحة ، وإذا لم تخبره أن مكانه في المقدمة ، فسيتمسك تلقائيًا بأسفل الشاشة:
قائمة البطاقات - OrderProductLayout (سنتحدث عنها أدناه) - عبارة عن ScrollView مع عناصر MDCard وتحتل كامل طول الشاشة ، لكن بفضل الحشو (قيم المسافة البادئة في أدنى المستويات) يبدو أنها تقع أعلى مركز الشاشة قليلاً. حسنا ، بشكل افتراضي MDBottomAppBar يسقط مرساة إلى الحد السفلي من الشاشة. لذلك ، فقط MDToolbar أشرنا حيث مكانها.
الآن دعونا نرى ما هي القطعة OrderProductLayout:
كما ترون ، فهذه أربع بطاقات مضمنة في ScrillView. على عكس الشاشة الرئيسية ، الموروثة من FloatLayout ، هنا تتم قراءة جميع الأدوات المصغّرة من الأعلى إلى الأسفل.
هذا ملائم للغاية ، نظرًا لوجود تسلسل هرمي واضح لعناصر واجهة المستخدم ، وهيكل شجرة ، وفي لمحة من الواضح أنه من الواضح أن عنصر واجهة المستخدم / عنصر التحكم ينتمي إلى أي تخطيط. في Kivy ، فإن التخطيط الأكثر استخدامًا هو BoxLayout - وهو مربع يسمح لك بوضع الحاجيات داخل نفسك رأسياً أو أفقيًا (بشكل افتراضي - آخر واحد):
يمكن رؤية ذلك بشكل أكثر وضوحًا من المخطط التالي ، حيث يتم استخدام الاتجاه الأفقي BoxLayout:
نمنع BoxLayout من استخدام 100٪ من المساحة -
size_hint_y: لا شيء وقلنا - طولك سيكون بالضبط نفس ارتفاع العنصر الأعلى المتداخل فيك -
الارتفاع: self.minimum_height .
قائمة الصور:
إذا أردنا استخدام التمرير العمودي للقائمة ، فسنحتاج إلى تغيير GridLayout على النحو التالي:
ScrollView: GridLayout: size_hint_y: None height: self.minimum_height cols: 1
يستعاض عن الصفوف (الأعمدة) بالأعمدة (
cols ) وتشير إلى
الحد الأدنى وليس العرض ، ولكن الارتفاع:
from kivy.app import App from kivy.lang import Builder from kivy.metrics import dp from kivy.uix.button import Button KV = """ ScrollView: GridLayout: id: box size_hint_y: None height: self.minimum_height spacing: "5dp" cols: 1 """ class MyApp(App): def build(self): return Builder.load_string(KV) def on_start(self): for i in range(20): self.root.ids.box.add_widget( Button( text=f"Label {i}", size_hint_y=None, height=dp(40), ) ) MyApp().run()
البطاقات التالية هي اختيار اللون والحجم (تكاد تكون متطابقة):
لا تتمثل الميزة المميزة للغة الترميز Kv Language في البنية الواضحة لعناصر واجهة المستخدم فحسب ، بل أيضًا في حقيقة أن هذه اللغة تدعم بعض ميزات لغة Python. وهي: طرق الاتصال ، إنشاء / تغيير المتغيرات ، العمليات المنطقية ، I / O والعمليات الرياضية ...
حساب
القيمة المعلنة في
التصنيف ...
Label: value: 0 text: str(self.value)
... يحدث مباشرة في العلامات نفسها:
MDIconButton: on_release: label_value.value -= 1 if label_value.value > 0 else 0
ولن أصدق أن هذا (كود الرفرفة) ...
... أكثر منطقية وقراءة من رمز لغة Kv:
بالأمس سئلت كيف يعمل كيفي مع بيئة التطوير ، هل هناك عمليات الإكمال التلقائي ، والأحمال الساخنة وغيرها من المرافق؟ مع عمليات الإكمال التلقائي ، كل شيء على ما يرام إذا كنت تستخدم PyCharm:
أما بالنسبة للحمل الساخن ... بيثون هي لغة مترجمة. كيفى يستخدم بيثون. وفقًا لذلك ، لمعرفة النتيجة ، لا تحتاج إلى ترجمة الشفرة وتشغيلها - انظر / اختبارها. كما قلت ، لا تستخدم Kivy واجهات برمجة التطبيقات الأصلية لتقديم واجهة المستخدم ، وبالتالي فهي تتيح لك محاكاة نماذج مختلفة من الأجهزة والأنظمة الأساسية باستخدام وحدة
الشاشة . يكفي تشغيل مشروعك بالمعلمات الضرورية بحيث تفتح نافذة التطبيق المختبر على الكمبيوتر كما لو كانت تعمل على جهاز حقيقي. هذا يبدو غريباً ، لكن نظرًا لأن ملخصات Kivy من المنصة في تقديم واجهة المستخدم ، فإن هذا يلغي الحاجة إلى محاكاة تقليدية وبطيئة للاختبارات. هذا ينطبق فقط على واجهة المستخدم. على سبيل المثال ، تم اختبار تطبيق الاختبار الموضح في هذه المقالة باستخدام خيارات
الشاشة -m: droid2 ، عمودي ، scale = .75 .
على اليسار - يعمل على جهاز محمول ، على اليمين - على جهاز كمبيوتر:
قائمة كاملة من المعلمات وحدة الشاشة: حسنًا ، وأخيرا ، النتيجة النهائية هي الإطلاق على جهاز محمول ...
الشيء الوحيد الذي يزعج هو سرعة الاطلاق. في نفس الرفرفة هي ببساطة هائلة!
آمل أن أكون مفيدة لشخص ما ، أراك قريبًا!