Tkinter布局方式【三】

在Tkinter中，提供了三种布局方式。pack（打包）、grid（网格布局）、place（定位布局）。

布局方法	说明
pack()	按照组件添加到容器的顺序布局。在使用容器（Frame）布局时非常方便，调整窗口大小时布局自动缩放
grid()	网格布局，以行、列来对组件进行布局，较为灵活
place()	定位布局，指定组件大小和位置，最灵活

pack()

打包器，将组件打包进父组件中。

常用参数	说明
anchor	指定组件方向，取值 NSEW,北南东西,和他们的组合方位,以及Center
expand	如果父组件的大小增加，则展开当前组件
fill	是否拉伸组件 NONE(不拉伸) 、X(横向拉伸)、Y(竖向拉伸)、BOTH(都拉伸)
side	将组件添加到哪 TOP、 BOTTOM 、 LEFT 、 RIGHT

{{< expand “pack()布局例子” >}}

# 导入tkinter
from tkinter import *
# 导入ttk
from tkinter.ttk import *

# 创建一个窗口
win = Tk()
# 设置标题
win.title("布局器 pack() 演示 ~ Tkinter布局助手")
# 窗口大小设置
win.geometry("500x200")
# 创建一个文本标签
top = Label(win, background="red")
left = Label(win, background="blue")

# 调整这里的顺序试试
left.pack(side=LEFT, fill=BOTH)
top.pack(side=TOP, fill=BOTH)

# 展示窗口
win.mainloop()

{{< /expand >}}

pack的布局跟添加的顺序有关，注意下面图的红色和蓝色相交位置，体会其中差别。

grid()

网格布局，用类似网格的形式，将界面分为几行，几列，每个组件布置在相应的格子里。

常用参数	说明
column	组件在第几列 默认从0开始
columnspan	这个组件跨了几个列
row	组件在第几行 默认从0开始
rowspan	这个组件跨了几行
sticky	组件在单元格内，靠近哪边，默认居中

{{< expand “grid()布局例子” >}}

# 导入tkinter
from tkinter import *
# 导入ttk
from tkinter.ttk import *

# 创建一个窗口
win = Tk()
# 设置标题
win.title("布局器 grid() 演示 ~ Tkinter布局助手")
# 窗口大小设置
win.geometry("500x200")

for i in range(1, 4):
    for j in range(1, 4):
        btn = Button(win, text=str(i * j))
        btn.grid(column=i, row=j)
# 展示窗口
win.mainloop()

{{< /expand >}}

place()

三种中最灵活的一种，可以指定大小和绝对位置布局，也可以相对父组件的大小、相对位置布局。
Tkinter布局助手就是基于place()的布局方式实现的。

常用参数	说明
width	组件的宽度 默认单位像素
height	组件高度 默认单位像素
x	相对父组件的x轴位置 (距顶部的距离) 默认单位像素
y	相对父组件的y轴位置 (距左边的距离) 默认单位像素
relwidth	组件的宽度 相对于父组件的宽度,取值0-1 为1时与父组件宽度一致
relheight	组件的高度 相对于父组件的高度,取值0-1 为1时与父组件高度一致
relx	相对父组件的x轴位置 (距顶部的距离) 取值0-1 为1时与父组件宽度一致
rely	相对父组件的y轴位置 (距左边边的距离) 取值0-1 为1时与父组件高度一致

{{< expand “grid()布局例子” >}}

# 导入tkinter
from tkinter import *
# 导入ttk
from tkinter.ttk import *

# 创建一个窗口
win = Tk()
# 设置标题
win.title("布局器 place() 演示 ~ Tkinter布局助手")
# 窗口大小设置
win.geometry("500x200")

btn = Button(win, text="相对大小 大小位置可随窗口大小变化")
btn.place(relheight=0.2, relwidth=0.5, relx=0.2, rely=0.3)

btn2 = Button(win, text="按钮")
btn2.place(height=50, width=80, x=10, y=20)

# 展示窗口
win.mainloop()

{{< /expand >}}

调整大小后，图中的小按钮大小和位置没有变化,设置相对大小的按钮大小发生了变化。