tkinter -- Grid

实现机制是将 Widget 逻辑上分割成表格,在 指定的位置放置想要的 Widget 就可以了

第一个 Grid 例子

使用 grid 来布局组件

代码:

import tkinter as tk
root = tk.Tk()
# 创建两个 Label
lb1 = tk.Label(root, text='hello')
lb2 = tk.Label(root, text='grid')
lb1.pack()
lb2.pack()
root.mainloop()

结果:

grid 有两个最为重要的参数,用来指定将组件放置到什么位置,一个是 row,另一个是column。如果不指定 row,会将组件放置到第一个可用的行上,如果不指定 column,则使用第一列

使用 row 和 column 来指定位置

使用 grid 来布局组件

代码:

import tkinter as tk
root = tk.Tk()
# 创建两个 Label
lb1 = tk.Label(root, text='hello')
lb2 = tk.Label(root, text='grid')

lb1.grid()
# 指定 lb2为第一行(使用索引0开始),第二列(使用索引0开始)
lb2.grid(row=0, column=1)
root.mainloop()

结果:

grid 有两个最为重要的参数,用来指定将组件放置到什么位置,一个是 row,另一个是column。如果不指定 row,会将组件放置到第一个可用的行上,如果不指定 column,则使用第一列。注意这里使用 grid 时不需要创建,直接使用行列就可以

将两个或多个组件同一个位置

多个组件同时 grid 到同一个表格位置

代码:

import tkinter as tk
root = tk.Tk()
# 创建两个 Label
lb1 = tk.Label(root, text='hello1')
lb2 = tk.Label(root, text='hello2')

# 将 lb1和 lb2均 grid 到(0,0)位置
lb1.grid(row=0, column=0)
lb2.grid(row=0, column=0)

def forgetLabel():
    # grid_slaves 返回 grid 中(0,0)位置的所有组件
    print(root.grid_slaves(0, 0)[0])

# grid_salves 返回的第一个值为 lb2,最后 grid 的那一个
tk.Button(root, text='forget last', command=forgetLabel).grid(row=1)

root.mainloop()

结果:

改变列(行)的属性值

设置 column 的属性(columnconfigure)

代码:

import tkinter as tk
root = tk.Tk()
# 创建两个 Label
lb1 = tk.Label(root, text='1', bg='red')
lb2 = tk.Label(root, text='2', bg='blue')

# 将 lb1和 lb2分别放置到第1行的1,2列位置上
lb1.grid(row=0, column=0)
lb2.grid(row=0, column=1)

# 指定列的最小宽度为100
root.columnconfigure(0, minsize=100)
root.mainloop()

结果:

1与2的距离变的远一些了。但如果这个位置没有组件存在的话这个值是不起作用的.设置列或行(rowconfigure)的属性时使用父容器的方法,不是自己调用

组件使用多列(多行)

使用多行(多列)

代码:

import tkinter as tk
root = tk.Tk()
# 创建5个 Label,分别以背景色区别
lb1 = tk.Label(root,text='a', bg='red')
lb2 = tk.Label(root,text='b', bg='blue')
lb3 = tk.Label(root,text='c', bg='red')
lb4 = tk.Label(root,text='d', bg='blue')
lb5 = tk.Label(root,text='e', bg='red')

# 以下为布局参数设置
lb1.grid(row=0, column=0, columnspan=2)
lb2.grid(row=1, column=0)
lb3.grid(row=1, column=1)
lb4.grid(row=2)
lb5.grid(row=0, column=2)

root.mainloop()

结果:

A 与 B、D 的区别,它左边已改变,由于使用了两个表格;C 与 E 的区别:C 的右边与 E 的左边对齐,也就是说 E 被放置到第2列的下一个位置了,原因由于 A 已使用了第2列

设置表格中组件的对齐属性

使用 sticky 设置对齐方式

代码:

import tkinter as tk
root = tk.Tk()
# 创建两个 Label
tk.Label(root, text='hello sticky').grid()
tk.Label(root, text='Tkinter').grid()

# 创建两个 Label,并指定 sticky 属性
tk.Label(root, text='hello sticky').grid(sticky='w')
tk.Label(root, text='Tkinter').grid(sticky='w')

root.mainloop()

结果:

默认属性下,组件的对齐方式为居中,设置 sticky 属性可以控制对齐方式,可用的值(N,S,E,W)及其组合值

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏谦谦君子修罗刀

RN手势

React Native框架底层的手势响应系统提供了响应处理器,PanResponder API将这些手势响应处理器再次进行封装,便于开发者对手势进行处理。 ...

344120
来自专栏优启梦

使用:before选择器给你的Logo添加扫光特效

在知更鸟大神的网站看到他的Begin主题Logo有扫光特效,看起来还是比较炫的。研究了一下,发现是用:before选择器实现的扫光效果,现在把代码甩出来,觉得好...

41760
来自专栏韦弦的偶尔分享

微信小程序带图片弹窗简单实现

(PS:最近发现一个问题,如果页面内有textarea时,textarea的层级会比蒙版视图高,并且无法修改,做了一个比较笨的解决方案:小程序textarea层...

1.7K20
来自专栏闵开慧

struts2 标签全面解释

A: <s:a xhref=""></s:a>-----超链接,类似于html里的<a></a> <s:action name=""></s:action>--...

36290
来自专栏葡萄城控件技术团队

Spread for Windows Forms高级主题(5)---数据处理

使用表单的API处理数据 你可以将数据以有格式或无格式字符串或者数据对象的形式填充到单元格中。将数据填充到单元格的最好方式取决于你想添加字符串数据还是数据对象,...

20490
来自专栏菜鸟计划

javascript简史

一、javascript简介 1.1 javascript简史 javascript诞生于1995年。当时它的主要目的是处理以前由服务器端语言负责的一些输入验证...

28950
来自专栏优启梦

PHP头像九宫格合并 案例

唔,有一些东西需要随机头像! 比如一些聊天网站需要随机展现头像! 9宫格的平铺头像! 每次都会展现不一样的头像! 效果: ? 案例如下: <?php /** ...

667130
来自专栏IMWeb前端团队

一年前的焦点bug终于找到原因了, 图标文本对齐完美了~

? 正常来说点击可编辑框末尾空白,光标默认会闪烁在末尾 , 但是闪到了倒数第二个了....当时一直以为js有问题...压根没想到是一个top属性.... 虽然...

24290
来自专栏Web行业观察

你真的了解回流和重绘吗?(面试必问)

回流和重绘可以说是每一个web开发者都经常听到的两个词语,我也不例外,可是我之前一直不是很清楚这两步具体做了什么事情。最近由于部门内部要做分享,所以对其进行了一...

22540
来自专栏Django中文社区

标签云

我们博客的文章(Post)模型除了通过 ForeignKey 关联了 Category(分类)外,还通过 ManyToMany 关联了 Tag(标签)。在我们的...

38280

扫码关注云+社区

领取腾讯云代金券