Python GUI佈局工具Tkinter入門之旅

2022-08-01 18:02:44

圖形化使用者介面 (GUI)

圖形化使用者介面 (GUI) 只不過是一個桌面應用程式，可幫助我們與計算機進行互動

像文字編輯器這樣的 GUI 應用程式可以建立、讀取、更新和刪除不同型別的檔案
數獨、國際象棋和紙牌等應用程式則是遊戲版的GUI程式
還有 Google Chrome、Firefox 和 Microsoft Edge 之類的 GUI 應用程式是用來瀏覽 Internet 的

這些都是我們日常在電腦上使用的一些不同型別的 GUI 應用程式，其實我們通過 Tkinter 也是可以構建簡單的類似應用程式的

今天我們作為 GUI 的入門，將建立一個非常簡單且漂亮的 GUI 應用程式

用於建立GUI的 Python 庫

Python 有大量的第三方類庫，對於 GUI 庫，主要有以下幾種：

Kivy
Python QT
wxPython
Tkinter

其中，Tkinter 是很多學習者和開發者的首選，因為它簡單易用而且隨 Python 安裝自帶

Tkinter 基礎

下面的圖片顯示了應用程式是如何在 Tkinter 中實際執行

我們首先匯入 Tkinter 模型，接著，我們建立主視窗，在這個視窗中，我們將要執行操作並顯示一切視覺效果，接下來我們新增 Widgets，最後我們進入 Main Event Loop

這裡有 2 個重要的關鍵字

Widgets
Main Event Loop

事件迴圈基本上是告訴程式碼繼續顯示視窗，直到我們手動關閉它,是在後臺無限迴圈執行的

對於 Widgets 我們後面單獨學習

下面一個程式碼例子，來深入理解下

import tkinter
window = tkinter.Tk()
# to rename the title of the window window.title("GUI")
# pack is used to show the object in the window
label = tkinter.Label(window, text = "Hello World!").pack()
window.mainloop()

我們匯入 Tkinter 包並定義一個視窗，接著我們可以修改一個視窗標題，每當開啟應用程式時，該標題都會顯示在標題索引標籤上

最後，我們還定義了一個標籤，標籤只不過是需要在視窗上顯示的輸出，在例子中是 hello world

Tkinter Widgets

那麼到底什麼是 Widgets 呢

Widgets 類似於 HTML 中的元素，我們可以在 Tkinter 中找到針對不同型別元素的不同型別的 Widgets

讓我們看看 Tkinter 中所有這些 Widgets 的簡要介紹

Canvas - Canvas 用於在 GUI 中繪製形狀
Button – Button 用於在 Tkinter 中放置按鈕
Checkbutton – Checkbutton 用於在應用程式中建立核取按鈕
Entry - Entry 用於在 GUI 中建立輸入欄位
Frame – Frame 在 Tkinter 中用作容器
Label - Label 用於建立單行 Widgets，如文字、影象等
Menu - Menu 用於在 GUI 中建立選單

下面讓我們逐一看一下每個 Widgets 的用法

Label

標籤用於建立文字和影象以及所有相關的，而且要注意的是，它只能是單行定義

l1 = Label(window, text="蘿蔔大雜燴!", font=("ArialBold", 50))
l1.grid(column=0, row=0)

還有一個函數 geometry，它基本上用於更改視窗大小並根據我們的要求進行設定

l1 = Label(window, text="蘿蔔大雜燴!", font=("ArialBold", 50))
window.geometry('350x200')

在這種情況下，我們將其設定為寬 350 畫素和高 200 畫素

接下來是 button

Button

按鈕與標籤非常相似，我們建立一個變數並使用 Widgets 語法來定義按鈕要表達的內容

window.geometry('350x200')
bt = Button(window, text="Enter")

我們還可以更改按鈕或任何其他 Widgets 的前景顏色，使用程式碼中所示的引數 FG。同樣，也可以使用 BG 屬性更改背景顏色

bt = Button(window, text="Enter", bg="orange", fg="red")
bt.grid(column=1, row=0)

我們的前景是定義為紅色的文字，背景為橙色

下面來看一下點選按鈕的操作

