介面元素排版基礎 (grid, pack)

1. 在 Tkinter 中的元素排版方法

你可能已經注意到，圖形介面不僅僅是散落在螢幕上的按鈕和文字框。它是一個結構良好且符合人體工學的應用程式，每個細節都在它應有的位置。Tkinter 提供了三種主要的排版方法：pack、grid 和 place。今天我們將聚焦於 pack 和 grid，將 place 留給更複雜的排版或需要絕對位置的情況。

認識 pack

pack 方法是一種簡單且直觀的方式，用於放置小工具。它按照「先來後到」的原則排版元素，可以快速輕鬆地組織界面。但由於它的簡單性，它並不總是提供對元素精確位置的完全控制。

pack 的使用範例

import tkinter as tk

root = tk.Tk()
root.title("pack 排版範例")

# 建立一些小工具
label = tk.Label(root, text="我是標籤")
button = tk.Button(root, text="我是按鈕")

# 使用 pack 放置小工具
label.pack()
button.pack()

root.mainloop()

在這個範例中，label 和 button 像朋友排隊買咖啡一樣，相互疊放。也許 Starbucks 的人知道這是怎麼回事！

認識 grid

如果 pack 像是一個有趣而混亂的派對，那麼 grid 就像一個經典的圖書館，每本書（也就是小工具）都有它的確切位置。grid 方法可以將元素以表格形式排列，提供精確的定位控制。你可以自己決定哪些元素應該靠在哪些旁邊。

grid 的使用範例

import tkinter as tk

root = tk.Tk()
root.title("grid 排版範例")

# 建立按鈕
buttons = [
    "1", "2", "3",
    "4", "5", "6",
    "7", "8", "9",
    "0", "+", "="
]

# 將按鈕加入網格
row_val = 0
col_val = 0

for button in buttons:
    btn = tk.Button(root, text=button, width=5)
    btn.grid(row=row_val, column=col_val)
    col_val += 1
    if col_val > 2:
        col_val = 0
        row_val += 1

root.mainloop()

在這個範例中，grid 中的按鈕就像早晨的點名一樣排列整齊，看起來更有組織性和專業感。

2. 使用 pack 進行排版

pack 方法有幾種模式，可以控制元素之間的相對嵌入方式。它支持例如 side、fill、expand 和 padx/pady 等參數。

設定 pack

• side: 定義元素將位於父容器的哪一側。可以是 TOP、BOTTOM、LEFT 或 RIGHT。
• fill: 元素是否填滿其自由空間。例如，X 會水平填滿，而 Y 會垂直填滿。
• expand: 通知排版管理器，如果有多餘的空間，元素是否應該占用。
• padx/pady: 設置水平和垂直的邊距。

pack 的進階使用範例

import tkinter as tk

root = tk.Tk()
root.title("pack 進階範例")

tk.Label(root, text="上面").pack(side=tk.TOP, fill=tk.X)
tk.Label(root, text="下面").pack(side=tk.BOTTOM, fill=tk.X)
tk.Label(root, text="左邊").pack(side=tk.LEFT, fill=tk.Y)
tk.Label(root, text="右邊").pack(side=tk.RIGHT, fill=tk.Y)

root.mainloop()

3. 使用 grid 進行網格排版

grid 方法更為複雜，需要理解如何與網格和單元格協作。但一旦掌握了它，你可以創建任何複雜程度的界面。

設定 grid

• row / column: 定義元素在的行或列。
• rowspan / columnspan: 定義元素占用的行數或列數。
• sticky: 定義元素如何「貼附」在單元格的邊框上。參數可以是 N、E、S、W 或它們的組合。

grid 的進階使用範例

import tkinter as tk

root = tk.Tk()
root.title("grid 進階範例")

# 建立標籤並將其放入網格中
tk.Label(root, text="行 0, 列 0").grid(row=0, column=0, sticky="W")
tk.Label(root, text="行 0, 列 1").grid(row=0, column=1, sticky="E")
tk.Label(root, text="行 1, 列 0").grid(row=1, column=0, columnspan=2)

root.mainloop()

4. 實際應用和常見錯誤

有時候可能會忍不住只使用一種排版方法，但實際上經常需要將它們結合使用。常見的錯誤包括忘記呼叫 mainloop，錯誤指定行或列的索引，未使用 expand 和 fill 當需要時。為避免在介面設計中感到頭疼，始終檢查 pack 或 grid 的調用順序，並確保正確使用其參數。

pack 和 grid 的區別在於靈活性和對元素位置的控制。pack 適合簡單的垂直或水平界面，而 grid 完美適合需要精確元素位置的複雜佈局。

現在，當你準備好使用這些排版方法開發自己的界面時，請記住，將小工具放置在螢幕上就像舉辦了一個派對，每個人都應該覺得舒適。有人更喜歡靠著牆，有人想在房間中央走動，但每個人都應該覺得自己在對的地方。動起來，打造令人驚艷的介面吧！