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

tkinter 表格布局管理 `Grid`

在学习其他控件之前，我们需要先了解 tkinter 布局管理概念（解决控件放在哪里的问题）。

虽然， tkinter 提供了多种控制布局的方式，但我还是建议使用 grid 处理所有布局问题。

下面，本文将聚焦 grid 布局管理方式，如果你有学习其他布局方式的需要，可以留言给我，我会在后继章节优先更新其他布局方式。

行与列

在 grid 布局中的所有控件都会被赋予一个行号和一个列号，这是每个控件相对于其他控件位置的凭证。

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

行与列的宽度和高度由内部的控件决定，在使用 grid 布局时，不需要关注行和列的大小。

使用 `grid` 布局

使用 grid 按钮非常简单，只需要在创建控件之后，指定控件放置的表格行号和列号就可以了。

示例代码如下：

from tkinter import *
from tkinter import ttkroot = 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 ttkroot = 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 ttkroot = 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 ttkroot = 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 ttkroot = 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 ttkroot = 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 实用教程》系列文章

《tkinter实用教程四》tkinter 布局管理 Grid相关推荐

《tkinter实用教程21》treeview 节点插入、单选、多选、事件、树、表格
TreeView 的使用方法 Treeview 组件是 ttk 模块的组件之一,它既可以作为树结构使用,也可以作为表格展示数据(tkinter 并没有表格控件). 和常见的树装结构一样,当 Treev ...
WPF教程六：布局之Grid面板（转）
WPF教程六:布局之Grid面板 Grid:网格面板 Grid顾名思义就是"网格",以表格形式布局元素,对于整个面板上的元素进行布局,它的子控件被放在一个一个事先定义好的小格子里面 ...
Git系列教程(四)——git分支管理
Git 分支管理一.创建与合并分支二.删除分支三.分支冲突四.分支管理策略五.Bug分支六.总结一.创建与合并分支什么是分支?有了分支,你创建了一个属于你自己的分支,别人看不到,还继续 ...
布局管理--grid
目录 grid() 主要参数案例:grid布局实现一个简单的计算器界面推荐阅读: sif_666的博客–grid布局参数详解 grid() 将父窗口划分为横竖均匀排列的格子,组件通过行号(row) ...
《tkinter实用教程一》Linux环境下安装tkinter
更多<Tkinter 实用教程>系列文章在 Linux 环境下安装 tkinter tkinter 是 Python 编程语言中描述用于构建图形用户界面 (GUI) 的控件集,因此,学习 ...
tkinter简明教程
对于一个简单的GUI程序设计来说,我觉得无非就是三个要素,widget(部件),layout(布局),event(事件的响应) GUI就和搭积木差不多,widget就好比是各种形状的积木,比如长方形, ...
Python 小白从零开始 PyQt5 项目实战（5）布局管理
本系列面向 Python 小白,从零开始实战解说应用 QtDesigner 进行 PyQt5 的项目实战. 什么叫从零开始?从软件安装.环境配置开始.不跳过一个细节,不漏掉一行代码,不省略一个例图. ...
Java GUI编程的几种常用布局管理器
Java GUI编程的几种常用布局管理器本人是一个大二的学生.因为最近有做JavaGUI界面的需求,因此重新开始熟悉JavaGUI的各种控件和布局.然后以次博文为笔记,总结.完善以及发表最近学习的一 ...
第3章 Qt 5布局管理
一.分割窗口QSplitter类 [例](简单)(CH301)一个十分简单的分割窗口功能,整个窗口由三个子窗口组成,各个子窗口之间的大小可随意拖曳改变,效果如图3.1所示. 本实例采用编写代码的方式实 ...

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

tkinter 表格布局管理 `Grid`

行与列

使用 `grid` 布局

控件跨行、跨列放置

ipadx、ipady参数

padx、pady 参数

sticky 参数

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

《tkinter实用教程四》tkinter 布局管理 Grid相关推荐

最新文章

热门文章

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

tkinter 表格布局管理 Grid

行与列

使用 grid 布局

控件跨行、跨列放置

ipadx、ipady参数

padx、pady 参数

sticky 参数

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

《tkinter实用教程四》tkinter 布局管理 Grid相关推荐

最新文章

热门文章

tkinter 表格布局管理 `Grid`

使用 `grid` 布局