def clicked():
    l1.configure(text="按鈕被點選了!!")
bt = Button(window, text="Enter", bg="orange", fg="red", command=clicked)

這個我們稱之為點選事件，我們需要編寫有關單擊按鈕或觸發單擊事件時應該發生什麼的功能

我們定義了一個名為 clicked 的函數，可以顯示一條文字訊息，我們在按鈕定義中新增一個名為 command 的引數，來呼叫點選事件

Entry

它用於在 GUI 中建立輸入欄位以接收文字輸入

txt = Entry(window, width=10)
txt.grid(column=1, row=0)
def clicked():
    res = "Welcome to " + txt.get()
    l1.configure(text=res)
bt = Button(window, text="Enter", bg="orange", fg="red", command=clicked)

在這裡，我們使用 Tkinter Entry 類建立一個文字方塊，grid 定義我們希望視窗小部件位於何處

同時 clicked 函數接收 Entry 的文字資訊

Combobox

這是一個帶有某些選項的下拉式選單

from tkinter.ttk import *
combo = Combobox(window)
combo['values']= (1, 2, 3, 4, 5, "Text")
combo.current(3)
combo.grid(column=0, row=0)

這樣一個下拉式選單就完成了

Checkbutton

核取按鈕是非常常用的元件

chk_state = BooleanVar()
chk_state.set (True)
chk = Checkbutton(window, text="Select", var=chk_state)
chk.grid(column=4, row=0)

我們首先建立一個 booleanvar 型別的變數，這是一個 Tkinter 變數

預設情況下，我們將設定狀態保持為 true，這代表按鈕已經被選中接下來，我們將 chk_state 傳遞給 checkbutton 類來為我們設定檢查狀態

Radio Button

無線電鈕也是非常常用的

