【 Tkinter界面-练习02】使用Grid布局管理

一、说明

        在本教程中，您将更详细地了解如何使用 Tkinter 的布局管理器排列小部件。布局的grid将在本教程彻底讨论，保证学成。因此对于熟悉grid的朋友，可以直接跳过去，去看更多使用 Tkinter 设计 UI 的示例。

二、网格布局管理器

        我个人认为使用布局管理器是Tkinter提供的三个管理器中最简单的管理器。原因是因为它的工作方式类似于矩阵，具有行和列。最左上角的行值为 0，列值为 0。因此，在网格中移动和排列小部件非常简单。如果要将小部件放置在水平行中，则行值保持不变，并且每个小部件的列值增加 1。如果要向下移动一列，则类似，列值保持不变，行值增加。查看下图以获取视觉示例。grid

网格布局管理器在 Tkinter 中的工作原理。

        请注意上面如何通过指定每个小部件的行和列值来定位每个小部件在“单元格”中。小部件还可以跨越多行或多列。

三、网格参数

现在让我们看一些可以帮助您使用布局管理器排列小部件的主要参数。grid

• row，column -- 小组件位置的行值和列值。两者都从 0 开始。
• columnspan，rowspan -- 指定小部件将包含多少列或多少行。这对于帮助获得小部件的正确间距非常有用。
• padx，pady -- 用于在其他小部件之间创建填充的窗口小部件周围的像素数，用于水平或垂直填充
• ipadx， ipady-- 用于小部件内部填充的像素数，也用于水平或垂直填充

• sticky-- 指定 S、N、E、W 或它们的组合的值，例如西北、东北、西南或东南。该参数告诉小部件将“粘”到“单元格”的哪一侧。如果您使用 W+E+N+S，那么小部件将填满“单元格”。默认是将小部件置于“单元格”中心。

四、使用网格的简单示例

        下面只是一个简单的例子，看看如何设置我们的窗口和使用grid().在下面的 GUI 中，我们将 Label、Checkbutton 和小部件Button结合起来，以调查人们喜欢哪种颜色。

        分析：在该示例中，所有组件各占一行，因此，不需要考虑列如何安排，因而很简单。

示例 Tkinter UI 使用网格和调查，询问您喜欢哪种颜色。

让我们看看代码是什么样的：

蟒

from tkinter import *

root = Tk()
root.title("Practice with Grid")
root.geometry("210x180")  # set starting size of window

def display_checked():
    '''check if the checkbuttons have been toggled, and display
    a value of '1' if they are checked, '0' if not checked'''
    red = red_var.get()
    yellow = yellow_var.get()
    green = green_var.get()
    blue = blue_var.get()

    print("red: {}\nyellow:{}\ngreen: {}\nblue: {}".format(
        red, yellow, green, blue))

# Create label
label = Label(root, text="Which colors do you like below?")
label.grid(row=0)

# Create variables and checkbuttons
red_var = IntVar()
Checkbutton(root, width=10, text="red", variable=red_var, bg="red").grid(row=1)

yellow_var = IntVar()
Checkbutton(root, width=10, text="yellow", variable=yellow_var, bg="yellow").grid(row=2)

green_var = IntVar()
Checkbutton(root, width=10, text="green", variable=green_var, bg="green").grid(row=3)

blue_var = IntVar()
Checkbutton(root, width=10, text="blue", variable=blue_var, bg="blue").grid(row=4)

# Create Buttons, one to check which colors are checked,
# and another to close the window.
Button(root, text="Tally", command=display_checked).grid(row=5)
Button(root, text="End", command=root.quit).grid(row=6)

