不間斷 Python 挑戰 Day 31 - 使用tkinter開發GUI程式：視窗元件配置

Wei-Jie Weng

更新於 2022/04/26發佈於 2022/04/26閱讀時間約 33 分鐘

繼上一篇文章介紹了多種tkinter的視窗元件後，這篇我們再來討論三種視窗元件的配置方法以及優缺點，以適當移動各個元件到視窗中指定的位置，讓整個視窗版面的配置看起來更合理且美觀。

這三種配置方法包括：

pack()方法
place()方法
grid()方法

以下就一一來說明。

grid()方法

grid()方法是將視窗分成格狀，依據設定不同的row和column索引值，將元件放入格子中，一個元件可使用一格或多格，索引值預設從0開始，但也可以從其它數字開始計數。

grid()版面配置

row/column參數

row/column參數可用來設定元件在格狀視窗上擺放的位置。以下範例建立三個標籤和兩個文字方塊，依據不同的row和column設定擺放。

from tkinter import *

window = Tk()
window.title("視窗元件配置")
window.geometry("300x100")

label1 = Label(text="label 1", bg="lightyellow")
label2 = Label(text="label 2", bg="yellow")
label3 = Label(text="label 3", bg="lightgreen")

entry1 = Entry()
entry2 = Entry()

label1.grid(row=0, column=1)
label2.grid(row=1, column=0)
label3.grid(row=2, column=0)
entry1.grid(row=1, column=1)
entry2.grid(row=2, column=1)

window.mainloop()

執行結果：

grid()視窗配置

sticky參數

當格子比元件還大時，預設會將元件放在格子的正中央，若要將元件靠某一邊對齊或延伸，便可以使用sticky參數。sticky的參數值如下：

N：對齊格子上方
S：對齊格子下方
E：對齊格子右邊
W：對齊格子左邊

在前例中，若想要使label 1對齊格子左邊可以這樣設定：

from tkinter import *

window = Tk()
window.title("視窗元件配置")
window.geometry("300x100")

label1 = Label(text="label 1", bg="lightyellow")
label2 = Label(text="label 2", bg="yellow")
label3 = Label(text="label 3", bg="lightgreen")

entry1 = Entry()
entry2 = Entry()

label1.grid(row=0, column=1, sticky=W)
label2.grid(row=1, column=0)
label3.grid(row=2, column=0)

entry1.grid(row=1, column=1)
entry2.grid(row=2, column=1)

window.mainloop()

執行結果：

對齊格子左邊

若想要使label 1同時對齊左邊跟右邊，亦即延伸label 1使其占滿格子的寬度，可以這樣設定：

from tkinter import *

window = Tk()
window.title("視窗元件配置")
window.geometry("300x100")

label1 = Label(text="label 1", bg="lightyellow")
label2 = Label(text="label 2", bg="yellow")
label3 = Label(text="label 3", bg="lightgreen")

entry1 = Entry()
entry2 = Entry()

label1.grid(row=0, column=1, sticky=W+E)
label2.grid(row=1, column=0)
label3.grid(row=2, column=0)

entry1.grid(row=1, column=1)
entry2.grid(row=2, column=1)

window.mainloop()

執行結果：

對齊格子左邊及右邊

rowspan/columnspan參數

rowspan/columnspan參數可以合併row/column方向的格子以存放一個元件，例如在前例中，row=0的column=0和column=1可以合併，用來放置label 1，column=0的row=1和row=2可以合併，用來放置label 2，當然此時label 3就必須拿掉或移動位置，否則兩個標籤就會有重疊的可能。

from tkinter import *

window = Tk()
window.title("視窗元件配置")
window.geometry("300x100")

label1 = Label(text="label 1", bg="lightyellow", width=20)
label2 = Label(text="label 2", bg="yellow")
label3 = Label(text="label 3", bg="lightgreen")

entry1 = Entry()
entry2 = Entry()

label1.grid(row=0, column=0, columnspan=2)
label2.grid(row=1, column=0, rowspan=2)

entry1.grid(row=1, column=1)
entry2.grid(row=2, column=1)

window.mainloop()

執行結果：

合併格子

padx/pady參數

和pack()方法的使用方式相同，padx/pady參數可設定元件和元件之間或是元件和視窗邊界之間的水平/垂直距離，單位為像素。

from tkinter import *

window = Tk()
window.title("視窗元件配置")
window.geometry("300x100")

