Python 图形化界面基础篇：使用包装器（ Pack ）布局元素

拼搏现实的明天。 2024-03-03 08:20 83阅读 0赞

#### Python 图形化界面基础篇：使用包装器（ Pack ）布局元素 ####

*  引言
 *  什么是 Tkinter 的 Pack 布局？
 *   *  步骤1：导入 Tkinter 模块
     *  步骤2：创建 Tkinter 窗口
     *  步骤3：创建和使用 Pack 布局
     *  步骤4： Pack 布局选项
 *  完整示例代码
 *  代码解释
 *  结论

## 引言 ##

在 **Python** 图形化界面的基础篇课程中，我们将深入研究 **Tkinter** 库的布局管理器之一：包装器（ **Pack** ）布局。 **Pack** 布局是一种简单而有效的方式，用于在 **Tkinter** 应用程序中排列和布局 **GUI** 元素。它允许你沿着一个方向将元素堆叠在一起，这对于创建垂直或水平排列的元素非常有用。在本文中，我们将详细解释如何使用 **Pack** 布局管理器，包括创建、配置和定位 **GUI** 元素。

## 什么是 Tkinter 的 Pack 布局？ ##

**Tkinter** 是 **Python** 标准库中的 **GUI** 工具包，用于创建图形用户界面（ **GUI** ）应用程序。 **Tkinter** 提供了多种布局管理器， **Pack** 布局是其中之一。 **Pack** 布局允许你在容器中沿着一个方向（垂直或水平）依次排列元素，这些元素被称为控件。

**Pack** 布局的主要概念包括：

*  容器： **Pack** 布局需要一个容器，通常是 **Frame** （框架）或窗口。元素将被放置在这个容器内。
 *  方向：你可以指定排列元素的方向，可以是垂直或水平。默认情况下， **Pack** 布局是垂直的，即元素从上到下依次排列。
 *  定位：你可以使用 **Pack** 布局的选项来控制元素在容器中的位置，例如对齐方式、填充等。

现在让我们开始学习如何在 **Tkinter** 中使用 **Pack** 布局。

### 步骤1：导入 Tkinter 模块 ###

首先，请确保你已经安装了 **Python** 并包含了 **Tkinter** 库。然后，在你的 **Python** 脚本中导入 **Tkinter** 模块，以便使用 **Tkinter** 库的功能。

import tkinter as tk

### 步骤2：创建 Tkinter 窗口 ###

在使用 **Tkinter** 之前，需要创建一个 **Tkinter** 窗口对象，通常称之为 `root` 。这个窗口将充当 **GUI** 应用程序的主窗口。

root = tk.Tk()
    root.title("Pack布局示例")

在上面的代码中，我们创建了一个 **Tkinter** 窗口对象 `root` ，并设置了窗口的标题为" **Pack** 布局示例"。

### 步骤3：创建和使用 Pack 布局 ###

要使用 **Pack** 布局，首先需要创建一个容器（通常是 **Frame** ）来放置 **GUI** 元素。然后，通过调用控件的 `pack()` 方法，将它们添加到容器中，并指定它们在容器内的排列方式。

以下是一个示例，演示如何创建一个 **Frame** 容器，然后在其中使用 **Pack** 布局排列三个按钮：

# 创建一个Frame作为容器
    frame = tk.Frame(root)
    frame.pack()  # 使用Pack布局将容器添加到窗口中
    
    # 创建三个按钮并使用Pack布局排列它们
    button1 = tk.Button(frame, text="按钮1")
    button1.pack()
    
    button2 = tk.Button(frame, text="按钮2")
    button2.pack()
    
    button3 = tk.Button(frame, text="按钮3")
    button3.pack()

在上面的示例中，我们首先创建了一个 **Frame** 容器 `frame` ，然后使用 `pack()` 方法将它添加到了 `root` 窗口中。接下来，我们创建了三个按钮 `button1` 、 `button2` 和 `button3` ，并使用 `pack()` 方法排列它们。

