tkinter 布局_Tkinter编程应知应会(3)-pack布局管理器

0a7862d0838b6da0b7c84c1fbb860955.png

重新审视一下前一篇文章中的代码:

from tkinter import *# 构建主窗口main = Tk()# 构建标签Label(main, text='Hello Tkinter!').pack()# 构建退出按钮Button(main, text='Quit', command=main.quit).pack()# 执行主循环main.mainloop()

程序在构建Label和Button控件之后,两次调用pack方法,在顶层窗口中摆放它们的位置:

4ff59a93f3765bb459faad9725541eee.png

虽然不知道为什么,反正画面就是变成了上面的样子。如果这样就可以满足需求当然好,如果想调整布局,例如希望文字表示在按钮的左侧,该怎么做呢?这里先公布答案:

from tkinter import *# 构建主窗口、main = Tk()# 构建标签Label(main, text='Hello Tkinter!').pack(side=LEFT, expand=YES, fill=X)# 构建退出按钮Button(main, text='Quit', command=main.quit).pack(side=LEFT, expand=NO)# 执行主循环main.mainloop()

这时生成的画面如下:

2f535ac2c8b428e4fbef1a2b698912ee.png

这里涉及如何在窗口内对控件进行布局的问题。Tkinter管理布局的方式一共有三种,今天先说明第一种:pack。

ca18b729ad8bc76a0392de8dbad486f6.png

pack布局遵循先到先得的原则安排控件的空间,它有几个常用参数。

首先是side参数,它一同有4个可选值:LEFT,TOP,RIGHT和BOTTOM。含义是子窗口需要摆放在父窗口的什么位置。其中LEFT和RIGHT属于水平布局,TOP和BOTTOM是垂直布局。如果连续的水平或者垂直布局,则不同控件分享父窗口的空间。如果发生了水平布局和垂直布局之间的切换,则切换后的布局占用切换前布局中一个控件的空间。例如下面的代码:

Button(root, text="AAAAAAAAAAAAA").pack(side=LEFT)Button(root, text="AAAAAAAAAAAAA").pack(side=LEFT)Button(root, text="AAAAAAAAAAAAA").pack(side=TOP)Button(root, text="AAAAAAAAAAAAA").pack(side=TOP)

生成的布局如下所示:

4c62e7588501f5e3c9aaf938a9580828.png

为了避免复杂化,我们为每个按钮使用了同样的文字列,因此看起来一切都好,但是如果使用了不同的文字列,情况又会有所变化,例如下面的代码:

Button(root, text="Cat").pack(side=LEFT)Button(root, text="Dog").pack(side=LEFT)Button(root, text="Tiger").pack(side=TOP)Button(root, text="Bear").pack(side=TOP)

生成的画面就是这个样子:

5993bb41de42a2d28d908f6e98c03828.png

由于文字列的不同,每个按钮的大小都会不同,这样很难看。

解决这个问题的第一步需要另外一个参数:expand。它的取值可以是1或0,也可以是Yes或No。当取值为1或者Yes时,表示这个按钮希望占据比实际面积还要大的空间。我们可以使用expand参数如下修改代码:

Button(root, text="Cat").pack(side=LEFT, expand=YES)Button(root, text="Dog").pack(side=LEFT, expand=YES)Button(root, text="Tiger").pack(side=TOP, expand=YES)Button(root, text="Bear").pack(side=TOP, expand=YES)

生成的画面如下:

c11f8788bc748bc5545491ee920d76b0.png

画面中每个按钮占有的空间差不多一样大了,但是每个按钮的实际尺寸并不相同。

我们可以使用另外一个选项fill来完成控件对自己分得空间的填充,它有三个可选值:X,Y和BOTH本别表示不同的填充方向。例如我们可以使用如下代码实现水平方向的填充:

Button(root, text="Cat").pack(side=LEFT, expand=YES, fill=X)Button(root, text="Dog").pack(side=LEFT, expand=YES, fill=X)Button(root, text="Tiger").pack(side=TOP, expand=YES, fill=X)Button(root, text="Bear").pack(side=TOP, expand=YES, fill=X)

可以得到如下的画面:

3a54d0bbedc56ebb40b0a66430fe0b7f.png

也可以使用BOTH选项,实现双方向填充:

Button(root, text="Cat").pack(side=LEFT, expand=YES, fill=BOTH)Button(root, text="Dog").pack(side=LEFT, expand=YES, fill=BOTH)Button(root, text="Tiger").pack(side=TOP, expand=YES, fill=BOTH)Button(root, text="Bear").pack(side=TOP, expand=YES, fill=BOTH)

生成的画面如下:

43c5c697931692b3192f4346d09e5dbb.png

简单的布局使用pack很方便,随着布局的复杂化,用法也会变得很复杂。

efbc443cb5a280e4b5058f30f327a89a.png

觉得本文有帮助?请分享给更多人。

关注【面向对象思考】,轻松学习每一天!

有任何疑问,欢迎留言提问或讨论。

面向对象设计,面向对象编程,面向对象思考!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值