GUI aplikace (Tkinter)

Doteď jsme se učili, jak vytvářet konzolové aplikace v Pythonu, tedy programy, které běží v textovém rozhraní a komunikují s uživatelem prostřednictvím příkazového řádku. Konzolové aplikace jsou skvělým základem, ale většina uživatelů očekává od softwaru přehledné grafické rozhraní, které mohou snadno ovládat pomocí myši a klávesnice.

Teď se posuneme dál a začneme vytvářet grafické uživatelské rozhraní (GUI) pomocí Tkinteru. Tkinter je jednoduchá knihovna v Pythonu, která nám umožní stavět okna s tlačítky, textovými poli a dalšími prvky, díky kterým budou naše aplikace přístupnější a uživatelsky přívětivější.

Zdroj obrázku: https://realpython.com/videos/gui-application-tkinter-overview/

Základní struktura Tkinter

Každá aplikace s GUI potřebuje hlavní okno, kam umístíme všechny další prvky. Tkinter nabízí funkci Tk(), která vytvoří právě toto hlavní okno. Dále si musíme uvědomit, že GUI aplikace čeká na akce uživatele (např. kliknutí myši nebo stisk klávesy) a reaguje na ně. Tkinter proto běží ve smyčce, která se jmenuje hlavní smyčka.

Nejprve si tedy importujeme Tkinter, vytvoříme hlavní okno a spustíme hlavní smyčku.

Když spustíme tento kód, uvidíme prázdné okno. Žádné tlačítko ani text neuvidíme, protože jsme ještě nic nepřidali.

import tkinter as tk  # Importujeme knihovnu Tkinter a říkáme jí 'tk'

# Vytvoříme hlavní okno
okno= tk.Tk()  # Hlavní okno, do kterého budeme přidávat prvky
okno.title("MěSOŠ aplikace")  # Nastavíme název okna

# Spustíme hlavní smyčku
okno.mainloop()  # Program čeká na akce od uživatele

Přidání prvků – popisek a tlačítko

Aby naše aplikace nevypadala jako prázdné okno, přidáme do ní popisek a tlačítko. Popisek (Label) zobrazí text a tlačítko (Button) udělá nějakou akci, když na něj klikneme.

Pomocí popisku tk.Label() zobrazíme jednoduchý text.

Tlačítko tk.Button() reaguje na kliknutí myši. Aby tlačítko něco udělalo, musíme mu říct, jakou funkci má spustit. Funkce stisknutiTlacitka() vytiskne zprávu do konzole, pokud něco stiskneme.

import tkinter as tk  # Importujeme knihovnu Tkinter a říkáme jí 'tk'

# Vytvoříme hlavní okno
okno = tk.Tk()  # Hlavní okno, do kterého budeme přidávat prvky
okno.title("MěSOŠ aplikace")  # Nastavíme název okna

# Přidáme popisek s textem
popisek = tk.Label(okno, text="Vítej na MěSOŠ!")
popisek.pack()  # Umístíme popisek do okna

# Přidáme tlačítko, které něco vypíše do konzole, když na něj klikneme
def stisknuti_tlacitka():
    print("Tlačítko bylo stisknuto!")

tlacitko = tk.Button(okno, text="Klikni na mě", command=stisknutiTlacitka)
tlacitko.pack()  # Umístíme tlačítko do okna

# Spustíme hlavní smyčku
okno.mainloop()  # Program čeká na akce od uživatele

Umisťování prvků – grid

Metoda pack() je jednoduchý způsob, jak umístit prvky do okna, a hodí se pro základní rozvržení. Tkinter nabízí i další možnosti, jako grid(), která umožňuje pokročilejší rozvržení pomocí mřížky. S grid() můžeme například rozložit prvky do řádků a sloupců, podobně jako v tabulce.

Každý prvek má po použití grid() dvě důležité vlastnosti:

• row (řádek) – určuje, do jakého řádku prvek patří
• column (sloupec) – určuje, do jakého sloupce prvek patří

import tkinter as tk  

okno = tk.Tk() 
okno.title("Aplikace s mřížkou") 

# Vytvoříme popisek, který se zobrazí vlevo vedle vstupního pole
popisek = tk.Label(okno, text="Zadej své jméno:")
popisek.grid(row=0, column=0)  # Umístíme popisek do prvního řádku a prvního sloupce

# Vytvoříme vstupní pole, do kterého může uživatel napsat své jméno
vstup = tk.Entry(okno)
vstup.grid(row=0, column=1)  # Umístíme vstupní pole do prvního řádku a druhého sloupce

# Definujeme funkci, která se spustí, když uživatel klikne na tlačítko
def zobraz_jmeno():
    jmeno = vstup.get()  # Získáme text zadaný uživatelem
    print(f"Ahoj, {jmeno}!")  # Vytiskneme zprávu s jménem do konzole

