Qt Designer 快速上手：核心功能与实例 – wiki基地

作者： /

Qt Designer 快速上手：核心功能与实例

Qt 是一个跨平台的 C++ 图形用户界面应用程序开发框架，广泛应用于桌面、移动和嵌入式系统开发。而 Qt Designer 则是 Qt 提供的一个强大的可视化设计工具，它允许开发者通过拖拽和配置的方式快速创建和布局用户界面（UI），而无需手动编写大量的界面代码。这极大地提高了开发效率，并使得 UI 设计与业务逻辑分离成为可能。本文将详细介绍 Qt Designer 的核心功能，并通过一个实例来演示如何快速上手。

一、 为什么选择 Qt Designer？

在深入了解 Qt Designer 之前，我们先探讨一下使用它的主要优势：

  1. 可视化设计：最直观的优势。开发者可以直接在画布上拖放控件、调整大小和位置、设置属性，实时预览 UI 效果。
  2. 提高效率：相比手动编写 XML（如 QML）或 C++ 代码来定义界面元素，可视化设计显著减少了编码时间和调试界面布局的精力。
  3. 代码与界面分离：Qt Designer 生成 .ui 文件（一种 XML 格式的文件），这些文件可以在运行时动态加载，或者在编译时转换为 C++ 代码。这种分离使得设计师可以专注于界面美化，而程序员可以专注于业务逻辑实现，两者并行工作，互不干扰。
  4. 跨平台一致性：由于 Qt 本身的跨平台特性，使用 Qt Designer 设计的界面在不同操作系统（Windows, macOS, Linux）上能保持相似的外观和行为。
  5. 易于学习和使用：对于初学者而言，Qt Designer 提供了一个相对平缓的学习曲线来入门 Qt GUI 开发。
  6. 布局管理系统：Qt Designer 强大的布局系统（Layouts）可以帮助开发者创建自适应不同窗口大小和屏幕分辨率的响应式界面。

二、 Qt Designer 的核心界面与组件

启动 Qt Designer（通常随 Qt SDK 一起安装，可在 Qt Creator 中直接访问或作为独立程序运行），你会看到一个主要由以下几个部分组成的集成开发环境：

  1. 主工作区 (Central Widget/Form Editor)：

    • 这是你设计 UI 的核心区域，通常被称为“表单编辑器”。
    • 当你创建一个新的窗体（如 QMainWindow, QWidget, QDialog）时，它会在这里显示为一个空白的画布。
    • 你可以在这里拖放控件、调整它们的大小和位置。

  2. 控件盒 (Widget Box)：

    • 通常位于界面的左侧。
    • 包含了所有可用的 Qt 控件，如按钮 (Buttons)、标签 (Labels)、文本输入框 (Line Edits)、列表视图 (List Views)、表格视图 (Table Views)、布局 (Layouts)、容器 (Containers) 等。
    • 控件被分门别类地组织起来，方便查找和使用。只需从这里拖拽控件到主工作区即可。

  3. 对象查看器 (Object Inspector)：

    • 通常位于界面的右上角。
    • 以树状结构显示当前表单中所有对象（控件、布局、动作等）的层级关系。
    • 你可以清楚地看到哪个控件属于哪个布局，或者哪个控件是哪个容器的子控件。
    • 在这里可以方便地选中、重命名或查看对象的层级。

  4. 属性编辑器 (Property Editor)：

    • 通常位于对象查看器的下方或界面的右下角。
    • 当你选中主工作区或对象查看器中的某个控件或布局时，属性编辑器会显示该对象所有可配置的属性。
    • 例如，对于一个 QPushButton，你可以修改其 objectName（非常重要，用于代码中引用）、text（按钮上显示的文本）、geometry（位置和大小，但通常由布局管理）、enabled（是否可用）、icon（图标）、styleSheet（自定义样式）等。

  5. 动作编辑器 (Action Editor) 与信号/槽编辑器 (Signals/Slots Editor)：

    • 动作编辑器：允许你创建和管理 QAction 对象。动作通常与菜单栏、工具栏按钮关联，代表一个可执行的操作（如“打开文件”、“保存”）。
    • 信号/槽编辑器：这是 Qt 核心机制之一的可视化体现。它允许你在 Designer 内部连接某些简单的信号和槽。例如，可以将一个按钮的 clicked() 信号连接到另一个控件的 hide() 槽，实现点击按钮隐藏另一个控件的效果。但复杂的逻辑和自定义槽函数通常还是需要在代码中实现。

  6. 资源浏览器 (Resource Browser)：

    • 用于管理项目中使用的资源文件，如图片、图标等。
    • 你需要先创建一个 .qrc 资源文件，并将图片等添加到其中，然后才能在 Designer 中方便地为控件设置图标等。

  7. 菜单栏与工具栏：

    • 提供常用的操作命令，如新建文件、打开文件、保存、撤销、重做、预览 (Form > Preview 或 Ctrl+R)、布局操作等。
    • 特别重要的一个是预览功能，可以让你在不编译运行整个程序的情况下，快速查看当前设计的 UI 在实际运行时的样子。

