Tkinter GUI

發表於2021-08-05更新於2021-08-05

撰寫GUI設計流程

  1. 建立主視窗（大小、位置、名稱）
  2. 元件（按鈕、文字方塊、選單）加入視窗中
  3. 事件處理函示（event handler)：使用者互動時的觸發行為
1
2
#tk.Frame():創建可容納物件的框架
#tk.Frame(window, bg='red', width=100, height=100)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import tkinter as tk

window = tk.Tk()
top_frame = tk.Frame(window)
top_frame.pack()
bottom_frame = tk.Frame(window)
bottom_frame.pack(side = tk.BOTTOM)
def echo_hello():
    print('hello word :)')
left_button = tk.Button(top_frame,text = "Red", fg = 'red')
left_button.pack(side = tk.LEFT)

middle_button = tk.Button(top_frame,text = "Green", fg = 'green')
middle_button.pack(side = tk.LEFT)

right_button = tk.Button(top_frame,text = "Blue", fg = 'blue')
right_button.pack(side = tk.LEFT)
bottom_button = tk.Button(bottom_frame,text='Black', fg='black', command = echo_hello)
bottom_button.pack(side = tk.BOTTOM)
window.mainloop()

BMI App

  1. 提供輸入框讓使用者輸入身高(m)體重(kg)
  2. 點擊計算按鈕後計算ＢＭＩ指數
  3. 顯示結果於畫面上

建立 BMI App 主視窗

 1. 建立視窗: 
     - tk.Tk()
 2. 設定標題、大小、背景:
     - tk.title("")
     - tk.geometry('')
     - tk.configure(background = '')

1
2
3
4
5
6
7
import tkinter as tk

window = tk.Tk()
window.title("BMI App")
window.geometry('800x600')
window.configure(background = 'white')
window.mainloop()

建立 BMI App 元件

1. 標題顯示ＢＭＩ計算器（文字元件）
2. 身高體重輸入區塊
3. 顯示結果按點擊按鈕

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import tkinter as tk
window = tk.Tk()
window.title("BMI App")
window.geometry('800x600')
#window.configure(background = 'white')

name_label = tk.Label(window,text = "BMI計算器")
name_label.pack()

# height_frame 元件
height_frame = tk.Frame(window)
height_frame.pack(side = tk.TOP)
height_label = tk.Label(height_frame,text = 'height(m)')
height_label.pack(side = tk.LEFT)
height_entry = tk.Entry(height_frame)
height_entry.pack(side = tk.LEFT)

# weight_frame 元件
weight_frame = tk.Frame(window)
weight_frame.pack(side = tk.TOP)
weight_label = tk.Label(weight_frame,text = 'weight(kg)')
weight_label.pack(side = tk.LEFT)
weight_entry = tk.Entry(weight_frame)
weight_entry.pack(side = tk.LEFT)

# result_label 元件
result_label = tk.Label(window)
result_label.pack() 

# calculate_button 元件
calculate_btn = tk.Button(window,text = 'calculate now!')
calculate_btn.pack()

window.mainloop()

建立 BMI App 事件處理

1. 定義功能(建立函式)： 
    - def calculate_bmi_value()
    - def bmi_status_description()
2. 將函式綁定至元件按鈕上： command

1
2
3
4
# test
h =7
H = 4
print(round(H/(h*h), 2))
0.08

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import tkinter as tk
import math

def calculate_bmi_value():
    h = float(height_entry.get())
    w = float(weight_entry.get())
    bmi_value = round(w/(h*h), 2)
    des = bmi_status_description(bmi_value)
    result = "你的 BMI 指數為: {} {}".format(bmi_value,des)
    # .configure():更新內容,配置內容
    result_label.configure(text = result)
    
def bmi_status_description(bmi_value):
    if bmi_value < 18.5 :
        return '體重過輕，多吃點！'
    elif bmi_value >= 18.5 and bmi_value < 24 :
        return '體重適中，繼續保持！'
    elif bmi_value >= 24 :
        return '體重過重，少吃多運動！'

# 建立主視窗
window = tk.Tk()
window.title("BMI App")
window.geometry('800x600')
#window.configure(background = 'white')

name_label = tk.Label(window,text = "BMI計算器")
name_label.pack()

# height_frame 元件
height_frame = tk.Frame(window)
height_frame.pack(side = tk.TOP)
height_label = tk.Label(height_frame,text = 'height(m)')
height_label.pack(side = tk.LEFT)
height_entry = tk.Entry(height_frame)
height_entry.pack(side = tk.LEFT)

# weight_frame 元件
weight_frame = tk.Frame(window)
weight_frame.pack(side = tk.TOP)
weight_label = tk.Label(weight_frame,text = 'weight(kg)')
weight_label.pack(side = tk.LEFT)
weight_entry = tk.Entry(weight_frame)
weight_entry.pack(side = tk.LEFT)

# result_label 元件
result_label = tk.Label(window)
result_label.pack() 

# calculate_button 元件
calculate_btn = tk.Button(window,text = 'calculate now!', command = calculate_bmi_value)
calculate_btn.pack()

window.mainloop()