Tkinter 中的布局管理

原文： http://zetcode.com/tkinter/layout/

在 Tkinter 教程的这一部分中，我们介绍布局管理器。

在设计应用的 GUI 时，我们决定要使用哪些小部件以及如何在应用中组织这些小部件。 为了组织小部件，我们使用专门的不可见对象，称为布局管理器。

有两种小部件：容器及其子级。 容器将子项分组为合适的布局。

Tkinter 具有三个内置的布局管理器：pack，grid和place管理器。 place几何管理器使用绝对定位来定位小部件。 pack几何管理器在水平和垂直框中组织窗口小部件。 grid几何管理器将小部件放置在二维网格中。

绝对定位

在大多数情况下，程序员应使用布局管理器。 在某些情况下，我们可以使用绝对定位。 在绝对定位中，程序员以像素为单位指定每个小部件的位置和大小。 如果我们调整窗口大小，则小部件的大小和位置不会改变。 在各种平台上，应用看起来都不同，在 Linux 上看起来不错，在 Mac OS 上看起来不太正常。 在我们的应用中更改字体可能会破坏布局。 如果我们将应用翻译成另一种语言，则必须重做布局。

absolute.py

#!/usr/bin/env python3
"""
ZetCode Tkinter tutorial
In this script, we lay out images
using absolute positioning.
Author: Jan Bodnar
Last modified: April 2019
Website: www.zetcode.com
"""
from PIL import Image, ImageTk
from tkinter import Tk, BOTH
from tkinter.ttk import Frame, Label, Style
class Example(Frame):
    def __init__(self):
        super().__init__()
        self.initUI()
    def initUI(self):
        self.master.title("Absolute positioning")
        self.pack(fill=BOTH, expand=1)
        Style().configure("TFrame", background="#333")
        bard = Image.open("bardejov.jpg")
        bardejov = ImageTk.PhotoImage(bard)
        label1 = Label(self, image=bardejov)
        label1.image = bardejov
        label1.place(x=20, y=20)
        rot = Image.open("rotunda.jpg")
        rotunda = ImageTk.PhotoImage(rot)
        label2 = Label(self, image=rotunda)
        label2.image = rotunda
        label2.place(x=40, y=160)
        minc = Image.open("mincol.jpg")
        mincol = ImageTk.PhotoImage(minc)
        label3 = Label(self, image=mincol)
        label3.image = mincol
        label3.place(x=170, y=50)
def main():
    root = Tk()
    root.geometry("300x280+300+300")
    app = Example()
    root.mainloop()
if __name__ == '__main__':
    main()

在此示例中，我们使用绝对定位放置了三个图像。 我们使用位置几何图形管理器。

from PIL import Image, ImageTk

我们使用 Python Imaging Library（PIL）模块中的Image和ImageTk。

style = Style()
style.configure("TFrame", background="#333")

我们使用样式将框架配置为具有深灰色背景。

bard = Image.open("bardejov.jpg")
bardejov = ImageTk.PhotoImage(bard)

我们从当前工作目录中的图像创建图像对象和照片图像对象。

label1 = Label(self, image=bardejov)

我们用图像创建一个Label。 标签可以包含文本或图像。

label1.image = bardejov

我们必须保留对图像的引用，以防止图像被垃圾收集。

label1.place(x=20, y=20)

将标签放置在框架上的x = 20和y = 20坐标处。

图：绝对定位

Tkinter 包管理器

pack几何管理器在水平和垂直框中组织窗口小部件。 布局由fill，expand和side选项控制。

按钮示例

在下面的示例中，我们将两个按钮放置在窗口的右下角。 我们使用pack管理器。

buttons.py

