Qt Designer怎么用？入门教程有哪些？-杰瑞科技汇

Qt Designer 教程：从入门到精通

第一部分：入门准备
（图片来源网络，侵删）
- 1 什么是 Qt Designer？
- 2 为什么要使用 Qt Designer？
- 3 安装与启动
第二部分：界面初探
- 1 主窗口布局
- 2 核心区域：Widget Box
- 3 属性编辑器
- 4 对象查看器
- 5 动作编辑器
第三部分：核心技能：控件与布局
- 1 使用常用控件
- 2 布局管理器
- 3 布局实战：创建一个登录窗口
第四部分：信号与槽：让界面“活”起来
- 1 什么是信号和槽？
- 2 连接方式一：编辑器模式
- 3 连接方式二：信号槽编辑器
- 4 编写槽函数
第五部分：高级技巧与最佳实践
（图片来源网络，侵删）
- 1 使用样式表
- 2 创建自定义控件
- 3 使用 ui 文件
- 4 使用 uic 工具
第六部分：完整实战项目：待办事项应用
- 1 设计界面
- 2 连接信号与槽
- 3 编写 Python 代码
- 4 运行与总结

第一部分：入门准备

1 什么是 Qt Designer？

Qt Designer 是一个强大的可视化界面设计工具，它属于 Qt 生态系统的一部分，你可以把它想象成一个“乐高”搭建工具，通过拖拽和放置各种预置的 UI 控件（如按钮、文本框、列表等）来快速构建图形用户界面。

它生成的文件格式是 .ui，这是一个基于 XML 的文件，描述了界面的所有元素、布局和属性。

2 为什么要使用 Qt Designer？

所见即所得：无需编写大量繁琐的布局代码，直观地拖拽即可完成界面设计。
提高效率：将界面设计和业务逻辑代码分离，让设计师和开发者可以并行工作。
易于维护：界面结构清晰，修改布局或控件属性非常方便。
跨平台：设计好的界面可以在 Windows, macOS, Linux 等不同系统上完美运行。

3 安装与启动

安装：
（图片来源网络，侵删）
- 如果你安装了完整的 PyQt5 或 PySide2/6 开发包，通常已经包含了 Qt Designer，它的可执行文件通常位于：
  - Windows: Python/Scripts/
  - macOS/Linux: python -m PyQt5.uic.pyrcc 或直接在 bin/ 目录下寻找 designer。
- 如果你使用的是 Anaconda，可以通过 conda install pyqt 命令安装。
- 也可以从 Qt 官网单独下载安装。
启动：
- 在命令行中输入 designer (Linux/macOS) 或 designer.exe (Windows) 并回车。
- 或者,如果你在 Python 环境中，可以直接运行 python -m PyQt5.uic.pyuic 的相关工具。

启动后,Qt Designer 会让你选择要创建的窗口类型，Main Window (主窗口), Dialog (对话框), Widget (通用部件) 等。

第二部分：界面初探

启动 Qt Designer 后，你会看到一个包含多个面板的窗口，我们来认识一下它们。

Widget Box (控件箱)：这里是所有可用控件的集合，按类别（布局、显示、输入、容器等）组织，你可以直接拖拽控件到中间的设计区域。
Form Window (设计区域)：这是你构建界面的画布。
Object Inspector (对象查看器)：以树状结构显示界面中所有控件的层级关系，这对于理解复杂的布局和选择被遮挡的控件非常有用。
Property Editor (属性编辑器)：这是最重要的面板之一，当选中一个控件时，这里会显示该控件的所有可配置属性，如 objectName (对象名)、text (显示文本)、geometry (几何尺寸)、styleSheet (样式表) 等。
Action Editor (动作编辑器)：主要用于 Main Window，用于创建菜单、工具栏等可重用的动作。
Signal/Slot Editor (信号槽编辑器)：用于管理和查看控件之间的信号与槽连接。

第三部分：核心技能：控件与布局

1 使用常用控件

从 Widget Box 中拖拽一个 Push Button (按钮) 和 Line Edit (单行文本框) 到设计区域。

选中控件：直接点击控件。
修改属性：在 Property Editor 中修改，将 Push Button 的 objectName 改为 btn_ok，将 text 改为“确定”，将 Line Edit 的 objectName 改为 le_username。

2 布局管理器

布局是 Qt Designer 的精髓。绝对定位（手动调整控件位置）是强烈不推荐的，因为它在不同分辨率的屏幕上会显示得一塌糊涂，Qt 提供了强大的布局管理器，它们能自动处理窗口大小变化时的控件位置和尺寸。

垂直布局：控件垂直排列。
水平布局：控件水平排列。
网格布局：控件在二维网格中排列。
表单布局：非常适合创建表单，如标签和输入框的左右对齐。
水平/垂直布局：一个容器，可以将其他布局管理器放进去。

