Python 3 - Lernen und professionell anwenden

Kapitel 16

Layout

470

1. Ist der Abstand zu Nachbarwidgets zu gering, verwenden Sie die Optionen padx und

pady zum Ausstopfen mit leerem Raum in waagrechter und senkrechter Richtung.

2. Eine Gruppe von Schaltflächen sieht besser aus, wenn sie eine einheitliche Größe haben.

Das erreicht man mit der Option

fill.

3. Radiobuttons oder Checkbuttons sollten linksbündig gesetzt sein. Zur Verankerung an

der linken Seite konfigurieren Sie die Option

anchor=W.

Abb. 16.4: Optionen zur Verbesserung des Layouts

16.3 Raster-Layout

Manche grafischen Benutzungsoberflächen enthalten gleichartige Komponenten, die in

einem Raster angeordnet sind. Beispiele sind:

쐽 das Tastenfeld eines virtuellen Taschenrechners

쐽 die Karten eines Memory-Spiels

쐽 die »Seekarte« des Spiels »Schiffeversenken«

Für diese Fälle bietet

tkinter die Layout-Methode grid(). Alle Widget-Klassen besitzen

diese Methode. Die wichtigsten Optionen sind

column und row, mit denen festgelegt wird,

in welche Zelle (Spalten- und Zeilennummer) des imaginären Rasters das Widget einge-

fügt wird. Die Zeilen und Spalten sind bei null beginnend durchnummeriert. Die Größe

der Zellen wird dynamisch an die Größe der Widgets angepasst. Dabei bestimmt das Wid-

get mit der größten Ausdehnung in

y-Richtung die Höhe der gesamten Reihe und das Wid-

get mit der größten Ausdehnung in

x-Richtung die Breite der gesamten Spalte. Fehlt die

sticky-Option (siehe Tabelle 16.2), so wird das Widget immer in das Zentrum der angege-

benen Zelle gesetzt.

1. Ausstopfen (padx, pady)

2. Füllen (fill)

3. Verankern

(anchor)

471

16.3

Raster-Layout

Das folgende Skript realisiert einen Taschenrechner für Integer-Arithmetik. Das Prozent-

Zeichen ist als Modulo-Operator zu verstehen. Abbildung 16.5 zeigt die Benutzungsoberflä-

che. Das Display zeigt die gesamte Rechnung einschließlich der Operatoren. Das Ergebnis

erscheint wie gewohnt nach Betätigung der Gleich-Taste. Wenn danach erneut eine Zahl

eingetippt wird, wird der bisherige Inhalt des Displays gelöscht und die neue Rechnung

begonnen.

Abb. 16.5: Taschenrechner für Integer-Arithmetik

Option Erklärung

column

Die Nummer der Spalte, in der das Widget eingetragen werden soll. Default

ist null.

columnspan

Normalerweise befindet sich das Widget in genau einer Zelle. Wenn aber ein

Widget sich über

n benachbarte Zellen in einer Zeile erstrecken soll, wird die

Option

columnspan=n gesetzt.

padx

Die Zelle wird rechts und links vom Widget in der angegebenen Länge mit

leerem Raum gefüllt. Die Option

padx=10 bewirkt z.B., dass die Zelle rechts

und links um zehn Pixel verbreitert wird.

pady

Die Zelle wird oberhalb und unterhalb des Widgets mit leerem Raum gefüllt.

row

Die Nummer der Zeile, in der das Widget eingetragen werden soll. Default ist

null.

rowspan

Das Widget erstreckt sich über n Zellen in der gleichen Spalte.

sticky

NE

, SE, SW, NW: Widget wird in eine Ecke der Zelle platziert, entsprechend der

angegebenen »Himmelsrichtung« (z.B.

NE = Nordost = rechts oben).

N, E, S, W: Widget wird entsprechend der angegebenen »Himmelsrichtung«

an eine Zellenseite platziert (z.B.

E = Osten = rechte Seite).

N+S: Das Widget wird in Nord-Süd-Richtung gestreckt, so dass es in dieser

