Qt Designer 入门教程 – wiki基地

作者： /

Qt Designer 入门教程：零基础掌握强大的可视化界面设计工具

欢迎来到 Qt GUI 应用程序开发的世界！如果你刚刚接触 Qt，或者厌倦了纯代码手写界面布局，那么 Qt Designer 将是你的得力助手。它是一个强大的可视化界面设计工具，让你能够通过拖拽、点击的方式快速构建出应用程序的用户界面（UI），大大提高开发效率。

本教程将带你从零开始认识并使用 Qt Designer，学习如何创建窗体、添加控件、使用布局管理器以及最重要的——如何在你的代码中使用设计好的 .ui 文件。

什么是 Qt Designer？

Qt Designer 是 Qt 框架提供的一个图形用户界面（GUI）设计工具。它允许开发者以可视化方式创建和编辑基于 Qt 的界面窗体，而无需手写大量界面布局代码。

为什么使用 Qt Designer？

  1. 所见即所得 (WYSIWYG)： 你在 Designer 中看到的就是程序运行时界面的大致样子，直观方便。
  2. 提高效率： 通过拖拽和设置属性，可以快速搭建复杂的界面结构，比手写代码快得多。
  3. 分离界面与逻辑： 将界面的布局和外观设计（.ui 文件）与应用程序的业务逻辑（代码）分开，使得项目结构更清晰，维护更容易。UI 设计师和开发者可以更有效地协作。
  4. 强大的布局管理： Qt 的布局管理器非常强大，Designer 提供了方便的可视化方式来应用和配置这些布局，确保界面在不同大小的窗口下都能良好显示。

如何获取并启动 Qt Designer？

Qt Designer 通常作为 Qt 安装的一部分提供。

  • 如果你安装了 Qt Creator (Qt 的集成开发环境)： Designer 通常集成在 Qt Creator 中，或者作为独立应用程序安装在 Qt 安装目录下的 bin 文件夹中。在 Windows 上，你可以在开始菜单中找到它，例如 “Qt 5.x.x” -> “Qt Designer”。在 macOS 或 Linux 上，可以在 Qt 安装目录的 bin 文件夹找到并运行 designer 可执行文件。
  • 如果你只安装了 Qt 库： 需要确保安装时包含了 Tools 组件，Designer 也会在 bin 目录下。

启动 Qt Designer 后，你将看到一个欢迎界面，可以选择创建新窗体或打开现有文件。

初识 Qt Designer 界面

第一次启动 Qt Designer，或者选择 “文件 -> 新建” (File -> New) 时，会弹出一个“新建窗体” (New Form) 对话框。这里提供了几种常用的窗体模板：

  • Main Window (主窗口): 带有菜单栏、工具栏、状态栏和中心区域的标准应用程序主窗口。适合开发功能齐全的桌面应用。
  • Dialog (对话框): 用于弹出消息、获取用户输入等的独立小窗口。通常有 OK/Cancel 按钮。
  • Widget (控件): 一个空白的基础控件，可以作为独立的窗口，或者嵌入到其他窗体中。适合设计自定义的复合控件。
  • Other Forms: 包含了一些其他特定用途的模板，如基于模板的对话框等。