root.mainloop()

        首先，我们首先导入 Tkinter 并在第 1-5 行中设置根窗口。 display_checked() 函数与 Checkbutton 对象一起使用，以查看哪些框已被选中。 get() 方法检查框是否已被选中，如果是，则返回值“1”以表示选中。如果不是，则为“0”。我们在第 19 行创建一个标签来显示我们的问题。请注意第 20 行如何使用 grid() 将标签放置在窗口中。 row 参数设置为 0，但在本例中，对于第一个小部件来说不是必需的。这是因为 grid() 的默认值为 row=0、column=0。另外，该列不包含参数，因为我们在此界面中只有一列。

        接下来，我们开始为第 23-30 行的每种颜色创建四个 Checkbutton 小部件。最后创建最后两个按钮“Tally”和“End”。计数按钮调用 display_checked()~ 函数并将您选择的颜色打印到终端。请注意，对于每个小部件，row` 值如何增加 1，以便将其放置在下一行和前一个小部件下方。

        如果选中黄色和绿色，则输出display_checked函数。

        让我们看一下，有点困难的 UI。

五、带网格的配置文件条目 UI

        每当您创建新帐户时，输入您的个人信息非常重要，以便系统可以跟踪您。对于下一个 GUI，我们将重点使用grid创建一个界面，供用户输入一些个人数据。以下 UI 使用标签Label、条目和菜单小部件EntryMenu。

用网格和 Tkinter 的配置文件条目 UI，包括用户图像、姓名、性别、眼睛颜色、身高和体重输入字段。

        由于本教程的重点是帮助您了解如何使用grid ，因此上述窗口中的小部件功能不完全。您可以通过允许用户选择图像或在用户完成输入后保存用户的信息来添加更多功能。

蟒

from tkinter import *

root = Tk()
root.title("Profile Entry using Grid")
root.geometry("500x300")  # set starting size of window
root.maxsize(500, 300)  # width x height
root.config(bg="lightgrey")

# Profile picture
image = PhotoImage(file="profile.gif")
small_img = image.subsample(4,4)

img = Label(root, image=small_img)
img.grid(row=0, column=0, rowspan=6, padx=5, pady=5)

# Enter specific information for your profile into the following widgets
enter_info = Label(root, text="Please enter your information: ", bg="lightgrey")
enter_info.grid(row=0, column=1, columnspan=4, padx=5, pady=5)

# Name label and entry widgets
Label(root, text="Name", bg="lightgrey").grid(row=1, column=1, padx=5, pady=5, sticky=E)

name = Entry(root, bd=3)
name.grid(row=1, column=2, padx=5, pady=5)

# Gender label and dropdown widgets
gender = Menubutton(root, text="Gender")
gender.grid(row=2, column=2, padx=5, pady=5, sticky=W)
gender.menu = Menu(gender, tearoff=0)
gender["menu"] = gender.menu

# choices in gender dropdown menu
gender.menu.add_cascade(label="Male")
gender.menu.add_cascade(label="Female")
gender.menu.add_cascade(label="Other")
gender.grid()

# Eyecolor label and entry widgets
Label(root, text="Eye Color", bg="lightgrey").grid(row=3, column=1, padx=5, pady=5, sticky=E)
eyes = Entry(root, bd=3)
eyes.grid(row=3, column=2, padx=5, pady=5)

# Height and Weight labels and entry widgets
Label(root, text="Height", bg="lightgrey").grid(row=4, column=1, padx=5, pady=5, sticky=E)
Label(root, text="inches", bg="lightgrey").grid(row=4, column=3, sticky=W)

height = Entry(root, bd=3)
height.grid(row=4, column=2, padx=5, pady=5)

Label(root, text="Weight", bg="lightgrey").grid(row=5, column=1, padx=5, pady=5, sticky=E)
Label(root, text="lbs", bg="lightgrey").grid(row=5, column=3, sticky=W)

weight = Entry(root, bd=3)
weight.grid(row=5, column=2, padx=5, pady=5)

root.mainloop()

       我们再次开始加载 Tkinter 模块，创建根窗口，并创建一个 Label 小部件来保存用户的个人资料图像。让我们看第 14 行，看看如何在根窗口中设置图像。该图像位于 row=0、column=0，但它似乎没有排列在最左上角。这是由于下一个参数 rowspan，它允许小部件分布在多行上。这可以帮助更好地对齐小部件。这里 rowspan=6 因为右侧的所有数据输入小部件跨六行。

        在第 17 行和第 18 行中，我们创建了一个 Label 小部件，让用户知道在此窗口中要做什么。 Enter_info 对象仍然位于 row=0 中，但请注意我们如何通过将 column 设置为等于 1 来移动一列。该小部件还使用 columnspan=4 跨越四列。

        我不会详细介绍所有小部件，而是让您了解如何使用网格来排列小部件。

六、总结

        在今天的教程中，我们更详细地了解了如何使用网格布局管理器在 Tkinter 中创建 UI。首先，我们查看了一些有助于操作 q GUI 布局的参数。然后我们构建了两个 GUI 来帮助练习网格布局管理的概念。