Giới thiệu GUI với Tkinter trong Python

Widgets

Widgets tương tự về tinh thần với các element trong HTML. Bạn sẽ tìm thấy nhiều loại widget cho các kiểu phần tử khác nhau trong Tkinter. Chúng là các thành phần GUI chuẩn và cung cấp cho người dùng các điều khiển như nút bấm, văn bản, menu và hộp văn bản.

Hãy hiểu tất cả các widget này trong Tkinter kèm ví dụ (Nguồn).

• Button: Widget Button có thuộc tính bật/tắt. Khi người dùng nhấp vào nút, một sự kiện được kích hoạt trong Tkinter.

  Cú pháp: button_widget = tk.Button(widget, option=placeholder) trong đó widget là đối số cho cửa sổ/khung cha, còn option là vị trí giữ chỗ có thể nhận các giá trị như màu chữ & nền, phông chữ, command (gọi hàm), ảnh, chiều cao và chiều rộng của nút.

• Canvas: Canvas dùng để vẽ các hình dạng trong GUI và hỗ trợ nhiều phương thức vẽ.

  Cú pháp: canvas_widget = tk.Canvas(widget, option=placeholder) trong đó widget là tham số cho cửa sổ/khung cha, còn option có thể là độ rộng viền, màu nền, chiều cao và chiều rộng của widget.

• Checkbutton: Checkbutton ghi nhận trạng thái bật/tắt hoặc đúng/sai. Nó cho phép bạn chọn nhiều tùy chọn cùng lúc và thậm chí để trống.

  Cú pháp: checkbutton_widget = tk.CheckButton(widget, option=placeholder) trong đó widget là tham số cho cửa sổ/khung cha, còn option có thể là tiêu đề, văn bản, màu nền & màu chữ khi widget dưới con trỏ, phông chữ, ảnh, v.v.

• Entry: Widget Entry dùng để tạo các trường nhập hoặc nhận văn bản nhập từ người dùng trong GUI.

  Cú pháp: entry_widget = tk.Entry(widget, option=placeholder) trong đó widget là tham số cho cửa sổ/khung cha, còn option có thể là độ rộng viền, màu nền, chiều rộng & chiều cao của nút, v.v.

• Frame: Frame được dùng như các vùng chứa trong Tkinter để nhóm và tổ chức widget cho gọn gàng.

  Cú pháp: frame_widget = tk.Frame(widget, option=placeholder) trong đó widget là tham số cho cửa sổ/khung cha, còn option có thể là độ rộng viền, chiều cao & chiều rộng widget, highlightcolor (màu khi widget được focus).

• Label: Label dùng để tạo các widget một dòng như văn bản, hình ảnh, v.v.

  Cú pháp: label_widget = tk.Label(widget, option=placeholder) trong đó widget là tham số cho cửa sổ/khung cha, còn option có thể là phông chữ của nút, màu nền, ảnh, chiều rộng và chiều cao của nút.

Bạn có thể tìm danh sách đầy đủ các widget tại tài liệu chính thức của Python.

Quản lý hình học (Geometry Management)

Tất cả widget trong Tkinter đều có một số phép đo hình học. Các phép đo này cho phép bạn tổ chức widget trong khung cha hoặc vùng widget cha.

Một trong các lớp quản lý hình học, tức pack(), đã được đề cập tại đây.

Cho mục đích này, Tkinter cung cấp ba lớp quản lý hình học chính:

• pack(): Sắp xếp widget theo khối, chiếm toàn bộ chiều rộng sẵn có. Đây là cách thông dụng để hiển thị widget trong cửa sổ.
  
  
• grid(): Sắp xếp widget theo cấu trúc dạng bảng. Bạn sẽ học chi tiết hơn về nó ở phần sau của bài hướng dẫn.
  
  
• place(): Dùng để đặt widget vào vị trí cụ thể theo chỉ định của người dùng trong widget cha.

Tổ chức bố cục và widget