选择一个模板，比如 “Main Window”，然后点击 “创建” (Create)，你就会看到 Qt Designer 的主界面。

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

  1. 中央画布 (Form Editor): 这是工作区的主体，你将在这里拖放控件，设计窗体的布局和外观。所见即所得的效果主要体现在这里。
  2. 控件箱 (Widget Box): 通常位于窗口的左侧。这里列出了 Qt 提供的各种标准控件（Widgets），例如按钮 (Push Button)、标签 (Label)、文本框 (Line Edit)、复选框 (Check Box)、单选按钮 (Radio Button)、各种布局管理器 (Layouts) 等等。你可以直接从这里将控件拖拽到中央画布上。
  3. 对象查看器 (Object Inspector): 通常位于窗口的右上角。它以树状结构显示当前窗体上所有控件的层级关系。每个控件都有一个唯一的“对象名称” (objectName)，这个名称非常重要，因为它是在代码中引用该控件的标识符。你可以通过双击这里的名称来修改它。
  4. 属性编辑器 (Property Editor): 通常位于对象查看器的下方。当你选中中央画布或对象查看器中的某个控件时，属性编辑器会显示该控件的所有可配置属性。你可以通过修改这些属性来改变控件的文本、大小、颜色、字体、是否可见、是否启用等等外观和行为。这是定制控件样式的关键区域。
  5. 信号槽编辑器 (Signal/Slot Editor): 通常是一个独立的面板或标签页。Qt 使用信号槽机制处理事件。这个编辑器可以用来查看和创建简单的信号槽连接，尽管复杂的信号槽连接通常在代码中完成。
  6. 动作编辑器 (Action Editor): 用于创建和管理用于菜单栏和工具栏的“动作”（Action）。一个动作可以代表一个操作，例如“新建文件”、“保存”等，它可以同时在菜单项、工具栏按钮和快捷键中关联。

创建你的第一个窗体：一个简单的登录界面

让我们通过创建一个简单的登录界面来实践一下。

  1. 创建新窗体： 启动 Qt Designer，选择 “新建窗体”，然后选择 “Widget” 模板（我们创建一个简单的面板，不带菜单栏等）。点击 “创建”。
  2. 添加控件：
    • 从“控件箱”中找到 “Label” (标签) 控件，拖拽到画布上。再拖拽一个。
    • 找到 “Line Edit” (单行输入框) 控件，拖拽两个到画布上。
    • 找到 “Push Button” (按钮) 控件，拖拽两个到画布上。

  3. 安排控件位置 (初步)： 随意将这些控件拖动到画布上，大致排列成以下结构：
    标签1 (用户名) 输入框1
    标签2 (密码) 输入框2
    按钮1 (登录) 按钮2 (取消)
    注意： 这时候的布局是“绝对布局”，控件的位置是固定的像素坐标。当你改变窗口大小时，这些控件的位置不会随之调整，可能会出现重叠或空白。这正是我们需要布局管理器的原因。

  4. 修改控件属性： 选中画布上的每个控件，然后在“属性编辑器”中修改其属性：

    • 标签1：
      • objectName: label_username
      • text: 用户名:
    • 标签2：
      • objectName: label_password
      • text: 密 码:
    • 输入框1：
      • objectName: lineEdit_username
    • 输入框2：
      • objectName: lineEdit_password
      • echoMode (在 QLineEdit 分组下): 选择 Password，这样输入的密码会显示为星号。
    • 按钮1：
      • objectName: pushButton_login
      • text: 登录
    • 按钮2：
      • objectName: pushButton_cancel
      • text: 取消

    现在，你的界面看起来差不多了，但布局仍然是乱的。

使用布局管理器 (Layouts) – 核心技能！

布局管理器是 Qt GUI 编程的核心之一，也是 Qt Designer 的强大之处。它们可以自动调整控件的大小和位置，以适应窗体大小的变化，使得界面具有响应性。

常用的布局管理器有：

  • Horizontal Layout (水平布局 – QHBoxLayout): 将控件沿水平方向排列。
  • Vertical Layout (垂直布局 – QVBoxLayout): 将控件沿垂直方向排列。
  • Grid Layout (栅格布局 – QGridLayout): 将控件放入一个网格中，按行和列排列。
  • Form Layout (表单布局 – QFormLayout): 专门用于创建“标签-输入框”对的表单界面。

