Python Course

圖形化使用介面

GUI(Graphic User Interface) – 圖形化使用介面，通常是指視窗操作畫面。 Python 開發 GUI 有兩個套件較常被使用：Tkinter 與 PyQt。兩者的差別為：PyQt為第三方套件，功能較多；Tkinter為 Python 內建的 GUI 套件，功能簡單但效能好。本單元將以 tkinter 為主，介紹如何設計桌面應用程式。

Tkinter 套件

Tkinter 套件是 Python 內建的標準 GUI 設計介面，使用 Tcl/Tk GUI 工具程式，可以用來開發桌面應用程式。

Tkinter 包括了以下幾個主要的模組(Moudle)：

tkinter:主要模組
tkinter.colorchooser:提供選擇顏色的對話框
tkinter.smpledialog:提供基本對話視窗
tkinter.commondialog:提供一般對話視窗
tkinter.filedialog:提供檔案開啟或存檔的對話視窗
tkinter.font:處理字型
tkinter.messagebox:訊息對話視窗
tkinter.scrolledtext:具有垂直捲軸的文字元件
tkinter.ttk: Themed widget set 提供進階元件
turtle:Turtle graphics 繪圖模組

檢查 tkinter

開始使用 tkinter 之前，要確認是否可以使用 tkinter 模組，可以在系統的命令列中執行以下指令，若已經安裝好的話，會出現一個簡單的 Tk 示範視窗，並且顯示 tkinter 的版本：

# 測試 Python 的 tkinter 模組
>>> python -m tkinter

建立步驟

撰寫 Tkinter GUI 程式主要有以下三個步驟：

建立主視窗：設定視窗大小、位置和視窗名稱等
放入元件：將元件（如：按鈕、文字方塊、選單等）放入視窗中
實作事件處理函式：設計使用者互動時的事件處理函式（event handler）。例如：當使用者點擊某個按鈕時要觸發什麼行為。

基本視窗範例

首先，建構一個最基本的視窗範例，如下：

# 引入 tkinter 模組
import tkinter as tk

# 建立主視窗 Frame
win = tk.Tk()

# 執行主程式
win.mainloop()

設定標題
win.title(“我的視窗標題”)
設定視窗大小
win.geometry(‘500x300’)
設定視窗大小與位置
win.geometry(‘500x300+250+150’)

實做練習

建立一個高400寬600的視窗，標題顯示你的學號姓名。

視窗元件(widget)

視窗的主要組成元素稱為元件(widget)，例如:選單、按鈕...等。tkinter 常用的元件(widget)如下：

參考：Basic Widgets、More Widgets

容器框架 frame

文字標籤 label

lb_1 = tk.Label(window, text='Hello World', bg='yellow', fg='#263238', font=('Arial', 12))
lb_1.pack()

按鈕 Button
核取按鈕 Checkbutton
單選按鈕 Radiobutton
文字輸入欄位 Entry
組合選項欄位 Combobox
列表選項 Listbox
捲軸 Scrollbar
區域文字欄位 text
尺規量表 Scale
數字捲軸 Spinbox
進度條Progressbar

佈局管理

佈局管理(layout managers 或 geometry managers)為設定視窗裡面的元件擺放方式，有以下功能：

將元件放置到視窗上,包括元件的位置及大小
將元件註冊到視窗系統中
管理元件在螢幕上的顯示

tkinter 有以下三種佈局管理方式:

pack - 流水式排版
place - 指定絕對或相對座標排版
grid - 網格式排版

這三種佈局管理在同一個主視窗裡，不可以混用!

Pack 佈局管理

pack 是三種佈局管理中最常用的. 另外兩種佈局需要精確指定元件具體的顯示位置, 而 pack 佈局可以指定相對位置, 精確的位置會由 pack 系統自動完成。這也使得 pack 佈局沒有另外兩種佈局方式靈活，所以 pack 是簡單應用的首選佈局, 比如只是想要將元件水準或垂直的逐個放在一起。

pack() 方法的參數全部都是可有可無的, 沒有傳入參數時, 加入版面的元件以預設值排版, 常用參數如下:

參數	說明
side	排列方向 : TOP (預設), BOTTOM, LEFT, RIGHT
fill	填滿所分配空間之方向 : NONE (預設), X, Y, BOTH
expand	填滿容器 : True/False (預設)
padx/pady	元件邊框與容器之距離 (px,預設=0)
ipadx/ipady	元件內容 (文字/圖像) 與其邊框之距離 (px,預設=0)
anchor	元件在容器中的錨定位置 : e, w, s, n, center (預設), ne, se, sw, nw

Place 佈局管理

Place 佈局管理可以明確指定元件的絕對位置或相對於其他元件的位置. 要使用 Place 佈局, 呼叫元件的 place() 方法就可以了。

此排版法是指定以父容器左上角為原點之座標位置來精確放置元件, 但使用的機會較少, 因為只要某個元件的位置更改, 整個版面中的元件可能都要隨之調整, 通常是用來製作客製化的版面管理員之用。使用語法如下：

元件.place([options])

place 函式的常用參數如下 :

place() 參數	說明
x	相對於視窗左上角之 x 座標
y	相對於視窗左上角之 y 座標
width	指定元件寬度 (px)
height	指定元件高度 (px)
relx	相對於父容器寬度之比率 x 座標 (0~1)
rely	相對於父容器高度之比率 y 座標 (0~1)
relwidth	相對於父容器寬度之比率 (0~1)
relheight	相對於父容器高度之比率(0~1)
anchor	元件在容器中的錨定位置 : E, W, S, N, CENTER (預設), NE, SE, SW, NW

其中 (x, y) 或 (relx, rely) 是必須傳入之定位參數, 雖然沒有傳入任何參數也不會出現錯誤訊息, 但因為缺乏定位資訊, 因此元件也不會出現在視窗上. place() 的詳細介面可輸入下列指令查詢 :

	>>> import tkinter
	>>> help(tkinter.Place)

place() 提供兩種定位法 :

絕對定位
以(x, y) 參數指定絕對座標，以 (width, height) 指定絕對大小
相對定位
以 (relx, rely) 參數指定相對座標，以 (relwidth, relheight) 參數指定相對大小

兩者的差別是, 在視窗縮放時, 以絕對定位法放置的元件不會改變其位置與大小; 而以相對定位法放置的元件則會依照相對比率隨之縮放。

Grid 佈局管理

Grid 佈局管理方式是為各個元件指定行號和列號的過程. 不需要為每個格子指定大小, Grid 佈局會自動設置一個合適的大小。 Grid 排版是最容易理解也最好用版面管理員, 適合用來處理較複雜的版面, 它使用類似網頁表格或二維陣列的索引方式來放置元件, 每個網格只能放置一個元件, 但多個網格可用 rowspan 與 columnspan 參數合併鄰近的多個網格來放置一個元件, 其介面如下 :

元件.grid([options])

常用參數如下表 :

grid() 參數	說明
row	列索引
column	行索引
rowspan	儲存格合併列數
columnspan	儲存格合併行數
padx/pady	元件邊框與容器之距離 (px, 預設=1)
ipadx/ipady	元件內容 (文字/圖像) 與其邊框之距離 (px, 預設=1)
sticky	元件於網格中的錨定位置 : E, W, S, N, CENTER (預設)

其中 row 與 column 都是 0 起始的索引. 一般來說，元件呼叫 grid() 將自己放進容器時應該傳入 row 與 column 參數指定網格索引位置, 否則預設是以 1 行網格來擺放元件. 參數 padx/pady/ipadx/ipady 用法與上面 pack() 的一樣。

grid() 的詳細參數可輸入下列指令查詢 :

>>> import tkinter
>>> help(tkinter.Grid)

參考網站

TkDocs - https://tkdocs.com/tutorial/index.html
tkinter - Python interface to Tcl/Tk
TutorialsTeacher - Create UI in Python-Tkinter
DesignSpark - 為應用程式設計圖形化介面，使用Python Tkinter 模組

Python 基礎教學