三、 Qt Designer 的核心功能详解

1. 创建新表单

启动 Qt Designer 后，通常会弹出一个“新建窗体”对话框，让你选择创建的窗体类型：
* Main Window (QMainWindow): 带有菜单栏、工具栏、状态栏和中央窗口部件的典型应用程序主窗口。
* Dialog with Buttons Bottom/Right: 带有标准按钮（如 OK, Cancel）的对话框。
* Dialog without Buttons: 不带标准按钮的空白对话框。
* Widget (QWidget): 最通用的空白窗口部件，可以作为自定义控件的基础或简单的自定义窗口。

选择一个类型后，点击“创建”，就会在主工作区打开一个新的空白表单。

2. 添加和配置控件

  • 拖放控件：从左侧的“控件盒”中选择你需要的控件（如 QLabel、QLineEdit、QPushButton），将其拖拽到主工作区的表单上。
  • 设置属性：选中表单上的某个控件，右侧的“属性编辑器”会立即更新，显示该控件的所有属性。
    • objectName: 这是最重要的属性之一。它为控件指定一个唯一的名称，后续在 C++ 或 Python 代码中，你会使用这个名称来访问和操作该控件。务必为其指定有意义的名称（例如，nameLineEdit, submitButton）。
    • text/label: 设置控件上显示的文本。
    • geometry: 定义控件的 x, y 坐标以及宽度和高度。但强烈建议使用布局来管理控件的大小和位置，而不是手动设置 geometry。
    • font: 设置字体样式、大小等。
    • styleSheet: 允许使用类似 CSS 的语法来自定义控件的外观。
    • enabled/visible: 控制控件是否可用或可见。
    • placeholderText: 对于输入框，设置占位提示文本。
    • 特定控件的特定属性，如 QCheckBox 的 checked 状态，QComboBox 的 items 等。

3. 布局管理 (Layouts)

布局是 Qt Designer 中非常强大且核心的功能，它能帮助你创建自适应窗口大小变化的响应式界面。避免使用绝对定位（手动拖拽调整大小和位置），因为这会导致窗口缩放时界面混乱。

Qt Designer 提供以下几种主要布局类型，它们也作为控件存在于“控件盒”的 “Layouts” 分类下：

  • 垂直布局 (Vertical Layout / QVBoxLayout): 将内部控件从上到下垂直排列。
  • 水平布局 (Horizontal Layout / QHBoxLayout): 将内部控件从左到右水平排列。
  • 栅格布局 (Grid Layout / QGridLayout): 将内部控件排列在一个二维网格中，非常适合创建复杂的表单结构。
  • 表单布局 (Form Layout / QFormLayout): 专门用于创建“标签-输入框”对的表单，通常是两列，左边是 QLabel，右边是输入控件。

使用布局的步骤：
1. 放置控件：先将你需要的控件大致拖放到表单上。
2. 选择控件：按住 Ctrl 键（或 Cmd 键 on macOS）并用鼠标点击选中需要一起布局的多个控件。
3. 应用布局：
* 右键点击选中的控件之一，在上下文菜单中选择“布局(L)”，然后选择合适的布局类型（如“垂直布局”）。
* 或者，使用主窗口工具栏上的布局按钮。
4. 设置顶层布局：对于整个窗体（如 QWidget 或 QDialog 的中央区域），你需要设置一个顶层布局。选中窗体空白处（确保对象查看器中选中的是顶层窗体对象），然后应用一个布局。这样，当窗口缩放时，顶层布局及其内部所有控件都会自动调整。