我们的登录界面非常适合使用栅格布局或表单布局。我们先尝试使用表单布局和水平布局的组合。

  1. 应用表单布局：

    • 选中 label_username, lineEdit_username, label_password, lineEdit_password 这四个控件（可以通过按住 Ctrl 或 Shift 键点击选中多个）。
    • 在菜单栏选择 “窗体 (Form)” -> “按布局排列 (Lay Out)” -> “按表单布局 (Lay Out in Form Layout)”。或者在工具栏找到表单布局的图标并点击。
    • 这四个控件会被组织到一个 QFormLayout 中，标签在左边，输入框在右边，并且它们会自动对齐。

  2. 应用水平布局到按钮：

    • 选中 pushButton_login 和 pushButton_cancel 这两个按钮。
    • 在菜单栏选择 “窗体 (Form)” -> “按布局排列 (Lay Out)” -> “按水平布局 (Lay Out in Horizontal Layout)”。或者点击水平布局图标。
    • 这两个按钮会被组织到一个 QHBoxLayout 中，水平排列。

  3. 组合所有布局 (垂直布局)：

    • 现在画布上有两个主要的“布局单元”：上面的 QFormLayout (包含标签和输入框) 和下面的 QHBoxLayout (包含两个按钮)。
    • 选中整个窗体。最简单的方法是点击窗体背景的空白区域，或者在“对象查看器”中点击顶层的对象（通常是 Widget 或 MainWindow）。
    • 在菜单栏选择 “窗体 (Form)” -> “按布局排列 (Lay Out)” -> “按垂直布局 (Lay Out in Vertical Layout)”。或者点击垂直布局图标。
    • 现在，窗体上的两个布局单元（Form Layout 和 Horizontal Layout）会被垂直排列。

    你可能还需要调整：
    * 弹簧 (Spacer): 在“控件箱”的 “Spacers” 分组下有 “Horizontal Spacer” 和 “Vertical Spacer”。弹簧会占据布局中的可用空间并尽量扩张，常用于将控件推向一侧或在控件之间创建可伸缩的空白。例如，在登录和取消按钮之间或旁边添加水平弹簧，可以控制按钮的位置或间距。
    * 布局的属性： 选中画布上的布局（点击控件之间的空白区域或在对象查看器中选中对应的 Layout 对象），可以在属性编辑器中调整布局的 spacing (控件间距) 和 contentsMargins (布局与边界的间距)。

    通过合理使用布局管理器和弹簧，你的界面将变得整洁有序，并且无论如何拉伸窗口，控件都会自动调整大小和位置以填充可用空间。

调整控件属性 (进阶)

在属性编辑器中，你可以调整控件的各种属性：

  • 几何属性 (Geometry): geometry (位置和大小)、minimumSize (最小尺寸)、maximumSize (最大尺寸)、sizePolicy (尺寸策略，非常重要，控制控件在布局中如何伸展和收缩)。
  • 外观属性: windowTitle (窗口标题，对顶层窗体有效)、font (字体)、styleSheet (CSS 样式表，可以用来美化控件)、icon (图标，对按钮、标签等有效)。
  • 状态属性: enabled (是否启用)、visible (是否可见)、checkable (是否可勾选，对按钮等有效)。
  • 特定控件属性: 例如 QLineEdit 的 placeholderText (占位符文本)、maxLength (最大长度)；QLabel 的 wordWrap (自动换行)。

花些时间在属性编辑器中探索，你会发现很多有用的选项。记住，objectName 是你在代码中引用这个控件的唯一标识，务必给控件起一个有意义且易于区分的名称。

信号与槽 (在 Designer 中的体现)

Qt 的信号槽机制是对象之间通信的方式。当一个事件发生时（例如按钮被点击），会发出一个“信号” (Signal)。对这个信号感兴趣的对象可以连接一个“槽” (Slot) 来响应它（槽就是一个函数或方法）。

虽然复杂的信号槽连接主要在代码中完成，但 Qt Designer 也提供了一些可视化帮助：

  1. 信号槽编辑器 (Signal/Slot Editor): 你可以在这里查看当前窗体中已有的信号槽连接。你可以通过点击工具栏上的“编辑信号/槽” (Edit Signals/Slots) 按钮进入编辑模式（窗体上会出现红色的箭头），然后从发出信号的控件拖拽到接收信号的控件上，选择信号和槽进行连接。这种方式适用于一些简单的、标准控件的标准信号连接，例如按钮的 clicked() 信号连接到窗口的 close() 槽。
  2. 属性编辑器中的信号和槽： 在属性编辑器底部，有时会看到 signals 和 slots 分组。你可以在这里给自定义的控件添加新的信号或槽的声明（虽然这更多是在自定义控件类定义中完成，Designer 只是一个可视化工具）。