如何使用布局？

选中一个或多个需要布局的控件。
在工具栏上点击相应的布局按钮（或使用快捷键 Ctrl+2/3/4/5）。
Qt Designer 会自动为选中的控件应用布局，并显示布局的边框。

你可以将一个布局放到另一个布局中,创建出复杂的嵌套布局。

3 布局实战：创建一个登录窗口**

创建主窗口：启动时选择 Dialog。
添加控件：拖入两个 Label (标签), 两个 Line Edit (文本框)，一个 CheckBox (复选框)，一个 Push Button (按钮)。
设置对象名：在属性编辑器中，将它们分别命名为 lb_user, le_user, lb_pwd, le_pwd, cb_remember, btn_login。
应用布局：
- 选中 lb_user 和 le_user，点击 表单布局 按钮，它们会变成一对。
- 选中 lb_pwd 和 le_pwd，同样点击 表单布局 按钮。
- 选中 cb_remember 和 btn_login，点击 水平布局 按钮。
- 选中这三个布局好的组,再点击 垂直布局 按钮，整个对话框就会被一个垂直布局包裹。
调整间距：你可以选中整个布局，在属性编辑器中调整 spacing (间距) 和 margins (边距) 属性，让界面更美观。

第四部分：信号与槽：让界面“活”起来

一个静态的界面是没有用的,当用户点击按钮、输入文本时，程序需要做出响应，在 Qt 中，这个过程通过信号和槽机制实现。

信号：由控件发出的“事件通知”，按钮被点击时会发出 clicked() 信号。
槽：可以“响应”信号的函数或方法，当你连接一个信号到一个槽时，信号发出时，槽函数就会被自动调用。

1 连接方式一：编辑器模式（最常用）

这是最直观的连接方式。

进入编辑模式：点击工具栏上的 编辑信号/槽 按钮（一个红色闪电图标），或者直接按 F3，控件上会出现蓝色的连接线。
拖拽连接：
- 点击 btn_login 按钮，按住鼠标左键，拖拽到 le_user 文本框上，松开。
- 会弹出一个配置窗口,让你选择信号和槽。
- 信号：选择 editingFinished() (当用户完成输入时触发)。
- 槽：选择 clear() (清空内容)。
- 点击确定,这样，当你在 le_user 中输入完内容后，le_user 的内容就会被清空（这只是一个演示，实际登录逻辑不是这样）。
自定义槽：
- 同样,从 btn_login 的 clicked() 信号开始拖拽，但这次不放到任何控件上，而是拖到空白处松开。
- 在弹出的窗口中,点击 Edit Slots...。
- 在右侧输入框中输入你的槽函数名,on_login_button_clicked，然后点击 Add Slot。
- 将 clicked() 信号连接到你刚刚创建的这个自定义槽 on_login_button_clicked 上。

2 连接方式二：信号槽编辑器

打开 Signal/Slot Editor 面板。
在左侧选择发送信号的控件,如 btn_login。
在右侧选择接收信号的控件（可以是 self，即主窗口）。
分别选择要连接的 Sender (发送者), Signal (信号), Receiver (接收者), Slot (槽)。
点击中间的号添加连接。

3 编写槽函数

Qt Designer 只是生成了 .ui 文件，它不知道你的槽函数具体做什么，这部分逻辑需要在你写的 Python 代码中实现。

假设你有一个 main.py 文件，你会在里面这样写：

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow
from PyQt5 import uic
# 加载 .ui 文件
Ui_MainWindow, _ = uic.loadUiType('login.ui') # 假设你保存的UI文件是 login.ui
class MyLoginWindow(QMainWindow, Ui_MainWindow):
    def __init__(self):
        super().__init__()
        self.setupUi(self) # 初始化UI
        # 将自定义槽函数连接起来（如果你没有在Designer里连接）
        # self.btn_login.clicked.connect(self.on_login_button_clicked)
    def on_login_button_clicked(self):
        """这是在Designer中创建的槽函数"""
        username = self.le_user.text()
        password = self.le_pwd.text()
        print(f"用户尝试登录: 用户名={username}, 密码={password}")
        # 这里添加实际的登录逻辑，比如验证用户名密码
if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MyLoginWindow()
    window.show()
    sys.exit(app.exec_())

第五部分：高级技巧与最佳实践

1 使用样式表

Qt Designer 的样式表功能类似于网页中的 CSS，可以让你轻松美化界面。

选中一个控件或整个窗体。
在 Property Editor 中找到 styleSheet 属性。
点击右侧的按钮，打开样式表编辑器。