Trong phần này, bạn sẽ dùng cả geometry và widgets, và cùng xem “phép màu” của Tkinter.

Để sắp xếp bố cục trong window, bạn sẽ dùng lớp widget Frame. Hãy tạo một chương trình đơn giản để xem Frame hoạt động thế nào.

• Bạn sẽ định nghĩa hai frame - trên và dưới với sự trợ giúp của lớp pack. Lớp Frame sẽ giúp tạo một phần chia trong cửa sổ. Về cơ bản, một cửa sổ sẽ được “nhân đôi” thành phần trên và dưới dưới dạng Frame.

• Cuối cùng, bạn sẽ tạo bốn nút trong cửa sổ, mỗi frame hai nút. Bạn có thể đặt tên và màu cho các nút tùy thích qua tham số.

import tkinter

# Let's create the Tkinter window.
window = tkinter.Tk()
window.title("GUI")

# You will first create a division with the help of Frame class and align them on TOP and BOTTOM with pack() method.
top_frame = tkinter.Frame(window).pack()
bottom_frame = tkinter.Frame(window).pack(side = "bottom")

# Once the frames are created then you are all set to add widgets in both the frames.
btn1 = tkinter.Button(top_frame, text = "Button1", fg = "red").pack() #'fg or foreground' is for coloring the contents (buttons)

btn2 = tkinter.Button(top_frame, text = "Button2", fg = "green").pack()

btn3 = tkinter.Button(bottom_frame, text = "Button3", fg = "purple").pack(side = "left") #'side' is used to left or right align the widgets

btn4 = tkinter.Button(bottom_frame, text = "Button4", fg = "orange").pack(side = "left")

window.mainloop()

Hãy chạy đoạn mã trên và xem kết quả.

Grid

Tương tự Frame, grid là một cách khác để tổ chức widget. Nó dùng khái niệm ma trận hàng-cột. Hãy liên hệ giữa lớp grid và ý tưởng hàng-cột với sơ đồ bên dưới.

Grid chủ yếu nhận hai tham số row và column. Như trong hình, giả sử 00 tương ứng với nút đầu tiên còn 01 với nút thứ hai. Và để đặt hai nút cạnh nhau, grid sẽ nhận tham số hàng và cột lần lượt là 00 và 01.

Hãy dùng checkbutton để hiểu lớp grid hoạt động thế nào. Bạn sẽ định nghĩa hai checkbutton và chỉ định văn bản cho cả hai. Trạng thái của các checkbutton sẽ do onvalue và offvalue quyết định, còn trạng thái hiện tại sẽ được theo dõi bởi IntVar(), lưu trong một biến riêng. Khi offvalue=1 và onvalue=0 thì checkbutton tương ứng sẽ được đánh dấu.

Đến lớp grid, bạn sẽ truyền tham số row, nút sẽ ở hàng đầu nếu row=0 và ở hàng thứ hai nếu row=1.

import tkinter
from tkinter import *
top = tkinter.Tk()
CheckVar1 = IntVar()
CheckVar2 = IntVar()
tkinter.Checkbutton(top, text = "Machine Learning",variable = CheckVar1,onvalue = 1, offvalue=0).grid(row=0,sticky=W)
tkinter.Checkbutton(top, text = "Deep Learning", variable = CheckVar2, onvalue = 0, offvalue =1).grid(row=1,sticky=W)
top.mainloop()

Hãy chạy đoạn mã này và xem kết quả.

Hãy lấy ví dụ khác để hiểu grid. Trong ví dụ này, bạn cũng sẽ truyền column cùng với row.

import tkinter
# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

# You will create two text labels namely 'username' and 'password' and and two input labels for them

tkinter.Label(window, text = "Username").grid(row = 0) #'username' is placed on position 00 (row - 0 and column - 0)

# 'Entry' class is used to display the input-field for 'username' text label
tkinter.Entry(window).grid(row = 0, column = 1) # first input-field is placed on position 01 (row - 0 and column - 1)