对于初学者，更重要的是理解：Qt Designer 主要用来设计界面的“静态”布局和外观，以及定义控件的 objectName。信号槽连接以及更复杂的业务逻辑通常在代码中实现，通过 objectName 来获取控件的引用。

预览你的设计

在设计过程中，你可以随时预览界面的效果。选择菜单栏的 “窗体 (Form)” -> “预览 (Preview)”。弹出的窗口会显示你的界面在实际运行时的样子，包括布局管理器的工作效果。这是检查布局和外观是否符合预期的重要步骤。

保存 .ui 文件

完成界面设计后，选择 “文件 (File)” -> “保存” (Save) 或 “另存为” (Save As)。Qt Designer 会将你的设计保存为一个 .ui 后缀的文件。这是一个 XML 格式的文件，里面描述了窗体上所有控件的类型、属性、层级关系和布局信息。

这个 .ui 文件本身并不能直接运行，它只是界面的“蓝图”。你需要用编程语言（如 Python 或 C++）来加载并使用这个文件。

在你的代码中使用 .ui 文件

这是将设计好的界面变成可运行程序的最关键一步。有几种方式可以使用 .ui 文件：

方法一：动态加载 .ui 文件 (Python/PyQt/PySide)

这种方法直接在程序运行时读取并解析 .ui 文件来创建界面。

“`python
import sys
from PyQt5.QtWidgets import QApplication, QWidget
from PyQt5.uic import loadUi

class MyLoginForm(QWidget):
def init(self):
super().init()
# 加载 .ui 文件
loadUi(“login_form.ui”, self) # “login_form.ui” 是你保存的 .ui 文件名
# 现在你可以通过 objectName 来访问 .ui 中设计的控件了
# 例如: self.lineEdit_username, self.pushButton_login

    # 连接信号和槽 (在代码中实现业务逻辑)
    self.pushButton_login.clicked.connect(self.handle_login)
    self.pushButton_cancel.clicked.connect(self.handle_cancel)

def handle_login(self):
    username = self.lineEdit_username.text()
    password = self.lineEdit_password.text()
    print(f"尝试登录: 用户名={username}, 密码={password}")
    # 这里可以添加你的登录验证逻辑

def handle_cancel(self):
    print("取消登录")
    self.close() # 关闭窗口

if name == “main“:
app = QApplication(sys.argv)
main_window = MyLoginForm()
main_window.show()
sys.exit(app.exec_())

``
*优点：* 修改.ui文件后无需重新生成代码，即时生效。
*缺点：* 运行时需要解析.ui文件，效率略低于直接运行代码。需要在代码中显式地调用loadUi`。

方法二：将 .ui 文件转换成 Python 代码 (pyuic)

Qt 提供了 pyuic 工具（对于 PyQt5 是 pyuic5，对于 PyQt6 是 pyuic6，对于 PySide2 是 pyside2-uic，对于 PySide6 是 pyside6-uic），可以将 .ui 文件转换成一个 Python 模块。

转换步骤：

打开命令行或终端，进入你的 .ui 文件所在的目录，然后运行以下命令：

“`bash

对于 PyQt5

pyuic5 -x login_form.ui -o ui_login_form.py

对于 PyQt6

pyuic6 -x login_form.ui -o ui_login_form.py

对于 PySide2

pyside2-uic -x login_form.ui -o ui_login_form.py

对于 PySide6

pyside6-uic -x login_form.ui -o ui_login_form.py
“`

  • -x: 生成的代码会包含一个简单的测试运行代码块 (if __name__ == "__main__":)。
  • login_form.ui: 你设计的 .ui 文件名。
  • -o ui_login_form.py: 输出的 Python 文件名。通常以 ui_ 开头以示区别。

运行命令后，会生成一个 ui_login_form.py 文件。打开它，你会看到一个 Python 类（通常叫做 Ui_Widget 如果你创建的是 Widget 模板），里面包含了创建和设置你在 Designer 中添加的所有控件及其属性的代码，以及应用布局的代码。

使用生成的 Python 代码：