输入 CSS 代码，让按钮变成圆角并改变背景色：

QPushButton {
    background-color: #2196F3;
    border: none;
    color: white;
    padding: 10px 24px;
    border-radius: 4px;
}
QPushButton:hover {
    background-color: #0b7dda;
}

2 创建自定义控件

你可以将设计好的一个部分（比如一个包含标签和输入框的组合）保存为一个自定义控件，方便在其他项目中复用。

在设计区域选中你想要组合的控件。
右键点击,选择 Promote to Custom Widget...。
输入一个类名（如 MyInputField）。
点击 Add，Promote，这个控件就会被一个自定义控件替换。

3 使用 `ui` 文件

Qt Designer 生成的 .ui 文件是纯文本的 XML 文件，你不能直接运行它，需要用 Python 代码来加载它。

有两种主要方法：

uic 模块（推荐用于简单项目）：如上面实战例子所示，使用 uic.loadUiType() 或 uic.loadUi() 来加载 .ui 文件。
pyuic5 命令行工具（用于将 .ui 转换为 .py 文件）：
- 在命令行中运行：
```
pyuic5 -x your_ui_file.ui -o output_ui_file.py
```
- -x 表示生成一个可运行的示例文件（包含 if __name__ == '__main__': 部分）。
- -o 指定输出的 Python 文件名。
- 这样,你的 UI 就会变成一个 Python 类，你可以在你的主程序中 import 这个类并继承它。

两种方式的对比：

uic 模块：UI 和代码分离，UI 修改后无需重新转换代码，更适合迭代开发。
pyuic5 转换：将 UI 打包进一个 .py 文件，方便分发，但 UI 修改后需要重新转换。

第六部分：完整实战项目：待办事项应用

让我们用 Qt Designer 和 Python 写一个简单的待办事项应用。

1 设计界面

创建一个新的 Widget 窗口。
左侧面板：
- 一个 QListWidget (列表)，命名为 lw_tasks。
- 一个 QPushButton (按钮)，命名为 btn_add，text 为“添加”。
- 一个 QPushButton (按钮)，命名为 btn_delete，text 为“删除”。
右侧面板：
- 一个 QLabel (标签)，text 为“任务详情：”。
- 一个 QTextEdit (多行文本框)，命名为 te_detail。
布局：
- 左侧使用 垂直布局。
- 右侧使用 垂直布局。
- 将左右两个面板放入一个 水平布局 中。
保存：将文件保存为 todo.ui。

2 连接信号与槽

进入编辑模式。
连接 btn_add 的 clicked() 信号到自定义槽 on_add_button_clicked。
连接 btn_delete 的 clicked() 信号到自定义槽 on_delete_button_clicked。
连接 lw_tasks 的 itemSelectionChanged() 信号到自定义槽 on_task_selection_changed。

3 编写 Python 代码

创建 main.py 文件：

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QListWidgetItem
from PyQt5 import uic
# 加载UI文件
Ui_MainWindow, _ = uic.loadUiType('todo.ui')
class TodoApp(QMainWindow, Ui_MainWindow):
    def __init__(self):
        super().__init__()
        self.setupUi(self)
        self.tasks = {} # 用字典存储任务详情 {list_item_text: detail_text}
    def on_add_button_clicked(self):
        """添加新任务"""
        # 这里简化处理，实际应用中可能需要弹出一个对话框让用户输入
        task_name = f"新任务 {self.lw_tasks.count() + 1}"
        item = QListWidgetItem(task_name)
        self.lw_tasks.addItem(item)
        self.tasks[item.text()] = "" # 初始化详情为空
    def on_delete_button_clicked(self):
        """删除选中任务"""
        current_item = self.lw_tasks.currentItem()
        if current_item:
            task_text = current_item.text()
            del self.tasks[task_text] # 从字典中删除
            self.lw_tasks.takeItem(self.lw_tasks.row(current_item))
    def on_task_selection_changed(self):
        """任务选中变化时，更新详情框"""
        current_item = self.lw_tasks.currentItem()
        if current_item and current_item.text() in self.tasks:
            self.te_detail.setText(self.tasks[current_item.text()])
        else:
            self.te_detail.clear()
if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = TodoApp()
    window.show()
    sys.exit(app.exec_())

4 运行与总结

确保 todo.ui 和 main.py 在同一个目录下。
运行 python main.py。
你将看到一个可以添加、删除任务，并在选中任务时显示（或编辑）其详情的应用。

这个项目展示了如何将 Qt Designer 的界面设计与 Python 的逻辑代码完美结合，你专注于在 Designer 中拖拽布局，然后在 Python 中处理用户交互和数据，大大提高了开发效率和代码的可维护性。

Qt Designer怎么用？入门教程有哪些？