布局相关的属性：
* layoutStretch: 在属性编辑器中，可以为布局中的控件或子布局设置拉伸因子。这决定了当有多余空间时，各个元素如何分配这些空间。
* layoutSpacing: 布局内控件之间的间距。
* contentsMargins: 布局与其父容器边缘之间的边距。
* sizePolicy: 定义控件在布局中如何伸缩。常见的有 Fixed, Minimum, Maximum, Preferred, Expanding 等。

4. 伙伴关系 (Buddy)

对于表单，可以使用“伙伴”功能提高可访问性。例如，一个 QLabel 可以与一个 QLineEdit 设置伙伴关系。当用户按下与 QLabel 文本中某个字符关联的快捷键时（例如，QLabel 文本为 &Name:，则快捷键为 Alt+N），焦点会自动跳转到其伙伴 QLineEdit。
设置方法：进入“编辑伙伴模式”（Edit > Edit Buddies 或工具栏按钮），然后从标签拖一条线到对应的输入控件。

5. Tab 顺序 (Tab Order)

Tab 顺序决定了用户按下 Tab 键时，焦点在控件之间切换的顺序。
设置方法：进入“编辑 Tab 顺序模式”（Edit > Edit Tab Order 或工具栏按钮），表单上的可获焦控件会显示数字。依次点击控件，即可按照点击顺序重新设置 Tab 顺序。

6. 信号与槽连接 (Signal/Slot Editor)

Qt Designer 允许进行一些简单的信号槽连接。
1. 切换到“编辑信号/槽模式”（Edit > Edit Signals/Slots 或工具栏按钮，通常是一个绿色加号图标）。
2. 从一个控件（信号发送者）拖拽一条线到另一个控件（槽接收者）。
3. 释放鼠标后，会弹出一个“配置连接”对话框。
4. 左侧列出发送者所有可用的信号，右侧列出接收者所有可用的槽。选择合适的信号和槽，点击“OK”。
例如，可以将一个 QPushButton 的 clicked() 信号连接到一个 QLabel 的 clear() 槽，实现点击按钮清空标签文本。

注意：虽然 Designer 提供了此功能，但对于复杂的逻辑或自定义槽函数，通常还是在代码中进行连接更为灵活和清晰。Designer 中的连接主要用于无需额外代码的简单 UI 交互。

7. 预览 (Preview)

在设计过程中，随时可以使用 Ctrl+R (或 macOS 上的 Cmd+R) 或通过菜单 “Form > Preview…” 来预览当前 UI 的实际外观和基本交互（如布局的自适应效果）。这对于调试布局和视觉效果非常有用。

8. 保存 .ui 文件

设计完成后，通过 “File > Save As…” 将你的设计保存为一个 .ui 文件。这个 .ui 文件是一个 XML 文件，描述了你创建的界面结构、控件及其属性。

四、 将 .ui 文件集成到 Python (PyQt/PySide) 项目中

.ui 文件本身只是一个界面描述文件，需要通过代码加载并使其具有实际功能。在 Python 中，使用 PyQt 或 PySide 库时，主要有两种方式使用 .ui 文件：

方法一：动态加载 .ui 文件 (推荐)

这种方法在运行时直接加载 .ui 文件，无需将其转换为 Python 代码。这使得 UI 的修改可以独立于 Python 代码进行，只需替换 .ui 文件即可看到变化。

以 PyQt6 为例（PySide6 类似，只需将 PyQt6 替换为 PySide6）：

