tkinter-pack布局详解

前面三篇博文介绍了 tkinter-label，tkinter-menu详解，tkinter-button详解，可以说对tkinter的控件有了基础的认识，可能这时大家自然会想，这些控件放置的什么位置要怎样控制呢？为了搞清楚这个问题，接下来分三篇博文来分别介绍tkinter的三种布局方法。

tkinter中控件的布局可以有三个类来控制,分别是Pack,Place,Grid.本系列文章将这三个类统称为布局类.

布局类与控件类的类间关系如下:

由上图可以看出,tkinter总共有17个控件类,三个布局类都是控件类(Widget)的父类.所以任何控件类对象都可以直接调用布局类的方法,来完成控件布局.

Pack

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

为了直观起见,接下来主要通过实例来辅助理解pack的布局结构并学会使用。

默认分布

首先，我们从最简单的默认配置入手。

from tkinter import (Tk, Button)
from tkinter.constants import RIGHT, LEFT, X, Y, BOTH
main_win = Tk()
main_win.title('渔道的pack布局')
width = 300 
height = 300 
main_win.geometry(f'{width}x{height}')

apple_color = 'Crimson'
banana_color = 'Yellow'
orange_color = 'Orange'
grape_color = 'Purple'

fruit = {'apple':'Crimson', 'banana':'Yellow', 'orange':'Orange', 'grage':'Purple'}
for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.pack()
    print(bt.info())

print函数的打印信息如下：

{'in': <tkinter.Tk object .>, 'anchor': 'center', 'expand': 0, 'fill': 'none', 'ipadx': 0, 'ipady': 0, 'padx': 0, 'pady': 0, 'side': 'top'}

我们来看两个主要的属性anchor和side.

anchor为center,表示相对于父控件(这里为主窗口)button居中显示,显然button将占用这一整行的空间,下一个控件将从下一行开始布局.

side为top,表示向顶部对齐.

side 属性 决定将控件放在父对象的哪一边.TOP (default) 表示顶部, BOTTOM 表示底部, LEFT 表示靠左, RIGHT 表示靠右.

anchor 属性 决定控件的锚点，也就是控件的起始位置。可设置的值为’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.pack(side=LEFT, anchor='nw')

pack布局中,控件是紧凑分布的，可以通过side和anchor属性的组合，来决定控件的实际布局。

填满分布

该分布主要用到expand属性。我们先来看一个实际的显示效果。

for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.pack(expand=True)

从上图可以看出，4个按钮控件，基本上将主窗口的空间填满了。

expand 属性 设置为True,将填满控件的父对象的空间。

如果改变side属性，4个按钮控件的布局如下：

for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.pack(side=LEFT, expand=True)

如果再改变anchor属性，4个按钮控件的布局如下：

for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.pack(anchor='s', side=LEFT, expand=True)

填充分布

fill 属性 决定填充方向.None (default)表示保持控件原尺寸.X 表示填充水平方向.Y 表示填充垂直方向.BOTH 表示水平和垂直方向都填充.

我们先看一下4个按钮控件在水平方向的填充分布效果

for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.pack(fill=X)

在垂直方向的填充分布效果：

for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.pack(fill=Y)

在水平、垂直方向的填充分布效果：

for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.pack(fill=BOTH)

外边距

外边距通过两个属性来控制，padx和pady。

for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.pack(anchor='nw',side=LEFT)

for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.pack(anchor='nw', side=LEFT, padx=10)

for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.pack()

for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.pack(pady=10)

内边距

内边距通过两个属性来控制，ipadx和ipady。

for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.pack()

for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.pack(ipadx=10)

从下图的显示效果可以看出，第2组按钮，x方向上，文字和按钮边框的间隔要大一些，就是因为设置了ipadx=10.

for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.pack()

for k,v in fruit.items():
    bt = Button(main_win, text=k, fg='black', bg=v)
    bt.pack(ipady=10)

从下图的显示结果可以看出，第2组按钮，y方向上，文字和按钮边框的间隔要大一些，就是因为设置了ipady=10.

pack不同属性的组合可以形成非常多的布局效果，本文就不再一一列举。pack布局还支持不同父子控件的组合分布，但是不管怎样组合，pack的属性就是这几种，使用者灵活组合即可。

原创不易，若认可本文，老铁请点赞、评论、分享、收藏、打赏。你的鼓励与支持是我前进的动力！！！