📝 主旨内容

安装PyQt5

创建简单窗口并使用QLabel

示例功能概述

• 创建一个简单的窗口。

• 设置窗口的标题和大小。

• 在窗口中添加一个文本标签（QLabel），并显示一些文字。

完整代码示例

代码讲解

1. QApplication 和 QWidget
• QApplication：这是 PyQt5 应用程序的入口，它管理应用程序的控制流程和主要设置。创建任何 PyQt5 应用程序时，第一步都需要创建一个 QApplication 对象。
• QWidget：所有的窗口部件（widgets）都继承自 QWidget，它是 PyQt5 中最基本的窗口类。我们在这里继承了 QWidget 来创建一个窗口类。

2. 设置窗口标题和大小
• self.setWindowTitle('第一个 PyQt5 示例')：设置窗口的标题。
• self.resize(400, 300)：设置窗口的大小为 400x300 像素。

3. 添加一个 QLabel
• QLabel 是一个用于显示文本或图像的控件。在这里，我们创建了一个 QLabel 对象，显示 "这是一个简单的文本标签" 的文本。
• label.move(100, 130)：设置标签在窗口中的位置，x 轴位置为 100，y 轴位置为 130。

4. 主循环
• app.exec_()：这是进入应用程序的主循环，一旦进入这个循环，程序就开始等待用户的操作（例如关闭窗口等）。

运行结果

信号与槽、输入框和按钮交互

功能概述

• 通过 QLineEdit 创建一个输入框，允许用户输入文本。

• 使用 QPushButton 创建一个按钮，点击按钮时获取输入框的内容并显示到 QLabel 上。

• 如果输入框为空，弹出一个警告对话框提示用户输入内容。

信号与槽机制

完整代码示例

代码讲解

1. QLineEdit 输入框
• QLineEdit 是用于输入文本的控件，用户可以在这个控件中输入任意的文本。
• self.input_field.setPlaceholderText('请输入一些文本')：设置提示文本，当输入框为空时显示这个提示，帮助用户理解输入框的作用。

2. QPushButton 按钮
• QPushButton 是按钮控件，点击按钮时会触发相应的操作。在这里，我们创建了一个名为 "显示输入" 的按钮。
• self.button.clicked.connect(self.on_button_click)：这是信号与槽机制的关键。clicked 是 QPushButton 自带的信号，表示按钮被点击。我们将这个信号连接到了自定义的槽函数 on_button_click，这样当按钮被点击时，on_button_click 函数就会被执行。

3. 槽函数 on_button_click
• 在槽函数 on_button_click 中，首先我们使用 self.input_field.text() 获取输入框中的内容。
• 如果输入框有内容，就将其显示在 QLabel 上，显示格式为 您输入了: xxx。
• 如果输入框为空，弹出一个警告对话框，使用 QMessageBox.warning 显示提示，要求用户输入内容。

4. QVBoxLayout 布局管理器
• 在本示例中，我们使用了一个简单的垂直布局（QVBoxLayout）来排列控件。
• 通过 layout.addWidget(self.input_field)，将控件按顺序添加到布局中，窗口的主布局设置为该布局。

5. 弹出警告框 QMessageBox.warning
• 当输入框为空时，我们使用 QMessageBox.warning 弹出一个警告框。这个对话框会提示用户 “输入框不能为空”。

运行结果

1. 窗口中会显示一个输入框，一个按钮，以及一个用于显示结果的标签。

2. 用户在输入框中输入内容，然后点击按钮，输入的内容会显示在标签上。

3. 如果用户没有输入任何内容就点击按钮，会弹出一个警告对话框，提示输入框不能为空。

信号与槽总结

布局管理器

1. 水平布局（QHBoxLayout）：将控件水平排列。

2. 垂直布局（QVBoxLayout）：将控件垂直排列。

3. 表单布局（QFormLayout）：常用于表单界面，控件通常以标签和输入框的形式成对出现。

4. 网格布局（QGridLayout）：将控件放置在表格网格中，可以自由控制行和列的位置。

1. 水平和垂直布局示例：创建一个简单的登录框

1. 水平布局 QHBoxLayout
• QHBoxLayout 会将控件按水平方向排列。在这个示例中，我们将用户名的标签和输入框放在一个水平布局中，同样的，密码的标签和输入框也放在另一个水平布局中。