#!/usr/bin/env python3
"""
ZetCode Tkinter tutorial
In this script, we use the pack manager
to position two buttons in the
bottom-right corner of the window.
Author: Jan Bodnar
Last modified: April 2019
Website: www.zetcode.com
"""
from tkinter import Tk, RIGHT, BOTH, RAISED
from tkinter.ttk import Frame, Button, Style
class Example(Frame):
    def __init__(self):
        super().__init__()
        self.initUI()
    def initUI(self):
        self.master.title("Buttons")
        self.style = Style()
        self.style.theme_use("default")
        frame = Frame(self, relief=RAISED, borderwidth=1)
        frame.pack(fill=BOTH, expand=True)
        self.pack(fill=BOTH, expand=True)
        closeButton = Button(self, text="Close")
        closeButton.pack(side=RIGHT, padx=5, pady=5)
        okButton = Button(self, text="OK")
        okButton.pack(side=RIGHT)
def main():
    root = Tk()
    root.geometry("300x200+300+300")
    app = Example()
    root.mainloop()
if __name__ == '__main__':
    main()

我们有两个框架。 有一个基础框架和一个附加框架，该框架可在两个方向上扩展，并将两个按钮按到基础框架的底部。 这些按钮放置在水平框中，并位于此框的右侧。

frame = Frame(self, relief=RAISED, borderwidth=1)
frame.pack(fill=BOTH, expand=True)

我们创建另一个Frame小部件。 该小部件占用了大部分区域。 我们更改框架的边框，使框架可见。 默认情况下，它是平坦的。

closeButton = Button(self, text="Close")
closeButton.pack(side=RIGHT, padx=5, pady=5)

创建了closeButton。 将其放入水平盒中。 side参数使按钮放置在水平线的右侧。 padx和pady参数在小部件之间放置了一些空间。 padx在按钮小部件之间以及closeButton和根窗口的右边框之间放置一些空间。 pady在按钮小部件与框架的边框和根窗口的边框之间放置一些空间。

okButton.pack(side=RIGHT)

okButton放在closeButton旁边，它们之间有 5px 的间距。

图：按钮示例

回顾示例

pack管理器是一个简单的布局管理器。 它可用于执行简单的布局任务。 为了创建更复杂的布局，我们需要利用更多的框架，每个框架都有自己的包管理器。

review.py

#!/usr/bin/env python3
"""
ZetCode Tkinter tutorial
In this example, we use the pack
manager to create a review example.
Author: Jan Bodnar
Last modified: April 2019
Website: www.zetcode.com
"""
from tkinter import Tk, Text, TOP, BOTH, X, N, LEFT
from tkinter.ttk import Frame, Label, Entry
class Example(Frame):
    def __init__(self):
        super().__init__()
        self.initUI()
    def initUI(self):
        self.master.title("Review")
        self.pack(fill=BOTH, expand=True)
        frame1 = Frame(self)
        frame1.pack(fill=X)
        lbl1 = Label(frame1, text="Title", width=6)
        lbl1.pack(side=LEFT, padx=5, pady=5)
        entry1 = Entry(frame1)
        entry1.pack(fill=X, padx=5, expand=True)
        frame2 = Frame(self)
        frame2.pack(fill=X)
        lbl2 = Label(frame2, text="Author", width=6)
        lbl2.pack(side=LEFT, padx=5, pady=5)
        entry2 = Entry(frame2)
        entry2.pack(fill=X, padx=5, expand=True)
        frame3 = Frame(self)
        frame3.pack(fill=BOTH, expand=True)
        lbl3 = Label(frame3, text="Review", width=6)
        lbl3.pack(side=LEFT, anchor=N, padx=5, pady=5)
        txt = Text(frame3)
        txt.pack(fill=BOTH, pady=5, padx=5, expand=True)
def main():
    root = Tk()
    root.geometry("300x300+300+300")
    app = Example()
    root.mainloop()
if __name__ == '__main__':
    main()

该示例显示了如何创建具有多个框架和包装管理器的更复杂的布局。

self.pack(fill=BOTH, expand=True)

第一个框架是基础框架，其他框架放置在该基础框架上。 请注意，除了在框架内组织子代外，我们还在基础框架上管理框架。

frame1 = Frame(self)
frame1.pack(fill=X)
lbl1 = Label(frame1, text="Title", width=6)
lbl1.pack(side=LEFT, padx=5, pady=5)
entry1 = Entry(frame1)
entry1.pack(fill=X, padx=5, expand=True)

