Tkinter tutorial - Layoutbeheer

  1. Tkinter- pack indelingsmethode
  2. Tkinter- grid indelingsmethode
  3. Tkinter- place methode

In de vorige secties hebben we verschillende Tkinter-widgettypen geïntroduceerd, zoals label , knop , vervolgkeuzemenu, enz. Ondertussen hebben we ook kort vermeld hoe u deze widgets in het programmavenster kunt indelen. Dit is het belangrijkste punt dat u in dit gedeelte leert - de methoden voor geometriebeheer van Tkinter.

Tkinter heeft drie methoden voor geometriebeheer, dat wil pack zeggen grid , en place . Laten we ze een voor een doornemen.

Tkinter- pack indelingsmethode

pack methode, zoals letterlijk aangegeven, verpakt de widget in het raamkozijn nadat deze is gemaakt. We komen deze layout methode tegen in de sectie Tkinter-label waar alle pack opties ook worden vermeld.

We laten u zien hoe u widgets met de pack methode kunt indelen (ook de opties). Enkele voorbeelden helpen de juiste configuratie te demonstreren.

Tkinter- pack indeling - relatieve positie

import tkinter as tk    
    
app = tk.Tk()
app.geometry('300x200')

buttonW = tk.Button(app, text="West", width=15)
buttonW.pack(side='left')

buttonE = tk.Button(app, text="East", width=15)
buttonE.pack(side='right')

app.mainloop()

Start het programma, je krijgt een venster zoals dit,

Tkinter pack layout methode-side relatieve positie

Zoals u ziet, buttonWest klikt u aan de linkerkant van het venster en buttonEast klikt u aan de rechterkant van het venster. Je kan proberen de grootte van het onderstaande venster te schalen, maar u zult merken dat ze nog steeds aan de zijkanten van het venster blijven hangen en de relatieve positie niet verandert.

buttonW.pack(side='left')

side heeft vier opties -

  1. top
  2. bottom
  3. left
  4. right

Het plaatst de widget in side het venster. Zoals geïllustreerd in het voorbeeld, buttonW wordt aan de linkerkant van het venster toegewezen, omdat side='left' , terwijl buttonE aan de rechterkant van het venster is, omdat side=right.

Nu hebben we een interessant scenario, wat gebeurt er als twee widgets dezelfde side eigenschap hebben, hoe de lay-out zal zijn?

Probeer het zelf te beantwoorden of controleer het door de volgende codes uit te voeren.

import tkinter as tk
    
    
app = tk.Tk()
app.geometry('300x200')

buttonW = tk.Button(app, text="West", width=15)
buttonW.pack(side='left')

buttonE1 = tk.Button(app, text="East 1", width=15)
buttonE1.pack(side='right')

buttonE2 = tk.Button(app, text="East 2", width=15)
buttonE2.pack(side='right')

app.mainloop()

Tkinter pack om widget interne en externe opvulling toe te voegen

In sommige gevallen moet u wat opvulling binnen of buiten de widget toevoegen, zodat er minder congestie is tussen de widgets, en ook tussen de widgettekst en de widgetgrenzen. Nu moet je opties ipadx , ipady , ipadx en ipadx.

import tkinter as tk
    
app = tk.Tk()
app.geometry('300x200')

buttonW = tk.Button(app, text="West")
buttonW.pack(side='left', ipadx=20, padx=30)

buttonE = tk.Button(app, text="East")
buttonE.pack(side='right', ipadx=20, padx=30)

app.mainloop()

layout methode Tkinter-pakket - verhoog de padding van de widget

Beide knoppen voegen binnen 20 eenheden opvulling en buiten 30 eenheden in de x , en de eenheid is pixel maar niet de breedte van één teken.

Tkinter pack Layout Invullen in x, y richting

De volgende code-implementatie kan de widgetdimensie automatisch vullen met dezelfde breedte of dezelfde hoogte als het venster en wanneer u op het venster zoomt, kan de grootte van het besturingselement automatisch veranderen met de grootte van het venster.

import tkinter as tk
    
app = tk.Tk()
app.geometry('300x200')

buttonX = tk.Button(app, text="Fill X", bg="red", height=5)
buttonX.pack(fill='x')

buttonY = tk.Button(app, text="Fill Y", bg="green", width=10)
buttonY.pack(side='left', fill='y')

app.mainloop()

Tkinter pack layout methode X-, Y-richting invullen

butonX.pack(fill='x') betekent buttonX zal de breedte van het hele venster vullen. Op dezelfde manier fill='y' wordt de hoogte van het hele venster fill='both' gevuld en worden ondertussen zowel de breedte als de hoogte gevuld.

Tkinter pack Layout-optie expand - automatisch uitbreiden

De bovenstaande fill= optie vult de widget automatisch in x en/of y richting wanneer de venstergrootte wordt gewijzigd. Een andere vergelijkbare eis is hoe automatisch alle inhoud wordt weergegeven als de widget meerdere opties bevat, zoals een lijst?

import tkinter as tk
import calendar    
    
app = tk.Tk()

buttonX = tk.Button(app, text="Label ", bg="blue", height=5)
buttonX.pack(fill='x')

listboxA = tk.Listbox(app, width=10)
listboxA.pack(fill='both', expand=1)

for i in range(1,13):
    listboxA.insert(tk.END, calendar.month_name[i])
    
app.mainloop()

Tkinter pack layout-methode inschakelen optie uit te breiden

Wanneer toont de expand=True or 1 keuzelijst alle items, van January tot December zoals getoond in het bovenstaande voorbeeld.

