tkinter-grid佈局詳解

前文tkinter-pack佈局詳解介紹了pack佈局，相信對tkinter的佈局套路有了一定的瞭解。本文將介紹另一種佈局類grid。

同樣，展示佈局類與控件類的類間關係：

grid

grid從字面意思上可以推斷，這種佈局方式就像網格一樣來分佈控件。那麼具體會呈現什麼樣的效果，要怎麼編碼控制呢。同樣的套路，通過實例來進行直觀的講解。

widget.grid(cnf={}, **kw)

默認分佈

from tkinter import (Tk, Button)
from tkinter.constants import RIGHT, LEFT, X, Y, BOTH

main_win = Tk()
main_win.title('漁道的pack佈局')
width = 300 
height = 300 
main_win.geometry(f'{width}x{height}')
# print(main_win.keys())

apple_color = 'Crimson'
banana_color = 'Yellow'
orange_color = 'Orange'
grape_color = 'Purple'

fruit = {'apple':'Crimson', 'banana':'Yellow', 'orange':'Orange', 'grape':'Purple'}

# 默認顯示效果
for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.grid()
    print(bt.grid_info())

main_win.mainloop()

print函數的打印信息如下：

可以看出4個按鈕默認分佈在第0列(column屬性)，然後依次分佈在第0-3行(row屬性)，列間隔(columnspan)爲1，行間隔(rowspan)爲1，sticky屬性相當於pack的anchor屬性但是不完全相同，後面會具體講解。

從上面的例子可以看出，使用grid佈局時，可以想象，在主窗口上 隱式的佈滿網格(cell)，子控件(如，按鈕)就會被放在這些網格中。

column

指定控件所在的列

i = 0
for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.grid(column=i)
    i += 1
    print(bt.grid_info())

print函數打印信息如下：

從打印信息中可以看出，apple在第0列第0行；banana在第1列第1行；orange在第2列第2行；grape在第3列第3行。下圖的實際呈現效果和打印中的行列信息一致。

row

指定控件所在的行

i = 0
for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.grid(row=0, column=i)
    i += 1
    print(bt.grid_info())

print函數打印信息如下：

代碼中，我將4個按鈕的行都指定爲第0行，那麼，這四個按鈕應該是在第0行緊挨着排列，我們來看下實際效果：

columnspan

指定每個控件橫跨的列數

i = 0
for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.grid(column=i, columnspan=3)
    i += 1
    print(bt.grid_info())

print函數打印信息如下：

代碼中，我將4個按鈕的columnspan都指定爲3，那麼，每個按鈕應該是橫跨3列，我們來看下實際效果：

rowspan

指定每個控件橫跨的行數

i = 0
for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.grid(column=i, rowspan=3)
    i += 1
    print(bt.grid_info())

print函數打印信息如下：

代碼中，我將4個按鈕的rowspan都指定爲3，那麼，每個按鈕應該是橫跨3列，從上面的打印信息中其實可以判斷，每個按鈕都橫跨了3行，我們來看下實際效果：

ipadx

水平方向內邊距

for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.grid()
    print(bt.grid_info())

for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.grid(ipadx=20)
    print(bt.grid_info())

ipady

垂直方向內邊距

for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.grid()
    print(bt.grid_info())

for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.grid(ipady=20)
    print(bt.grid_info())

padx

水平方向外邊距

i = 1
for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    if i%2 == 0:
        bt.grid(padx=20, column=1)
    else:
        bt.grid(padx=20)
    i += 1
    print(bt.grid_info())

pady

垂直方向外邊距

i = 1
for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    if i%2 == 0:
        bt.grid(pady=20, column=1)
    else:
        bt.grid(pady=20)
    i += 1
    print(bt.grid_info())

sticky

sticky類似於pack的anchor，決定控件在cell中錨點，也就是控件在cell中的起始位置，可設置的值爲’n’, ‘ne’, ‘e’, ‘se’, ‘s’, ‘sw’, ‘w’, ‘nw’; ‘e’、‘w’、‘s’、'n’分別表示東西南北。

for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.grid()
    print(bt.grid_info())

for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.grid(sticky='nw')
    print(bt.grid_info())

在第二組按鈕中，將sticky設置爲’nw’，也就是以cell的左上方爲起始顯示。

好了，grid的屬性就介紹到這裏。是不是非常簡單呢！