Programmation GUI avec kivy ~ Partie 6 Diverses dispositions ~

introduction

J'ai expliqué les boutons dans Partie 4, mais comme il y a plusieurs mises en page, je voudrais vous présenter diverses choses. Je vais donner une brève explication et un exemple comme précédemment, pour une explication détaillée, veuillez consulter Référence Je pense.

Disposition

Nous les présenterons dans l'ordre indiqué dans la liste de mise en page de Référence.

AnchorLayout

kivy.uix.anchorlayout

C'est une mise en page qui vous permet de placer facilement les objets à placer sur l'écran, par exemple au milieu. L'emplacement est spécifié pour les variables ʻanchor_x et ʻanchor_y. ʻAnchor_x est gauche, centre, droite Avec ʻanchor_y, vous pouvez spécifier parmi un total de 9 combinaisons de haut, centre et bas. Notez également que vous ne pouvez ajouter qu'un seul widget à une disposition d'ancrage. Si vous souhaitez en placer plusieurs, je pense que vous pouvez ajouter une autre mise en page à AnchorLayout.

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

Une disposition qui organise les widgets horizontalement ou verticalement. Par défaut, les widgets sont ajoutés horizontalement. Pour changer la direction, remplacez vertical``` si vous voulez rendre la variable ```orientation` verticale, ou `horizontal `si vous voulez la placer horizontalement. Vous pouvez le changer. Je ne pense pas qu'il soit possible de changer la direction de l'ajout de widgets en cours de route, donc je pense que c'est comme ajouter_wiget un nouveau BoxLayout pour changer le placement.

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
        #La valeur par défaut est"horizontal"Il est placé horizontalement.
        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

Contrairement à la disposition présentée ci-dessus, FloatLayout peut être placé en spécifiant la position absolue. Puisqu'il s'agit d'une position absolue, il faut noter que la position de l'objet ne change pas en fonction de la fenêtre même si la taille de la fenêtre est modifiée après le placement du widget.

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

Je ne savais pas comment m'en servir. Je souhaite mettre à jour l'article dès que je l'ai compris.

GridLayout

kivy.uix.gridlayout

GridLayout est un arrangement qui ajoute des widgets sous forme de calcul de table comme une grille. Le placement peut être spécifié à partir de `cols et rows`. Si vous remplacez cols '' par une valeur numérique, une nouvelle colonne sera créée en dessous et d'autres seront ajoutées lorsque le placement sera terminé horizontalement par cette valeur numérique. rows``` spécifie la valeur maximale dans le sens vertical et ajoute des widgets dans le sens horizontal, mais je n'ai pas compris le comportement qui n'est pas bon. Vous pouvez utiliser cols '' et `` lignes '' en même temps pour créer une grille de cols × lignes.

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 a une mise en page qui vous permet de placer un autre écran sur l'écran, et je pense que vous pouvez faire quelque chose comme une simple transition d'écran. Si vous cliquez sur la ligne sur le bord de l'écran (c'est difficile à voir, mais) et faites-la glisser sur le côté, un autre écran apparaîtra (c'est un peu difficile à utiliser w). Dans l'exemple, le bouton est collé tel quel, mais je pense qu'il sera utilisé comme ajouter_widget une autre mise en page à PageLayout.

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 est une mise en page qui vous permet de repositionner et de redimensionner avec la souris. Dans l'exemple, j'essaie de déplacer BoxLayout avec deux étiquettes sur ScatterLayout (j'ai ajouté une ligne brisée car il était difficile de voir uniquement l'étiquette). A l'origine, je pense qu'il est utilisé tel que l'agrandissement de l'écran avec une application d'image etc. Cela ressemble plus à une application pour smartphone qu'à un ordinateur.

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
#Afficher une ligne brisée
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 a une disposition qui spécifie l'orientation de la même manière que BoxLayout. La différence avec BoxLayout est que vous pouvez spécifier l'orientation à partir de 8 paramètres, et lorsque vous êtes sur le point de quitter l'écran, Le but est de changer la mise en page au niveau suivant ou latéralement. La direction d'arrangement peut être spécifiée à partir de la variable orientation, et la direction est spécifiée en combinant les paramètres `lr``` et` tb. Bien que ce soit `` `` lr-tb écrit dans l'exemple, lr``` est de gauche (gauche) à droite (droite), et tb``` est de haut (haut) en bas (bas). ), Organisez de gauche à droite et ajoutez des widgets de haut en bas lorsque vous atteignez le bord de l'écran.

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"]

        #La valeur par défaut est à droite, de haut en bas.
        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()

Si vous spécifiez lr-tb '', cela ressemblera à l'image de gauche, et si vous spécifiez bt-rl '', cela ressemblera à l'image de droite. 画像.png

Résumé

Comme j'utilise habituellement la disposition des boîtes, je n'avais presque aucune connaissance des autres dispositions, c'était donc une bonne opportunité. Après tout, je l'ai vérifié, mais je ne savais pas comment l'utiliser pour une mise en page relative, alors j'ai voulu le vérifier à nouveau.

Site de référence

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

Recommended Posts

Programmation GUI avec kivy ~ Partie 6 Diverses dispositions ~
Programmation GUI à l'aide de kivy ~ Partie 4 Divers boutons ~
Programmation GUI utilisant kivy ~ Partie 2 Barre de progression ~
Programmation GUI à l'aide de kivy ~ Partie 5 Création de boutons avec des images ~
Programmation GUI avec kivy ~ Partie 3 Vidéo et barre de recherche ~
Programmation GUI en Python avec Appjar
Création d'interface graphique en python à l'aide de tkinter partie 1