“`python
import sys
from PyQt6 import QtWidgets, uic

假设你的 .ui 文件名为 “my_form.ui”

并且你设计的主窗口类是 QMainWindow

class MyWindow(QtWidgets.QMainWindow):
def init(self):
super().init()
uic.loadUi(“my_form.ui”, self) # 加载 .ui 文件

    # 现在可以通过 objectName 访问 .ui 文件中定义的控件
    # 假设 .ui 文件中有一个 QPushButton，其 objectName="myButton"
    # 并且有一个 QLineEdit，其 objectName="myLineEdit"
    if hasattr(self, 'myButton') and hasattr(self, 'myLineEdit'):
        self.myButton.setText("Click Me Now!")
        self.myButton.clicked.connect(self.on_button_click)
    else:
        print("Warning: myButton or myLineEdit not found in UI.")

def on_button_click(self):
    text = self.myLineEdit.text()
    print(f"Button clicked! LineEdit text: {text}")
    QtWidgets.QMessageBox.information(self, "Info", f"You entered: {text}")

if name == “main“:
app = QtWidgets.QApplication(sys.argv)
window = MyWindow()
window.show()
sys.exit(app.exec())
“`

优点：
* UI 与逻辑完全分离。
* 修改 UI 只需用 Qt Designer 编辑 .ui 文件，无需重新编译 Python 代码。

方法二：将 .ui 文件编译为 .py 文件

可以使用 pyuic6 (针对 PyQt6) 或 pyside6-uic (针对 PySide6) 工具将 .ui 文件转换为 Python 代码。

命令行操作 (以 PyQt6 为例)：
pyuic6 -x my_form.ui -o ui_my_form.py

  • -x: 生成可执行的示例代码（包含 if __name__ == "__main__": 部分，方便直接运行测试）。
  • -o ui_my_form.py: 指定输出的 Python 文件名。

然后，在你的主应用程序代码中导入并使用这个生成的类：

“`python
import sys
from PyQt6 import QtWidgets
from ui_my_form import Ui_MainWindow # 假设 .ui 设计的是 QMainWindow，生成的类名通常是 Ui_你的顶层对象名

class MyWindow(QtWidgets.QMainWindow, Ui_MainWindow): # 多重继承
def init(self):
super().init()
self.setupUi(self) # 调用生成的 setupUi 方法来初始化界面

    # 控件现在是 self 的属性，可以直接访问
    self.myButton.setText("Click Me Again!")
    self.myButton.clicked.connect(self.on_button_click)

def on_button_click(self):
    text = self.myLineEdit.text()
    print(f"Button clicked from compiled UI! LineEdit text: {text}")
    QtWidgets.QMessageBox.information(self, "Info", f"You entered: {text} (from compiled UI)")

if name == “main“:
app = QtWidgets.QApplication(sys.argv)
window = MyWindow()
window.show()
sys.exit(app.exec())
“`

优点：
* 最终分发时不需要包含 .ui 文件。
* 理论上启动速度可能略快一点（因为省去了 XML 解析步骤），但通常可忽略不计。
缺点：
* 每次 UI 修改后，都需要重新运行 pyuic 工具生成 .py 文件。
* UI 代码和逻辑代码混合在一个类中（通过继承），虽然结构上是分开的（setupUi 方法）。

对于大多数项目，动态加载 (uic.loadUi) 的方式更为灵活和推荐。

五、 实例：创建一个简单的登录表单

让我们通过一个简单的登录表单实例来实践一下。

目标：创建一个包含“用户名”标签和输入框、“密码”标签和输入框，以及一个“登录”按钮和一个“取消”按钮的对话框。