### 步骤4： Pack 布局选项 ###

**Pack** 布局允许你使用选项来定制元素在容器中的排列方式。以下是一些常用的 **Pack** 布局选项：

*  **side** ：指定元素的排列方向，可以是" **top** “（默认值）、” **bottom** “、” **left** “或” **right** "。
 *  **fill** ：指定元素是否填充整个可用空间，可以是" **none** “（默认值）、” **x** “、” **y** “或” **both** "。
 *  **expand** ：指定元素是否扩展以填充可用空间，可以是 **True** 或 **False** 。
 *  **padx** 和 **pady** ：指定元素周围的外部填充。
 *  **ipadx** 和 **ipady** ：指定元素周围的内部填充。

以下是一个示例，演示如何使用 **Pack** 布局选项来自定义按钮的排列方式：

# 创建一个按钮并使用Pack布局选项
    custom_button = tk.Button(frame, text="自定义按钮", padx=10, pady=5)
    custom_button.pack(side="left", fill="both", expand=True)

在上述示例中，我们创建了一个自定义按钮 `custom_button` ，并使用了 **Pack** 布局选项来定义按钮的外部填充、排列方向、是否填充可用空间以及是否扩展以填充可用空间。

## 完整示例代码 ##

以下是一个完整的示例代码，演示如何创建一个 **Tkinter** 窗口，然后使用 **Pack** 布局排列按钮：

import tkinter as tk
    
    # 创建Tkinter窗口
    root = tk.Tk()
    root.title("Pack布局示例")
    
    # 创建一个Frame作为容器
    frame = tk.Frame(root)
    frame.pack()  # 使用Pack布局将容器添加到窗口中
    
    # 创建三个按钮并使用Pack布局排列它们
    button1 = tk.Button(frame, text="按钮1")
    button1.pack()
    
    button2 = tk.Button(frame, text="按钮2")
    button2.pack()
    
    button3 = tk.Button(frame, text="按钮3")
    button3.pack()
    
    # 创建一个自定义按钮并使用Pack布局选项自定义排列方式
    custom_button = tk.Button(frame, text="自定义按钮", padx=10, pady=5)
    custom_button.pack(side="left", fill="both", expand=True)
    
    # 启动Tkinter主事件循环
    root.mainloop()

**效果图：**  
![在这里插入图片描述][7eb9e84874c44ec2abec6986ec5f36e5.png]

## 代码解释 ##

让我们逐行解释上面的代码：

*  我们首先导入了 **Tkinter** 模块，以便使用 **Tkinter** 库的功能。
 *  创建了一个 **Tkinter** 窗口对象 `root` ，并设置了窗口的标题为" **Pack** 布局示例"。
 *  创建了一个 **Frame** 容器 `frame` ，然后使用 `pack()` 方法将它添加到了 `root` 窗口中。
 *  创建了三个按钮 `button1` 、 `button2` 和 `button3` ，并使用 `pack()` 方法排列它们。
 *  创建了一个自定义按钮 `custom_button` ，并使用 **Pack** 布局选项来自定义排列方式，包括填充、扩展等。
 *  最后，启动了 **Tkinter** 的主事件循环，使窗口可交互。

## 结论 ##

在本文中，我们学习了如何使用 **Tkinter** 中的 **Pack** 布局来排列和布局 **GUI** 元素。 **Pack** 布局是一种简单而强大的布局管理器，适用于许多 **GUI** 应用程序中的元素排列。通过创建一个容器并使用 `pack()` 方法，你可以轻松地控制元素的排列方式，并使用选项来自定义元素的布局。继续学习 **Tkinter** ，你将能够创建更复杂和有吸引力的用户界面，以满足不同应用程序的需求。

[7eb9e84874c44ec2abec6986ec5f36e5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/c1e6d02130ad44329e7c4daf46552aae.png