Vánoční nadílka Vánoční nadílka
Až 80% zdarma! Předvánoční BLACK FRIDAY akce. Více informací

Lekce 3 - Dynamické pozicování widgetů v Kivy

Python Kivy Dynamické pozicování widgetů v Kivy

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

Zdravím vás u další lekce Kivy frameworku pro Python. V lekci minulé, Kivy language a layouty, jsme si představili Kivy language a popsali layouty, které Kivy obsahuje. V dnešním Python tutoriálu si ukážeme jak dynamicky pozicovat widgety a tím si také upevníme znalosti z minulé lekce, která se zaměřovala na Kivy language.

Python

Vytvoříme si nový projekt a nejdříve si naimportujeme Kivy a nastavíme požadovanou verzi. Dále importujeme Widget, který dnes použijeme namísto layoutu a ve kterém si ukážeme názorný příklad. Prvky si totiž budeme pozicovat tentokrát sami a layout by pro nás byl jen na škodu. Nakonec jako vždy si importujeme třídu App.

Zdrojový kód v Pythonu je následující:

import kivy
kivy.require("1.10.1")
from kivy.uix.widget import Widget
from kivy.app import App

class MujWidget(Widget):
    pass

class MainApp(App):

    def build(self):
        return MujWidget()

MainApp().run()

Kivy

Přidejte si soubor .kv. Pro ukázku si do aplikace přidáme a upravíme textový popisek Label a nastavíme mu vlastní velikost, velikost fontu a barvu, která má 4 hodnoty RGBA (červená složka, zelená složka, modrá složka, průhlednost). Toto nastavení se dále projeví pro všechny labely v aplikaci.

#:kivy 1.10.1

<Label>:
    size: 150, 50
    font_size: 32
    color: .5, .7, .3, 1

Druhou možností je definovat si vlastní Label místo úpravy toho stávajícího. Pro tento způsob bychom použili syntaxi <[email protected]>:

<[email protected]>:
    size: 150, 50
    font_size: 32
    color: .5, .7, .3, 1

Všimněte si, že <> se používá nejen pro úpravu nějakého widgetu nebo layoutu, ale také pro vytvoření vlastního. Výhodou tohoto postupu je samozřejmě fakt, že máme v aplikaci možnost použít jak MujSuperLabel s upraveným stylem, tak i původní Label.

Dále do .kv souboru přidáme definici formuláře, do kterého si vložíme dva labely. Pokud používáte vlastní label, např. onen MujSuperLabel, nahraďte Label: v kódu níže názvem vašeho labelu:

<MujWidget>:
    Label:
        id: label1
        text: "Label1"
    Label:
        id: label2
        text: "Label2"

Všimněte si, že oba labely jsou na stejné pozici, protože jsme jim žádnou pozici nenastavili a formulář nemá ani žádný layout.

Pozor, v Kivy frameworku se pozicuje od spodního levého rohu!

Nyní umístíme první Label do pravého horního rohu a druhý do pravého spodního rohu.

V Kivy language se na Widget/Layout, ve kterém se aktuální Widget nachází, odkazujeme pomocí root a pomocí self sami na sebe. Obsah našeho .kv souboru upravíme na:

#:kivy 1.10.1

<Label>:
    size: 150, 50
    font_size: 32
    color: .5, .7, .3, 1

<MujWidget>:
    Label:
        id: label1
        text: "Label1"
        pos: root.width - self.width, root.top - self.height    --- musíme odečíst velikost Labelu jinak by se Label nacházel mimo okno
    Label:
        id: label2
        text: "Label2"
        pos: root.width - self.width, root.y

Kdybychom neodečetli velikost samotného Labelu, nacházel by se mimo okno, protože root.width je pravý okraj okna. Výsledné okno vypadá následovně:

Absolutní pozicování labelů v Kivy frameworku pro Python

Import Python knihoven do Kivy language

Nyní si ukážeme, jak se pracuje v .kv souborech s Python knihovnou a zobrazíme v Labelu číslo π (Pí) z knihovny math (není potřeba ji instalovat).

Importujeme knihovnu math pomocí #:import math math. To je ekvivalent import math as math v Pythonu. Číslo π samozřejmě zaokrouhlíme, jelikož máme fixní šířku Labelu a konstanta, kterou knihovna obsahuje, by se nám do Labelu nevešla:

#:kivy 1.10.1
#:import math math

<Label>:
    size: 150, 50
    font_size: 32
    color: .5, .7, .3, 1

<MujWidget>:

    Label:
        id: label1
        text: str(round(math.pi, 5))
        pos: root.width - self.width, root.top - self.height
    Label:
        id: label2
        text: "Label2"
        pos: root.width - self.width, root.y

V horním Labelu se nám namísto textu "Label1" zobrazí zaokrouhlená konstanta. Aplikace po změně vypadá následovně:

Import knihoven do Kivy language v Pythonu

Zdrojový kód najdete ke stažení v příloze článku. Doufám, že jste si utvrdili znalosti ohledně Kivy language. V příští lekci, Reakce na kliknutí/dotek a aplikace Malování v Kivy, si povíme o reakci na kliknutí/dotek a pohyb myši/prstu. Také si vytvoříme jednoduchou aplikaci Malování.


 

Stáhnout

Staženo 5x (532 B)
Aplikace je včetně zdrojových kódů v jazyce Python

 

 

Článek pro vás napsal MQ .
Avatar
Jak se ti líbí článek?
1 hlasů
Autor je srdcem Pythonista.
Miniatura
Předchozí článek
Kivy language a layouty
Miniatura
Všechny články v sekci
Kivy framework pro Python
Aktivity (2)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!