Grid 格状版面布局

如果在 tkinter 里要进行比较进阶的版面编辑，会使用 grid() 方法来产生类似表格版面进行元件的放置，这篇教学会介绍如何使用 grid() 方法，并进行格状的元件排版布局。

快速导览：

• 使用 grid()
• column、row 参数
• columnspan、rowspan 参数
• padx、pady、ipadx、ipady 参数
• sticky 参数
• 同时使用 pack() 和 grid()

因为 Google Colab 不支援 tkinter，所以请使用本机环境 ( 参考：使用 Python 虚拟环境 ) 或使用 Anaconda Jupyter 进行实作 ( 参考：使用 Anaconda )。

使用 grid()

使用 tkinter 相关方法建立元件后，除了使用 pack() 方法进行基本放置 ( 参考 Pack 基本版面布局 )，也可以使用 grid() 方法，采用类似“表格”的方式放置元件，以下方的例子而言，有四个 Label 都指向 root ( 主视窗元件 )，使用 grid() 将四个 Label 排列成 2x2 的版面。

注意，在同一个视窗元件 ( 父元件 ) 中，不能同时使用 pack() 和 grid()。

import tkinter as tk

root = tk.Tk()
root.title('oxxo.studio')
root.geometry('200x200')

a = tk.Label(root, text='AAA', background='#f90')
b = tk.Label(root, text='BBB', background='#09c')
c = tk.Label(root, text='CCC', background='#fc0')
d = tk.Label(root, text='DDD', background='#0c9')

a.grid(column=0, row=0)  # 放在 (0,0)
b.grid(column=1, row=0)  # 放在 (1,0)
c.grid(column=0, row=1)  # 放在 (0,1)
d.grid(column=1, row=1)  # 放在 (1,1)

root.mainloop()

column、row 参数

grid() 的 column 和 row 参数表示放置的元件位置，column 表示水平方向，左上角起始为 0，row 表示垂直方向，左上角起始为 0，同一个视窗元件 ( 父元件 ) 中只能使用一个 grid，放置后会根据所有元件的 column 和 row 产生对应的表格布局，以上方的例子为例，会产生 2x2 的布局，如果使用下方的程序码，则会产生 3x2 的布局 ( 因为只有四个元件，所以有两格会留空 )。

import tkinter as tk

root = tk.Tk()
root.title('oxxo.studio')
root.geometry('200x200')

a = tk.Label(root, text='AAA', background='#f90')
b = tk.Label(root, text='BBB', background='#09c')
c = tk.Label(root, text='CCC', background='#fc0')
d = tk.Label(root, text='DDD', background='#0c9')

a.grid(column=0, row=0)  # 放在 (0,0)
b.grid(column=2, row=0)  # 放在 (2,0)
c.grid(column=0, row=1)  # 放在 (0,1)
d.grid(column=1, row=1)  # 放在 (1,1)

root.mainloop()

columnspan、rowspan 参数

如果要让“多格可以合并成一格”，可以使用 columnspan 或 rowspan 参数，参数默认值为 1，若设定大于 1 的数字表示要合并几格。

import tkinter as tk

root = tk.Tk()
root.title('oxxo.studio')
root.geometry('200x200')

a = tk.Label(root, text='AAA', background='#f90')
b = tk.Label(root, text='BBB', background='#09c')
c = tk.Label(root, text='CCC', background='#fc0')
d = tk.Label(root, text='DDD', background='#0c9')
e = tk.Label(root, text='EEE', background='#ccc')

a.grid(column=0, row=0, columnspan=2)
b.grid(column=2, row=0, rowspan=2)
e.grid(column=0, row=1, columnspan=2)
c.grid(column=0, row=2)
d.grid(column=1, row=2)

root.mainloop()

padx、pady、ipadx、ipady 参数

grid() 的 padx 参数表示左右外边距，pady 表示上下外边距，ipadx 表示左右内边距，ipady 表示上下内边距，四个参数默认值均为 0，下方的程序码执行后，会表现出不同参数设定的结果。

import tkinter as tk

root = tk.Tk()
root.title('oxxo.studio')
root.geometry('200x200')

a = tk.Label(root, text='AAA', background='#f90')
b = tk.Label(root, text='BBB', background='#09c')
c = tk.Label(root, text='CCC', background='#fc0')
d = tk.Label(root, text='DDD', background='#0c9')
e = tk.Label(root, text='EEE', background='#ccc')

a.grid(column=0, row=0, padx=20)
b.grid(column=1, row=0, pady=20)
c.grid(column=0, row=1, ipadx=20)
d.grid(column=1, row=1, ipady=20)

root.mainloop()

sticky 参数

grid() 的 sticky 参数会元件放置的位置，设定方式默认有四个：tk.W 右边、tk.E 左边、tk.N 上面、tk.S 下面，除了上下左右，也可使用“+”号链接，例如 tk.E+tk.N 表示放在左上，tk.S+tk.N+tk.W 表示靠右垂直置中，下方的程序码执行后，会表现出不同参数设定的结果。

import tkinter as tk

root = tk.Tk()
root.title('oxxo.studio')
root.geometry('200x200')

a = tk.Label(root, text='AAA', background='#f90')
b = tk.Label(root, text='BBB', background='#09c')
c = tk.Label(root, text='CCC', background='#fc0')
d = tk.Label(root, text='DDD', background='#0c9')
e = tk.Label(root, text='EEE', background='#ccc')

a.grid(column=0, row=0, sticky=tk.W+tk.S)
b.grid(column=1, row=0, ipady=20)
c.grid(column=0, row=1, sticky=tk.E+tk.N)
d.grid(column=1, row=1, ipady=20)
e.grid(column=0, row=2, ipadx=20)

root.mainloop()

同时使用 pack() 和 grid()

因为在同一个视窗元件 ( 父元件 ) 中，不能同时使用 pack() 和 grid()，所以如果要同时使用，必须搭配 frame 来进行放置，下方的例子会将 abcd 四个 Label 元件使用 grid 的方式放在一个 Frame 元件中，再将这个 Frame 与另外一个 Label 放在 root 视窗里。

import tkinter as tk

root = tk.Tk()
root.title('oxxo.studio')
root.geometry('200x200')

frame = tk.Frame(root)
frame.pack()

a = tk.Label(frame, text='AAA', background='#f90')
b = tk.Label(frame, text='BBB', background='#09c')
c = tk.Label(frame, text='CCC', background='#fc0')
d = tk.Label(frame, text='DDD', background='#0c9')

a.grid(column=0, row=0)
b.grid(column=1, row=0)
c.grid(column=0, row=1)
d.grid(column=1, row=1)

e = tk.Label(root, text='EEE', background='#ccc')
e.pack()

root.mainloop()

意见反馈