Qt Designer 入门介绍 – wiki基地

作者： /

Qt Designer 入门指南：可视化 GUI 设计的利器

图形用户界面（GUI）是现代软件不可或缺的一部分，它提供了用户与程序交互的直观方式。在众多的 GUI 开发框架中，Qt 以其跨平台、功能强大和优雅的设计而闻名。然而，即使是使用像 Qt 这样优秀的框架，手动编写所有界面的代码也可能非常耗时且难以维护，特别是对于复杂的窗口布局和大量的控件。

这时，Qt Designer 就应运而生了。它是 Qt 官方提供的一款强大的可视化界面设计工具，允许开发者通过拖放控件、设置属性和连接信号与槽来快速构建用户界面，而无需编写大量的布局和控件实例化代码。本文将带你深入了解 Qt Designer，从它的基本概念到实际操作，助你轻松跨入可视化 GUI 设计的大门。

1. 什么是 Qt Designer？

Qt Designer 是一款独立的应用程序，它是 Qt 开发工具链中的重要组成部分。它的核心功能是让开发者以可视化的方式设计基于 Qt 的用户界面（UI），并将设计结果保存为 .ui 文件。

.ui 文件实际上是一个 XML 格式的文件，它描述了窗口（或其他容器，如对话框、QWidget）上的控件（Widgets）类型、位置、大小、属性设置以及它们之间的层级关系和布局方式。

Qt Designer 并不是用来编写应用程序 逻辑 的工具。它专注于 外观 和 布局 的设计。应用程序的实际功能，如按钮点击后的操作、数据显示的更新等，仍然需要在代码中实现。Qt Designer 仅仅是帮助你快速生成界面的 “骨架” 或 “蓝图”。

2. 为什么选择使用 Qt Designer？

相比于完全手动编写界面代码，使用 Qt Designer 具有显著的优势：

  • 可视化与直观性： 你可以实时看到界面设计的效果，无需反复编译运行代码来调整布局和外观。这种所见即所得的方式极大地提高了开发效率。
  • 快速原型开发： 借助拖放操作，可以迅速搭建出界面的大致框架，用于演示或验证设计想法。
  • 降低复杂性： 复杂的布局管理（特别是嵌套布局）如果手动编写代码会非常繁琐且容易出错。Qt Designer 提供了强大的布局工具，使得布局变得相对简单。
  • 分离设计与逻辑： UI 设计（.ui 文件）与应用程序逻辑代码（.cpp 或 .py 文件）分离，这符合“关注点分离”的软件设计原则。设计师可以专注于界面美学和用户体验，而程序员可以专注于实现后端功能。两者可以并行工作，互不干扰。
  • 易于修改和维护： 修改界面布局或控件属性时，只需在 Designer 中进行可视化调整，然后重新生成代码即可，比修改复杂的布局代码要方便得多。
  • 标准化： 生成的 .ui 文件格式标准，可以被 Qt 提供的工具链（如 uic）处理，生成对应语言的代码。

虽然对于非常简单的界面，手动编写代码可能更快，但对于任何稍微复杂的 GUI 项目，Qt Designer 几乎都是提高效率、降低错误率和改善代码结构的首选工具。

3. 如何启动 Qt Designer？

Qt Designer 通常随 Qt 的开发环境一起安装。根据你的安装方式，启动它的方法可能略有不同：

  • 通过 Qt Creator： 如果你使用 Qt Creator 这个集成开发环境（IDE），可以在项目创建或已有的项目中，右键点击“Forms”或“UI文件”目录，选择“新建表单”或“打开文件”，然后选择或创建 .ui 文件。Qt Creator 会在内置的 Designer 模式下打开它。Qt Creator 集成了 Designer 的功能，这是最推荐的使用方式。
  • 作为独立应用程序： 在 Windows 上，你可以在开始菜单中找到 Qt Designer。在 macOS 上，它可能位于应用程序文件夹下的 Qt 版本目录中。在 Linux 上，可以在终端中输入 designer 命令（如果已经添加到系统 PATH）。

无论哪种方式，启动后你会看到一个用于创建新表单的窗口。

4. Qt Designer 的用户界面简介

