[PYTHON] GUI-Programmierung mit kivy ~ Teil 6 Verschiedene Layouts ~

Einführung

Ich habe die Schaltflächen in Teil 4 erklärt, aber da es mehrere Layouts gibt, möchte ich verschiedene Dinge vorstellen. Ich werde eine kurze Erklärung und ein Beispiel wie zuvor geben. Eine ausführliche Erklärung finden Sie unter Referenz. Ich denke.

Layout

Wir werden sie in der Reihenfolge einführen, die in der Layoutliste von Referenz aufgeführt ist.

AnchorLayout

kivy.uix.anchorlayout

Mit diesem Layout können Sie die zu platzierenden Objekte einfach auf dem Bildschirm platzieren, z. B. in der Mitte. Der Ort wird für die Variablen anchor_x und anchor_y angegeben. Für anchor_x, left , center, right Mit anchor_y können Sie aus insgesamt 9 Kombinationen von top, center und bottom angeben. Beachten Sie auch, dass Sie einem Ankerlayout nur ein Widget hinzufügen können. Wenn Sie mehr als ein Layout platzieren möchten, können Sie AnchorLayout ein weiteres Layout hinzufügen.

import random

from kivy.app import App
from kivy.uix.anchorlayout import AnchorLayout
from kivy.uix.button import Button


class Test(AnchorLayout):
    def __init__(self, **kwargs):
        super(Test, self).__init__(**kwargs)

        self.x_positon = ["left", "center", "right"]
        self.y_positon = ["top", "center", "bottom"]
        self.anchor_x = "center"
        self.anchor_y = "center"

        btn = Button(text='Hello World', size_hint=(0.5,0.5), on_press=self.click)
        self.add_widget(btn)

    def click(self,btn):
        x = random.choice(self.x_positon)
        y = random.choice(self.y_positon)
        self.anchor_x = x
        self.anchor_y = y
        btn.text = "x : {}\ny : {}".format(x, y)


class Sample(App):
    def build(self):
        return Test()


if __name__ == '__main__':
    Sample().run()

sample1.gif

BoxLayout

kivy.uix.boxlayout

Ein Layout, das die Widgets horizontal oder vertikal anordnet. Standardmäßig werden Widgets horizontal hinzugefügt. Um die Ausrichtung zu ändern, ersetzen Sie "vertikal", wenn die Variable "Ausrichtung" vertikal sein soll, oder "horizontal", wenn Sie sie horizontal anordnen möchten. Du kannst es ändern. Ich denke nicht, dass es möglich ist, die Richtung des Hinzufügens von Widgets auf dem Weg zu ändern, also denke ich, dass es so ist, als würde man ein neues BoxLayout hinzufügen, um die Platzierung zu ändern.

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button


class Test(BoxLayout):
    def __init__(self, **kwargs):
        super(Test, self).__init__(**kwargs)

        self.count = 0
        #Der Standardwert ist"horizontal"Es ist horizontal platziert.
        self.orientation = "horizontal"
        #self.orientation = "vertical"

        btn = Button(text='Hello World', on_press=self.click)
        self.add_widget(btn)

    def click(self,btn):
        self.count += 1
        self.add_widget(Button(text="{}".format(self.count),on_press=self.dismiss))

    def dismiss(self, a):
        self.remove_widget(a)


class Sample(App):
    def build(self):
        return Test()


if __name__ == '__main__':
    Sample().run()

sample2.gif

FloatLayout

kivy.uix.floatlayout

Im Gegensatz zu dem oben eingeführten Layout kann FloatLayout durch Angabe der absoluten Position platziert werden. Da es sich um eine absolute Position handelt, sollte beachtet werden, dass sich die Position des Objekts nicht entsprechend dem Fenster ändert, selbst wenn die Größe des Fensters nach dem Platzieren des Widgets geändert wird.

import random

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.button import Button

class Test(FloatLayout):
    def __init__(self, **kwargs):
        super(Test, self).__init__(**kwargs)

        btn = Button(text='Hello World', size_hint=(0.1,0.1), on_press=self.click)
        self.add_widget(btn)

    def click(self,btn):
        x = int(random.uniform(0,self.width))
        y = int(random.uniform(0,self.height))
        self.add_widget(Button(text="x : {}\ny : {}".format(x, y), pos=(x,y), size_hint=(0.1,0.1)))


class Sample(App):
    def build(self):
        return Test()

if __name__ == '__main__':
    Sample().run()

sample3.gif

RelativeLayout

kivy.uix.relativelayout

Ich wusste nicht, wie ich es benutzen sollte. Ich möchte den Artikel aktualisieren, sobald ich ihn verstehe.

GridLayout

kivy.uix.gridlayout

GridLayout ist so angeordnet, dass Widgets in Form von Tabellenberechnungen wie Grid hinzugefügt werden. Die Platzierung kann aus `cols und rows` angegeben werden. Wenn Sie `cols``` durch einen numerischen Wert ersetzen, wird eine neue Spalte darunter erstellt und weitere werden hinzugefügt, wenn die Platzierung horizontal durch diesen numerischen Wert abgeschlossen ist. Zeilen``` gibt den Maximalwert in vertikaler Richtung an und fügt Widgets in horizontaler Richtung hinzu, aber ich habe das Verhalten, das nicht gut ist, nicht verstanden. Gleichzeitig können Sie mit `` Spalten und` `` Zeilen ein Raster aus Spalten × Zeilen erstellen.

from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.uix.button import Button


class Test(GridLayout):
    def __init__(self, **kwargs):
        super(Test, self).__init__(**kwargs)
        self.count = 0
        btn = Button(text='Hello World', on_press=self.click)
        self.cols = 5
        #self.rows = 5

        self.add_widget(btn)

    def click(self,btn):
        self.count += 1
        self.add_widget(Button(text="{}".format(self.count)))


