3. 視窗版面配置

元件排列

元件排列方式常用的有pack()和grid()兩種通用方法，說明如下表：

方法	說明
pack()	此方法使用 side 參數指定元件在容器物件上的放置位置。預設由上往下放置。side 可指定的參數有 top、left、right、bottom，依序代表的放置位置為上、左、右、下。
grid()	以表格的方式進行排列。語法如下： `grid(row=列, column=行)` 如下表格可以模擬為視窗。若寫法為 `lbl.grid(row=1, column=2)` 表示 lbl 會放在灰底的位置，即第 2 列第 3 行的位置。 \| [0,0] \| [0,1] \| [0,2] \| \| [1,0] \| [1,1] \| [1,2] \|

pack()

[簡例] 依序將四個熱門動漫人物標籤放置在視窗的上左右下四個位置。 (檔名:pack01.py)

[結果]

程式碼: pack01.py

# 匯入 Python 內建的 Tkinter GUI 套件，並簡寫為 tk
import tkinter as tk
# 建立主視窗物件 win
win = tk.Tk()
# 設定視窗標題列顯示的文字為 `'熱門動漫人物'`
win.title('熱門動漫人物')
# 設定視窗尺寸為 寬 350 像素、高 100 像素。
win.geometry('350x100')
# 建立 Label（標籤）元件，4 個標籤元件，背景顏色（bg）皆統一設定為黃色（yellow）
lbltop = tk.Label(win, text='火影忍者-鳴人', bg='yellow')
lblleft = tk.Label(win, text='航海王-魯夫', bg='yellow')
lblright = tk.Label(win, text='天兵公園-鳥哥', bg='yellow')
lblbottom = tk.Label(win, text='櫻桃小丸子-小丸子', bg='yellow')
# 利用 '.pack(side=...)' 進行方位排版
# pack() 是 Tkinter 的預設排版器，透過設定 side 參數可以決定元件貼附在父容器的哪一個邊緣
lbltop.pack(side='top')    # 將「鳴人」標籤貼附在視窗的頂部（Top）
lblleft.pack(side='left')  # 將「魯夫」標籤貼附在剩餘空間的左側（Left）
lblright.pack(side='right') # 將「鳥哥」標籤貼附在剩餘空間的右側（Right）
lblbottom.pack(side='bottom') # 將「小丸子」標籤貼附在剩餘空間的底部（Bottom）
# 啟動主視窗的事件監聽循環，保持視窗顯示狀態
win.mainloop()

說明

第5-8行: 建立四個標籤。

第9~12行: 將四個標籤放在視窗的上左右下的位置中。

pack() 進階參數：fill、expand、padx、pady

除了side參數，pack()還有幾個常用參數，用來控制元件是否隨視窗縮放、以及元件與周圍的間距，尤其在畫面有多個容器（Frame）互相堆疊時特別常用：

參數	說明
fill	設定元件是否隨容器縮放方向延展佔滿空間，可指定`'x'`（水平方向延展）、`'y'`（垂直方向延展）、`'both'`（水平垂直都延展）、`'none'`（預設值，不延展）。
expand	設定為`True`時，元件會分配到父容器所有剩餘的多餘空間；預設值為`False`，元件只佔用剛好容納自己內容的空間。
padx	設定元件與其他元件（或容器邊緣）之間的水平外部間距。
pady	設定元件與其他元件（或容器邊緣）之間的垂直外部間距。

如下寫法建立一個LabelFrame容器，並用fill='x'讓它隨視窗寬度延展、padx/pady留出與視窗邊緣的間距；底下的Treeview清單則用fill='both', expand=True，讓它同時隨視窗寬度與高度延展，並在視窗縮放時分配到多餘空間：

程式碼: pack02.py

# 引入 ttk 模組 
import tkinter as tk 
from tkinter import ttk 
# 建立主視窗 
win = tk.Tk()
win.title('學生資料管理系統') 
win.geometry('500x350') 
 
