पायथन में मोबाइल ऐप विकास। KivyMD लाइब्रेरी

नमस्ते! आज हम फिर से KivyMD लाइब्रेरी के बारे में बात करेंगे - सामग्री डिज़ाइन की शैली में पायथन में क्रॉस-प्लेटफ़ॉर्म विकास के लिए विजेट्स का एक सेट। इस लेख में, मैं KivyMD विजेट की समीक्षा नहीं करूंगा, जैसा कि हालिया लेख में है , बल्कि यह स्थिति विजेट्स के बारे में अधिक होगी। शुरुआती लोगों के लिए पायथन में मोबाइल एप्लिकेशन विकसित करने के एक ट्यूटोरियल जैसा कुछ यहां नहीं होगा, इसलिए यदि आप पहली बार कीवी फ्रेमवर्क के बारे में सुनते हैं, तो आपको इस सब में दिलचस्पी होने की संभावना नहीं है। खैर, हमने कटौती के तहत चलाई!

दूसरे दिन मैंने Google Play से Flutter UIKit डेमो एप्लिकेशन डाउनलोड किया:


और अब हम इस एप्लिकेशन से एक स्क्रीन को दोहराने का प्रयास करेंगे। आइए परिणामों को तुरंत देखें: बाईं ओर स्पंदन, दाईं ओर कीवी और किवीएमडीएम।

UI के कुछ तत्व अलग हैं, कुछ तकनीकी विशेषताओं के कारण नहीं, जिसके कारण एक समान परिणाम प्राप्त करना असंभव था, लेकिन मुझे लगा कि यह अधिक कार्बनिक होगा (उदाहरण के लिए, ब्लैक टूलबार, मेरी राय में, बिल्कुल नहीं दिखता है)।

तो! स्क्रीन पर देखते हुए कि हम क्या खेलेंगे? पारदर्शी पृष्ठभूमि सामने लेआउट। किवी में, यह सुविधा फ्लोटलैटआउट द्वारा प्रदान की गई है, जो आपको विजेट और नियंत्रण को एक दूसरे के अंदर रखने की अनुमति देता है:


योजनाबद्ध रूप से, हमारी स्क्रीन इस तरह दिखाई देगी:


इस स्क्रीन का लेआउट बहुत सरल है:


अगर हमारी स्क्रीन स्क्रीन से विरासत में मिली है, तो मैं फ्लोटलैटआउट के बारे में क्यों बात कर रहा हूं?

<ProductScreen@Screen>: ... 

सिर्फ इसलिए कि स्क्रीन -> रिलेटिवलेयूट -> फ्लोटलैटआउट।

फ्लोटलैटआउट में सभी विजेट निचले बाएं कोने से स्थित हैं, अर्थात्, स्क्रीन पर उन्हें स्वचालित रूप से स्थिति (0, 0) सौंपी जाती है। मार्कअप में, ऊपर से नीचे तक स्क्रीन में तत्वों को जोड़ने के क्रम का पता लगाना मुश्किल नहीं है:


यदि किसी ने ध्यान दिया, तो हमने केवल एक विजेट को स्थिति का संकेत दिया:

 MDToolbar: ... pos_hint: {"top": 1} 

विशिष्ट निर्देशांक (x, y) के अलावा, किवी में प्रत्येक विजेट को एक स्थिति संकेत दिया जा सकता है:

 pos_hint: {"top": 1} #    pos_hint: {"bottom": 1} #    pos_hint: {"right": 1} #    pos_hint: {"center_y": .5} #     pos_hint: {"center_x": .2} #   20 %       ... ... 

तो, नीचे पृष्ठभूमि छवि ...

  BoxLayout: size_hint_y: None height: root.height - toolbar.height FitImage: source: "smokestackheather.jpeg" 

... FitImage विजेट (KivyMD लाइब्रेरी) के लिए धन्यवाद, यह छवि के अनुपात को बनाए रखने के लिए स्वचालित रूप से इसे आवंटित सभी स्थान तक फैला हुआ है:



डिफ़ॉल्ट रूप से, किवी में प्रत्येक विजेट और लेआउट को 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() 

अब तस्वीर बदल गई है:


आप 0 से 1, (0-100% के बराबर) से size_hint संपत्ति भी निर्दिष्ट कर सकते हैं, अर्थात आकार h

 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 की ऊंचाई 56dp है, सभी स्थान पर कब्जा नहीं कर सकते हैं, और यदि आप यह नहीं बताते हैं कि इसका स्थान शीर्ष पर है, तो यह स्वचालित रूप से स्क्रीन के निचले हिस्से पर चिपक जाएगा:


कार्ड की सूची, OrderProductLayout (हम इसके बारे में नीचे बात करेंगे), MDCard तत्वों के साथ एक स्क्रॉल दृश्य है और यह स्क्रीन की पूरी ऊंचाई पर है, लेकिन पैडिंग (चढ़ाव में इंडेंट वैल्यू) के लिए धन्यवाद यह स्क्रीन के केंद्र से थोड़ा ऊपर स्थित है। ठीक है, डिफ़ॉल्ट रूप से MDBottomAppBar स्क्रीन की निचली सीमा पर लंगर छोड़ता है। इसलिए, केवल एमडीटूलबार हमने संकेत दिया कि इसकी जगह कहां है।