步骤：

  1. 启动 Qt Designer。

  2. 新建窗体：在“新建窗体”对话框中，选择 “Dialog with Buttons Bottom” (带底部按钮的对话框) 或 “Widget” (如果想自己添加按钮)。为了演示布局，我们选择 “Widget” 类型，然后点击“创建”。

  3. 调整窗体大小：拖动窗体右下角的小控制点，将其调整到一个合适的大小，例如宽 350，高 200。可以在属性编辑器中查看或修改 geometry。

  4. 添加控件：

    • 从“控件盒 (Widget Box)”的 “Display Widgets” 类别中拖拽两个 QLabel 到表单上。
    • 从 “Input Widgets” 类别中拖拽两个 QLineEdit 到表单上。
    • 从 “Buttons” 类别中拖拽两个 QPushButton 到表单上。

  5. 修改控件属性：

    • 选中第一个 QLabel：
      • objectName: usernameLabel
      • text: 用户名(&U): ( &U 表示 Alt+U 将是快捷键)
    • 选中第一个 QLineEdit：
      • objectName: usernameLineEdit
    • 选中第二个 QLabel：
      • objectName: passwordLabel
      • text: 密码(&P):
    • 选中第二个 QLineEdit：
      • objectName: passwordLineEdit
      • echoMode: Password (使其输入显示为星号或圆点)
    • 选中第一个 QPushButton：
      • objectName: loginButton
      • text: 登录
      • default: true (可选，使其成为默认按钮，按回车会触发)
    • 选中第二个 QPushButton：
      • objectName: cancelButton
      • text: 取消

  6. 设置伙伴关系 (Buddy)：

    • 点击工具栏上的“编辑伙伴模式”按钮。
    • 从 usernameLabel 拖一条线到 usernameLineEdit。
    • 从 passwordLabel 拖一条线到 passwordLineEdit。
    • 再次点击“编辑伙伴模式”按钮退出该模式。

  7. 进行布局：

    • 用户名行：选中 usernameLabel 和 usernameLineEdit。右键点击其中一个，选择 “布局 > 水平布局 (Lay Out Horizontally)”。
    • 密码行：选中 passwordLabel 和 passwordLineEdit。右键点击，选择 “布局 > 水平布局”。
    • 按钮行：选中 loginButton 和 cancelButton。右键点击，选择 “布局 > 水平布局”。
      • 你可能希望按钮之间有些空隙，或者按钮靠右。在按钮的水平布局中，可以添加一个“弹簧 (Spacer)”：从控件盒的 “Spacers” 中拖拽一个 Horizontal Spacer 到两个按钮的左边（或中间）。这个弹簧会占据所有可用的额外空间。
    • 整体垂直布局：现在，表单上应该有三个水平布局（或两个水平布局和一个包含按钮的水平布局）。按住 Ctrl 依次选中这几个水平布局（在对象查看器中选择更容易）。然后右键点击，选择 “布局 > 垂直布局 (Lay Out Vertically)”。
    • 设置顶层布局：确保没有选中任何控件，点击表单的空白区域（或者在对象查看器中选中顶层的 Widget 对象）。然后在表单空白处右键点击，选择 “布局 > 垂直布局” (或你之前创建的最外层布局)。这将使整个窗体内容能够自适应窗口大小。
      • 检查对象查看器，确保你的顶层 Widget 有一个布局（如 verticalLayout_main），并且其他所有控件和子布局都在这个顶层布局之下。

  8. 调整细节：

    • 可以通过属性编辑器调整布局的 spacing (间距) 和 margin (边距)。例如，选中顶层布局，将其 layoutMargin 设置为 10。
    • 选中包含按钮的水平布局，在属性编辑器中将其 layoutAlignment 修改为 AlignRight，使得按钮组靠右对齐。

  9. 设置 Tab 顺序：

    • 点击工具栏上的“编辑 Tab 顺序模式”按钮。
    • 依次点击 usernameLineEdit, passwordLineEdit, loginButton, cancelButton。它们旁边显示的数字会相应更新。
    • 再次点击该按钮退出。

  10. 预览：按 Ctrl+R (或 Cmd+R) 预览你的对话框。尝试缩放窗口，看看布局是否按预期工作。尝试按 Tab 键，检查焦点顺序。尝试按 Alt+U 和 Alt+P，看焦点是否跳转。

  11. 保存：将文件保存为 login_dialog.ui。

Python 代码 (login_app.py) – 使用动态加载：