tkinter.Label(window, text = "Password").grid(row = 1) #'password' is placed on position 10 (row - 1 and column - 0)

tkinter.Entry(window).grid(row = 1, column = 1) #second input-field is placed on position 11 (row - 1 and column - 1)

# 'Checkbutton' class is for creating a checkbutton which will take a 'columnspan' of width two (covers two columns)
tkinter.Checkbutton(window, text = "Keep Me Logged In").grid(columnspan = 2)                 

window.mainloop()

Hãy xem kết quả của đoạn mã trên!

Thật ấn tượng, đúng không? Cách làm rất đơn giản và trông gần như hệt so với viết bằng HTML.

Hàm Binding hoặc Command

Hàm Binding hoặc Command là những hàm được gọi bất cứ khi nào một sự kiện xảy ra hoặc được kích hoạt.

Hãy lấy ví dụ để hiểu các hàm binding.

Bạn sẽ định nghĩa một nút, khi nhấp sẽ gọi hàm DataCamp_Tutorial. Tiếp đó, hàm DataCamp_Tutorial sẽ tạo một nhãn mới với văn bản GUI with Tkinter!.

import tkinter
# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

# creating a function called DataCamp_Tutorial()
def DataCamp_Tutorial():
    tkinter.Label(window, text = "GUI with Tkinter!").pack()

tkinter.Button(window, text = "Click Me!", command = DataCamp_Tutorial).pack()
window.mainloop()

Hãy chạy mã và quan sát kết quả.

Ngoài việc gọi hàm binding bằng cú nhấp chuột, các sự kiện còn có thể được kích hoạt bởi di chuyển chuột, rê chuột, nhấp, cuộn, v.v.

Bây giờ hãy xem hàm bind, hàm này cung cấp cho bạn chức năng tương tự như trên.

Sự kiện nhấp chuột qua phương thức Bind

Phương thức Bind cung cấp cách tiếp cận rất đơn giản để triển khai các sự kiện nhấp chuột. Hãy xem ba hàm dựng sẵn có thể dùng trực tiếp với phương thức bind.

Các sự kiện nhấp gồm ba loại leftClick, middleClick và rightClick.

• Tham số <Button-1> của phương thức bind là sự kiện nhấp chuột trái, tức khi bạn nhấn nút trái, phương thức bind sẽ gọi hàm được chỉ định làm tham số thứ hai của nó.
  
  
• <Button-2> cho nhấp chuột giữa
  
  
• <Button-3> cho nhấp chuột phải

Bây giờ, bạn sẽ học cách gọi một hàm cụ thể dựa trên sự kiện xảy ra.

• Chạy chương trình sau và nhấp các nút trái, giữa, phải để gọi hàm tương ứng.
  
  
• Hàm đó sẽ tạo một nhãn mới với văn bản chỉ định.

import tkinter
# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

#You will create three different functions for three different events
def left_click(event):
    tkinter.Label(window, text = "Left Click!").pack()

def middle_click(event):
    tkinter.Label(window, text = "Middle Click!").pack()

def right_click(event):
    tkinter.Label(window, text = "Right Click!").pack()

window.bind("<Button-1>", left_click)
window.bind("<Button-2>", middle_click)
window.bind("<Button-3>", right_click)

window.mainloop()

Nguồn

Hãy chạy đoạn mã trên.

Hộp cảnh báo

Bạn có thể tạo hộp cảnh báo trong Tkinter bằng phương thức messagebox. Bạn cũng có thể đưa ra câu hỏi bằng phương thức messasgebox.

Tại đây bạn sẽ tạo một hộp cảnh báo đơn giản và một câu hỏi. Để tạo cảnh báo, bạn sẽ dùng hàm messagebox showinfo. Để tạo câu hỏi, bạn sẽ dùng phương thức askquestion, và dựa trên phản hồi, bạn sẽ hiển thị một Label trên GUI.

import tkinter
import tkinter.messagebox

# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

