Developing graphical user interface (GUI) applications is one of the important applications of Python. The standard library tkinter is used to realize the graphical user interface.
tkinter module is Python's de facto GUI library, which is included in Python's basic installation package.
The GUI program written with tkinter module is cross platform and can run in a variety of operating systems.
First tkinter GUI program
Component and container are two basic concepts of GUI programming.
● components refer to labels, buttons, list boxes and other objects, which need to be displayed in containers.
● container refers to the object that can place other components or containers.
#tkinter GUI program with labels and buttons import tkinter #Import tkinter module win=tkinter.Tk() #Create main window object label1=tkinter.Label(win,text="Hello,Python") #Create label object btn1=tkinter.Button(win,text='click') #Create button object label1.pack() #Package the object so that it appears in its parent container btn1.pack() win.mainloop() #Start event cycle
tkinter GUI programming steps
(1) import tkinter module. import tkinter or # from tkinter import*
(2) Create the main window object. If the main window object is not created, tkinter will use the default top-level window as the main window.
(3) Create component objects such as labels, buttons, and input text boxes.
(4) Package the component and display it in its parent container.
(5) Start the event cycle, start the GUI window, and wait for the response to the user's operation.
import tkinter from tkinter import*
Set properties for windows and components
The common methods for setting window properties are title(), geometry(), and config().
1. title() method and geometry() method
The title() method is used to set the title of the window, and the geometry() method is used to set the size of the window.
The parameter format in the geometry() method is "width x height".
#Set window title and size from tkinter import * #Import tkinter module win=Tk() #Create main window object label1=Label(win,text="Hello,Python") #Create label object btn1=Button(win,text='click') #Create button object label1.pack() #Package the object so that it appears in its parent container btn1.pack() win.title("Set window title and size") # The title() method sets the window title win.geometry("300x200") # The geometry() method sets the window size win.mainloop() #Start event cycle
2. config() method
The config() method is used to set the component text, alignment, foreground color, background color, font and other properties.
#Use the config() method to set component properties from tkinter import * #Import tkinter module win=Tk() #Create main window object label=Label() #Create label object label.config(text="Hello Python") #Set text properties label.config(fg="white",bg="blue") #Set foreground and background properties label.pack() #Package the object so that it appears in its parent container btn1=Button() #Create button object btn1["text"]="click" btn1.pack() win.title("Set component properties") # The title() method sets the window title win.geometry("300x200") # The geometry() method sets the window size win.mainloop() #Start event cycle
Layout management of tkinter GUI
● the layout of components in the container is very cumbersome. It is necessary to adjust the size of the components themselves and design the relative position with other components.
● the method of implementing component layout is called layout manager or geometry manager.
● tkinter uses three methods to realize layout: pack(), grid(), place(),.
● as the container component of the middle layer, Frame can manage components in groups to realize complex layout.
Layout using the pack() method
The pack() method lays out the components in blocks.
The pack() method displays components in the default location, which is the simplest and most direct use.
Parameters of pack() method:
side indicates the position of the component in the container;
· expand indicates that the component can be stretched;
· fill takes the value of X, y or BOTH to fill the space in the X or Y direction;
· anchor indicates the position of the component in the window.
#Use the side parameter of the pack() method to set the layout of the component from tkinter import * #Import tkinter module win=Tk() #Create main window object label1=Label(win,text="Top label",fg="white",bg="blue") #Create label object label2=Label(win,text="Left label",fg="white",bg="blue") label3=Label(win,text="Bottom label",fg="white",bg="blue") label4=Label(win,text="Right label",fg="white",bg="blue") label1.pack(side=TOP) #Package the object so that it appears in its parent container label2.pack(side=LEFT) label3.pack(side=BOTTOM) label4.pack(side=RIGHT) win.title("pack()method") # The title() method sets the window title win.geometry("200x150") # The geometry() method sets the window size win.mainloop() #Start event cycle
#Use the anchor parameter of the pack() method to set the layout of the component from tkinter import * #Import tkinter module win=Tk() #Create main window object label1=Label(win,text="Label title",fg="white",bg="blue") #Create label object label1.pack(anchor=NW,padx=5) label2=Label(win) label2.config(text="Label content",fg="white",bg="grey") label2.pack(expand=YES,fill=BOTH,padx=5) btn=Button() btn["text"]="click" btn.pack() #packed object win.title("anchor Parameter setting") # The title() method sets the window title win.geometry("300x200") # The geometry() method sets the window size win.mainloop() #Start event cycle
Layout using grid() method
The layout using grid() method is called grid layout. It divides the container into several rows and columns in the form of two-dimensional table, and the position of components is determined by the position of rows and columns.
In the same container, only one of the pack() method or grid() method can be used.
Parameters of grid() method:
· row and column, the position of the row and column where the component is located
· rowspan and columnspan, the number of rows and columns spanned by the component from its location
· sticky, alignment of component location
#Use the grid() method to set the layout of components from tkinter import * #Import tkinter module win=Tk() #Create main window object label1=Label(win,text="Please select the following actions",fg="green") #Create label object label1.grid(row=0,column=0,columnspan=4) btn1=Button(text="copy") btn2=Button(text="cut") btn3=Button(text="paste") btn4=Button(text="delete") btn1.grid(row=2,column=0,padx=2) btn2.grid(row=2,column=1,padx=2) btn3.grid(row=2,column=2,padx=2) btn4.grid(row=2,column=3,padx=2) win.title("grid()Method settings") # The title() method sets the window title win.geometry("200x150") # The geometry() method sets the window size win.mainloop() #Start event cycle
Layout using the place() method
The location of the components in the container () is more precisely controlled than the layout of the pack() and the grid().
If the container is resized, the layout may not adapt.
Parameters of the place() method
· x and y, specify the position of the component with absolute coordinates
· height and width, specify the height and width of the component
· relx and rely, which specify the position of components in proportion to the height and width of the container
· relheight and relwidth, which specify the height and width of the component in proportion to the height and width of the container
#Use the place() method to set the layout of components from tkinter import * #Import tkinter module win=Tk() #Create main window object label1=Label(win,text="place()Method test",fg="green") #Create label object label1.place(x=140,y=50,anchor=N) btn1=Button(text="place()Button") btn1.place(x=140,y=80,anchor=N) btn2=Button(text="grid()Button") btn2.grid(row=2,column=1) win.title("place()Method settings") # The title() method sets the window title win.geometry("200x150") # The geometry() method sets the window size win.mainloop() #Start event cycle
Complex layout using frames
A frame is a container component that is often used to group components
This allows for complex layouts.
· bd# specify border width
· relief specifies the border style with values of flat (default), raised, sunken, ridge, groove and solid
· width and height set the width or height. If omitted, the container usually adjusts the Frame size according to the size of the content component
#Complex layout using Frame from tkinter import * #Import tkinter module win=Tk() #Create main window object frma=Frame() #Frame frma frmb=Frame() #Frame frmb frma.pack() frmb.pack() #Add two labels and two input boxes lblUname=Label(frma,text="UserName",width=10,fg="black") etyUname=Entry(frma,width=20) lblUname.grid(row=1,column=1) etyUname.grid(row=1,column=2) lblPwd=Label(frma,text="PassWord",width=10,fg="black") etyPwd=Entry(frma,width=20) lblPwd.grid(row=2,column=1) etyPwd.grid(row=2,column=2) #Add two buttons to the container btnRest=Button(frmb,text="ReSet",width=10) btnSubmit=Button(frmb,text="Submit",width=10) btnRest.grid(row=1,column=1) btnSubmit.grid(row=1,column=2) win.title("Frame Realize complex layout") # The title() method sets the window title win.geometry("300x150") # The geometry() method sets the window size win.mainloop() #Start event cycle
#Test label properties from tkinter import * #Import tkinter module str="Attribute test of tag" mylabel=Label(text=str) mylabel.config(justify=CENTER) #Set text center alignment mylabel.config(width=20,height=4) #Sets the width and height of the label in characters mylabel.config(bd=2,relief=SOLID) #Sets the width of the border mylabel.config(wraplength=160) #Set the text rewind width to 160 pixels mylabel.config(anchor=W) #The setting content is on the left inside the label mylabel.config(font=('Song style',18)) #Set font mylabel.pack(side=TOP) #Set the label at the top of the window mainloop() #Start event cycle
#The Button component calculates the cumulative value of 1 ~ 100 from tkinter import * #Import tkinter module win=Tk() win.title("Button Test") win.geometry("300x200") labell=Label(win,text="The calculation results are displayed here") labell.config(font=("Song style",12)) labell.pack() def computing(): sum=0 for i in range(100+1): sum+=i result="The cumulative result is:"+str(sum) labell.config(text=result) str1='Calculate 1-100 cumulative value' mybutton=Button(win,text=str1) mybutton.config(justify=CENTER) #Center button text mybutton.config(width=20,height=3) #Sets the width and height of the button mybutton.config(bd=3,relief=RAISED) #Set the width and style of the border mybutton.config(anchor=CENTER) #The setting content is centered inside the button mybutton.config(font=("official script",12,"underline")) mybutton.config(command=computing) #The command property specifies the response function mybutton.config(activebackground="yellow") #Click background color mybutton.config(activeforeground="red") #Click foreground color mybutton.pack() win.mainloop() #Start event cycle
# The Entry component inputs data and calculates the cumulative sum from tkinter import * #Import tkinter module def computing(): sum=0 n=int(number.get()) for i in range(n+1): sum+=i result="The cumulative result is:"+str(sum) label3.config(text=result) win=Tk() win.title("Entry Test") win.geometry("300x200") label1=Label(win,text="Please enter calculation data:") label1.config(width=16,height=3) label1.config(font=("Song style",12)) label1.grid(row=0,column=0) number=StringVar() entry1=Entry(win,textvariable=number,width=16) entry1.grid(row=0,column=1) label2=Label(win,text="Click OK:") label2.config(width=14,height=3) label2.config(font=("Song style",12)) label2.grid(row=1,column=0) mybutton=Button(win,text='calculation') mybutton.config(justify=CENTER) #Center button text mybutton.config(width=14,height=2) #Sets the width and height of the button mybutton.config(bd=3,relief=RAISED) #Set the width and style of the border mybutton.config(anchor=CENTER) #The setting content is centered inside the button mybutton.config(font=("official script",12)) mybutton.config(command=computing) #The command property specifies the response function mybutton.grid(row=1,column=1) label3=Label(win,text="Display results") label3.config(width=16,height=3) label3.config(font=("Song style",12)) label3.place(x=50,y=130) win.mainloop() #Start event cycle
myvar=BooleanVar() myvar=StringVar() myvar=IntVar() myvar=DoubleVar()
# Listbox operation listbox component from tkinter import * #Import tkinter module win=Tk() listbox=Listbox(win) #Initialize list box items=["HTML5","CSS3","JavaScript","Jquery"] for item in items: listbox.insert(END,item) listbox.pack(side=LEFT,expand=1,fill=Y) def additem(): #Add options to the list str=entry1.get() #Get string if not str=="": index=listbox.curselection() if len(index)>0: listbox.insert(index[0],str) #There is a selected item. Add an item before the selected item else: listbox.insert(END,str) #No selected items added to last def removeitem(): #Remove option from list index=listbox.curselection() if len(index)>0: listbox.delete(index[0],index[-1]) #Delete selected items else: listbox.delete(index[0]) #Delete the selected item entry1=Entry(width=20) entry1.pack(anchor=NW) bt1=Button(text="add to",command=additem) bt1.pack(anchor=NW) bt2=Button(text="delete",command=removeitem) bt2.pack(anchor=NW) win.mainloop() #Start event cycle
# Radiobutton component radio button group operation example from tkinter import * #Import tkinter module win=Tk() label1=Label(win,text="Please vote for your favorite sport") label1.grid(row=1,column=1,columnspan=2) s_items=IntVar() s_items.set(2) frame1=Frame(bd=2,relief=RIDGE) #Frame 1 frame1.grid(row=2,column=1) frame2=Frame(bd=0,relief=RIDGE) #Frame 2 frame2.grid(row=2,column=2) radio1=Radiobutton(frame1,text="Football",variable=s_items,value=1,width=8) radio1.grid(row=1,column=1) radio2=Radiobutton(frame1,text="Volleyball",variable=s_items,value=2,width=8) radio2.grid(row=2,column=1) radio3=Radiobutton(frame1,text="Basketball",variable=s_items,value=3,width=8) radio3.grid(row=3,column=1) num1=IntVar() entry1=Entry(frame2,textvariable=num1,width=10,state='readonly') entry1.grid(row=1,column=1,pady=4) num2=IntVar() entry2=Entry(frame2,textvariable=num2,width=10,state='readonly') entry2.grid(row=2,column=1,pady=4) num3=IntVar() entry3=Entry(frame2,textvariable=num3,width=10,state='readonly') entry3.grid(row=3,column=1,pady=4) def voting(): global num1,num2,num3 temp=s_items.get() if temp==2: num2.set(num2.get()+1) elif temp==1: num1.set(num1.get()+1) else: num3.set(num3.get()+1) bt1=Button(win,text="Please vote",command=voting) bt1.grid(row=3,column=1,columnspan=2,pady=5) win.geometry("300x200") win.mainloop() #Start event cycle