Qt Designer 的界面通常由以下几个主要区域组成：

  • 1. 组件盒 (Widget Box)： 位于窗口左侧，包含了所有可用的 Qt 控件。这些控件被分门别类，如布局（Layouts）、间隔器（Spacers）、按钮（Buttons）、输入控件（Input Widgets）、显示控件（Display Widgets）等。你可以从这里将控件拖放到中间的表单编辑器中。
  • 2. 表单编辑器 (Form Editor)： 位于窗口中心，这是你进行可视化设计的主要区域。你创建或打开的 UI 表单会在这里显示。你可以在此拖动、放置、调整控件大小、对齐控件以及应用布局。
  • 3. 对象查看器 (Object Inspector)： 通常位于窗口右上角，以树状结构显示当前表单中所有控件的层级关系。最顶层是表单本身（例如 QMainWindow、QDialog 或 QWidget），下面是它包含的子控件和布局。选择树中的某个对象，可以在属性编辑器中查看和修改它的属性。
  • 4. 属性编辑器 (Property Editor)： 通常位于窗口右下角，显示当前选中的控件（或表单本身）的所有可设置属性。属性种类繁多，涵盖外观（如文本、字体、颜色、图标）、几何尺寸（位置、大小、最小/最大大小）、行为（是否启用、是否可见、工具提示）等等。
  • 5. 信号/槽编辑器 (Signal/Slot Editor)： 通常与属性编辑器相邻或可通过菜单切换。这是可视化连接控件信号和槽的地方。你可以选择一个发送信号的控件，然后选择一个接收信号的对象（通常是另一个控件或表单本身），并指定要连接的信号和槽。
  • 6. 动作编辑器 (Action Editor)： 用于创建和管理用于菜单栏、工具栏或上下文菜单的 QAction 对象。
  • 7. 资源浏览器 (Resource Browser)： 用于管理和预览添加到 Qt 资源文件（.qrc）中的图片、图标等资源。这些资源可以在 Designer 中直接应用于控件的属性（如按钮图标）。

熟悉这些区域的功能是高效使用 Qt Designer 的第一步。

5. 基本工作流程：构建你的第一个 UI

让我们通过构建一个简单的登录对话框来演示使用 Qt Designer 的基本步骤：

步骤 1：创建新表单

  1. 启动 Qt Designer。
  2. 在弹出的“新建表单”对话框中，选择一个合适的模板。对于一个独立的对话框，通常选择 QDialog。你也可以选择 QMainWindow（带菜单栏、工具栏、状态栏的主窗口）或 QWidget（一个通用的窗口部件）。选择 QDialog 并点击“创建”。
  3. 一个空白的 QDialog 窗口会出现在表单编辑器中。

步骤 2：添加控件

  1. 查看左侧的“组件盒”。找到“显示控件”（Display Widgets）分组，找到 QLabel（标签）控件。
  2. 点击 QLabel 并拖放到 QDialog 表单上。放置两个 QLabel。
  3. 找到“输入控件”（Input Widgets）分组，找到 QLineEdit（单行文本框）控件。拖放两个 QLineEdit 到表单上。
  4. 找到“按钮”（Buttons）分组，找到 QPushButton（按钮）控件。拖放两个 QPushButton 到表单上。

现在你的表单上应该有大致分布的控件了。

步骤 3：设置控件属性

  1. 在表单编辑器中选中第一个 QLabel。
  2. 查看右下角的“属性编辑器”。找到 objectName 属性，将其更改为 label_username。这是一个内部标识符，在代码中会用到。
  3. 找到 text 属性，将其更改为“用户名:”。
  4. 选中第二个 QLabel，objectName 设为 label_password，text 设为“密码:”。
  5. 选中第一个 QLineEdit，objectName 设为 lineEdit_username。
  6. 选中第二个 QLineEdit，objectName 设为 lineEdit_password。对于密码输入框，你可能希望输入的内容是隐藏的。在属性编辑器中找到 echoMode 属性，选择 Password。
  7. 选中第一个 QPushButton，objectName 设为 pushButton_login，text 设为“登录”。
  8. 选中第二个 QPushButton，objectName 设为 pushButton_cancel，text 设为“取消”。你可能希望“取消”按钮关闭对话框。在属性编辑器中找到 autoDefault 属性，设为 False（避免按回车时自动触发）。对于对话框，你通常希望其中一个按钮是默认按钮（按回车触发），一个按钮是取消按钮（按 Esc 触发）。在 QDialog 的属性中，你可以设置 acceptButton 和 rejectButton 分别对应“登录”和“取消”按钮的 objectName。

步骤 4：应用布局