rad1 = Radiobutton(window, text=Python', value=1)
rad2 = Radiobutton(window, text=Java', value=2)
rad3 = Radiobutton(window, text=Scala', value=3)
rad1.grid(column=0, row=0)
rad2.grid(column=1, row=0)
rad3.grid(column=2, row=0)

在這裡，我們使用了不同的引數值，1,2和3，如果它們相同，則會導致衝突並出現錯誤

它們的文字資料是可以相同，在這裡，我們使用了 Python、Java 和 Scala

Scrolled Text

捲動文字元件

scro_txt = scrolledtext.ScrolledText(window, width=40,height=10)
scro_txt.grid(column=0, row=4)

我們指定了視窗的高和寬，否則預設會填充整個 Windiws 視窗

Message Box

訊息元件可以方便的彈出提醒訊息

def clicked():
    messagebox.showinfo('Message title', 'Message content')
btn = Button(window,text=‘ENTER', command=clicked)

SpinBox

Spinbox 也是一個常見的元件，有兩個索引標籤，存在向上和向下捲動索引標籤

pin = Spinbox(window, from_=0, to=100, width=5)

有 3 個引數——from、to 和 width

From – 告訴我們範圍的開始和預設值
to – 給我們範圍的上限閾值
width 基本上是將 widget 的大小設定為5個字元的空格

Geometry

Tkinter 中的所有 Widgets 都會有一些位置資訊，這些度量使得我們可以組織 Widgets 及其父框架、視窗等

Tkinter 具有以下三個佈局方式

pack():- 它在塊中組織 Widgets，這意味著它佔據了整個可用寬度，這是在視窗中顯示 Widgets 的標準方法
grid():- 它以類似表格的結構組織 Widgets
place():- 它將 Widgets 放置在我們想要的特定位置

組織布局

為了在視窗中安排佈局，我們將使用 Frame 類

Frame -- 在視窗中建立分割區，我們可以根據需要使用 pack() 方法的側面引數對齊框架
Button -- 在視窗中建立一個按鈕，需要傳遞幾個引數，如文字（按鈕的值）、fg（文字的顏色）、bg（背景顏色）

在下面的程式碼中，我們使用 window、top_frame、bottom_frame 來佈局

import tkinter
window = tkinter.Tk()
window.title("GUI")
# creating 2 frames TOP and BOTTOM
top_frame = tkinter.Frame(window).pack()
bottom_frame = tkinter.Frame(window).pack(side = "bottom")
# now, create some widgets in the top_frame and bottom_frame
btn1 = tkinter.Button(top_frame, text = "Button1", fg = "red").pack()# 'fg - foreground' is used to color the contents
btn2 = tkinter.Button(top_frame, text = "Button2", fg = "green").pack()# 'text' is used to write the text on the Button
btn3 = tkinter.Button(bottom_frame, text = "Button2", fg = "purple").pack(side = "left")# 'side' is used to align the widgets
btn4 = tkinter.Button(bottom_frame, text = "Button2", fg = "orange").pack(side = "left")
window.mainloop()

再來看一個登入的小栗子

import tkinter
window = tkinter.Tk()
window.title("GUI")
# creating 2 text labels and input labels
tkinter.Label(window, text = "Username").grid(row = 0) # this is placed in 0 0
# 'Entry' is used to display the input-field
tkinter.Entry(window).grid(row = 0, column = 1) # this is placed in 0 1
tkinter.Label(window, text = "Password").grid(row = 1) # this is placed in 1 0
tkinter.Entry(window).grid(row = 1, column = 1) # this is placed in 1 1
# 'Checkbutton' is used to create the check buttons
tkinter.Checkbutton(window, text = "Keep Me Logged In").grid(columnspan = 2) # 'columnspan' tells to take the width of 2 columns
# you can also use 'rowspan' in the similar manner
window.mainloop()

下面我們來了解 binding 函數

binding 函數

每當事件發生時呼叫函數就是繫結函數

在下面的範例中，當單擊按鈕時，它會呼叫一個名為 say_hi 的函數。函數 say_hi 會建立一個帶有文字 Hi 的新標籤

import tkinter
window = tkinter.Tk()
window.title("GUI")
# creating a function called say_hi()
def say_hi():
    tkinter.Label(window, text = "Hi").pack()
tkinter.Button(window, text = "Click Me!", command = say_hi).pack() # 'command' is executed when you click the button
# in this above case we're calling the function 'say_hi'.
window.mainloop()

另一種繫結函數的方法是使用事件，事件類似於滑鼠移動、滑鼠懸停、單擊和捲動等等

import tkinter
window = tkinter.Tk()
window.title("GUI")
# creating a function with an arguments 'event'
def say_hi(event): # you can rename 'event' to anything you want
    tkinter.Label(window, text = "Hi").pack()
btn = tkinter.Button(window, text = "Click Me!")
btn.bind("Button-1", say_hi) # 'bind' takes 2 parameters 1st is 'event' 2nd is 'function'
btn.pack()
window.mainloop()

單擊事件有 3 種不同的型別，分別是 leftClick、middleClick 和 rightClick

下面的程式碼將使用對於的文字建立一個新標籤

import tkinter
window = tkinter.Tk()
window.title("GUI")
#creating 3 different functions for 3 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()

Images 和 Icons

我們可以使用 PhotoImage 方法新增影象和圖示

import tkinter
window = tkinter.Tk()
window.title("GUI")
# taking image from the directory and storing the source in a variable
icon = tkinter.PhotoImage(file = "4.PNG")
# displaying the picture using a 'Label' by passing the 'picture' variriable to 'image' parameter
label = tkinter.Label(window, image = icon)
label.pack()
window.mainloop()

好了，進步的 Tkinter 知識我們都梳理完畢了，下面就完成一個簡單的實戰專案吧

計算器 APP

首先初始化頁面

window = Tk()
window.geometry("350x380")
window.resizable(0, 0)  # this prevents from resizing the window
window.title("小小計算器")

接下來定義輸入數位框

input_text = StringVar()
input_frame = Frame(window, width=312, height=50, bd=0, highlightbackground="black", highlightcolor="black",
                    highlightthickness=1)
input_frame.pack(side=TOP)
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)

然後定義按鈕方法，我們以清除按鈕和除法按鈕為例

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)

最後就是計算equal邏輯

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)
def btn_equal():
   global expression
   result = str(eval(expression)) 
   input_text.set(result)
   expression = ""

好了，讓我看下最終的效果吧，雖然頁面很簡陋，但是加減乘除這些基本運算還是包含了的