[Python教學] Tkinter:佈局管理 - 打造整齊的界面

更新於 發佈於 閱讀時間約 6 分鐘

嘿,大家好!上次我們往視窗裡丟了標籤、按鈕、輸入框這些小東西,感覺有點熱鬧了吧?不過你有沒有發現,用 pack() 丟進去後,它們就自己排成一列,亂亂的,想調整位置有點麻煩。這次我們要來聊「佈局管理」,教你怎麼把這些元件擺得整整齊齊,像個有條理的大人,而不是隨便亂塞的小孩。準備好啦?來囉!


什麼是佈局管理?

簡單說,佈局管理就是決定視窗裡的東西要擺哪、怎麼排。Tkinter 有三招幫你搞定這件事:pack()grid()place()。上次我們用過 pack(),這次我們要把三招都玩一遍,告訴你什麼時候用哪招最順手。


第一招:pack() - 簡單堆疊

pack() 是最懶人的一招,適合不想動太多腦的時候。它會自動把元件堆起來,像疊積木一樣,預設是從上往下排。

來試試:

import tkinter as tk

window = tk.Tk()
window.title("Pack 測試")
window.geometry("300x200")

label = tk.Label(window, text="我是標籤", bg="lightblue")
label.pack()

button = tk.Button(window, text="點我")
button.pack()

entry = tk.Entry(window)
entry.pack()

window.mainloop()
raw-image


跑一下,東西就一條直線往下排,乾淨但有點單調。如果想橫著排,可以加個 side:

label.pack(side="left")  # 靠左
button.pack(side="left") # 繼續往左邊擠
entry.pack(side="left")
raw-image


這下它們會從左往右排,像排隊買便當一樣。但問題是,pack() 不太靈活,位置不好微調,適合簡單的東西。


第二招:grid() - 像表格一樣整齊

如果 pack() 是懶人招,那 grid() 就是有條理控的最愛!它把視窗當成一個表格,你可以指定每個元件在第幾行、第幾列,超好用。

來做個簡單的登入介面:

import tkinter as tk

window = tk.Tk()
window.title("登入視窗")
window.geometry("300x200")

# 第一行:帳號標籤和輸入框
tk.Label(window, text="帳號:").grid(row=0, column=0)
tk.Entry(window).grid(row=0, column=1)

# 第二行:密碼標籤和輸入框
tk.Label(window, text="密碼:").grid(row=1, column=0)
tk.Entry(window, show="*").grid(row=1, column=1) # show="*" 把密碼變星星

# 第三行:登入按鈕
tk.Button(window, text="登入").grid(row=2, column=1)

window.mainloop()
raw-image


跑跑看!是不是像個小表格?

  • row 和 column:指定行和列,從 0 開始數。
  • show="*":輸入框裡的字會變成星星,很適合密碼欄。

想讓它更好看點,可以加點間距:

tk.Label(window, text="帳號:").grid(row=0, column=0, padx=5, pady=5)
tk.Entry(window).grid(row=0, column=1, padx=5, pady=5)
raw-image


padx 和 pady 是水平和垂直的間距,單位是像素,這樣就不會擠在一起啦。


第三招:place() - 精準定位

如果你是完美主義者,喜歡把東西擺得一絲不苟,那 place() 就是你的菜。它讓你用坐標(x, y)直接指定位置,像在畫布上畫畫一樣。

試試這個:

import tkinter as tk

window = tk.Tk()
window.title("Place 測試")
window.geometry("300x200")

label = tk.Label(window, text="我在正中間!")
label.place(x=100, y=80)

button = tk.Button(window, text="我在角落")
button.place(x=200, y=150)

window.mainloop()
raw-image


跑起來,標籤和按鈕會乖乖待在你指定的位置。

  • x 和 y:從視窗左上角(0, 0)開始算的坐標。
  • 優點:超精準,想放哪就放哪。
  • 缺點:視窗大小變了,位置不會自動調整,有點麻煩。


三招怎麼選?

  • pack():簡單快速,適合單排的東西,像導覽列或一堆按鈕。
  • grid():表格型佈局,適合表單、計算器這種有規律的設計。
  • place():需要像素級控制時用,比如自訂遊戲介面。

通常我會建議先學好 grid(),因為它靈活又直觀,用的機會最多。


小挑戰:動手排排看

好了,輪到你啦!試著用 grid() 做一個簡單的聯絡人表單,包含:

  1. 三行標籤和輸入框:姓名、電話、信箱。
  2. 第四行放個「送出」按鈕,擺在右邊。
  3. 加點 padx 和 pady,讓它看起來舒服點。