label1 = Label(text="label 1", bg="lightyellow", width=20)
label2 = Label(text="label 2", bg="yellow")
label3 = Label(text="label 3", bg="lightgreen")

entry1 = Entry()
entry2 = Entry()

label1.grid(row=0, column=0, columnspan=2, padx=5, pady=5)
label2.grid(row=1, column=0, padx=5, pady=5)
label3.grid(row=2, column=0, padx=5, pady=5)

entry1.grid(row=1, column=1, padx=5, pady=5)
entry2.grid(row=2, column=1, padx=5, pady=5)

window.mainloop()

執行結果：

增加外間距

ipadx/ipady參數

和pack()方法的使用方式相同，ipadx/ipady參數可設定元件內文字和元件邊界的水平/垂直距離，單位為像素。

from tkinter import *

window = Tk()
window.title("視窗元件配置")
window.geometry("300x100")

label1 = Label(text="label 1", bg="lightyellow", width=20)
label2 = Label(text="label 2", bg="yellow")
label3 = Label(text="label 3", bg="lightgreen")

entry1 = Entry()
entry2 = Entry()

label1.grid(row=0, column=0, columnspan=2, padx=5, pady=5, ipadx=1, ipady=1)
label2.grid(row=1, column=0, padx=5, pady=5, ipadx=1, ipady=1)
label3.grid(row=2, column=0, padx=5, pady=5, ipadx=1, ipady=1)

entry1.grid(row=1, column=1, padx=5, pady=5, ipadx=1, ipady=1)
entry2.grid(row=2, column=1, padx=5, pady=5, ipadx=1, ipady=1)

window.mainloop()

執行結果：

增加內間距

專題：BMI計算機

在if流程控制一文中，我們使用文字介面實作了一個BMI計算機，以展示if判斷式如何應用在實際的程式設計中，一直到這裡談到了GUI程式設計，終於有種從DOS進化到了Windows的感覺，這系列的文章也算完成了一個里程碑。接下來的這段程式碼將BMI計算機改寫成圖形介面，技術或是邏輯上之前都說明過，所以僅附上程式碼以及執行結果。

from tkinter import *

# function
def bmi_button_clicked():
　　# calculate BMI
　　weight = int(BMI_entry_weight.get())
　　height = int(BMI_entry_height.get())

　　if height == 0:
　　　　bmi = 0
　　else:
　　　　bmi = round(weight / (height / 100) ** 2, 1)

# BMI interpretation
　　if bmi == 0:
　　　　BMI_label_bmi_out.config(text=f"{bmi}")
　　　　BMI_label_category_out.config(text="Error!")
　　elif bmi < 18.5:
　　　　BMI_label_bmi_out.config(text=f"{bmi}")
　　　　BMI_label_category_out.config(text="Underweight")
　　elif bmi < 24:
　　　　BMI_label_bmi_out.config(text=f"{bmi}")
　　　　BMI_label_category_out.config(text=f"Normal Weight")
　　elif bmi < 28:
　　　　BMI_label_bmi_out.config(text=f"{bmi}")
　　　　BMI_label_category_out.config(text="Overweight")
　　else:
　　　　BMI_label_bmi_out.config(text=f"{bmi}")
　　　　BMI_label_category_out.config(text=f"Obese")

# window
BMI_window = Tk()
BMI_window.title("BMI calculator")
BMI_window.minsize(width=300, height=200)
BMI_window.config(padx=20, pady=20)

# label
BMI_label_title = Label(width=28, text="BMI calculator", bg="lightyellow", font=("Arial", 12, "normal"))
BMI_label_title.grid(row=0, column=0, columnspan=2, ipadx=2, ipady=2)

BMI_label_height = Label(width=15, text="Height (cm)", bg="yellow", font=("Arial", 10, "normal"))
BMI_label_height.grid(row=1, column=0, padx=5, pady=5)

BMI_label_weight = Label(width=15, text="Weight (kg)", bg="lightgreen", font=("Arial", 10, "normal"))
BMI_label_weight.grid(row=2, column=0, padx=5, pady=5)

BMI_label_bmi = Label(text="BMI：", font=("Arial", 12, "bold"))
BMI_label_bmi.grid(row=4, column=0, padx=5, pady=5)

BMI_label_bmi_out = Label(font=("Arial", 12, "normal"))
BMI_label_bmi_out.grid(row=4, column=1, padx=5, pady=5)

BMI_label_category = Label(text="Category：", font=("Arial", 12, "bold"))
BMI_label_category.grid(row=5, column=0, padx=5, pady=5)