前两个小部件放置在第一帧上。 使用fill和expand参数水平拉伸该条目。

frame3 = Frame(self)
frame3.pack(fill=BOTH, expand=True)
lbl3 = Label(frame3, text="Review", width=6)
lbl3.pack(side=LEFT, anchor=N, padx=5, pady=5)
txt = Text(frame3)
txt.pack(fill=BOTH, pady=5, padx=5, expand=True)

在第三帧内，我们放置一个标签和一个文本小部件。 标签固定在北方。 文本小部件将占据整个剩余区域。

图：回顾 example

Tkinter 网格管理器

Tkinter 的grid几何管理器用于创建计算器的骨架。

calculator.py

#!/usr/bin/env python3
"""
ZetCode Tkinter tutorial
In this script, we use the grid manager
to create a skeleton of a calculator.
Author: Jan Bodnar
Last modified: April 2019
Website: www.zetcode.com
"""
from tkinter import Tk, W, E
from tkinter.ttk import Frame, Button, Entry, Style
class Example(Frame):
    def __init__(self):
        super().__init__()
        self.initUI()
    def initUI(self):
        self.master.title("Calculator")
        Style().configure("TButton", padding=(0, 5, 0, 5),
            font='serif 10')
        self.columnconfigure(0, pad=3)
        self.columnconfigure(1, pad=3)
        self.columnconfigure(2, pad=3)
        self.columnconfigure(3, pad=3)
        self.rowconfigure(0, pad=3)
        self.rowconfigure(1, pad=3)
        self.rowconfigure(2, pad=3)
        self.rowconfigure(3, pad=3)
        self.rowconfigure(4, pad=3)
        entry = Entry(self)
        entry.grid(row=0, columnspan=4, sticky=W+E)
        cls = Button(self, text="Cls")
        cls.grid(row=1, column=0)
        bck = Button(self, text="Back")
        bck.grid(row=1, column=1)
        lbl = Button(self)
        lbl.grid(row=1, column=2)
        clo = Button(self, text="Close")
        clo.grid(row=1, column=3)
        sev = Button(self, text="7")
        sev.grid(row=2, column=0)
        eig = Button(self, text="8")
        eig.grid(row=2, column=1)
        nin = Button(self, text="9")
        nin.grid(row=2, column=2)
        div = Button(self, text="/")
        div.grid(row=2, column=3)
        fou = Button(self, text="4")
        fou.grid(row=3, column=0)
        fiv = Button(self, text="5")
        fiv.grid(row=3, column=1)
        six = Button(self, text="6")
        six.grid(row=3, column=2)
        mul = Button(self, text="*")
        mul.grid(row=3, column=3)
        one = Button(self, text="1")
        one.grid(row=4, column=0)
        two = Button(self, text="2")
        two.grid(row=4, column=1)
        thr = Button(self, text="3")
        thr.grid(row=4, column=2)
        mns = Button(self, text="-")
        mns.grid(row=4, column=3)
        zer = Button(self, text="0")
        zer.grid(row=5, column=0)
        dot = Button(self, text=".")
        dot.grid(row=5, column=1)
        equ = Button(self, text="=")
        equ.grid(row=5, column=2)
        pls = Button(self, text="+")
        pls.grid(row=5, column=3)
        self.pack()
def main():
    root = Tk()
    app = Example()
    root.mainloop()
if __name__ == '__main__':
    main()

网格管理器用于组织框架容器中的按钮。

Style().configure("TButton", padding=(0, 5, 0, 5),
    font='serif 10')

我们将Button小部件配置为具有特定的字体并具有一些内部填充。

self.columnconfigure(0, pad=3)
...
self.rowconfigure(0, pad=3)

我们使用columnconfigure()和rowconfigure()方法在网格列和行中定义一些空间。 这样，我们可以实现按钮之间有一定的间隔。

entry = Entry(self)
entry.grid(row=0, columnspan=4, sticky=W+E)