做完跑跑看,輸入點假資料試試,感覺自己是不是越來越厲害了?

raw-image



結語

今天我們把視窗從亂七八糟變得整整齊齊,學會了 pack()、grid() 和 place() 三招。怎麼樣,現在是不是覺得元件聽話多了?下次我們要讓這些東西動起來,聊聊「事件處理」,讓按鈕不只是裝飾品。有啥問題隨時問我,我們下篇見啦!


留言
avatar-img
留言分享你的想法!
avatar-img
追極光的北極熊|軟體工程師的小天地
9會員
150內容數
歡迎來到我的部落格!這裡記錄了軟體工程師的日常生活點滴,並分享程式設計與演算法的實用教學。無論你是初學者還是有經驗的開發者,都能在這裡找到深入淺出的技術解析與實戰技巧。此外,我也會分享工作中的心路歷程與學習心得,讓你不僅學到技術,更能瞭解軟體開發的實際應用與挑戰。希望透過這個平台,能與你共同成長,激發對技術的熱情!
2025/04/28
當我們開發程式時,功能能正常運作固然重要,但在資料量變大或執行時間變長時,效能就成為不可忽視的一環。尤其在 Web 應用、資料分析或科學運算中,程式跑得快與否,直接影響使用者體驗與系統成本。
2025/04/28
當我們開發程式時,功能能正常運作固然重要,但在資料量變大或執行時間變長時,效能就成為不可忽視的一環。尤其在 Web 應用、資料分析或科學運算中,程式跑得快與否,直接影響使用者體驗與系統成本。
2025/04/22
嘿,大家好!上篇教學文章我們做出了一個待辦事項清單,已經有點小工具的感覺了吧?今天我們要再升級,來做個「簡單記事本」。這個專案不只可以寫東西,還能存檔、讀檔,甚至換字體大小,感覺就像自己寫了個迷你軟體!
2025/04/22
嘿,大家好!上篇教學文章我們做出了一個待辦事項清單,已經有點小工具的感覺了吧?今天我們要再升級,來做個「簡單記事本」。這個專案不只可以寫東西,還能存檔、讀檔,甚至換字體大小,感覺就像自己寫了個迷你軟體!
2025/04/16
嘿,大家好!走到這一步,我們已經玩過 Tkinter 的基本招式、佈局、事件處理,還搞了些進階元件,應該有點信心了吧?今天我們要把這些功夫練成一套連招,來做個實用的「待辦事項清單」(To-Do List),順便聊聊怎麼把程式寫得更漂亮、更好用。準備好了嗎?這就上場啦!
2025/04/16
嘿,大家好!走到這一步,我們已經玩過 Tkinter 的基本招式、佈局、事件處理,還搞了些進階元件,應該有點信心了吧?今天我們要把這些功夫練成一套連招,來做個實用的「待辦事項清單」(To-Do List),順便聊聊怎麼把程式寫得更漂亮、更好用。準備好了嗎?這就上場啦!
看更多
你可能也想看
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
全球科技產業的焦點,AKA 全村的希望 NVIDIA,於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1,實際日曆期間為今年二到四月),交出了打敗了市場預期的成績單。然而,在銷售持續高速成長的同時,川普政府加大對於中國的晶片管制......
Thumbnail
全球科技產業的焦點,AKA 全村的希望 NVIDIA,於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1,實際日曆期間為今年二到四月),交出了打敗了市場預期的成績單。然而,在銷售持續高速成長的同時,川普政府加大對於中國的晶片管制......
Thumbnail
重點摘要: 6 月繼續維持基準利率不變,強調維持高利率主因為關稅 點陣圖表現略為鷹派,收斂 2026、2027 年降息預期 SEP 連續 2 季下修 GDP、上修通膨預測值 --- 1.繼續維持利率不變,強調需要維持高利率是因為關稅: 聯準會 (Fed) 召開 6 月利率會議
Thumbnail
重點摘要: 6 月繼續維持基準利率不變,強調維持高利率主因為關稅 點陣圖表現略為鷹派,收斂 2026、2027 年降息預期 SEP 連續 2 季下修 GDP、上修通膨預測值 --- 1.繼續維持利率不變,強調需要維持高利率是因為關稅: 聯準會 (Fed) 召開 6 月利率會議
Thumbnail
在本章中,我們探討了CSS Grid佈局的基本概念和應用。CSS Grid提供了一個強大而靈活的二維佈局系統,使得處理複雜的網頁佈局變得更加簡單和直觀。我們學習了如何設置Grid容器和Grid項目,以及如何使用各種Grid屬性來定義和管理佈局。
Thumbnail
在本章中,我們探討了CSS Grid佈局的基本概念和應用。CSS Grid提供了一個強大而靈活的二維佈局系統,使得處理複雜的網頁佈局變得更加簡單和直觀。我們學習了如何設置Grid容器和Grid項目,以及如何使用各種Grid屬性來定義和管理佈局。
Thumbnail
打開 jupyter notebook 寫一段 python 程式,可以完成五花八門的工作,這是玩程式最簡便的方式,其中可以獲得很多快樂,在現今這種資訊發達的時代,幾乎沒有門檻,只要願意,人人可享用。 下一步,希望程式可以隨時待命聽我吩咐,不想每次都要開電腦,啟動開發環境,只為完成一個重複性高
Thumbnail
打開 jupyter notebook 寫一段 python 程式,可以完成五花八門的工作,這是玩程式最簡便的方式,其中可以獲得很多快樂,在現今這種資訊發達的時代,幾乎沒有門檻,只要願意,人人可享用。 下一步,希望程式可以隨時待命聽我吩咐,不想每次都要開電腦,啟動開發環境,只為完成一個重複性高
Thumbnail
在離線環境需要安裝Python套件時就相當的麻煩,需要先下載好套件包,在打指令安裝,若套件數量一多時就會相當麻煩。 本文將介紹如何利用兩行指令快速的安裝整個資料夾的套件。
Thumbnail
在離線環境需要安裝Python套件時就相當的麻煩,需要先下載好套件包,在打指令安裝,若套件數量一多時就會相當麻煩。 本文將介紹如何利用兩行指令快速的安裝整個資料夾的套件。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
Anytype主要分為四區塊:目錄欄(Widget組成)、主編輯畫面、導航選單、設定區。
Thumbnail
Anytype主要分為四區塊:目錄欄(Widget組成)、主編輯畫面、導航選單、設定區。
Thumbnail
你是不是常常覺得自己的螢幕空間被 windows 底下的工作列占用而心煩意亂呢? 本篇我就來教教大家怎麼隱藏工具列 😎😎😎
Thumbnail
你是不是常常覺得自己的螢幕空間被 windows 底下的工作列占用而心煩意亂呢? 本篇我就來教教大家怎麼隱藏工具列 😎😎😎
Thumbnail
先前學到自定函式的使用方法,那如果在一個很龐大的程式架構中發散了一推自定函式,有沒有辦法可以整理一下,讓程式結構整齊又簡潔呢? 可以使用裝飾器staticmethod 定義靜態方法,全部整理到一個類別去,想像成是一個工具箱的概念,工具箱就是類別,靜態方法就像是裡面的工具一樣。
Thumbnail
先前學到自定函式的使用方法,那如果在一個很龐大的程式架構中發散了一推自定函式,有沒有辦法可以整理一下,讓程式結構整齊又簡潔呢? 可以使用裝飾器staticmethod 定義靜態方法,全部整理到一個類別去,想像成是一個工具箱的概念,工具箱就是類別,靜態方法就像是裡面的工具一樣。
Thumbnail
題目敘述 題目會給我們一組定義好的界面和需求,要求我們設計一個資料結構,可以滿足平均O(1)的插入元素、刪除元素、隨機取得元素的操作。 RandomizedSet() 類別建構子 bool insert(int val) 插入元素的function界面 bool remove(int val
Thumbnail
題目敘述 題目會給我們一組定義好的界面和需求,要求我們設計一個資料結構,可以滿足平均O(1)的插入元素、刪除元素、隨機取得元素的操作。 RandomizedSet() 類別建構子 bool insert(int val) 插入元素的function界面 bool remove(int val
Thumbnail
在日常中我們都會將很多事物定上了一個標籤,例如將商品標記價格,替孩子取姓名,公司上冠上職稱等等。 在Python中也有這種方法,就是字典的形式{ 'name' : 'crab', 'apple', 1000 }去呈現
Thumbnail
在日常中我們都會將很多事物定上了一個標籤,例如將商品標記價格,替孩子取姓名,公司上冠上職稱等等。 在Python中也有這種方法,就是字典的形式{ 'name' : 'crab', 'apple', 1000 }去呈現
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News