《tkinter实用教程四》tkinter 布局管理 Grid

更多《Tkinter 实用教程》系列文章

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 ，后继都会更新上的。

ipadx、ipady参数

这两个可选参数类似于 css 样式中的 padding，属于内边距。

ipadx:内部横向填充，添加到控件内部的左侧和右侧。
ipady:内部纵向填充，添加到控件内部的上侧和下侧。

代码示例如下：

from tkinter import *
from tkinter import ttk

root = Tk()
btn = ttk.Button(root,text="一个按钮")
btn.grid(column=0,row=0)
btn2 = ttk.Button(root,text="两个按钮")
btn2.grid(column=0,row=1,ipadx=10)
btn3 = ttk.Button(root,text='三个按钮')
btn3.grid(column=0,row=2,ipady=10)
btn4 = ttk.Button(root,text="四个按钮")
btn4.grid(column=0,row=3,ipady=10,ipadx=10)

root.mainloop()

代码执行结果如下图：

按钮控件的内部被填充了额外的控件，变得臃肿。

padx、pady 参数

padx 和 pady 参数属于外边距，类似于 css 样式中的 margin 参数。

padx:外部横向填充，添加到控件外部的左侧和右侧。
pady:外部纵向填充，添加到控件外部的上侧和下侧。

示例代码如下：

from tkinter import *
from tkinter import ttk

root = Tk()
btn = ttk.Button(root,text="一个按钮")
btn.grid(column=0,row=0)
btn2 = ttk.Button(root,text="两个按钮")
btn2.grid(column=0,row=1,pady=10)
btn3 = ttk.Button(root,text='三个按钮')
btn3.grid(column=0,row=2)
btn4 = ttk.Button(root,text="四个按钮")
btn4.grid(column=1,row=0,padx=10)

root.mainloop()

代码执行结果如下图：

第二个和第四个按钮因为增加了外边距和其他按钮中间产生了空隙。

sticky 参数

sticky 选项确定如何在单元格内分配控件件未以其自然大小占用的任何额外空间。

如果不指定 sticky 参数，控件将居于单元格中部，未占据的额外控件均匀分布四周。

sticky 有四个可选值，分别为：N、S、W、E，分别对应上、下、左、右。

sticky=(N,S) 使控件上下方向拉伸，并保持横向居中。
sticky=(W,E) 使控件左右方向拉伸，并保持上下居中。

示例代码如下：

from tkinter import *
from tkinter import ttk

root = Tk()
btn1 = ttk.Button(root,text="第一个按钮")
btn2 = ttk.Button(root,text="第二个按钮")
btn3 = ttk.Button(root,text="第三个按钮")
btn4 = ttk.Button(root,text="第四个按钮")
btn5 = ttk.Button(root,text="第五个按钮")

btn1.grid(column=0,row=0,sticky=N)
btn2.grid(column=0,row=1,sticky=E)
btn3.grid(column=0,row=2,sticky=W)
btn4.grid(column=0,row=3,sticky=S)
btn5.grid(column=0,row=4,sticky=(E,W))

root.columnconfigure(0,weight=1)
root.rowconfigure(2,weight=1)
root.rowconfigure(3,weight=1)

root.mainloop()

代码执行结果：

rowconfigure 和 columnconfigure 方法可以设定每个行和列的比例，我们可以通过这种方式使控件伴随窗口大小变化，自动适应。

编写一个简单的计算器界面

编写一个简单的计算器界面是练习 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 实用教程》系列文章