Skapa GUI med tkinter

Mål

Efter lektionen ska du kunna...

• förklara vad ett GUI är
• skapa ett fönster med tkinter
• använda Label, Entry och Button
• koppla en knapp till en funktion
• förklara vad mainloop() gör

GUI

Ett grafiskt användargränssnitt

GUI betyder Graphical User Interface.

Användaren arbetar med visuella delar i stället för att bara skriva i terminalen.

• fönster och texter
• textfält och knappar
• listor och kryssrutor

Widget

En grafisk del i gränssnittet

tk.Label(...)   # visar text
tk.Entry(...)   # tar emot text
tk.Button(...)  # kan klickas

Varje widget skapas som ett Pythonobjekt.

Hela programmet

Vårt första GUI

import tkinter as tk

def visa_meddelande():
    namn = namn_entry.get()
    resultat_label.config(text=f"Hej, {namn}!")

rot = tk.Tk()
rot.title("Mitt första GUI")

tk.Label(rot, text="Vad heter du?").pack()
namn_entry = tk.Entry(rot)
namn_entry.pack()

tk.Button(rot, text="Säg hej",
          command=visa_meddelande).pack()

resultat_label = tk.Label(rot, text="")
resultat_label.pack()

rot.mainloop()

Import

Gör tkinter tillgängligt

import tkinter as tk

import tkinter laddar biblioteket.

as tk ger biblioteket det kortare namnet tk.

Därför skriver vi exempelvis tk.Button.

Fönster

Skapa programmets huvudfönster

rot = tk.Tk()
rot.title("Mitt första GUI")

tk.Tk() skapar huvudfönstret.

rot refererar till fönsterobjektet.

title() bestämmer texten i titelraden.

Label och Entry

Visa och ta emot text

tk.Label(rot, text="Vad heter du?").pack()

namn_entry = tk.Entry(rot)
namn_entry.pack()

Label visar en text.

Entry skapar ett textfält.

namn = namn_entry.get()

get() hämtar det som användaren har skrivit.

Layout

pack() placerar widgeten

namn_entry.pack()

Att skapa en widget räcker inte. Den måste också placeras i fönstret.

pack() ordnar widgets bredvid eller under varandra.

tkinter har även grid() och place().

Button

Koppla knappen till en funktion

tk.Button(
    rot,
    text="Säg hej",
    command=visa_meddelande
).pack()

text är texten på knappen.

command anger vilken funktion som körs vid ett klick.

Viktigt

Anropa inte funktionen direkt

command=visa_meddelande     # rätt
command=visa_meddelande()   # fel här

Utan parenteser lämnar vi funktionen till tkinter.

tkinter anropar den när användaren klickar.

Med parenteser körs funktionen direkt när knappen skapas.

Efter klicket

Funktionen läser och visar

def visa_meddelande():
    namn = namn_entry.get()
    resultat_label.config(
        text=f"Hej, {namn}!"
    )

1. get() läser textfältet.
2. En hälsning skapas med en f-sträng.
3. config() ändrar resultatetiketten.

Resultat

config() ändrar samma widget

resultat_label = tk.Label(rot, text="")
resultat_label.pack()

Etiketten börjar med en tom text.

resultat_label.config(text="Hej, Anna!")

Efter klicket visas den nya texten i etiketten.

mainloop

Programmet väntar på händelser

rot.mainloop()

mainloop() visar fönstret och startar händelseloopen.

Loopen väntar på exempelvis klick, tangenttryckningar och stängning.

Utan den avslutas programmet och fönstret kan inte användas.

Händelsestyrning

Flödet steg för steg

1. Programmet skapar fönstret och alla widgets.
2. mainloop() börjar vänta.
3. Användaren skriver ett namn.
4. Användaren klickar på knappen.
5. visa_meddelande() körs.
6. Resultatet visas i fönstret.

Prova själv

Interaktiv simulering: tkinter-fönster

Öva själv

Gör ett eget GUI-program

1. Skapa ett fönster med ett textfält.
2. Lägg till en knapp som kör en funktion.
3. Visa resultatet i en Label.
4. Lägg till exempelvis en kryssruta eller lista.
5. Koppla GUI:t till en tidigare funktion.

Sammanfattning

Kom ihåg

• tk.Tk() skapar huvudfönstret.
• Widgets är gränssnittets grafiska delar.
• pack() placerar widgets.
• command kopplar en knapp till en funktion.
• get() läser och config() ändrar.
• mainloop() väntar på händelser.