BMI_label_category_out = Label(font=("Arial", 12, "normal"))
BMI_label_category_out.grid(row=5, column=1, padx=5, pady=5)

# entry
BMI_entry_height = Entry(width=20)
BMI_entry_height.grid(row=1, column=1, padx=5, pady=5)

BMI_entry_weight = Entry(width=20)
BMI_entry_weight.grid(row=2, column=1)

# button
BMI_button = Button(width=20, text="Calculate", command=bmi_button_clicked, font=("Arial", 10, "normal"))
BMI_button.grid(row=3, column=0, columnspan=2, padx=5, pady=5)

BMI_window.mainloop()

執行結果：

BMI計算機

總結

在這篇文章中，我們介紹了三種使用tkinter模組設計GUI程式時，元件的版面配置方式，place()方法可直接定位元件的位置，但當元件一多，或是位置需要調整，座標的計算就會變得很繁瑣；pack()方法使用上最簡便，只要將元件由上(下)而下(上)或由左(右)而右(左)依序包裝起來，但使用上便少了一些彈性，無法任意指定位置；grid()算是一種折衷的方式，將視窗分成多個小格子，不用精算到座標，也可以將元件任意插入空的格子，適合用來處理較複雜的頁面。一般而言，pack()和grid()方法用到的機會是比較多的，但還是得根據程式的應用與複雜度來選擇適合的配置方式。

程式範例

https://github.com/wjweng/marathon_python/tree/master/Day31

為什麼會看到廣告

#python

#tkinter

Wei-Jie Weng的沙龍

47會員

36內容數

留言0

查看全部

發表第一個留言支持創作者！

Wei-Jie Weng的沙龍的其他內容

不間斷 Python 挑戰 Day 30 - 使用tkinter開發GUI程式：常用視窗元件

之前的文章中介紹過了Turtle Graphics，它是架構於tkinter模組之上以實現基本圖形介面的繪圖模組，這篇文章就來說明tkinter模組常用元件(widget)的基本用法，以及如何用它來設計出一個具有圖形使用者介面(Graphical User Interface, GUI)的程式。

#python #tkinter #GUI

不間斷 Python 挑戰 Day 29 - 使用Pandas處理CSV文件

在上一篇的文章中，我們提到關於開啟CSV文件的方式，從單純的當作純文字文件開啟，到引入Python內建的csv模組對CSV類型的檔案做基本的讀寫操作，在這篇文章中，我們將再進一步使用Pandas這套強大的工具，來簡化CSV文件處理的流程。

#python #pandas

不間斷 Python 挑戰 Day 28 - 處理CSV文件

CSV全名為Comma-Separated Values，中文稱為逗號分隔值，也可稱為字元分隔值，因為分隔字元也可以不是逗號。它以純文字的形式儲存表格資料，同一列的資料以逗號或其它符號分隔成不同欄位，每一列的資料間以換行符號分隔。網路上很多資料的格式都是以CSV檔案呈現，例如交通部中央氣象局的觀測資

#python #csv

不間斷 Python 挑戰 Day 27 - 檔案、資料夾與路徑

到目前為止，我們都還是在附檔名為.py的Python檔案執行程式碼，當程式需要與外部的檔案互動，例如讀取文字、表格、或是影像來做分析，或是把程式執行的結果儲存下來，就需要能夠存取外部的檔案。例如，在上一節中，當貪食蛇遊戲結束之後，隨著程式停止執行，該次的分數也就被丟棄，若能將分數記錄下來，下次遊戲開

#python #file #path

不間斷 Python 挑戰 Day 26 - 專題：貪食蛇(下)

接續前一篇文章，說明貪食蛇遊戲架構的後半部份，來完成整個遊戲的程式設計。

#python #snakegame

不間斷 Python 挑戰 Day 25 - 專題：貪食蛇(上)

接下來我們會運用之前所學過的各種觀念，包括Turtle 模組、繼承等等，來製作這個大家都熟知的小遊戲－貪食蛇。完成品會長得像下圖這樣，包括可以設定難度(速度)、使用鍵盤的上、下、左、右鍵來移動貪食蛇的移動方向來吃到食物並加長蛇身、以及記分板等。

#python #snakegame

不間斷 Python 挑戰 Day 30 - 使用tkinter開發GUI程式：常用視窗元件

#python #tkinter #GUI

不間斷 Python 挑戰 Day 29 - 使用Pandas處理CSV文件

#python #pandas

不間斷 Python 挑戰 Day 28 - 處理CSV文件