Dimension die gesamte Zelle ausfüllt.

E+W: Widget wird in Ost-West-Richtung gestreckt.

N+E+S+W: Das Widget wird in alle Richtungen gestreckt, so dass es die

gesamte Zelle ausfüllt.

Tabelle 16.2: Optionen des Grid-Layoutmanagers

Kapitel 16

Layout

472

Skript:

from tkinter import *

class Taschenrechner(Tk): #1

def __init__(self):

Tk . _ _in i t__( s elf ) #2

self.title('Taschenrechner')

se l f .en d e = 0 #3

self.display = Display(self)

self.display.grid(column=0,row=0,sticky=E+W,

co l umn s pan = 6 , pa d y =5) #4

tasten=[(0,1,'7'),(1,1,'8'),(2,1,'9'),(3,1,'/'),

(0,2,'4'),(1,2,'5'),(2,2,'6'),(3,2,'*'),

(0,3,'1'),(1,3,'2'),(2,3,'3'),(3,3,'-'),

(0,4,'0'),(1,4,'%'),(3,4,'+')]

for (i,j,zeichen) in tasten:

Taste(self,zeichen).grid(column=i,row=j) #5

Clear(self).grid(column=5,row=1)

Gleich(self).grid(column=5,row=2)

self.mainloop()

class Taste(Button):

def __init__(self, fenster,aufschrift):

Button.__init__(self,fenster,text=aufschrift,

command=self.druecken,width=3)

self.aufschrift = aufschrift

self.fenster = fenster

def druecken(self):

d = self.fenster.display

if s e lf. f enst e r.e n d e: #6

d.delete(0,len(d.get()))

self.fenster.ende=0

d.anhaengen(self.aufschrift)

class Clear(Button):

def __init__(self, fenster):

Button.__init__(self,fenster,text='C',

command=self.loeschen,width=3)

self.display=fenster.display

473

16.3

Raster-Layout

Erläuterung:

Obwohl die Applikation (einschließlich des Fensters) 20 grafische Komponenten umfasst,

ist der Programmtext relativ kurz. Das liegt daran, dass mit dem

grid-Layout die Widgets in

einer

for-Schleife (#5) unter Verwendung von Variablen in die Zellen des Rasters gebracht

werden können.

In diesem Skript wurde konsequent die Vererbungstechnik verwendet. Alle Klassen sind von

tkinter-Klassen abgeleitet. In Abbildung 16.6 ist das UML-Diagramm dargestellt.

#1: Die Klasse wird von der tkinter-Klasse Tk abgeleitet.

#2: Zur Initialisierung des Fensters wird die Initialisierungsmethode der Klasse Tk aufgeru-

fen. Objekte der Klasse

Taschenrechner erben nun alle Attribute und Methoden der Klasse

Tk. In den anderen abgeleiteten Klassen dieses Skripts wird genauso verfahren. Achten Sie

darauf, dass als erstes Argument immer

self übergeben werden muss.

#3: Das Attribut self.ende hat genau dann den Wert 0, wenn die aktuelle Rechnung noch

nicht abgeschlossen ist. Die Rechnung ist beendet, wenn auf die Gleich-Taste gedrückt wor-

den ist. Dann wird

self.ende auf 1 gesetzt. Bei der nächsten Betätigung einer Taste wird

dann das Display gelöscht.

def loeschen(self):

self.display.loeschen()

class Gleich(Button):

def __init__(self, fenster):

Button.__init__(self,fenster,text='=',

command=self.rechnen,width=3)

self.fenster = fenster

def rechnen(self):

ergebnis = eval(self.fenster.display.get()) #7

ende = len(self.fenster.display.get())

self.fenster.display.insert(ende, '='+str(ergebnis))

self.fenster.ende = 1

class Display(Entry):

def __init__(self,fenster):

Entry.__init__(self, fenster,width=20)

def anhaengen (self,zeichen):

self.insert(len(self.get()),zeichen)

def loeschen(self):

self.delete(len(self.get())-1) #8

t = Taschenrechner()