class Sample(App):
    def build(self):
        return Test()


if __name__ == '__main__':
    Sample().run()

sample4.gif

PageLayout

kivy.uix.pagelayout

PageLayout verfügt über ein Layout, mit dem Sie einen weiteren Bildschirm auf dem Bildschirm platzieren können, und ich denke, Sie können so etwas wie einen einfachen Bildschirmübergang ausführen. Wenn Sie auf die Linie am Rand des Bildschirms klicken (schwer zu erkennen, aber) und zur Seite ziehen, wird ein weiterer Bildschirm angezeigt (die Bedienung ist etwas schwierig). Im Beispiel wird die Schaltfläche so eingefügt, wie sie ist, aber ich denke, dass sie wie das Hinzufügen eines anderen Layouts zu PageLayout verwendet wird.

from kivy.app import App
from kivy.uix.pagelayout import PageLayout
from kivy.uix.button import Button


class Test(PageLayout):
    def __init__(self, **kwargs):
        super(Test, self).__init__(**kwargs)
        btn1 = Button(text='Hello World1', size_hint=(0.5, 0.5))
        self.add_widget(btn1)

        btn2 = Button(text='Hello World2', size_hint=(0.5, 0.5))
        self.add_widget(btn2)

        btn3 = Button(text='Hello World3', size_hint=(0.5, 0.5))
        self.add_widget(btn3)


class Sample(App):
    def build(self):
        return Test()


if __name__ == '__main__':
    Sample().run()

sample5.gif

ScatterLayout

kivy.uix.scatterlayout

ScatterLayout ist ein Layout, mit dem Sie mit der Maus neu positionieren und die Größe ändern können. In diesem Beispiel versuche ich, BoxLayout mit zwei Beschriftungen in ScatterLayout zu verschieben (ich habe eine gestrichelte Linie hinzugefügt, da es schwer zu erkennen war, ob es sich nur um die Beschriftung handelt). Ursprünglich denke ich, dass es verwendet wird, wie zum Beispiel das Vergrößern des Bildschirms mit einer Bildanwendung usw. Es fühlt sich eher wie eine Smartphone-App als wie ein Computer an.

from kivy.app import App
from kivy.uix.scatterlayout import ScatterLayout
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.label import Label
from kivy.config import Config
#Zeigen Sie eine gestrichelte Linie an
Config.set('modules', 'ShowBorder', '')


class Test(ScatterLayout):
    def __init__(self, **kwargs):
        super(Test, self).__init__(**kwargs)

        layout = BoxLayout()

        label = Label(text="Hello World!")
        layout.add_widget(label)

        label2 = Label(text="Hello World!")
        layout.add_widget(label2)

        self.add_widget(layout)


class Sample(App):
    def build(self):
        return Test()


if __name__ == '__main__':
    Sample().run()

sample6.gif

StackLayout

kivy.uix.stacklayout

StackLayout verfügt über ein Layout, das die Ausrichtung auf dieselbe Weise wie BoxLayout angibt. Der Unterschied zu BoxLayout besteht darin, dass Sie die Ausrichtung aus 8 Parametern festlegen können und wenn Sie den Bildschirm verlassen möchten, Der Punkt ist, das Layout auf die nächste Ebene oder seitwärts zu ändern. Die Richtung der Anordnung kann aus der Variablen "Orientierung" spezifiziert werden, und die Richtung wird durch Kombinieren der Parameter "lr" und "tb" spezifiziert. Obwohl im Beispiel `lr-tb``` geschrieben ist, ist` lr von links (links) nach rechts (rechts) und `` tb von oben (oben) nach unten (unten). ), Von links nach rechts anordnen und Widgets von oben nach unten hinzufügen, wenn Sie den Bildschirmrand erreichen.

from kivy.app import App
from kivy.uix.stacklayout import StackLayout
from kivy.uix.button import Button


class Test(StackLayout):
    def __init__(self, **kwargs):
        super(Test, self).__init__(**kwargs)

        ori = ["lr-tb","tb-lr","rl-tb","tb-rl","lr-bt","bt-lr","rl-bt","bt-rl"]

        #Die Standardeinstellung ist rechts von oben nach unten.
        self.orientation="lr-tb"

        for i in range(100):
            btn = Button(text=str(i), width=40 + i * 5, size_hint=(None, 0.15))
            self.add_widget(btn)


class Sample(App):
    def build(self):
        return Test()


if __name__ == '__main__':
    Sample().run()

Wenn Sie `lr-tb``` angeben, sieht es wie das Bild links aus, und wenn Sie` bt-rl``` angeben, sieht es wie das Bild rechts aus. 画像.png

Zusammenfassung

Da ich normalerweise das Box-Layout verwende, hatte ich fast keine Kenntnis von anderen Layouts, daher war dies eine gute Gelegenheit. Immerhin habe ich es überprüft, aber ich wusste nicht, wie ich es für das relative Layout verwenden sollte, also wollte ich es erneut überprüfen.

Referenzseite

https://pyky.github.io/kivy-doc-ja/gettingstarted/layouts.html

Recommended Posts

GUI-Programmierung mit kivy ~ Teil 6 Verschiedene Layouts ~
GUI-Programmierung mit kivy ~ Teil 4 Verschiedene Tasten ~
GUI-Programmierung mit kivy ~ Teil 2 Fortschrittsbalken ~
GUI-Programmierung mit kivy ~ Teil 5 Erstellen von Schaltflächen mit Bildern ~
GUI-Programmierung mit kivy ~ Teil 3 Video und Suchleiste ~
GUI-Programmierung in Python mit Appjar
GUI-Erstellung in Python mit tkinter Teil 1