# Vytvoříme tlačítko, které spustí funkci zobraz_jmeno
tlacitko = tk.Button(okno, text="Odeslat", command=zobraz_jmeno)
tlacitko.grid(row=1, column=0, columnspan=2)  # Umístíme tlačítko do druhého řádku a přes oba sloupce

okno.mainloop() 

Funkce a argumenty v grid()

1. row – Určuje řádek, do kterého chceme prvek umístit.
   • Číslování začíná od 0, takže první řádek je row=0, druhý je row=1, atd.
   • Například: popisek.grid(row=0)
2. column – Určuje sloupec, do kterého prvek patří.
   • Opět začíná od 0, takže první sloupec je column=0, druhý je column=1, atd.
   • Například: vstup.grid(column=1)
3. columnspan – Nastavuje, aby prvek zabíral více sloupců, než je standardní jeden sloupec.
   • Například columnspan=2 způsobí, že prvek zabere dva sloupce.
   • Používá se třeba pro tlačítka, která chceme mít vycentrovaná, nebo prvky, které potřebují větší šířku.
   • Příklad: tlacitko.grid(row=3, column=0, columnspan=2)
4. rowspan – Nastavuje, aby prvek zabíral více řádků.
   • Podobně jako columnspan, ale tentokrát prvek zabere více řádků.
   • Používá se, když chceme, aby prvek zasahoval přes více řádků, třeba velké textové pole nebo obrázek.
   • Příklad: velke_pole.grid(row=0, column=0, rowspan=3)
5. padx a pady – Nastavují vnější odsazení (padding) kolem prvku.
   • padx nastavuje horizontální (vodorovné) odsazení zleva i zprava od prvku.
   • pady nastavuje vertikální (svislé) odsazení nahoře i dole od prvku.
   • Používá se pro estetické rozložení, aby prvky nebyly příliš „nalepené“ na sebe nebo na okraj okna.
   • Příklad: tlacitko.grid(row=3, column=0, columnspan=2, pady=10) – přidá 10 pixelů odsazení nad a pod tlačítkem.
6. ipadx a ipady – Nastavují vnitřní odsazení (internal padding) uvnitř prvku.
   • ipadx nastavuje vodorovné odsazení uvnitř prvku (rozšíří prvek doleva i doprava).
   • ipady nastavuje svislé odsazení uvnitř prvku (rozšíří prvek nahoru a dolů).
   • Například: tlacitko.grid(ipadx=5, ipady=5) – tlačítko bude mít více místa uvnitř, takže text nebude těsně přiléhající ke kraji.
7. sticky – Nastavuje, kde má být prvek zarovnán v rámci buňky mřížky.
   • Pokud chceme, aby prvek vyplnil celou buňku v jednom směru, použijeme sticky.
   • Možnosti: n (sever, nahoře), s (jih, dole), e (východ, vpravo), w (západ, vlevo).
   • Pokud chceme, aby prvek byl zarovnán k pravému dolnímu rohu, použijeme sticky="se". Pokud chcetm, aby byl vycentrovaný a vyplnil celý prostor, můžeme použít sticky="nsew".
   • Příklad: popisek.grid(row=0, column=0, sticky="e") zarovná popisek doprava v buňce.

import tkinter as tk

# Vytvoření hlavního okna
okno = tk.Tk()
okno.title("Přihlašovací formulář")

# Popisek pro uživatelské jméno
popisek_jmeno = tk.Label(okno, text="Uživatelské jméno:")
popisek_jmeno.grid(row=0, column=0, sticky="e", padx=5, pady=5)  # Zarovnáme doprava a přidáme odsazení

# Vstupní pole pro uživatelské jméno
vstup_jmeno = tk.Entry(okno)
vstup_jmeno.grid(row=0, column=1, ipadx=5, ipady=3)  # Vnitřní odsazení, aby bylo pole pohodlnější pro zadávání textu

# Popisek pro heslo
popisek_heslo = tk.Label(okno, text="Heslo:")
popisek_heslo.grid(row=1, column=0, sticky="e", padx=5, pady=5)

# Vstupní pole pro heslo
vstup_heslo = tk.Entry(okno, show="*")
vstup_heslo.grid(row=1, column=1, ipadx=5, ipady=3)

# Popisek pro e-mail
popisek_email = tk.Label(okno, text="E-mail:")
popisek_email.grid(row=2, column=0, sticky="e", padx=5, pady=5)

# Vstupní pole pro e-mail
vstup_email = tk.Entry(okno)
vstup_email.grid(row=2, column=1, ipadx=5, ipady=3)

# Tlačítko pro odeslání formuláře
tlacitko_odeslat = tk.Button(okno, text="Odeslat", command=lambda: print("Údaje byly odeslány!"))
tlacitko_odeslat.grid(row=3, column=0, columnspan=2, pady=10)  # Tlačítko zabere oba sloupce a má vnější odsazení

# Spustíme hlavní smyčku
okno.mainloop()

Zdroje