# Let's create a alert box with 'messagebox' function
tkinter.messagebox.showinfo("Alert Message", "This is just a alert message!")

# Let's also create a question for the user and based upon the response [Yes or No Question] display a message.
response = tkinter.messagebox.askquestion("Tricky Question", "Do you love Deep Learning?")

# A basic 'if/else' block where if user clicks on 'Yes' then it returns 1 else it returns 0. For each response you will display a message with the help of 'Label' method.
if response == 1:
    tkinter.Label(window, text = "Yes, offcourse I love Deep Learning!").pack()
else:
    tkinter.Label(window, text = "No, I don't love Deep Learning!").pack()

window.mainloop()

Hãy chạy nhanh đoạn mã trên và xem kết quả.

Render hình ảnh

Nếu bạn theo kịp tới đây, việc thêm hình ảnh và biểu tượng vào GUI sẽ trở nên rất dễ. Tất cả những gì bạn cần làm là dùng phương thức PhotoImage của Tkinter và truyền file_path làm tham số.

Vậy không chần chờ nữa, hãy nhanh chóng viết mã để hiển thị một hình ảnh trên GUI.

import tkinter

# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

# In order to display the image in a GUI, you will use the 'PhotoImage' method of Tkinter. It will an image from the directory (specified path) and store the image in a variable.
icon = tkinter.PhotoImage(file = "CNN.png")

# Finally, to display the image you will make use of the 'Label' method and pass the 'image' variriable as a parameter and use the pack() method to display inside the GUI.
label = tkinter.Label(window, image = icon)
label.pack()

window.mainloop()

Làm tốt lắm nếu bạn đã theo dõi tới đây!

Như một phần thưởng, bạn sẽ tạo một Calculator dùng tất cả kiến thức đã học đến giờ. Hãy kết thúc bài hướng dẫn này thật ấn tượng.

Tạo máy tính bằng Tkinter

Mọi ứng dụng GUI đều gồm hai bước.

• Tạo giao diện người dùng
  
  
• Thêm chức năng cho GUI

Hãy bắt đầu tạo máy tính. Phần lớn mã là tự giải thích, và một số dòng đã được chú thích.

from tkinter import *

# Let's create the Tkinter window
window = Tk()

# Then, you will define the size of the window in width(312) and height(324) using the 'geometry' method
window.geometry("312x324")

# In order to prevent the window from getting resized you will call 'resizable' method on the window
window.resizable(0, 0)

#Finally, define the title of the window
window.title("Calcualtor")


# Let's now define the required functions for the Calculator to function properly.

# 1. First is the button click 'btn_click' function which will continuously update the input field whenever a number is entered or any button is pressed it will act as a button click update.
def btn_click(item):
    global expression
    expression = expression + str(item)
    input_text.set(expression)

# 2. Second is the button clear 'btn_clear' function clears the input field or previous calculations using the button "C"
def btn_clear():
    global expression
    expression = ""
    input_text.set("")

# 3. Third and the final function is button equal ("=") 'btn_equal' function which will calculate the expression present in input field. For example: User clicks button 2, + and 3 then clicks "=" will result in an output 5.
def btn_equal():
    global expression
    result = str(eval(expression)) # 'eval' function is used for evaluating the string expressions directly
    # you can also implement your own function to evalute the expression istead of 'eval' function
    input_text.set(result)
    expression = ""

expression = ""
# In order to get the instance of the input field 'StringVar()' is used
input_text = StringVar()

# Once all the functions are defined then comes the main section where you will start defining the structure of the calculator inside the GUI.

# The first thing is to create a frame for the input field
input_frame = Frame(window, width = 312, height = 50, bd = 0, highlightbackground = "black", highlightcolor = "black", highlightthickness = 1)
input_frame.pack(side = TOP)


