前文tkinter-pack布局详解介绍了pack布局，相信对tkinter的布局套路有了一定的了解。本文将介绍另一种布局类grid。

同样，展示布局类与控件类的类间关系：

文章目录

grid
- 默认分布
- column
- row
- columnspan
- rowspan
- ipadx
- ipady
- padx
- pady
- sticky

grid

grid从字面意思上可以推断，这种布局方式就像网格一样来分布控件。那么具体会呈现什么样的效果，要怎么编码控制呢。同样的套路，通过实例来进行直观的讲解。

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

默认分布

from tkinter import (Tk, Button)
from tkinter.constants import RIGHT, LEFT, X, Y, BOTHmain_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 += 1print(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 += 1print(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 += 1print(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 += 1print(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 += 1print(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 += 1print(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的属性就介绍到这里。是不是非常简单呢！

tkinter-grid布局详解相关推荐

python布局管理_Python基础=== Tkinter Grid布局管理器详解
本文转自:https://www.cnblogs.com/ruo-li-suo-yi/p/7425307.html @ 箬笠蓑衣 Grid(网格)布局管理器会将控件放置到一个二维的表 ...
grid layout网格布局详解
grid layout网格布局详解什么是grid layout grid的特点 grid css属性的基础知识创建一个grid布局创建一个网格隐性网格与显性网格尺寸单位fr repeat函数 ...
【C++】C++对象模型：对象内存布局详解（C#实例）
C++对象模型:对象内存布局详解 0.前言 C++对象的内存布局.虚表指针.虚基类指针解的探讨,参考. 1.何为C++对象模型? 引用<深度探索C++对象模型>这本书中的话: 有两个概念可 ...
Linux进程地址空间与进程内存布局详解，内核空间与用户空间
Linux进程地址空间与进程内存布局详解程序段(Text):程序代码在内存中的映射,存放函数体的二进制代码. 初始化过的数据(Data):在程序运行初已经对变量进行初始化的数据. 未初始化过的数据( ...
DevExpress控件GridControl中的布局详解【转】
DevExpress控件GridControl中的布局详解 [转] 2012-10-24 13:27:28| 分类: devexpress | 标签:devexpress |举报|字号订阅 h ...
qt布局嵌套_QDockWidget嵌套布局详解-实现Visual Studio布局
概述许多工程软件,如Qt Creator,VS,matlab等,都是使用dock布局窗口,这样用户可以自定义界面,自由组合窗口. Qt的嵌套布局由QDockWidget完成,用Qt Creator拖 ...
html中style布局放哪,CSS样式表与格式布局详解
样式表 CSS(Cascading Style Sheets 层叠样式表),作用是美化HTML网页. 内联样式表: 例: 内联样式表内嵌样式表:必须写在head标签里例: p { 样式;} he ...
（淘宝无限适配）移动手机端rem布局详解（转载非原创）
https://www.cnblogs.com/well-nice/p/5509589.html (淘宝无限适配)手机端rem布局详解(转载非原创) 从网易与淘宝的font-size思考前端设计稿与工 ...
flutter页面布局HTML,Flutter开发实战初级（2）页面布局详解
初级根底系列 Flutter开发实战初级(1)ListView详解 Flutter开发实战初级(2)布局详解项目实战系列 Flutter开发实战高仿微信(1)主页 Flutter开发实战高仿微信 ...

tkinter-grid布局详解

文章目录

grid

默认分布

column

row

columnspan

rowspan

ipadx

ipady

padx

pady

sticky

tkinter-grid布局详解相关推荐

最新文章

热门文章