“`python
import sys
from PyQt6 import QtWidgets, uic

class LoginDialog(QtWidgets.QDialog): # 我们设计的是一个对话框
def init(self):
super().init()
uic.loadUi(“login_dialog.ui”, self) # 加载 .ui 文件

    # 连接信号到槽
    self.loginButton.clicked.connect(self.handle_login)
    self.cancelButton.clicked.connect(self.reject) # QDialog 内置的槽，关闭对话框并返回 QDialog.Rejected

    # 你也可以在这里设置窗口标题等
    self.setWindowTitle("用户登录")

def handle_login(self):
    username = self.usernameLineEdit.text()
    password = self.passwordLineEdit.text()

    if not username or not password:
        QtWidgets.QMessageBox.warning(self, "输入错误", "用户名和密码不能为空！")
        return

    # 这里可以添加实际的认证逻辑
    if username == "admin" and password == "password":
        QtWidgets.QMessageBox.information(self, "登录成功", f"欢迎, {username}!")
        self.accept() # QDialog 内置的槽，关闭对话框并返回 QDialog.Accepted
    else:
        QtWidgets.QMessageBox.critical(self, "登录失败", "用户名或密码错误！")
        self.passwordLineEdit.clear() # 清空密码框

if name == “main“:
app = QtWidgets.QApplication(sys.argv)
dialog = LoginDialog()
# dialog.show() # 对于模态对话框，通常使用 exec()
result = dialog.exec() # 以模态方式显示对话框，会阻塞直到对话框关闭

if result == QtWidgets.QDialog.DialogCode.Accepted:
    print("登录成功，继续主程序...")
    # 这里可以打开主窗口等操作
else:
    print("登录取消或失败。")

sys.exit() # 通常 app.exec() 用于主事件循环，对话框关闭后程序若无其他窗口则退出

“`

将 login_dialog.ui 和 login_app.py 放在同一目录下，然后运行 python login_app.py。你将看到你用 Qt Designer 设计的登录对话框，并且按钮具有了实际功能。

六、 Qt Designer 使用技巧与最佳实践

  1. 命名规范：为所有重要的控件（尤其是需要在代码中访问的）和布局设置清晰、一致的 objectName。例如，usernameLineEdit, submitButton, mainVerticalLayout。
  2. 善用布局：尽可能使用布局来管理控件，避免绝对定位。这能确保你的 UI 在不同屏幕尺寸和分辨率下表现良好。
  3. 使用弹簧 (Spacers)：在布局中合理使用水平和垂直弹簧（QSpacerItem）来控制控件的对齐和空间的分配。
  4. 容器控件 (Container Widgets)：对于复杂的界面，可以使用 QGroupBox、QTabWidget、QStackedWidget 等容器控件来组织和划分界面区域，使结构更清晰。
  5. 提升的控件 (Promoted Widgets)：如果你的项目中使用了自定义控件（继承自标准 Qt 控件），可以在 Designer 中使用一个占位符标准控件，然后通过“提升的控件”功能将其提升为你自定义的控件类。这样 Designer 知道如何处理它，并且在加载 .ui 文件时会自动实例化你的自定义控件。
  6. 资源文件 (.qrc)：对于图标、图片等资源，建议使用 Qt 资源系统。创建一个 .qrc 文件，将资源添加到其中，然后在 Designer 的资源浏览器中加载此 .qrc 文件，这样就可以方便地为按钮等控件设置图标了。
  7. 样式表 (StyleSheets)：通过属性编辑器的 styleSheet 属性，可以为控件、窗体甚至整个应用程序应用自定义的 CSS 样式，极大地增强了 UI 的美观度和可定制性。
  8. 分离关注点：保持 .ui 文件专注于界面结构和基本外观，而将复杂的事件处理、业务逻辑、数据交互等放在 Python/C++ 代码中实现。
  9. 版本控制：.ui 文件是 XML 文本文件，适合纳入版本控制系统（如 Git）。

七、 总结

Qt Designer 是一个非常高效的 UI 设计工具，它通过可视化操作大大简化了 Qt 界面的创建过程。掌握其核心组件如控件盒、属性编辑器、对象查看器，并熟练运用布局系统，可以让你快速构建出专业且响应式的用户界面。结合 Python (PyQt/PySide) 的动态加载机制或编译机制，开发者可以将设计与逻辑有效分离，提升开发效率和项目可维护性。

虽然本文旨在提供一个快速上手的指南，但 Qt Designer 的功能远不止于此。鼓励读者多动手实践，探索更多高级功能，如自定义插件、国际化支持等，从而更充分地发挥其在 Qt 开发中的潜力。记住，一个好的用户界面是成功应用程序的重要组成部分，而 Qt Designer 正是帮助你打造优秀界面的得力助手。

发表评论

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

滚动至顶部