Entry小部件是显示数字的地方。 小部件放置在第一行中，它横跨所有四列。 小部件可能不会占用网格中单元所分配的所有空间。 sticky参数沿给定方向扩展小部件。 在我们的案例中，我们确保条目小部件从左向右展开。

cls = Button(self, text="Cls")
cls.grid(row=1, column=0)

cls按钮位于第二行和第一列。 请注意，行和列从零开始。

self.pack()

pack()方法显示框架小部件并为其指定初始大小。 如果没有给出其他参数，则大小将足以显示所有子项。 此方法将框架窗口小部件打包到顶级根窗口，该窗口也是一个容器。 grid几何管理器用于组织框架小部件中的按钮。

图：计算器

Windows 示例

以下示例使用grid几何管理器创建 Windows 对话框。

windows.py

#!/usr/bin/env python3
"""
ZetCode Tkinter tutorial
In this script, we use the grid
manager to create a more complicated Windows
layout.
Author: Jan Bodnar
Last modified: April 2019
Website: www.zetcode.com
"""
from tkinter import Tk, Text, BOTH, W, N, E, S
from tkinter.ttk import Frame, Button, Label, Style
class Example(Frame):
    def __init__(self):
        super().__init__()
        self.initUI()
    def initUI(self):
        self.master.title("Windows")
        self.pack(fill=BOTH, expand=True)
        self.columnconfigure(1, weight=1)
        self.columnconfigure(3, pad=7)
        self.rowconfigure(3, weight=1)
        self.rowconfigure(5, pad=7)
        lbl = Label(self, text="Windows")
        lbl.grid(sticky=W, pady=4, padx=5)
        area = Text(self)
        area.grid(row=1, column=0, columnspan=2, rowspan=4,
            padx=5, sticky=E+W+S+N)
        abtn = Button(self, text="Activate")
        abtn.grid(row=1, column=3)
        cbtn = Button(self, text="Close")
        cbtn.grid(row=2, column=3, pady=4)
        hbtn = Button(self, text="Help")
        hbtn.grid(row=5, column=0, padx=5)
        obtn = Button(self, text="OK")
        obtn.grid(row=5, column=3)
def main():
    root = Tk()
    root.geometry("350x300+300+300")
    app = Example()
    root.mainloop()
if __name__ == '__main__':
    main()

在此示例中，我们使用Label小部件，Text小部件和四个按钮。

self.columnconfigure(1, weight=1)
self.columnconfigure(3, pad=7)
self.rowconfigure(3, weight=1)
self.rowconfigure(5, pad=7)

我们在网格中的小部件之间定义一些空间。 weight参数使第二列和第四行可增长。 该行和列被文本小部件占据，因此所有多余的空间都被它占用。

lbl = Label(self, text="Windows")
lbl.grid(sticky=W, pady=4, padx=5)

标签窗口小部件已创建并放入网格中。 如果未指定列和行，则假定为第一列或行。 该标签向西粘贴，其边框周围有一些填充物。

area = Text(self)
area.grid(row=1, column=0, columnspan=2, rowspan=4,
    padx=5, sticky=E+W+S+N)

文本窗口小部件已创建，并从第二行和第一列开始。 它跨越两列和四行。 小部件和根窗口的左边框之间有 4px 的间距。 最终，小部件将粘在所有四个方面。 因此，调整窗口大小时，文本小部件会向各个方向扩展。

abtn = Button(self, text="Activate")
abtn.grid(row=1, column=3)
cbtn = Button(self, text="Close")
cbtn.grid(row=2, column=3, pady=4)

这两个按钮位于文本小部件旁边。

hbtn = Button(self, text="Help")
hbtn.grid(row=5, column=0, padx=5)
obtn = Button(self, text="OK")
obtn.grid(row=5, column=3)

这两个按钮位于文本小部件下方； “帮助”按钮占据第一列，“确定”按钮占据最后一列。

图：窗口示例

在 Tkinter 教程的这一部分中，我们介绍了小部件的布局管理。