这是构建响应式界面的关键步骤。避免手动设置控件的固定位置和大小，而是使用布局管理器让控件根据窗口大小自动调整。

  1. 选中表单编辑器中的所有控件（按住 Ctrl 或 Shift 键点击，或拖动选择框）。
  2. 右键点击选中的控件，选择“布局”（Layout）菜单。你会看到多种布局选项：水平布局（Layout Horizontally）、垂直布局（Layout Vertically）、栅格布局（Layout in a Grid）、表单布局（Layout in a Form）。
  3. 对于这个登录对话框，我们可以先将“用户名”标签和输入框水平布局，将“密码”标签和输入框水平布局。选中 label_username 和 lineEdit_username，右键 -> 布局 -> 水平布局。你会看到它们被一个红色的矩形框（表示布局）包围。
  4. 同样，选中 label_password 和 lineEdit_password，右键 -> 布局 -> 水平布局。
  5. 现在你有两个水平布局（分别包含用户名和密码行）和两个按钮。将这两个水平布局垂直排列。选中这两个水平布局（可以在对象查看器中选中它们对应的 Layout 对象），右键 -> 布局 -> 垂直布局。
  6. 最后，将“登录”和“取消”按钮水平排列。选中 pushButton_login 和 pushButton_cancel，右键 -> 布局 -> 水平布局。
  7. 现在，你有两部分：一个垂直布局（包含用户名和密码行）和一个水平布局（包含两个按钮）。将这两部分以及它们所在的 QDialog 本身进行布局。通常的做法是，选中最顶层的容器（这里是 QDialog 本身），然后应用一个主布局。右键点击 QDialog 的空白区域（或者在对象查看器中选中最顶层的对象），选择“布局”菜单。对于这个例子，我们可以选择“垂直布局”（Layout Vertically）。你会发现 Designer 会自动将之前创建的垂直布局（用户名/密码）和水平布局（按钮）以及可能遗漏的控件（如果有的话）放入这个主垂直布局中。

布局技巧：
* 使用 Spacers（间隔器）在控件之间或控件与窗口边缘之间添加可伸缩的空间，这对于控制控件的位置和对齐非常有用。
* 布局可以嵌套。复杂的界面可以通过组合不同的布局来实现。
* 表单布局 (QFormLayout) 特别适合创建标签-输入框对齐的表单。你可以直接选中所有标签和对应的输入框，然后应用表单布局。
* 应用布局后，尝试拖动窗口边缘，观察控件是否按预期调整大小和位置。

步骤 5：连接信号与槽 (初步)

虽然大部分业务逻辑中的信号槽连接是在代码中完成的，但 Designer 也允许进行一些基本的连接，特别是控件的标准信号与表单的标准槽，或者控件之间的标准信号槽。

  1. 切换到“信号/槽编辑器”视图（通常是点击 Designer 窗口顶部的“编辑信号/槽”按钮，或者在菜单中选择）。
  2. 点击窗口上方的绿色加号图标“+”来添加一个新的连接。
  3. 在弹出的连接编辑界面，左侧选择发送者（Sender），右侧选择接收者（Receiver）。
  4. 点击发送者旁边的编辑按钮，选择 pushButton_cancel。
  5. 点击发送者信号（Signal）旁边的编辑按钮，选择 clicked() 信号（这是按钮被点击时发出的信号）。
  6. 点击接收者旁边的编辑按钮，选择最顶层的 QDialog 对象。
  7. 点击接收者槽（Slot）旁边的编辑按钮。QDialog 有一些标准槽，例如 accept() 和 reject()，分别用于对话框接受（通常对应“确定”或“登录”）和拒绝（通常对应“取消”）操作并关闭。选择 reject() 槽。
  8. 点击“确定”保存连接。

现在，当“取消”按钮被点击时，对话框会自动调用自身的 reject() 槽，从而关闭对话框。

步骤 6：预览表单

你可以随时预览你的设计效果。在菜单栏中选择“表单”（Form）->“预览”（Preview Form）或按下快捷键 Ctrl+R。你可以看到设计好的对话框，并测试一些交互（如点击按钮，输入文本）。

步骤 7：保存 .ui 文件

  1. 在菜单栏中选择“文件”（File）->“保存”（Save）或“另存为”（Save As）。
  2. 选择一个位置，输入文件名（例如 login_dialog.ui），点击保存。

现在你已经成功地使用 Qt Designer 设计了一个简单的登录对话框界面，并将其保存为了 .ui 文件。

6. 将 .ui 文件集成到你的代码中

