本教程是博主個人心血，未經允許不可引用，引用必舉報，舉報必封號。
博主個人部落格【魏大王官網】，內容更精彩！！

《tkinter實用教程一》Linux 環境下安裝tkinter

《tkinter實用教程二》tkinter 子模組 ttk

《tkinter實用教程三》tkinter Button 控制元件

《tkinter實用教程四》tkinter 佈局管理 Grid

tkinter 列表佈局管理 Grid

在學習其他控制元件之前，我們需要先了解 tkinter 佈局管理概念（解決控制元件放在哪裡的問題）。

雖然， tkinter 提供了多種控制佈局的方式，但我還是建議使用 grid 處理所有佈局問題。

下面，本文將聚焦 grid 佈局管理方式，如果你有學習其他佈局方式的需要，可以留言給我，我會在後繼章節優先更新其他佈局方式。

行與列

在 grid 佈局中的所有控制元件都會被賦予一個行號和一個列號，這是每個控制元件相對於其他控制元件位置的憑證。

同一列控制元件上下排布，同一行控制元件左右排布。

行與列的寬度和高度由內部的控制元件決定，在使用 grid 佈局時，不需要關注行和列的大小。

使用 grid 佈局

使用 grid 按鈕非常簡單，只需要在建立控制元件之後，指定控制元件放置的表格行號和列號就可以了。

示例程式碼如下：

from tkinter import *
from tkinter import ttk

root = Tk()
btn1 = ttk.Button(text="第一個按鈕") # 建立按鈕
btn2 = ttk.Button(text="第二個按鈕")
btn3 = ttk.Button(text="第三個按鈕")
btn1.grid(column=0,row=0)           # 放置按鈕
btn2.grid(column=1,row=1)
btn3.grid(column=2,row=2)

root.mainloop()
 

以上程式碼建立了三個按鈕，排列在視窗左上到右下的對角線上，如下圖所示：

控制元件跨行、跨列放置

有些時候，會有一些較大的控制元件，需要佔據多行、多列的視窗空間，此時就需要在指定空間位置時額外指定佔據的行數和列數。

示例程式碼如下：

from tkinter import *
from tkinter import ttk

root = Tk()
s = ttk.Style()
s.configure('1.TFrame',background='red')

btn1 = ttk.Button(root,text="第一個按鈕") # 建立按鈕
btn2 = ttk.Button(root,text="第二個按鈕")
ety1 = ttk.Entry(root)
frm  = ttk.Frame(root,width=200,height=200,style='1.TFrame')

btn1.grid(column=0,row=0)           
btn2.grid(column=1,row=0)
ety1.grid(column=0,row=1,columnspan=2)      # 使用 columnspan 跨越兩列
frm.grid(column=0,row=2,columnspan=2,rowspan=2)


root.mainloop()
 

程式碼執行效果如下：

以上程式碼涉及了兩個還沒有介紹到的控制元件 ttk.Entry 和 ttk.Frame ，後繼都會更新上的。

編寫一個簡單的計算器介面

編寫一個簡單的計算器介面是練習 grid 佈局最有效的方式，下面程式碼就是一個計算器介面的簡單實現：

from tkinter import *
from tkinter import ttk

root = Tk()
s = ttk.Style()
s.configure('1.TFrame',background='red',width=16)
s.configure('1.TButton',width=3)

main = ttk.Frame(root,style='1.TFrame')
ety = ttk.Entry(main,width=17)
btn_add = ttk.Button(main,text=' + ',style='1.TButton')
btn_ac = ttk.Button(main,text="AC",style='1.TButton')
btn_del = ttk.Button(main,text="Del",style='1.TButton')
btn_mol = ttk.Button(main,text=" % ",style="1.TButton")
btn_div = ttk.Button(main,text=' ÷ ',style="1.TButton")
btn_7 = ttk.Button(main,text=" 7 ",style='1.TButton')
btn_8 = ttk.Button(main,text=" 8 ",style='1.TButton')
btn_9 = ttk.Button(main,text=" 9 ",style="1.TButton")
btn_times = ttk.Button(main,text=' × ',style="1.TButton")
btn_4 = ttk.Button(main,text=" 4 ",style='1.TButton')
btn_5 = ttk.Button(main,text=" 5 ",style='1.TButton')
btn_6 = ttk.Button(main,text=" 6 ",style="1.TButton")
btn_minus = ttk.Button(main,text=' - ',style="1.TButton")
btn_1 = ttk.Button(main,text=" 1 ",style='1.TButton')
btn_2 = ttk.Button(main,text=" 2 ",style='1.TButton')
btn_3 = ttk.Button(main,text=" 3 ",style="1.TButton")
btn_add = ttk.Button(main,text=' + ',style="1.TButton")
btn_dot = ttk.Button(main,text=" . ", style="1.TButton")
btn_0 = ttk.Button(main,text=" 0 ",style="1.TButton")
btn_eq = ttk.Button(main,text=" + ",width=7)


ety.grid(column=0,row=0,columnspan=4,sticky=(E,W))
btn_ac.grid(row=1,column=0,sticky=(E,W))
btn_del.grid(row=1,column=1,sticky=(E,W))
btn_mol.grid(row=1,column=2,sticky=(E,W))
btn_div.grid(row=1,column=3,sticky=(E,W))
btn_7.grid(row=2,column=0,sticky=(E,W))
btn_8.grid(row=2,column=1,sticky=(E,W))
btn_9.grid(row=2,column=2,sticky=(E,W))
btn_times.grid(row=2,column=3,sticky=(E,W))
btn_4.grid(row=3,column=0,sticky=(E,W))
btn_5.grid(row=3,column=1,sticky=(E,W))
btn_6.grid(row=3,column=2,sticky=(E,W))
btn_minus.grid(row=3,column=3,sticky=(E,W))
btn_1.grid(row=4,column=0,sticky=(E,W))
btn_2.grid(row=4,column=1,sticky=(E,W))
btn_3.grid(row=4,column=2,sticky=(E,W))
btn_add.grid(row=4,column=3,sticky=(E,W))
btn_dot.grid(row=5,column=0,sticky=(E,W))
btn_0.grid(row=5,column=1,sticky=(E,W))
btn_eq.grid(row=5,column=2,columnspan=2,sticky=(E,W))
main.grid(column=0,row=0,sticky=(E,W,N,S))
main.columnconfigure(0,weight=1)
main.columnconfigure(1,weight=1)
main.columnconfigure(2,weight=1)
main.columnconfigure(3,weight=1)
root.rowconfigure(0,weight=1)
root.columnconfigure(0,weight=1)

root.mainloop()

這段程式碼中出現了很多之前沒有提到的引數，如果由困惑的地方，就給我留言吧！！

程式碼執行結果：

上述程式碼還有一個故意隱藏的 BUG , 當我們拖拽視窗邊緣，改變視窗大小時，會出現奇怪的現象。

如果我們橫向拖動視窗邊框，使視窗變寬，結果如下：

如果我們縱向拖動視窗邊框，使視窗變高，結果如下：

為什麼會出現這種情況呢？如何解決這種情況呢？趕快留言告訴博主吧！！

博主個人部落格【魏大王官網】，內容更精彩！！

《tkinter實用教程一》Linux 環境下安裝tkinter

《tkinter實用教程二》tkinter 子模組 ttk

《tkinter實用教程三》tkinter Button 控制元件

《tkinter實用教程四》tkinter 佈局管理 Grid