अब देखते हैं कि OrderProductLayout विजेट क्या है:


जैसा कि आप देख सकते हैं, ये चार कार्ड्स हैं, जिन्हें स्क्रिल व्यू में एम्बेड किया गया है। मूल स्क्रीन के विपरीत, जो कि फ्लोटलैयूट से विरासत में मिला है, यहां सभी विगेट्स ऊपर से नीचे तक पढ़े जाते हैं।


यह बहुत सुविधाजनक है, क्योंकि विजेट्स, पेड़ की संरचना की स्पष्ट पदानुक्रम है, और एक नज़र में यह स्पष्ट है कि विजेट / नियंत्रण किस लेआउट से संबंधित है। किवी में, सबसे आम उपयोग किया जाने वाला लेआउट BoxLayout है - एक बॉक्स जो आपको अपने आप को विगेट्स को क्षैतिज या क्षैतिज रूप से रखने की अनुमति देता है (डिफ़ॉल्ट रूप से - अंतिम एक):


यह निम्नलिखित आरेख से अधिक स्पष्ट रूप से देखा जा सकता है, जहां BoxLayout क्षैतिज अभिविन्यास का उपयोग किया जाता है:


हमने BoxLayout को 100% स्थान का उपयोग करने से मना किया - size_hint_y: कोई नहीं और कहा - आपकी ऊँचाई ठीक उसी प्रकार होगी जैसे कि उच्चतम तत्व की ऊंचाई आप में निहित है - ऊँचाई: self.minimum_height ।

छवि सूची:


यदि हम सूची के ऊर्ध्वाधर स्क्रॉलिंग का उपयोग करना चाहते हैं, तो हमें निम्नानुसार ग्रिडलाइउट को बदलना होगा:

  ScrollView: GridLayout: size_hint_y: None height: self.minimum_height cols: 1 

पंक्तियों (कॉलम) को कॉलम ( कॉल ) के साथ बदलें और न्यूनतम चौड़ाई में नहीं, बल्कि ऊंचाई में इंगित करें:

 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() 

निम्नलिखित कार्ड रंग और आकार के विकल्प हैं (वे लगभग समान हैं):


केवी भाषा मार्कअप भाषा की एक विशिष्ट विशेषता न केवल विगेट्स की स्पष्ट संरचना है, बल्कि यह भी तथ्य है कि यह भाषा पायथन भाषा की कुछ विशेषताओं का समर्थन करती है। अर्थात्: फोन करने के तरीके, चर / लॉजिकल, आई / ओ और गणितीय परिचालनों को बनाना / बदलना ...


लेबल में घोषित मूल्य की गणना ...

  Label: value: 0 text: str(self.value) 

... सीधे मार्कअप में होता है:

  MDIconButton: on_release: label_value.value -= 1 if label_value.value > 0 else 0 

और मुझे कभी विश्वास नहीं होगा कि यह (स्पंदन कोड) ...



... केवी भाषा कोड की तुलना में अधिक तार्किक और पठनीय:


कल मुझे पूछा गया था कि किवी विकास के माहौल के साथ कैसा व्यवहार कर रहा है, क्या वहाँ ऑटोोकम्प्लिट्स, हॉटलोड्स और अन्य सुविधाएं हैं? ऑटोकॉमप्लिट्स के साथ, अगर आप PyCharm का उपयोग करते हैं तो सब कुछ ठीक है:


हॉटलोड के लिए ... पायथन एक व्याख्या की गई भाषा है। कीवी पायथन का उपयोग करता है। तदनुसार, परिणाम देखने के लिए, आपको कोड संकलित करने की आवश्यकता नहीं है, इसे चलाएं - देखें / परीक्षण करें। जैसा कि मैंने कहा, किवी यूआई प्रदान करने के लिए देशी एपीआई का उपयोग नहीं करता है, इसलिए यह आपको स्क्रीन मॉड्यूल का उपयोग करके विभिन्न उपकरणों और प्लेटफार्मों का अनुकरण करने की अनुमति देता है। यह आपके प्रोजेक्ट को आवश्यक मापदंडों के साथ चलाने के लिए पर्याप्त है ताकि परीक्षण किए गए एप्लिकेशन की विंडो कंप्यूटर पर खुल जाए जैसे कि यह एक वास्तविक डिवाइस पर चल रहा हो। यह अजीब लगता है, लेकिन चूँकि यूआई प्रदान करने में मंच से कीवी एब्सट्रैक्ट्स, यह परीक्षण के लिए भारी और धीमी emulators की आवश्यकता को समाप्त करता है। यह केवल UI पर लागू होता है। उदाहरण के लिए, इस आलेख में वर्णित परीक्षण एप्लिकेशन को -m स्क्रीन विकल्पों के साथ परीक्षण किया गया था : droid2, पोर्ट्रेट, स्केल = 75 ।

बाईं ओर - मोबाइल डिवाइस पर, दाईं ओर - कंप्यूटर पर चल रहा है:


खैर, और अंत में, अंतिम परिणाम एक मोबाइल डिवाइस पर लॉन्च है ...


केवल एक चीज जो लॉन्च गति है। उसी स्पंदन पर वह बस अभूतपूर्व है!

मुझे आशा है कि मैं किसी के लिए उपयोगी था, जल्द ही मिलते हैं!