在另一个 Python 文件（例如 main.py）中导入并使用这个生成的类：

“`python
import sys
from PyQt5.QtWidgets import QApplication, QWidget

导入生成的 UI 文件中的类

from ui_login_form import Ui_Widget # 注意类名，可能因模板而异，通常是 Ui_窗体类型名

class MyLoginForm(QWidget, Ui_Widget): # 继承 QWidget 和生成的 Ui 类
def init(self):
super().init()
# 调用 setupUi 方法来创建和布置界面
self.setupUi(self)

    # 现在 self 就是你的窗体，并且包含了所有 ui_login_form.py 中创建的控件
    # 你可以直接通过 self.objectName 来访问控件
    # 例如: self.lineEdit_username, self.pushButton_login

    # 连接信号和槽 (在代码中实现业务逻辑)
    self.pushButton_login.clicked.connect(self.handle_login)
    self.pushButton_cancel.clicked.connect(self.handle_cancel)

def handle_login(self):
    username = self.lineEdit_username.text()
    password = self.lineEdit_password.text()
    print(f"尝试登录: 用户名={username}, 密码={password}")
    # 这里可以添加你的登录验证逻辑

def handle_cancel(self):
    print("取消登录")
    self.close() # 关闭窗口

if name == “main“:
app = QApplication(sys.argv)
main_window = MyLoginForm()
main_window.show()
sys.exit(app.exec_())

``
*优点：* 运行时效率高，因为界面是直接由 Python 代码创建的。将界面定义和业务逻辑分离得更清晰。
*缺点：* 每次修改.ui文件后，都需要重新运行pyuic命令生成.py` 文件。

对于 C++ 项目：

C++ 项目使用 uic 工具将 .ui 文件编译成 C++ 头文件（例如 ui_mainwindow.h），然后在你的 C++ 类中包含这个头文件并使用其中的类来设置界面。原理与 Python 的 pyuic 类似。

选择哪种方式取决于个人偏好和项目需求。对于初学者和中小型项目，使用 pyuic 转换成代码可能是更常见和易于管理的方式。

使用 Qt Designer 的优势总结

通过本教程的学习，你应该能体会到 Qt Designer 的强大之处：

  • 可视化编辑： 摆脱繁琐的手写布局代码，通过拖拽、点击、设置属性即可完成界面设计。
  • 快速原型开发： 可以快速搭建界面的原型，与客户或团队成员沟通确认。
  • 自动化布局： 布局管理器帮你处理窗口大小变化时的控件位置和尺寸调整。
  • 分离关注点： .ui 文件负责界面，.py (或 .cpp) 文件负责逻辑，代码结构更清晰。

局限性

虽然强大，但 Qt Designer 也有其局限性：

  • 动态生成的界面元素： 如果你需要根据运行时数据动态创建大量控件，或者界面的结构是高度动态变化的，可能需要在代码中实现。
  • 复杂的自定义控件： 虽然可以在 Designer 中使用自定义控件（如果你的项目包含了它们），但设计自定义控件本身通常需要在代码中完成。
  • 复杂的信号槽连接： 大多数有实际业务逻辑的信号槽连接（例如将按钮点击连接到数据库操作函数）需要在代码中编写。
  • 高度自定义绘图： 涉及 QPainter 的自定义绘图通常需要在代码中实现。

结论

Qt Designer 是学习和使用 Qt GUI 的一个绝佳起点。它让你能够快速上手创建具有专业外观的用户界面，并将精力更多地放在实现核心的应用程序功能上。

通过本教程，你已经学会了：

  • 启动和认识 Qt Designer 的界面。
  • 添加和修改控件。
  • 运用强大的布局管理器使界面具有响应性。
  • 保存 .ui 文件。
  • 以及最关键的——如何在 Python 代码中加载或使用由 .ui 文件转换而来的界面。

现在，是时候打开 Qt Designer，多多实践，尝试创建各种不同布局的界面。结合编程语言实现信号槽连接和业务逻辑，你就能开发出功能完善的 Qt GUI 应用程序了！祝你编程愉快！

发表评论

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

滚动至顶部