# Then you will create an input field inside the 'Frame' that was created in the previous step. Here the digits or the output will be displayed as 'right' aligned
input_field = Entry(input_frame, font = ('arial', 18, 'bold'), textvariable = input_text, width = 50, bg = "#eee", bd = 0, justify = RIGHT)
input_field.grid(row = 0, column = 0)
input_field.pack(ipady = 10) # 'ipady' is an internal padding to increase the height of input field


# Once you have the input field defined then you need a separate frame which will incorporate all the buttons inside it below the 'input field'
btns_frame = Frame(window, width = 312, height = 272.5, bg = "grey")
btns_frame.pack()


# The first row will comprise of the buttons 'Clear (C)' and 'Divide (/)'
clear = Button(btns_frame, text = "C", fg = "black", width = 32, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_clear()).grid(row = 0, column = 0, columnspan = 3, padx = 1, pady = 1)
divide = Button(btns_frame, text = "", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click("")).grid(row = 0, column = 3, padx = 1, pady = 1)


# The second row will comprise of the buttons '7', '8', '9' and 'Multiply (*)'
seven = Button(btns_frame, text = "7", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(7)).grid(row = 1, column = 0, padx = 1, pady = 1)
eight = Button(btns_frame, text = "8", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(8)).grid(row = 1, column = 1, padx = 1, pady = 1)
nine = Button(btns_frame, text = "9", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(9)).grid(row = 1, column = 2, padx = 1, pady = 1)
multiply = Button(btns_frame, text = "*", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click("*")).grid(row = 1, column = 3, padx = 1, pady = 1)


# The third row will comprise of the buttons '4', '5', '6' and 'Subtract (-)'
four = Button(btns_frame, text = "4", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(4)).grid(row = 2, column = 0, padx = 1, pady = 1)
five = Button(btns_frame, text = "5", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(5)).grid(row = 2, column = 1, padx = 1, pady = 1)
six = Button(btns_frame, text = "6", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(6)).grid(row = 2, column = 2, padx = 1, pady = 1)
minus = Button(btns_frame, text = "-", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click("-")).grid(row = 2, column = 3, padx = 1, pady = 1)


# The fourth row will comprise of the buttons '1', '2', '3' and 'Addition (+)'
one = Button(btns_frame, text = "1", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(1)).grid(row = 3, column = 0, padx = 1, pady = 1)
two = Button(btns_frame, text = "2", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(2)).grid(row = 3, column = 1, padx = 1, pady = 1)
three = Button(btns_frame, text = "3", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(3)).grid(row = 3, column = 2, padx = 1, pady = 1)
plus = Button(btns_frame, text = "+", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click("+")).grid(row = 3, column = 3, padx = 1, pady = 1)


# Finally, the fifth row will comprise of the buttons '0', 'Decimal (.)', and 'Equal To (=)'
zero = Button(btns_frame, text = "0", fg = "black", width = 21, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(0)).grid(row = 4, column = 0, columnspan = 2, padx = 1, pady = 1)
point = Button(btns_frame, text = ".", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click(".")).grid(row = 4, column = 2, padx = 1, pady = 1)
equals = Button(btns_frame, text = "=", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_equal()).grid(row = 4, column = 3, padx = 1, pady = 1)


window.mainloop()

Kết luận

Chúc mừng bạn đã hoàn thành bài hướng dẫn!

Dựa trên những gì đã học, bạn đã sẵn sàng tạo một số ứng dụng GUI đơn giản. Bạn cần học thêm nhiều phương thức để tạo kiểu và tương tác với các đối tượng trong GUI.

Một bài tập hữu ích là thử phát triển các ứng dụng tương tự như tạo máy tính bỏ túi, điều này sẽ giúp bạn tự tin hơn và có cái nhìn tổng thể hơn về những gì có thể làm với Tkinter.

Vẫn còn rất nhiều thứ để khám phá, và bạn có thể muốn tìm hiểu khái niệm Lớp (Classes) trong Tkinter, tham khảo tài liệu này.

Vui lòng để lại câu hỏi liên quan đến bài hướng dẫn trong phần bình luận bên dưới.