python----tkinterm模块

python tkinter学习——布局

正文

布局

一、pack()

pack()有以下几个常用属性：

side
padx
pady
ipadx
ipady
fill
expand

1，side

side属性有四个可选值：'top'、'bottom'、'left'、'right'，分别表示将控件位置设在窗口顶部中心、底部中心、左边中心、右边中心。side默认值为'top'。

2，padx、pady、ipadx、ipady

这四个属性分别设置控件水平方向外边距、竖直方向外边距、水平方向内边距、竖直方向内边距。

3，fill

fill属性有四个可选值：'none'、'x'、'y'、'both'。分别表示不填充、将控件沿水平方向填充、将控件沿竖直方向填充、将控件沿水平和竖直方法填充。

当side属性被设为'top'、'bottom'时，fill只能沿水平方向填充；当side属性被设为'left'、'right'时，fill只能沿竖直方向填充。

4，expand

expand属性有两个可选值：0、1（或者'yes'、'no'）。expand默认值为0。

当expand属性为0时，前面所说的side、fill一切正常；当expand属性为1时，side属性无效，此时控件会在窗口中心位置，且fill既可沿水平方向填充，也可沿竖直方向填充。

二、grid()

grid()有以下几个常用属性：

row
column
padx
pady
ipadx
ipady
rowspan
columnspan
sticky

1，row、column

grid()将窗口看做一张表格，将控件放在其中的单元格中，而row、column则用来设置控件所在单元格的坐标。

例如：

#文件名：test.py

import tkinter as tk

window = tk.Tk()

window.title('test')

window.geometry('400x400')

btn1 = tk.Button(window,text='one',width=5,bg='green')

btn1.grid(row=0,column=0)

btn2 = tk.Button(window,text='two',width=5,height=5,bg='red')

btn2.grid(row=0,column=1)

btn3 = tk.Button(window,text='three',width=3,height=3,bg='blue')

btn3.grid(row=1,column=0)

btn4 = tk.Button(window,text='four',width=15,height=10,bg='yellow')

btn4.grid(row=1,column=1)

window.mainloop()

效果如图：

从图中我们可以看出，单元格的宽度、高度是由同一列中最宽、同一行中最高的控件的宽高决定的。

2，padx、pady、ipadx、ipady

这四个属性分别设置控件水平方向外边距、竖直方向外边距、水平方向内边距、竖直方向内边距。

3，rowspan、columnspan

有时候，一个控件可能会占用不止一个单元格，这时就要用到rowspan、columnspan，他们的作用与合并单元格类似。

rowspan=3表示该控件会在竖直方向占用3行单元格；column=3则报表时该控件会在水平方向占用3列单元格。

现在我们对test.py做些改动，让绿色按钮占用2x2个单元格：

#文件名：test.py

import tkinter as tk

window = tk.Tk()

window.title('test')

window.geometry('400x400')

btn1 = tk.Button(window,text='one',width=5,bg='green')

btn1.grid(row=0,column=0,rowspan=2,columnspan=2)

btn2 = tk.Button(window,text='two',width=5,height=5,bg='red')

btn2.grid(row=0,column=1)

btn3 = tk.Button(window,text='three',width=3,height=3,bg='blue')

btn3.grid(row=1,column=0)

btn4 = tk.Button(window,text='four',width=15,height=10,bg='yellow')

btn4.grid(row=1,column=1)

window.mainloop()

效果如图：

咦，绿色按钮怎么不见了？

要注意，这里的合并单元格和html中<table>标签的合并单元格不同，合并单元格后，其他单元格中的控件并不会自动被挤开，因此实际上，此时绿色按钮被黄色的按钮遮挡住了，可以试着增大绿色按钮的宽高就能知道它的位置了。

既然合并单元格周围的控件不会自动被挤开，那我们就只能手动更改其坐标了。

为了便于理解，我们看张示意图：

从图中可以看出，应该将红色按钮坐标设为（0,2），蓝色按钮坐标设为（2,0），黄色按钮坐标设为（2,1）（准确地说应该是设置行和列的序号）。

改动后代码如下：

#文件名：test.py

import tkinter as tk

window = tk.Tk()

window.title('test')

window.geometry('400x400')

btn1 = tk.Button(window,text='one',width=5,bg='green')

btn1.grid(row=0,column=0,rowspan=2,columnspan=2)

btn2 = tk.Button(window,text='two',width=5,height=5,bg='red')

btn2.grid(row=0,column=2)

btn3 = tk.Button(window,text='three',width=3,height=3,bg='blue')

btn3.grid(row=2,column=0)

btn4 = tk.Button(window,text='four',width=15,height=10,bg='yellow')

btn4.grid(row=2,column=1)

window.mainloop()

效果如图：

你可能会觉得，绿色按钮并没有在竖直方向上占用两个两行单元格，前面说过，单元格的高度是由一行中最高的控件的高度决定的，而第二行中没有控件，是空的，所以高度为0。