设计好的 .ui 文件只是一个描述性文件，它不能直接运行。你需要将它转换为可以被 Qt 应用程序加载和使用的代码。Qt 提供了 uic（UI Compiler）工具来完成这个任务。

uic 工具会读取 .ui 文件，并生成对应的 C++ 头文件或 Python 代码，其中包含了创建和设置 .ui 文件中所有控件的代码。

方式一：使用 uic 生成 C++ 代码

如果你使用 C++，通常的流程是在你的构建系统中集成 uic。例如，在使用 qmake 的项目中，你只需在 .pro 文件中列出 .ui 文件，qmake 会自动调用 uic 生成相应的头文件（例如 myform.ui 会生成 ui_myform.h）。

在代码中，你可以在你的窗口类中包含这个生成的头文件，并在构造函数中调用 setupUi() 方法来创建和初始化界面：

“`cpp

include // Or QDialog, QWidget

include “ui_mainwindow.h” // Assuming your file was mainwindow.ui

class MainWindow : public QMainWindow
{
Q_OBJECT

public:
MainWindow(QWidget *parent = nullptr) : QMainWindow(parent), ui(new Ui::MainWindow) // ui 是指向生成的 UI 类的指针
{
ui->setupUi(this); // 设置当前窗口的 UI
// 在这里可以访问 ui 对象中的控件，例如：
// connect(ui->pushButton_login, &QPushButton::clicked, this, &MainWindow::on_pushButton_login_clicked);
}

~MainWindow()
{
    delete ui;
}

private slots:
// 根据控件 objectName 命名的自动连接槽（如果使用自动连接命名规范）
// void on_pushButton_login_clicked();

private:
Ui::MainWindow *ui; // 声明生成的 UI 类指针
};
“`

这种方式称为“单继承”，你的窗口类继承自 QMainWindow/QDialog/QWidget，并通过包含 ui_*.h 文件并调用 setupUi() 来拥有设计的界面。

方式二：使用 pyuic 生成 Python 代码

如果你使用 Python (PyQt 或 PySide)，可以使用 pyuic 工具将 .ui 文件转换为 Python 模块。

在命令行中运行：

bash
pyuic5 login_dialog.ui -o ui_login_dialog.py # PyQt5
pyside6-uic login_dialog.ui -o ui_login_dialog.py # PySide6

这会生成一个名为 ui_login_dialog.py 的 Python 文件，其中定义了一个包含 setupUi() 方法的类（通常名为 Ui_Dialog）。

在你的 Python 代码中，你可以通过以下方式使用这个生成的 UI：

“`python
import sys
from PySide6.QtWidgets import QApplication, QDialog
from ui_login_dialog import Ui_Dialog # 导入生成的 UI 类

class LoginDialog(QDialog):
def init(self, parent=None):
super().init(parent)
self.ui = Ui_Dialog() # 实例化生成的 UI 类
self.ui.setupUi(self) # 调用 setupUi 方法设置当前对话框的 UI

    # 现在你可以通过 self.ui 访问 Designer 中设计的控件
    # 例如连接信号槽：
    # self.ui.pushButton_login.clicked.connect(self.handle_login)
    # self.ui.pushButton_cancel.clicked.connect(self.reject) # 连接取消按钮到对话框的 reject 槽

# def handle_login(self):
#     username = self.ui.lineEdit_username.text()
#     password = self.ui.lineEdit_password.text()
#     print(f"Attempting login with user: {username}, pass: {password}")
#     # Add your login logic here...

if name == “main“:
app = QApplication(sys.argv)
dialog = LoginDialog()
dialog.show()
sys.exit(app.exec())
“`

这种方式也称为“单继承”或“直接使用”。另一种常见的 Python 方式是动态加载 .ui 文件（例如 PyQt5 的 uic.loadUi 或 PySide6 的 QUiLoader），这种方式不需要预先生成 Python 文件，直接在运行时加载 .ui，对于快速测试或小型项目也很方便，但通常不如 uic 方式在大型项目中结构清晰。

无论是 C++ 还是 Python，核心思想都是： .ui 文件描述了界面结构，uic 工具将其转化为代码，你的应用程序代码则实例化这个转换后的界面，并添加事件处理逻辑。

7. 深入了解 Qt Designer 的关键功能

