Python Tkinter 製作 GUI 圖形化介面教學

woff

前言

除了 Web 和 Mobile App 之外，桌面應用程式（Desktop Application）也是使用者常使用的應用程式圖形化使用者介面（GUI）。透過 GUI 可以讓一般使用者透過比較直覺的方式來和程式互動（畢竟要讓一般的使用者使用 Command Line 來操作程式是挺難的），也可以讓整個使用者行為更為簡便。許多程式語言都有提供 GUI 的函式庫，讓開發者可以透過常見的元件，例如：按鈕、文字方塊、下拉式選單等方式來設計整個應用程式。在這裡，我們將使用 Python 內建的 Tkinter 函式庫來建立一個簡單的 BMI 計算應用程式，讓讀者感受一下 Python Tkinter 設計桌面應用程式的流程。

Tkinter 函式庫簡介基本設計流程

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

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

以下是簡單的範例程式，建立主視窗後加入 3+1 個按鈕元件，當點擊下方按鈕元件時，事件處理器會印出 hello world :)

1. # 引入套件
   
2. import tkinter as tk
   
3. 
   
4. # 建立主視窗和 Frame（把元件變成群組的容器）
   
5. window = tk.Tk()
   
6. top_frame = tk.Frame(window)
   
7. 
   
8. # 將元件分為 top/bottom 兩群並加入主視窗
   
9. top_frame.pack()
   
10. bottom_frame = tk.Frame(window)
    
11. bottom_frame.pack(side=tk.BOTTOM)
    
12. 
    
13. # 建立事件處理函式（event handler），透過元件 command 參數存取
    
14. def echo_hello():
    
15.     print('hello world :)')
    
16. 
    
17. # 以下為 top 群組
    
18. left_button = tk.Button(top_frame, text='Red', fg='red')
    
19. # 讓系統自動擺放元件，預設為由上而下（靠左）
    
20. left_button.pack(side=tk.LEFT)
    
21. 
    
22. middle_button = tk.Button(top_frame, text='Green', fg='green')
    
23. middle_button.pack(side=tk.LEFT)
    
24. 
    
25. right_button = tk.Button(top_frame, text='Blue', fg='blue')
    
26. right_button.pack(side=tk.LEFT)
    
27. 
    
28. # 以下為 bottom 群組
    
29. # bottom_button 綁定 echo_hello 事件處理，點擊該按鈕會印出 hello world :)
    
30. bottom_button = tk.Button(bottom_frame, text='Black', fg='black', command=echo_hello)
    
31. # 讓系統自動擺放元件（靠下方）
    
32. bottom_button.pack(side=tk.BOTTOM)
    
33. 
    
34. # 運行主程式
    
35. window.mainloop()

複製代碼

觀看成果：

Python Tkinter GUI 圖形化介面 教學

建立 BMI App 主視窗

在建立我們的應用程式前，我們先簡單使用繪製我們介面的 mockup 圖：

Python Tkinter GUI 圖形化介面 教學

整個應用程式流程如下：

• 提供輸入框讓使用者可以輸入其身高（m）、體重（kg）
• 點擊馬上計算按鈕後計算 BMI 指數
• 顯示結果於畫面上
  
  

1. import tkinter as tk
   
2. 
   
3. window = tk.Tk()
   
4. # 設定視窗標題、大小和背景顏色
   
5. window.title('BMI App')
   
6. window.geometry('800x600')
   
7. window.configure(background='white')
   
8. 
   
9. # 運行主程式
   
10. window.mainloop()

複製代碼

成果如下：

Python Tkinter GUI 圖形化介面 教學

建立 BMI App 元件

建立完主視窗後，接下來我們來把元件一一加入到主視窗，我們元件主要分成三大部分：

• 標題顯示 BMI 計算器 文字區塊
• 身高體重輸入區塊
• 顯示結果和點擊按鈕
  
  

1. import tkinter as tk
   
2. 
   
3. window = tk.Tk()
   
4. window.title('BMI App')
   
5. window.geometry('800x600')
   
6. window.configure(background='white')
   
7. 
   
8. header_label = tk.Label(window, text='BMI 計算器')
   
9. header_label.pack()
   
10. 
    
11. # 以下為 height_frame 群組
    
12. height_frame = tk.Frame(window)
    
13. # 向上對齊父元件
    
14. height_frame.pack(side=tk.TOP)
    
15. height_label = tk.Label(height_frame, text='身高（m）')
    
16. height_label.pack(side=tk.LEFT)
    
17. height_entry = tk.Entry(height_frame)
    
18. height_entry.pack(side=tk.LEFT)
    
19. 
    
20. # 以下為 weight_frame 群組
    
21. weight_frame = tk.Frame(window)
    