2. 垂直布局 QVBoxLayout
• QVBoxLayout 会将控件按垂直方向排列。我们使用垂直布局将用户名行、密码行以及登录按钮按顺序垂直排列。

3. 混合使用布局
• 通过 vbox.addLayout(hbox1)，我们将水平布局 hbox1（包含用户名的标签和输入框）放入垂直布局 vbox 中，这样可以实现更复杂的布局方式。

2. 表单布局示例：重写登录框

1. QFormLayout
• QFormLayout 是一种表单布局，常用于将控件以 标签-控件 的方式配对展示。在这个示例中，我们将用户名和密码标签与相应的输入框放在表单布局中。

2. form_layout.addRow()
• addRow() 方法用于向表单布局中添加控件。我们通过 addRow('用户名:', self.username_input) 的方式，向表单布局中添加了一行，第一列是标签，第二列是输入框。

3. 网格布局示例：实现一个简单的计算器

1. 网格布局 QGridLayout
• QGridLayout 用于将控件放置在表格网格中。在这个示例中，我们将按钮按照 4x4 的网格排列。

2. addWidget()
• 使用 addWidget() 方法将按钮添加到网格中。每个按钮都根据其所在的行和列的位置被放入布局中。

3. 计算器按钮
• 我们定义了 16 个按钮，其中包括数字键、运算符和清除（C）以及等号（=）键，并将这些按钮放置在相应的网格位置上。

1. 水平布局（QHBoxLayout）：将控件水平排列。

2. 垂直布局（QVBoxLayout）：将控件垂直排列。

3. 表单布局（QFormLayout）：常用于表单类界面，控件以 标签-输入框 的形式成对出现。

4. 网格布局（QGridLayout）：将控件放置在表格网格中，适合复杂的界面布局，如计算器。

Qt Designer的安装与使用

1. 安装 Qt Designer

注意：如果系统找不到 pyqt5-tools 相关的可执行文件，你可以去手动找到它的安装路径，例如在 site-packages/pyqt5_tools/Qt/bin/ 中。

2. 使用 Qt Designer 设计界面

1. 打开 Qt Designer，选择 Main Window 作为窗口模板（你也可以选择其他模板，如 Dialog 或 Widget）。

2. 点击 “Create”，创建一个新的主窗口。

1. 在界面的左侧工具栏中，你可以找到各种控件（如 QLabel、QPushButton、QLineEdit 等）。

2. 拖拽你想要使用的控件到设计区域中，并将它们摆放到适合的位置。例如，你可以拖拽一个 QLabel 和一个 QPushButton 放到窗口中。

3. 使用右侧的属性编辑器（Property Editor）修改控件的属性，例如修改 QLabel 的文本内容，修改按钮的标题等。

1. 完成界面设计后，点击 “File” -> “Save As”，将设计好的界面保存为一个 .ui 文件（例如 main_window.ui）。

3. 将 .ui 文件转换为 Python 代码

1. PyQt5 提供了 pyuic5 工具，用于将 .ui 文件转换为 Python 代码。你可以在终端运行以下命令来进行转换：

• main_window.ui：这是通过 Qt Designer 保存的 .ui 文件。

• main_window.py：这是生成的 Python 文件。

4. 示例：设计一个带按钮和标签的简单窗口

1. 在 Qt Designer 中，创建一个主窗口，拖拽一个 QLabel 和一个 QPushButton 放置在窗口中。

2. 修改 QLabel 的 objectName 为 label，并将按钮的 objectName 修改为 button，这样我们在 Python 代码中可以方便地引用这些控件。

3. 保存为 simple_window.ui。

• 运行该代码后，窗口会加载我们在 Qt Designer 中设计的 UI。窗口中会有一个按钮和一个标签。

• 当你点击按钮时，标签的文本会变为 “按钮已点击！”。

5. 总结

组件库美化

基于gallery示例二次开发

QFluentWidgets

QFluentWidgets - Fluent Design Components Library based on Qt

https://qfluentwidgets.com/

🤗 总结归纳

📎 参考文章

zhuanlan.zhihu.com

https://zhuanlan.zhihu.com/p/75673557