除了基本的拖放控件和设置属性，Qt Designer 还提供了一些高级功能，值得进一步了解：

  • 布局的精细控制：
    • 伸缩因子 (Stretch Factor)： 在布局中，可以给控件或子布局设置伸缩因子。因子大的控件在可用空间增加时会获得更多的额外空间。这对于控制控件在窗口拉伸时的行为非常重要。
    • 对齐 (Alignment)： 在布局中，可以设置控件的对齐方式（如居中、靠左、靠右、靠上、靠下）。
    • 间距 (Spacing) 和边距 (Contents Margins)： 可以设置布局内部控件之间的间距以及布局与容器边缘之间的边距。
  • 属性编辑器的高级用法：
    • 动态属性 (Dynamic Properties)： 可以为控件添加自定义的动态属性，这些属性可以在运行时通过 QObject::property() 和 QObject::setProperty() 访问。
    • 样式表 (Stylesheet)： 可以直接在属性编辑器中为控件或整个表单应用 CSS 样式的样式表，用于定制外观（颜色、字体、边框、背景等）。
  • 信号/槽编辑器的更多应用：
    • 可以连接自定义信号和槽（前提是它们已经在基类代码中声明）。
    • 可以连接一个信号到多个槽，或多个信号到一个槽（虽然在 Designer 中连接一个信号到多个槽不如在代码中灵活）。
  • 动作编辑器 (Action Editor)： 用于创建 QAction 对象。QAction 是用户界面中可执行命令的抽象，它可以添加到菜单、工具栏或绑定到快捷键。在 Designer 中创建 Actions 后，可以将它们拖放到 QMainWindow 的菜单栏或工具栏中。
  • 资源管理器 (Resource Browser)： 用于管理应用程序的资源文件（如图片、图标、翻译文件等）。通过 .qrc 文件将资源嵌入到可执行文件中，可以确保资源始终可用，而无需担心文件路径问题。在 Designer 中，可以使用资源文件中的图标设置按钮或标签的图标属性。

8. 常见问题与技巧

  • 控件不见了？ 检查对象查看器，确认控件是否存在且没有被其他控件或布局覆盖。
  • 布局不工作？ 确保最顶层的窗口（例如 QDialog 或 QMainWindow 的 central widget）也应用了主布局。布局只对其直接的子控件或子布局生效。确保没有手动设置控件的 geometry 属性（如果应用了布局，geometry 通常会被布局管理器忽略或覆盖）。
  • 如何设置控件的最小/最大大小？ 在属性编辑器中查找 minimumSize 和 maximumSize 属性。还可以通过布局的属性来控制控件的伸缩行为。
  • 如何添加图标？ 首先需要创建或获取图标文件（如 .png），然后将其添加到 Qt 资源文件（.qrc）中。在 Designer 的资源浏览器中加载 .qrc 文件。然后在控件的属性编辑器中（如 icon 属性），点击下拉箭头或编辑按钮，选择“从资源中选择”。
  • 如何创建子窗口或自定义控件？ Qt Designer 支持创建基于 QWidget 的自定义表单（即一个独立的 .ui 文件），这个表单可以作为另一个窗口的子控件使用。对于更复杂的自定义控件，可能需要通过编写 C++ 代码并编译为 Qt Designer 插件才能在 Designer 中使用。
  • 键盘快捷键： 熟悉一些常用的快捷键可以提高效率，例如 Ctrl+R 预览，布局相关的快捷键等。

9. 总结与展望

Qt Designer 是 Qt GUI 开发的强大助力。它通过可视化的方式极大地简化了界面布局和控件属性的设置，提高了开发效率，并促进了设计与逻辑的分离。掌握 Qt Designer 的基本用法是成为一名高效的 Qt 开发者所必备的技能。

通过本文的学习，你应该对 Qt Designer 有了一个全面的初步了解，包括：

  • 它的作用和优势。
  • 它的用户界面组成。
  • 使用它创建、添加控件、设置属性和应用布局的基本工作流程。
  • 如何将 .ui 文件集成到你的 C++ 或 Python 项目中。
  • 信号与槽在 Designer 中的初步应用。
  • 一些高级功能和技巧的介绍。

入门只是开始，Qt Designer 还有许多更深入的功能等待你去探索，例如自定义控件的使用、更复杂的布局技巧、国际化支持等。最重要的是，动手实践！尝试设计不同类型的界面，结合代码实现功能，你将越来越熟练地使用这个强大的工具。

通过可视化设计与代码实现相结合，你将能够更快速、更轻松地构建出美观、功能丰富的跨平台 GUI 应用程序。祝你在 Qt 的世界里开发愉快！

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部