22. weight_frame.pack(side=tk.TOP)
    
23. weight_label = tk.Label(weight_frame, text='體重（kg）')
    
24. weight_label.pack(side=tk.LEFT)
    
25. weight_entry = tk.Entry(weight_frame)
    
26. weight_entry.pack(side=tk.LEFT)
    
27. 
    
28. result_label = tk.Label(window)
    
29. result_label.pack()
    
30. 
    
31. calculate_btn = tk.Button(window, text='馬上計算')
    
32. calculate_btn.pack()
    
33. 
    
34. window.mainloop()

複製代碼

成果：

Python Tkinter GUI 圖形化介面 教學

建立 BMI App 事件處理

加入元件後我們可以建立

1. def calculate_bmi_number():
   
2.     height = float(height_entry.get())
   
3.     weight = float(weight_entry.get())
   
4.     bmi_value = round(weight / math.pow(height, 2), 2)
   
5.     result = '你的 BMI 指數為：{} {}'.format(bmi_value, get_bmi_status_description(bmi_value))
   
6.     # 將計算結果更新到 result_label 文字內容
   
7.     result_label.configure(text=result)
   
8. 
   
9. def get_bmi_status_description(bmi_value):
   
10.     if bmi_value < 18.5:
    
11.         return '體重過輕囉，多吃點！'
    
12.     elif bmi_value >= 18.5 and bmi_value < 24:
    
13.         return '體重剛剛好，繼續保持！'
    
14.     elif bmi_value >= 24 :
    
15.         return '體重有點過重囉，少吃多運動！'

複製代碼

透過 command 參數可以將 calculate_bmi_number 事件處理函式綁定到元件上

1. calculate_btn = tk.Button(window, text='馬上計算', command=calculate_bmi_number)

複製代碼

完整程式碼：

1. import tkinter as tk
   
2. import math
   
3. 
   
4. window = tk.Tk()
   
5. window.title('BMI App')
   
6. window.geometry('800x600')
   
7. window.configure(background='white')
   
8. 
   
9. def calculate_bmi_number():
   
10.     height = float(height_entry.get())
    
11.     weight = float(weight_entry.get())
    
12.     bmi_value = round(weight / math.pow(height, 2), 2)
    
13.     result = '你的 BMI 指數為：{} {}'.format(bmi_value, get_bmi_status_description(bmi_value))
    
14.     result_label.configure(text=result)
    
15. 
    
16. def get_bmi_status_description(bmi_value):
    
17.     if bmi_value < 18.5:
    
18.         return '體重過輕囉，多吃點！'
    
19.     elif bmi_value >= 18.5 and bmi_value < 24:
    
20.         return '體重剛剛好，繼續保持！'
    
21.     elif bmi_value >= 24 :
    
22.         return '體重有點過重囉，少吃多運動！'
    
23. 
    
24. header_label = tk.Label(window, text='BMI 計算器')
    
25. header_label.pack()
    
26. 
    
27. height_frame = tk.Frame(window)
    
28. height_frame.pack(side=tk.TOP)
    
29. height_label = tk.Label(height_frame, text='身高（m）')
    
30. height_label.pack(side=tk.LEFT)
    
31. height_entry = tk.Entry(height_frame)
    
32. height_entry.pack(side=tk.LEFT)
    
33. 
    
34. weight_frame = tk.Frame(window)
    
35. weight_frame.pack(side=tk.TOP)
    
36. weight_label = tk.Label(weight_frame, text='體重（kg）')
    
37. weight_label.pack(side=tk.LEFT)
    
38. weight_entry = tk.Entry(weight_frame)
    
39. weight_entry.pack(side=tk.LEFT)
    
40. 
    
41. result_label = tk.Label(window)
    
42. result_label.pack()
    
43. 
    
44. calculate_btn = tk.Button(window, text='馬上計算', command=calculate_bmi_number)
    
45. calculate_btn.pack()
    
46. 
    
47. window.mainloop()

複製代碼

最後成果：

Python Tkinter GUI 圖形化介面 教學

總結

以上透過 Python 內建的 Tkinter 函式庫來建立一個簡單的 BMI 計算應用程式，讓讀者感受一下 Python Tkinter 設計桌面應用程式的流程。事實上，Tkinter 支援物件導向撰寫方式，我們也可以將以上程式碼重構成物件導向撰寫方式。比起 CLI 來說 GUI 對於一般使用者在使用上確實是比較方便，若有興趣的讀者也可以自己嘗試製作小遊戲或是更多有趣的不同應用。

參考文件

• tkinter — Python interface to Tcl/Tk
• Python 快速入門教學
  
  

網頁設計,網站架設 ,網路行銷,網頁優化,SEO - NetYea 網頁設計