iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
1
Software Development

糊裡糊塗Python就上手系列 第 25

[2020鐵人賽Day25]糊裡糊塗Python就上手-圖形介面設計方法

今日目標

前幾篇應該挺燒腦,今天來點輕鬆的,來設計圖形化介面,使得操作上更易操作

Tkinter 方法簡介

此篇僅介紹等會有用到的元件

「標籤」

tk.Label(容器名稱, [其餘參數])

其餘參數介紹:

Label 參數 說明
padx 在 x 軸方向上的水平間距
pady 在 y 軸方向上的垂直間距
text 文字內容
foreground or fg 選項的前景顏色
background or bg 背景顏色
font 文字字體及大小
width 標籤寬度
height 標籤高度
textvariable 可以看作是動態版的text,文字內容隨著變數值設置而改變

「文字編輯」

tk.Entry(容器名稱, [其餘參數])

其餘參數介紹:

Entry 參數 說明
padx 在 x 軸方向上的水平間距
pady 在 y 軸方向上的垂直間距
width 標籤寬度
height 標籤高度
state 設定是否可編輯,可填數值有兩種「可編輯 NORMAL」、「不可編輯 DISABLED」,預設為 NORMAL
foreground or fg 選項的前景顏色
background or bg 背景顏色
border or bd 邊框大小,預設為2px
font 文字字體及大小
show 指定文字框內容顯示哪種字符,例如將值設為「」:show=''
textvariable 可以看作是動態版的text,文字內容隨著變數值設置而改變
command 觸發將執行的 Function

「按鈕」

tk.Button(容器名稱, [其餘參數])

其餘參數介紹:

Button 參數 說明
padx 在 x 軸方向上的水平間距
pady 在 y 軸方向上的垂直間距
width 標籤寬度
height 標籤高度
text 設定按鈕呈現的文字
textvariable 可以看作是動態版的text,文字內容隨著變數值設置而改變
font 文字字體及大小
foreground or fg 選項的前景顏色
background or bg 背景顏色
border or bd 邊框大小,預設為2px
command 觸發將執行的 Function

「補充說明」
textvariable 參數,有三種型態可設定:
tk.StringVar():資料型態為「字串」,預設值為空字串
tk.IntVar():資料型態為「整數」,預設值為 0
tk.DoubleVar():資料型態為「浮點數」,預設值為 0.0

設定與取得動態變數值
textvariable變數.set():設定動態文字變數內容
textvariable變數.get():取得動態文字變數內容

實際操作

事前資料

衛生福利部國民健康署-健康九九網站(BMI 測試)
等下會需要用到裡面的 BMI 區分標準,以便撰寫判斷式

圖形化範例-BMI測量

是的,今天就是要來寫最常拿來當範例的 BMI 測量程式

導入將使用的套件

# 導入套件
import tkinter as tk

建立主視窗物件,並設定主視窗大小及主視窗標題

# 建立主視窗
window = tk.Tk()
# 設定主視窗大小
window.geometry("800x600")
# 設定主視窗標題
window.title("圖形化範例-BMI測量")

建立將使用的相關變數(回應值、身高、體重),這邊需要在建立玩主視窗後才可以建立,否則會報錯

return_msg = tk.StringVar() # BMI 回傳值
height_msg = tk.IntVar() # 身高
weight_msg = tk.IntVar() # 體重

設定身高、體重的 Label 及 Entry

# 設定身高 Label 
height_label = tk.Label(window, text="請輸入身高:", foreground="red", font=("標楷體", 12), padx=30, pady=20)
height_label.pack()

# 設定身高 Entry
height_entry = tk.Entry(window, foreground="green", textvariable=height_msg)
height_entry.pack()

# 設定 Label
weight_label = tk.Label(window, text="請輸入體重:", foreground="red", font=("標楷體", 12), padx=30, pady=20)
weight_label.pack()

# 設定 Entry
weight_entry = tk.Entry(window, foreground="green", textvariable=weight_msg)
weight_entry.pack()

設定回應值 Label

# 設定回應值 Label
returnMsg_label = tk.Label(window, textvariable=return_msg, foreground="red", font=("標楷體", 12), padx=30, pady=20)
returnMsg_label.pack()

設定功能按鈕,並可觸發自行撰寫的 BMI function

# 設定 Button
bmi_button = tk.Button(window, text="BMI 測量", foreground="blue", font=("標楷體", 12), padx=30, pady=20, command=BMI)
bmi_button.pack()

執行視窗程式需要使用到 mainloop() 函數,將此視窗加入事件監視迴圈,才會產生 GUI 視窗