我们在第二行添加一个灰色按钮，这样可以更清楚地看出各个按钮的位置关系：

#文件名：test.py

import tkinter as tk

window = tk.Tk()

window.title('test')

window.geometry('400x400')

btn1 = tk.Button(window,text='one',width=5,bg='green')

btn1.grid(row=0,column=0,rowspan=2,columnspan=2)

btn2 = tk.Button(window,text='two',width=5,height=5,bg='red')

btn2.grid(row=0,column=2)

btn3 = tk.Button(window,text='three',width=3,height=3,bg='blue')

btn3.grid(row=2,column=0)

btn4 = tk.Button(window,text='four',width=15,height=10,bg='yellow')

btn4.grid(row=2,column=1)

btn5 = tk.Button(window,text='five',width=15,height=4,bg='gray')

btn5.grid(row=1,column=2)

window.mainloop()

效果如图：

4,sticky

sticky属性用于设置控件的对齐方式，其可选值有'N'、'S'、'E'、'W'以及这四个值的各种组合。

当stick属性的值为这四个方向中的一个时，控件会向相应方向对齐；当stick属性的值为其中两个时，控件会向相应的一个角对齐；当stick属性的值为其中三个、四个时，控件会先向前两个设定的方向对齐，然后向后两个方向进行填充。

例如，我们将绿色按钮设为sticky='W'时，则它会左对齐，如图所示：

当我们将绿色按钮设为sticky='W'+'N'时，则它会左对齐+顶对齐，因此会位于单元格的左上角，如图所示：

当我们将绿色按钮设为sticky='W'+'N'+'S'时，则它会先进行左对齐+顶对齐，然后向下填充单元格，如图所示：

当我们将绿色按钮设为sticky='W'+'N'+'S'+'E'时，则它会先进行左对齐+顶对齐，然后向下、向右填充单元格，如图所示：

三、place()

place()有以下几个常用属性：

x
y
relx
rely
anchor

1，x、y

x、y属性用来设置控件的绝对坐标。

2，relx、rely

relx、rely属性用来设置控件的相对坐标，范围为0-1。

可以同时使用相对坐标和绝对坐标，此时先根据相对坐标确定控件位置，然后根据绝对坐标使控件进行偏移，最后确定控件的最终位置。

3，anchor

anchor属性有9个可选值，分别表示9个方向，用来设置控件的锚点。如图所示：

例如，anchor='nw',x=100,y=100表示控件的左上角将在坐标（100，100）处，而anchor='n',x=100,y=100表示控件的顶边中点将在坐标（100,100）处。

四、Frame()

Frame()本身是tkinter中的一类控件，用来帮助我们进行布局。

首先我们创建四个框架，同时创建一个标签，为了方便观察，我们给框架添加了背景色和边框，如下所示：

#文件名：test'.py

import tkinter as tk

window = tk.Tk()

window.title('test window')

window.geometry('400x400')

f1 = tk.Frame(window,width=150,height=150,bg='blue',borderwidth=2)

f2 = tk.Frame(window,width=150,height=150,bg='red',borderwidth=2)

f3 = tk.Frame(window,width=150,height=150,bg='gray',borderwidth=2)

f4 = tk.Frame(window,width=150,height=150,bg='yellow',borderwidth=2)

f1.grid(row=0, column=0)

f2.grid(row=0, column=1)

f3.grid(row=1, column=0)

f4.grid(row=1, column=1)

l1 = tk.Label(window,text='one',bg='pink',width=5).grid(row=0,column=0)

window.mainloop()

效果如图：

此时的框架似乎就是一个普通的矩形控件。
接着我们将标签放入框架中，也即将框架作为标签的父对象（为了避免大段大段的重复代码影响阅读，我们使用----snip----表示省略部分前文已使用过的重复代码。）：

#文件名：test'.py

import tkinter as tk

----snip----

l1 = tk.Label(f1,text='one',bg='pink',width=5).grid(row=0,column=0)

----snip----

window.mainloop()

效果如图：

可以发现，框架的大小发生了改变，准确地说，框架大小变为了框架中控件的大小。

接着，我们再添加一个标签：

#文件名：test'.py

import tkinter as tk

----snip----

l1 = tk.Label(f1,text='one',bg='pink',width=5).grid(row=0,column=0)

l2 = tk.Label(f1,text='two',bg='pink',width=5).grid(row=1,column=1)

----snip----

window.mainloop()

效果如图：

此时，框架的大小是框架中所有控件的外接矩形的大小，也即刚好将所有控件包裹住的大小。

如果想改变框架的位置，比如使其在左上角，只需设置sticky='W'+'N'即可。

另外再来看一种情况，我们将标签的宽度增大：

#文件名：test'.py

import tkinter as tk

----snip----

l1 = tk.Label(f1,text='one',bg='pink',width=15).grid(row=0,column=0)

l2 = tk.Label(f1,text='two',bg='pink',width=15).grid(row=1,column=1)

----snip----

window.mainloop()

效果如图：