# 定義欄位名稱清單 
columns = ('id', 'name', 'score')
# 建立標籤框架: 指定父容器為主視窗、標題文字為 '學生資料'
frame = ttk.LabelFrame(win, text='學生資料')
# 將框架放入視窗中並進行排版
# fill='x' 讓框架在水平方向（X軸）自動填滿拉伸
# padx=10  設定左右外距（Padding）為 10 像素。
# pady=5   設定上下外距為 5 像素。
frame.pack(fill='x', padx=10, pady=5)
# 建立資料表格（Treeview），指定放置在主視窗 win 中
# columns=columns 指定表格欄位名稱的列表
# 隱藏預設的樹狀圖第一欄（#0 欄），只顯示自訂的欄位標頭，使其呈現為標準的資料表格（Table）形式。
tree = ttk.Treeview(win, columns=columns, show='headings')
# 將表格放入視窗中並設定隨視窗自動縮放
# fill='both'`：讓表格在水平與垂直方向（X 與 Y 軸）都填滿剩餘空間。
# expand=True 當使用者拉大視窗時，允許表格自動擴展佔據額外的空間。
# 設定左右外距 10 像素、上下外距 5 像素。
tree.pack(fill='both', expand=True, padx=10, pady=5)
win.mainloop()

fill與expand兩者搭配使用效果不同：只設定fill='x'，元件寬度會撐滿容器，但視窗變高時元件不會跟著變高；若再加上expand=True，元件才會連同高度一起分配到父容器多出來的空間。

grid

網格佈局結果示意圖

這段程式碼建立了一個 $3 \times 4$ （3 列橫列、4 欄直欄）的棋盤式空間。當所有元件定位完成後，視覺上的分佈如下表：

	Column 0 (第 0 欄)	Column 1 (第 1 欄)	Column 2 (第 2 欄)	Column 3 (第 3 欄)
Row 0 (第 0 列)	火影忍者-鳴人	(自動壓縮)	(自動壓縮)	航海王-魯夫
Row 1 (第 1 列)	(空白)	(自動壓縮)	天兵公園-鳥哥	(空白)
Row 2 (第 2 列)	(空白)	櫻桃小丸子-小丸子	(空白)

擺放步驟拆解說明

lbl00.grid(row=0, column=0)
- 定位在最左上角的原點位置 $(0, 0)$ ，顯示 「火影忍者-鳴人」。
lbl03.grid(row=0, column=3)
- 與鳴人同在最上方（row=0），但放置於第 3 欄（column=3），顯示 「航海王-魯夫」。
lbl12.grid(row=1, column=2)
- 移動到第二列（row=1），放在第 2 欄（column=2），顯示 「天兵公園-鳥哥」。
lbl21.grid(row=2, column=1)
- 移動到第三列（row=2），放在第 1 欄（column=1），顯示 「櫻桃小丸子-小丸子」。

[簡例] 將表格中的動漫人物依表格排列方式放置於視窗中。 (檔名:grid01.py)

[結果]

程式碼: grid01.py

# 匯入 Tkinter 模組並命名為 `tk`
import tkinter as tk
# 建立主視窗物件 win
win = tk.Tk()
# 設定標題為 '熱門動漫人物'，尺寸為 寬 350px、高 100px
win.title('熱門動漫人物')
win.geometry('350x100')
# 建立 Label（標籤）元件，4 個背景為黃色（yellow）的文字標籤，分別代表不同的動漫角色
lbl00 = tk.Label(win, text='火影忍者-鳴人', bg='yellow')
lbl03 = tk.Label(win, text='航海王-魯夫', bg='yellow')
lbl12 = tk.Label(win, text='天兵公園-鳥哥', bg='yellow')
lbl21 = tk.Label(win, text='櫻桃小丸子-小丸子', bg='yellow')
# 利用 '.grid()' 進行網格定位
# grid() 的座標起點 (0, 0) 為左上角，row 代表橫向的「列/行」（由上而下遞增），column 代表縱向的「欄」（由左而右遞增）
lbl00.grid(row=0, column=0) # 將「鳴人」放在網格的 第 0 行、第 0 欄（左上角）
lbl03.grid(row=0, column=3) # 將「魯夫」放在網格的 第 0 行、第 3 欄（同在第一橫列，但向右跨過了中間的欄位）。
lbl12.grid(row=1, column=2) # 將「鳥哥」放在網格的 **第 1 行、第 2 欄（第二橫列、第三直欄）
lbl21.grid(row=2, column=1) # 將「小丸子」放在網格的 **第 2 行、第 1 欄**（第三橫列、第二直欄）
# 啟動主視窗的事件循環，維持畫面顯示
win.mainloop()

description	—
tags	python
date	2026-07-23

課程名稱： Python 程式語言

探索