Grüße Heute werden wir erneut über die
KivyMD- Bibliothek sprechen - eine Reihe von Widgets für die plattformübergreifende Entwicklung in Python im Stil von Material Design. In diesem Artikel werde ich keine KivyMD-Widgets wie in einem
kürzlich erschienenen Artikel überprüfen, sondern es wird mehr um das Positionieren von Widgets gehen. So etwas wie ein Tutorial zum Entwickeln mobiler Anwendungen in Python für Anfänger gibt es hier nicht. Wenn Sie also zum ersten Mal etwas über das Kivy-Framework erfahren, ist es unwahrscheinlich, dass Sie daran interessiert sind. Nun, wir sind unter dem Schnitt gefahren!
Neulich habe ich die Flutter UIKit Demo-Anwendung von Google Play heruntergeladen:
Und jetzt werden wir versuchen, einen Bildschirm aus dieser Anwendung zu wiederholen. Schauen wir uns die Ergebnisse gleich an: Links flattern, rechts Kivy & KivyMD.
Einige Elemente der Benutzeroberfläche unterscheiden sich, nicht aufgrund einiger technischer Merkmale, weshalb es unmöglich war, ein identisches Ergebnis zu erhalten, aber ich dachte nur, es wäre organischer (zum Beispiel sieht die schwarze Symbolleiste meiner Meinung nach überhaupt nicht aus).
Also! Was fällt auf, wenn wir auf den Bildschirm schauen, den wir spielen werden? Transparenter Hintergrund Frontlayout. In Kivy wird diese Funktion von FloatLayout bereitgestellt, mit der Sie Widgets und Steuerelemente wie folgt ineinander platzieren können:
Schematisch sieht unser Bildschirm so aus:
Das Layout dieses Bildschirms ist ziemlich einfach:
Warum spreche ich über FloatLayout, wenn unser Bildschirm von Screen geerbt wird?
<ProductScreen@Screen>: ...
Nur weil Screen -> RelativeLayout -> FloatLayout.
Alle Widgets in FloatLayout werden in der unteren linken Ecke positioniert, dh auf dem Bildschirm wird ihnen automatisch die Position (0, 0) zugewiesen. Im Markup ist es nicht schwierig, die Reihenfolge des Hinzufügens von Elementen zum Bildschirm von oben nach unten zu verfolgen:
Wenn jemand aufgepasst hat, haben wir die Position nur einem Widget angezeigt:
MDToolbar: ... pos_hint: {"top": 1}
Zusätzlich zu bestimmten Koordinaten (x, y) kann jedem Widget in Kivy ein Positionshinweis gegeben werden:
pos_hint: {"top": 1}
Also, das untere Hintergrundbild ...
BoxLayout: size_hint_y: None height: root.height - toolbar.height FitImage: source: "smokestackheather.jpeg"
... dank des FitImage-Widgets (KivyMD-Bibliothek) wird es unter Beibehaltung der Bildproportionen automatisch auf den gesamten zugewiesenen Speicherplatz gedehnt:
Standardmäßig wird jedem Widget und Layout in Kivy 100% des Speicherplatzes zugewiesen, sofern nicht anders angegeben. Wenn Sie beispielsweise eine Schaltfläche zum Bildschirm hinzufügen möchten, gehen Sie offensichtlich wie folgt vor:
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()
Und erhalten Sie das Ergebnis:
Der Knopf nahm 100% des Platzes ein. Um eine Schaltfläche in der Mitte des Bildschirms zu platzieren, müssen Sie erstens die erforderliche Größe dafür festlegen und zweitens angeben, wo sie sich befinden wird:
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()
Jetzt hat sich das Bild geändert:
Sie können auch die Eigenschaft
size_hint von 0 bis 1 (entspricht 0 bis
100 %) angeben,
dh den
Größenhinweis :
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()
Oder dasselbe, aber der
Breitenhinweis (
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()
Die MDToolbar hat eine Höhe von 56dp, kann nicht den gesamten Platz einnehmen. Wenn Sie ihr nicht mitteilen, dass sie oben platziert ist, bleibt sie automatisch am unteren Bildschirmrand hängen:
Die Liste der Karten - OrderProductLayout (wir werden weiter unten darauf eingehen) - ist eine ScrollView mit MDCard-Elementen und nimmt die gesamte Höhe des Bildschirms ein. Dank der Auffüllung (Einrückungswerte in Tiefs) scheint sie sich jedoch etwas oberhalb der Mitte des Bildschirms zu befinden. Nun, standardmäßig legt MDBottomAppBar den Anker am unteren Rand des Bildschirms ab. Daher haben wir nur MDToolbar angegeben, wo es platziert ist.
Sehen wir uns nun das OrderProductLayout-Widget an:
Wie Sie sehen, sind dies vier Karten, die in ScrillView eingebettet sind. Im Gegensatz zum übergeordneten Bildschirm, der von FloatLayout geerbt wird, werden hier alle Widgets von oben nach unten gelesen.
Dies ist sehr praktisch, da es eine klare Hierarchie von Widgets und eine Baumstruktur gibt und auf einen Blick klar ist, welches Widget / Steuerelement zu welchem Layout gehört. In Kivy ist das am häufigsten verwendete Layout BoxLayout - ein Feld, mit dem Sie Widgets vertikal oder horizontal in sich platzieren können (standardmäßig das letzte):
Dies ist deutlicher aus dem folgenden Diagramm ersichtlich, in dem die horizontale Ausrichtung von BoxLayout verwendet wird:
Wir haben BoxLayout verboten, 100% des Platzes zu verwenden -
size_hint_y: None und gesagt - Ihre Höhe entspricht genau der Höhe des höchsten in Ihnen verschachtelten Elements -
height: self.minimum_height .
Bildliste:
Wenn wir das vertikale Scrollen der Liste verwenden möchten, müssten wir das GridLayout wie folgt ändern:
ScrollView: GridLayout: size_hint_y: None height: self.minimum_height cols: 1
Ersetzen Sie Zeilen (Spalten) durch Spalten (Spalten) und geben Sie im
Minimum nicht die Breite, sondern die Höhe an:
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()
Die folgenden Karten sind die Wahl der Farbe und Größe (sie sind fast identisch):
Eine Besonderheit der Kv Language-Auszeichnungssprache ist nicht nur die klare Struktur der Widgets, sondern auch die Tatsache, dass diese Sprache einige Funktionen der Python-Sprache unterstützt. Nämlich: Methoden aufrufen, Variablen erstellen / ändern, logische, E / A- und mathematische Operationen ...
Berechnung des in
Label deklarierten
Wertes ...
Label: value: 0 text: str(self.value)
... passiert direkt im Markup selbst:
MDIconButton: on_release: label_value.value -= 1 if label_value.value > 0 else 0
Und ich werde nie glauben, dass dies (Flutter-Code) ...
... logischer und lesbarer als der Kv-Sprachcode:
Gestern wurde ich gefragt, wie es Kivy mit der Entwicklungsumgebung geht. Gibt es Autocomplits, Hotloads und andere Annehmlichkeiten? Mit Autocomplits ist alles in Ordnung, wenn Sie PyCharm verwenden:
Was die Hotload betrifft ... Python ist eine interpretierte Sprache. Kivy benutzt Python. Um das Ergebnis zu sehen, müssen Sie den Code nicht kompilieren, sondern ausführen - sehen / testen. Wie bereits erwähnt, verwendet Kivy keine nativen APIs zum Rendern der Benutzeroberfläche. Daher können Sie mithilfe des
Bildschirmmoduls verschiedene Modelle von Geräten und Plattformen emulieren. Es reicht aus, Ihr Projekt mit den erforderlichen Parametern auszuführen, damit das Fenster der getesteten Anwendung auf dem Computer geöffnet wird, als würde es auf einem realen Gerät ausgeführt. Es hört sich seltsam an, aber da Kivy beim Rendern der Benutzeroberfläche von der Plattform abstrahiert, werden keine schweren und langsamen Emulatoren für Tests benötigt. Dies gilt nur für die Benutzeroberfläche. Die in diesem Artikel beschriebene
Testanwendung wurde beispielsweise mit den
Bildschirmoptionen -m getestet
: droid2, portrait, scale = .75 .
Links - auf einem mobilen Gerät ausgeführt, rechts - auf einem Computer:
Vollständige Liste der Parameter des Bildschirmmoduls: Nun, und schließlich ist das Endergebnis der Start auf einem mobilen Gerät ...
Das einzige, was stört, ist die Startgeschwindigkeit. Gleichzeitig ist sie einfach phänomenal!
Ich hoffe, ich war jemandem nützlich, bis bald!