![0a7862d0838b6da0b7c84c1fbb860955.png](https://i-blog.csdnimg.cn/blog_migrate/74662339d5e98800a4b86eddfa706e08.jpeg)
重新审视一下前一篇文章中的代码:
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](https://i-blog.csdnimg.cn/blog_migrate/ccfddd269b16fa590ef16ac8e1084171.jpeg)
虽然不知道为什么,反正画面就是变成了上面的样子。如果这样就可以满足需求当然好,如果想调整布局,例如希望文字表示在按钮的左侧,该怎么做呢?这里先公布答案:
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](https://i-blog.csdnimg.cn/blog_migrate/aae9c9b51622563f13766a70da9ccd83.jpeg)
这里涉及如何在窗口内对控件进行布局的问题。Tkinter管理布局的方式一共有三种,今天先说明第一种:pack。
![ca18b729ad8bc76a0392de8dbad486f6.png](https://i-blog.csdnimg.cn/blog_migrate/749db6dbe68d3d7caa57fddbc9d570b9.jpeg)
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](https://i-blog.csdnimg.cn/blog_migrate/2b6d710bcb409fa80b57b5c8bc3c42f0.jpeg)
为了避免复杂化,我们为每个按钮使用了同样的文字列,因此看起来一切都好,但是如果使用了不同的文字列,情况又会有所变化,例如下面的代码:
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](https://i-blog.csdnimg.cn/blog_migrate/2a1075c28c6f02df3310428ad8f1d1ff.jpeg)
由于文字列的不同,每个按钮的大小都会不同,这样很难看。
解决这个问题的第一步需要另外一个参数: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](https://i-blog.csdnimg.cn/blog_migrate/4804f729e875ddb5fd4578a2f3a2a0cb.jpeg)
画面中每个按钮占有的空间差不多一样大了,但是每个按钮的实际尺寸并不相同。
我们可以使用另外一个选项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](https://i-blog.csdnimg.cn/blog_migrate/f676f2d302dd3696afc6d3af07a5cff6.jpeg)
也可以使用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](https://i-blog.csdnimg.cn/blog_migrate/85470b1b3dc24efb8a9442b1354042be.jpeg)
简单的布局使用pack很方便,随着布局的复杂化,用法也会变得很复杂。
![efbc443cb5a280e4b5058f30f327a89a.png](https://i-blog.csdnimg.cn/blog_migrate/c60d7c20757cd7b97be80ea63e2269c4.jpeg)
觉得本文有帮助?请分享给更多人。
关注【面向对象思考】,轻松学习每一天!
有任何疑问,欢迎留言提问或讨论。
面向对象设计,面向对象编程,面向对象思考!