window.mainloop()

撰寫 BMI 計算測量的 function,並設定將顯示的 BMI 數值與評語回傳

def BMI():
    # BMI 計算,四捨五入取到小數第二位
    BMI_value = round(weight_msg.get() / ((height_msg.get() / 100) ** 2),2)
    
    #回傳結果,設定 return_msg 數值及評語
    return_msg.set("BMI 計算後數值 = " + str(BMI_value) + "\n" + BMI_Status(BMI_value))

撰寫透過 BMI 指數,回傳相對應評語的 function

# 透過 BMI 指數,回傳相對應評語
def BMI_Status(BMI_value):
    if BMI_value < 18.5:
        return "BMI 過低,體重過輕"
    elif BMI_value < 24:
        return "BMI 正常,標準體位"
    else:
        if BMI_value < 27:
            return "BMI 過高,體重過重"
        elif BMI_value < 30:
            return "BMI 過高,輕度肥胖"
        elif BMI_value < 35:
            return "BMI 過高,中度肥胖"
        else:
            return "BMI 過高,重度肥胖"

完整代碼

# 導入套件
import tkinter as tk

# 建立主視窗
window = tk.Tk()
# 設定主視窗大小
window.geometry("800x600")
# 設定主視窗標題
window.title("圖形化範例-BMI測量")

# 需要主視窗建立後才可建立,否則會報錯
return_msg = tk.StringVar() # BMI 回傳值
height_msg = tk.IntVar() # 身高
weight_msg = tk.IntVar() # 體重

# 設定身高 Label 
height_label = tk.Label(window, text="請輸入身高:", foreground="red", font=("標楷體", 12), padx=30, pady=20)
height_label.pack()

# 設定身高 Entry
height_entry = tk.Entry(window, foreground="green", textvariable=height_msg)
height_entry.pack()

# 設定 Label
weight_label = tk.Label(window, text="請輸入體重:", foreground="red", font=("標楷體", 12), padx=30, pady=20)
weight_label.pack()

# 設定 Entry
weight_entry = tk.Entry(window, foreground="green", textvariable=weight_msg)
weight_entry.pack()

# 設定回應值 Label
returnMsg_label = tk.Label(window, textvariable=return_msg, foreground="red", font=("標楷體", 12), padx=30, pady=20)
returnMsg_label.pack()

# 設定 Button
bmi_button = tk.Button(window, text="BMI 測量", foreground="blue", font=("標楷體", 12), padx=30, pady=20, command=BMI)
bmi_button.pack()

window.mainloop()

def BMI():
    # BMI 計算,四捨五入取到小數第二位
    BMI_value = round(weight_msg.get() / ((height_msg.get() / 100) ** 2),2)
    
    #回傳結果,設定 return_msg 數值及評語
    return_msg.set("BMI 計算後數值 = " + str(BMI_value) + "\n" + BMI_Status(BMI_value))

# 透過 BMI 指數,回傳相對應評語
def BMI_Status(BMI_value):
    if BMI_value < 18.5:
        return "BMI 過低,體重過輕"
    elif BMI_value < 24:
        return "BMI 正常,標準體位"
    else:
        if BMI_value < 27:
            return "BMI 過高,體重過重"
        elif BMI_value < 30:
            return "BMI 過高,輕度肥胖"
        elif BMI_value < 35:
            return "BMI 過高,中度肥胖"
        else:
            return "BMI 過高,重度肥胖"

執行後的畫面:
https://i.imgur.com/WG7DwDB.gif

結論

上述為視窗化程式的撰寫使用方法,給予不便使用 Command line 的情況下,有較方便的使用方法
其實,還有許多的使用方式並未敘述,若有興趣的話,請自行 Google 一下吧

「此文領進門,修行在個人啊」


上一篇
[2020鐵人賽Day24]糊裡糊塗Python就上手-數據化圖之術(下)
下一篇
[2020鐵人賽Day26]糊裡糊塗Python就上手-Numpy的觀念與運用(上)
系列文
糊裡糊塗Python就上手30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
0123456
iT邦新手 5 級 ‧ 2022-06-18 00:45:37

你好想問一下自己在練習這組代碼時
打到這行時bmi_button.pack()
出現SyntaxError: invalid syntax
想問這是什麼狀況
謝謝

Old Siao iT邦研究生 1 級 ‧ 2022-06-22 12:58:06 檢舉

invalid syntax 無效的語法,就是所謂的語法錯誤
這要自行查看一下是否你的代碼撰寫是否是正確的
/images/emoticon/emoticon13.gif

我要留言

立即登入留言