Kivy tutorial, tutorial

GUI elemek

A Kivy nagyon sok általános célú felhasználói felületi elemet tartalmaz, beleértve a gombokat, szöveg beviteli mezőket, és felugró ablakokat. Ezek a kivy.uix csomagban lévő modulokból importálhatók, pl a Widget elemet a kivy.uix.widget modulban találjuk De a Pythonban szokásos osztályöröklődéssel új elemek is létrehozhatók. Az alábbi lista csak a legalapvetőbb elemek egyszerű használati eseteit mutatja be, a teljes lista a Kivy weboldalán található.

Magyarul címke, arra használható, hogy szöveget jelenítsen meg. A lenti program egy Label segítségével megjeleníti a "Hello world" feliratot egy véletlenszerű színben.

attribútum	típus	leírás
text	str	A megjelenítendő szöveg.
font_size	int	A használt betűtípus mérete.
color	tuple[float, float, float, float]	4 elemű tuple 0 és 1 közötti float értékekkel. A szöveg színét határozza meg piros, zöld, kék, alfa sorrendben.


from random import random
from colorsys import hsv_to_rgb

from kivy.app import App
from kivy.uix.label import Label


class LabelExample(App):
    def build(self):
        return Label(text="Hello world", color=hsv_to_rgb(random(), 1.0, 1.0) + (1.0, ), outline_width=5, outline_color=(1.0, ) * 3, font_size=150)


if __name__ == "__main__":
    LabelExample().run()

Fekete háttéren kék betűkkel Hello world felirat

Jelentése gomb. Célja, hogy amikor a felhasználó rákattint, egy előbb beállított függvényt meghív. Gyakran célszerűbb, hogy a függvény a gomb felengedésekor fusson le, erre egy másik paraméter való. Ez a kettő akár használható egyszerre is. A példában látható program kiírja a standard kimenetre, hogy a gombnak melyik függvénye lett meghívva.

attribútum	típus	leírás
text	str	A gombon megjelenő szöveg szöveg.
on_press	Callable[[Button], None]	Lenyomáskor meghívott függvény, a gomb objektumot kapja paraméterül.
on_release	Callable[[Button], None]	Lenyomás utáni felengedéskor meghívott függvény, a gomb objektumot kapja paraméterül.


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


class ButtonExample(App):
    def build(self):
        return Button(text="Test button", on_press=lambda _: print("on_press called"), on_release=lambda _: print("on_release called"))


if __name__ == "__main__":
    ButtonExample().run()

Arra való, hogy a felhasználó szöveget adhasson meg. Beállítható, hogy engedélyezett legyen-e többsoros szöveg bevitele, illetve az enter lenyomásakor meghívandó függvény. A lenti program egy TextInput objektummal megadott szöveget kiértékel Python kifejezésként.

attribútum	típus	leírás
text	str	A mezőbe létrehozáskor kerülő szöveg, később a felhasználó által beírt szöveg is innen olvasható.
hint_text	str	Ha üres a mező, ez szöveg jelenik meg benne.
multiline	bool	Lehet-e a mezőbe több soros szöveget beírni.
on_text_validate	Callable[[TextInput], None]	Csak akkor működik, ha a multiline érték hamis. Amikor a felhasználó az enter lenyomásával elhagyja a mezőt, ez a függvény kerül meghívásra.


from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.textinput import TextInput
from kivy.uix.popup import Popup


def show_text(text, title=""):
    Popup(title=title, content=Label(text=text), size_hint=(0.6, 0.3)).open()


class TextInputExample(App):
    def build(self):
        return TextInput(text="__import__(\"inspect\").currentframe().f_back.f_locals[\"this\"].text", hint_text="Enter a python expression", multiline=False, on_text_validate=lambda this: show_text(repr(eval(this.text, {}, {})), "result"))


if __name__ == "__main__":
    TextInputExample().run()

Kivy alkalmazás egy szöveg beviteli mezővel, fölötte felugró ablak a kifejezés értékével

A GridLayout egy elrendező osztály, tehát arra való, hogy más elemek elhelyezhetőek legyenek rajta. Ezek az elemek egy tetszőleges meretű négyzetrácson jelennek meg. A példa programmal kipróbálható, hogy milyen elrendezést eredményez a "cols", "rows" és "orientation" paraméterek megváltoztatása.

attribútum	típus	leírás
cols	int	Oszlopok száma
rows	int	Sorok száma
orientation	str	A feltöltés sorrendjét meghatárazó érték. Kötöjellel elválasztva külön fel-le, és a jobb-bal feltöltés iránya. (Alapértelmezett: lr-tb lr: balról jobbra, tb: fentről le)


from itertools import count

from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.uix.button import Button
from kivy.uix.label import Label
from kivy.uix.textinput import TextInput


def generate_index(index_set: set[int]) -> int:
    index: int = next(i for i in count() if i not in index_set)
    index_set.add(index)
    return index


class GridLayoutExample(App):
    def build(self):
        base = GridLayout(cols=1)
        layout = GridLayout(cols=4, rows=5, size_hint=(1.0, 5.0))
        controls = GridLayout(cols=2)
        inputs = GridLayout(cols=2)
        sep = " "
        index_set = set()

        inputs.add_widget(Label(text="orientation:"))
        inputs.add_widget(TextInput(text=layout.orientation, multiline=False, on_text_validate=lambda text_input: setattr(layout, "orientation", text_input.text)))
        inputs.add_widget(Label(text="columns and rows"))
        inputs.add_widget(TextInput(text=f"{layout.cols}{sep}{layout.rows}", multiline=False, on_text_validate=lambda text_input: [setattr(layout, attr, val) for attr, val in zip(["cols", "rows"], map(int, text_input.text.split(sep)))]))

        controls.add_widget(inputs)
        controls.add_widget(Button(text="Add button", on_release=lambda _: layout.add_widget(Button(text=str(generate_index(index_set)), on_release=lambda button: [layout.remove_widget(button), index_set.remove(int(button.text))])), size_hint=(0.5, 1.0)))

        base.add_widget(controls)
        base.add_widget(layout)

        return base


if __name__ == "__main__":
    GridLayoutExample().run()

GridLayout elem gombokkal feltöltve fentről lefelé és jobbról balra