Als expand is ingesteld op False , toont de keuzelijst standaard alleen de eerste 10 items. U moet de muis of de richtingstoetsen gebruiken om de verborgen items weer te geven nadat de keuzelijst is geselecteerd.

listboxA.pack(fill='both', expand=0)

expand=0 schakelt de keuzelijst uit om alle items automatisch weer te geven.

Tkinter pack layout methode wanneer optie uitbreiden is uitgeschakeld

Tkinter- grid indelingsmethode

Tkinter grid is een andere en ook de belangrijkste methode voor lay-out geometrie. Dit is degene die je moet leren als je maar één enkele methode wilt leren onder alle geometriebeheerders.

grid wordt vaak gebruikt in dialoogvensters en je kan de widgets plaatsen op basis van de positiecoördinaten van het raster. grid layout methode kan stabiele relatieve posities van alle widgets hebben.

Het volgende voorbeeld zal een relatief gecompliceerde GUI creëren in vergelijking met de bovenstaande voorbeelden, die zoveel mogelijk opties gebruikt grid die in de volgende paragrafen worden uitgelegd.

import tkinter as tk

app = tk.Tk() 

labelWidth = tk.Label(app,
                    text = "Width Ratio")
labelWidth.grid(column=0, row=0, ipadx=5, pady=5, sticky=tk.W+tk.N)

labelHeight = tk.Label(app,
                    text = "Height Ratio")
labelHeight.grid(column=0, row=1, ipadx=5, pady=5, sticky=tk.W+tk.S)

entryWidth = tk.Entry(app, width=20)
entryHeight = tk.Entry(app, width=20)

entryWidth.grid(column=1, row=0, padx=10, pady=5, sticky=tk.N)
entryHeight.grid(column=1, row=1, padx=10, pady=5, sticky=tk.S)

resultButton = tk.Button(app, text = 'Get Result')
resultButton.grid(column=0, row=2, pady=10, sticky=tk.W)

logo = tk.PhotoImage(file='python.gif')
labelLogo = tk.Label(app, image=logo)

labelLogo.grid(row=0, column=2, columnspan=2, rowspan=2,
               sticky=tk.W+tk.E+tk.N+tk.S, padx=5, pady=5)

app.mainloop()

Tkinter raster lay-out methode

Tkinter grid column en row opties

labelWidth.grid(column=0, row=0, ipadx=5, pady=5, sticky=tk.W+tk.N)

Elke widget wordt in de absolute cel in de grid layout methode geplaatst. De celcoördinaat wordt bepaald door column en row.

labelWidth widget wordt in de positiecel geplaatst (0, 0) . De coördinaat begint in de linkerbovenhoek van het venster.

ipadx , ipady , padx En pady opties zijn dezelfde als die in pack methode.

Tkinter grid sticky optie

sticky bepaalt hoe de widget aan de cel blijft plakken wanneer de widget kleiner is dan de cel.

sticky Betekenis
W blijf links
E blijf bij rechts
N blijf bij de top
S blijf bij de bodem

De standaardoptie sticky is midden, dat wil zeggen W+E+N+S.

Tkinter columnspan en rowspan opties

labelLogo.grid(row=0, column=2, columnspan=2, rowspan=2,
               sticky=tk.W+tk.E+tk.N+tk.S, padx=5, pady=5)

De celcoördinaat van labelLogo is (column=2, row=0) en de grootte van het logo is relatief groot, daarom wordt deze toegewezen aan de celgrootte van 2x2 . columnspan=2 en rowspan=2 betekent dat de widget reeksen van twee cellen heeft, zowel in X als Y richtingen vanaf de positie van de widget.

Tkinter- place methode

De Tkinter- place methode plaatst de widget op een absolute of relatieve positie in het venster. We gebruiken nog steeds dezelfde aanpak als hierboven om de opties van deze layout methode te introduceren.

import tkinter as tk

app = tk.Tk()
app.geometry('300x300') 

labelA = tk.Label(app, text = "Label (0, 0)", fg="blue", bg="#FF0")
labelB = tk.Label(app, text = "Label (20, 20)", fg="green", bg="#300")
labelC = tk.Label(app, text = "Label (40, 50)", fg="black", bg="#f03")
labelD = tk.Label(app, text = "Label (0.5, 0.5)", fg="orange", bg="#0ff")

labelA.place(x=0, y=0)
labelB.place(x=20, y=20)
labelC.place(x=40, y=50)
labelD.place(relx=0.5, rely=0.5)

app.mainloop()

Tkinter Place Layout-methode

Tkinter place Absolute positie

labelA.place(x=0, y=0)
labelB.place(x=20, y=20)

x= en y= opties in place bepaalt de absolute posities van de widget, die de eenheid als pixel hebben. Bijvoorbeeld lableB.place(x=20, y=20) middelen labelB wordt in de coördinaat van (20, 20).

Tkinter place relatieve positie

Het nadeel van de absolute positie is dat als er andere widgets in het venster zijn geplaatst met relatieve posities, wanneer het venster wordt ingezoomd, de widget met de lay-out van de absolute positie mogelijk de overlapping zal hebben met andere widgets.

place layout methode heeft ook de optie relatieve positie, dat wil zeggen

labelD.place(relx=0.5, rely=0.5)

Waar relx en rely binnen het bereik van 0.0~1.0 . Het is het relatieve percentage van de widgetpositie ten opzichte van de venstergrootte.

Dit relx=0.5, rely=0.5 betekent bijvoorbeeld dat de widget in de 50% van de vensterbreedte en 50% van de vensterhoogte wordt geplaatst.

relx=1.0 is de rechtergrens van het venster en rely=1.0 is de ondergrens van het venster.