如何使用Qt Designer？详细教程与功能解析 – wiki基地

作者： /

精通GUI设计：如何使用Qt Designer？详细教程与功能解析

在现代软件开发中，图形用户界面（GUI）是用户与应用程序交互的关键。一个直观、美观、响应迅速的GUI能够极大地提升用户体验。虽然我们可以完全通过代码来构建GUI，但这通常是一个耗时且繁琐的过程，尤其对于复杂的布局和大量的控件。这时，像Qt Designer这样的可视化设计工具就显得尤为重要。

Qt Designer是Qt开发工具集中的一个强大组件，它提供了一个所见即所得（WYSIWYG）的环境，让开发者能够通过拖放控件和设置属性来快速设计和构建用户界面。本文将带您深入了解Qt Designer，从基本操作到高级功能，通过详细的教程和解析，帮助您充分掌握这个强大的工具。

1. 什么是Qt Designer？为什么使用它？

什么是Qt Designer？

Qt Designer是Qt框架提供的一个独立的图形界面设计工具。它允许开发者以可视化的方式创建Qt窗口、对话框以及其他UI元素。设计的界面被保存为.ui文件，这是一种XML格式的文件，描述了界面上的控件、它们的布局、属性以及信号与槽连接（部分）。

为什么使用Qt Designer？

使用Qt Designer有诸多显著优势：

  1. 提高开发效率： 相比于手动编写代码创建和布局每个控件，可视化设计可以大大加快UI的构建速度。拖放、对齐、调整大小等操作直观快捷。
  2. 分离UI与逻辑： .ui文件只包含UI的结构和外观信息，而应用程序的核心业务逻辑则在单独的代码文件中实现。这种分离使得UI设计师和程序员可以并行工作，提高了协作效率，也使得代码更易于维护和测试。
  3. 所见即所得： 在Designer中看到的界面效果与最终程序运行时的效果基本一致，这有助于开发者精确控制UI的外观和布局。
  4. 易于修改和迭代： 当UI需求发生变化时，直接在Designer中修改布局和属性比修改大量代码要容易得多。
  5. 强大的布局管理： Qt强大的布局系统（Layouts）是其一大特色，Qt Designer提供了直观的方式来应用和配置这些布局，确保界面在不同尺寸和分辨率下都能良好地展示。
  6. 预览功能： 可以随时预览设计好的界面，无需运行整个应用程序。

总之，Qt Designer是Qt开发中不可或缺的工具，尤其适合快速原型开发和构建复杂的静态或半静态用户界面。

2. 启动Qt Designer与界面概览

Qt Designer通常作为Qt安装的一部分提供。您可以在Qt安装目录的bin文件夹下找到并启动它（例如，在Windows上是designer.exe）。如果使用Qt Creator这样的IDE，可以在创建新项目或文件时选择创建Qt Designer Form。

启动Qt Designer后，您会看到一个主窗口，通常包含以下几个主要区域：

  1. 菜单栏 (Menu Bar): 位于顶部，提供文件操作、编辑、布局、工具、预览等功能。
  2. 工具栏 (Tool Bar): 位于菜单栏下方，包含常用功能的快捷按钮，如新建、打开、保存、撤销、重做、布局应用等。
  3. Widget Box (控件箱): 通常位于左侧，包含了所有可用的Qt控件（Widgets），如按钮、标签、输入框、容器、空间分隔符等。您可以从这里拖放控件到窗体设计区域。
  4. Form Editor (窗体编辑区): 位于中心区域，是您实际设计界面的地方。您在这里放置、排列和调整控件。
  5. Object Inspector (对象查看器): 通常位于右上角，以树状结构显示当前窗体上的所有控件。这有助于理解控件之间的层次关系，并方便选择隐藏在其他控件后面的控件。
  6. Property Editor (属性编辑器): 通常位于右下角，显示当前选中控件的所有可配置属性。您可以修改控件的文本、尺寸、颜色、字体、对象名等。
  7. Signal/Slot Editor (信号与槽编辑器): 通常是一个可停靠的窗口或通过菜单访问，用于可视化地连接控件的信号和槽。
  8. Action Editor (动作编辑器): 用于创建和管理用于菜单或工具栏的动作（Actions）。
  9. Resource Editor (资源编辑器): 用于将图片、图标等资源嵌入到.qrc文件中，方便在应用程序中引用。

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

3. 基本操作与构建第一个界面（详细教程）

接下来，我们将通过构建一个简单的登录界面来学习Qt Designer的基本操作。

步骤 1: 创建新窗体

  1. 启动Qt Designer。
  2. 在弹出的”New Form”对话框中，选择一个窗体模板。最常用的是：
    • Main Window (主窗口): 带有菜单栏、工具栏和状态栏的标准应用程序窗口。
    • Dialog without Buttons (不带按钮的对话框): 一个基本的对话框窗口。
    • Widget (控件): 可以作为任何其他窗口或控件的容器。
    • 对于登录界面，选择 Dialog without Buttons 或 Widget 都可以，这里我们选择 Dialog without Buttons。
  3. 点击 “Create” (创建)。

您现在会看到一个空白的对话框窗体出现在Form Editor区域。

步骤 2: 添加控件

我们将添加标签（QLabel）、单行输入框（QLineEdit）和按钮（QPushButton）。

  1. 在 Widget Box 中找到 Display Widgets 分类下的 Label (标签)。
  2. 拖动两个 Label 控件到窗体上。
  3. 在 Input Widgets 分类下找到 Line Edit (单行输入框)。
  4. 拖动两个 Line Edit 控件到窗体上。
  5. 在 Buttons 分类下找到 Push Button (按钮)。
  6. 拖动两个 Push Button 控件到窗体上。

现在您的窗体上可能散落着几个控件，看起来有点杂乱。

步骤 3: 设置控件属性

选中每个控件，然后在 Property Editor 中修改其属性。

  1. 选中第一个 Label。在 Property Editor 中找到 text 属性，将其值修改为 “用户名:”。
  2. 选中第二个 Label。将其 text 属性修改为 “密码:”。
  3. 选中第一个 Line Edit。在 Object Inspector 中，您会看到其对象名是 lineEdit。这是一个默认名称。为了代码中更容易识别，我们在 Property Editor 中找到 objectName 属性，将其修改为 usernameLineEdit。
  4. 选中第二个 Line Edit。将其 objectName 属性修改为 passwordLineEdit。为了安全，我们还需要将密码输入框的文本显示模式改为密码模式。找到 echoMode 属性，将其设置为 Password。
  5. 选中第一个 Push Button。将其 text 属性修改为 “登录”。将其 objectName 属性修改为 loginButton。
  6. 选中第二个 Push Button。将其 text 属性修改为 “取消”。将其 objectName 属性修改为 cancelButton。

现在控件有了正确的文本和易于识别的对象名。

步骤 4: 应用布局 (Layouts) – 核心概念！

仅仅放置控件并不能保证界面在不同尺寸下的美观和可用性。Qt使用布局（Layouts）来自动管理控件的位置和大小。这是Qt Designer中最重要、最强大的功能之一。

  • 为什么需要布局？ 手动调整控件位置很麻烦，且窗体大小改变时，控件不会自动调整。布局会根据窗体的大小和控件的sizePolicy自动计算控件的位置和大小。
  • 常用布局类型：
    • Vertical Layout (QVBoxLayout): 控件垂直排列。
    • Horizontal Layout (QHBoxLayout): 控件水平排列。
    • Grid Layout (QGridLayout): 控件排列在网格中。
    • Form Layout (QFormLayout): 专门用于标签-输入框对的布局，非常适合我们的登录界面。

我们将使用 QFormLayout 来排列标签和输入框，使用 QHBoxLayout 来排列按钮。

  1. 创建Form布局： 选中窗体上的两个 Label 和两个 Line Edit (可以通过按住Ctrl键或Shift键多选)。
  2. 在工具栏中找到布局按钮（通常是排列图标），或者在菜单栏选择 Layout -> Layout Form in a Grid (虽然叫Grid，但QFormLayout也在此选项下，Qt Designer会智能选择合适的布局)。或者右键选中控件 -> Layout -> Layout Form in a Grid。

  3. Qt Designer会将选中的四个控件放入一个 QFormLayout 中。现在标签和输入框应该对齐排列了。

  4. 创建Horizontal布局 for Buttons: 选中窗体上的两个 Push Button。

  5. 右键选中按钮 -> Layout -> Layout Horizontally。

  6. 两个按钮现在被放置在一个 QHBoxLayout 中，水平排列。

  7. 将所有布局放入主布局： 现在我们有了一个包含标签和输入框的Form布局，以及一个包含按钮的Horizontal布局。我们需要将这两个布局垂直排列在窗体中。

  8. 选中窗体本身 (点击窗体的空白区域，确保Object Inspector中选中了顶级的 Dialog 对象)。
  9. 在工具栏中找到布局按钮，选择 Layout Vertically (或菜单栏 Layout -> Layout Vertically in Form).
  10. Qt Designer会将Form布局和Horizontal布局垂直排列在窗体的主布局中。现在整个界面应该看起来整洁有序了。

步骤 5: 调整布局属性

您可以进一步调整布局的属性，例如间距、边距、伸缩因子等。

  1. 选中整个窗体 (顶级的Dialog)。在 Property Editor 中，您可以看到应用于窗体的主布局属性（例如 layoutSpacing, layoutContentsMargins）。可以调整这些值来改变控件与窗体边缘以及控件之间的距离。
  2. 选中包含按钮的 QHBoxLayout (可以在Object Inspector中选中)。在 Property Editor 中可以调整其属性。例如，您可以添加一个水平伸缩空间（Horizontal Spacer）来将按钮推到右边。在 Widget Box 中找到 Spacers -> Horizontal Spacer，拖动一个到按钮布局的左边。它会自动占据可用空间。

步骤 6: 连接信号与槽 (简单示例)

Qt的核心机制是信号与槽。Qt Designer允许进行部分信号与槽的可视化连接。通常用于连接控件的信号到父容器的槽，例如按钮的clicked()信号到对话框的accept()或reject()槽。

  1. 点击工具栏中的 “Edit Signals/Slots” (编辑信号/槽)按钮（通常是绿色箭头图标）。
  2. 界面会切换到信号与槽编辑模式。
  3. 点击 “取消” 按钮 (cancelButton) 并拖动一条线到窗体的空白处。
  4. 释放鼠标，会弹出一个配置连接的对话框。
  5. 在左侧的 “Signal” (信号)列表中，选择 clicked()。
  6. 在右侧的 “Slot” (槽)列表中，选择 reject() (这是QDialog自带的一个槽，用于关闭对话框并返回“拒绝”结果)。
  7. 点击 “OK”。
  8. 以类似的方式，连接 “登录” 按钮 (loginButton) 的 clicked() 信号到窗体的 accept() 槽。
  9. 再次点击 “Edit Signals/Slots” 按钮退出编辑模式。

现在，点击“取消”按钮会关闭对话框并返回QDialog::Rejected，点击“登录”按钮会关闭对话框并返回QDialog::Accepted。注意： 这种连接只适用于父容器自带的槽。如果您想连接到自定义的槽或者连接不同控件之间的信号槽，通常需要在代码中完成。

步骤 7: 预览窗体

随时可以通过菜单栏 Form -> Preview (或快捷键 Ctrl+R) 来预览设计好的界面。这会弹出一个独立的窗口，显示界面在实际运行时的样子，包括布局的自动调整效果。

步骤 8: 保存窗体

  1. 点击菜单栏 File -> Save 或 Save As...。
  2. 选择一个位置和文件名，例如 login_dialog.ui。.ui是Qt Designer窗体文件的标准扩展名。

恭喜！您已经使用Qt Designer设计了一个简单的登录界面并保存了.ui文件。

4. 功能解析与进阶使用

除了上述基本操作，Qt Designer还提供了许多功能和特性，帮助您创建更复杂、更专业的界面。

4.1 Property Editor 深入

Property Editor是使用频率最高的功能之一。每个Qt控件都有一系列属性，通过Property Editor可以直观地修改它们。

  • 常用属性： objectName, geometry, minimumSize, maximumSize, sizePolicy, enabled, visible, windowTitle (对于窗体), text (对于QLabel, QPushButton等), icon, styleSheet (用于设置CSS样式的外观)。
  • sizePolicy： 这是一个非常重要的属性，它告诉布局系统控件在水平和垂直方向上如何伸展或收缩。常见的取值如：
    • Fixed: 控件大小固定不变。
    • Preferred: 控件倾向于其最佳大小，但在必要时可以伸展或收缩。
    • Expanding: 控件会尽可能多地占据可用空间。
    • MinimumExpanding: 控件会确保其最小大小，并在需要时尽可能多地占据空间。
      理解并合理设置sizePolicy是创建响应式界面的关键。
  • Style Sheet： 您可以在styleSheet属性中直接编写CSS样式代码来改变控件的外观，如背景颜色、字体、边框等。这提供了一种强大的方式来自定义控件的样式。

4.2 Object Inspector 的作用

Object Inspector提供了一个树状视图，显示了窗体上所有控件的层次结构。

  • 层次结构： 控件可以包含其他控件（例如，一个QGroupBox可以包含多个按钮和输入框）。Object Inspector清晰地展示了这种父子关系。布局本身也是层级的一部分。
  • 选择控件： 当界面复杂，控件重叠或很小时，在Form Editor中难以点击选中。这时可以在Object Inspector中直接点击控件名称来选中它。
  • 重命名对象： 可以直接在Object Inspector中双击控件名称来修改其objectName属性。建议为关键控件设置有意义的名称，方便在代码中引用。
  • 隐藏/显示： 可以右键点击控件并选择 Hide 来临时隐藏控件，方便编辑后面的控件。

4.3 Signal/Slot Editor (进阶)

前面我们连接了按钮的clicked()信号到对话框的槽。Signal/Slot Editor还可以用于：

  • 查看现有连接： 可以查看当前窗体中已经建立的所有信号与槽连接。
  • 删除连接： 可以删除不再需要的连接。
  • 连接到自定义槽（部分）： 如果您的父窗体是自定义类，并且在Designer中将其类名设置为了您自定义的类名（通过右键窗体 -> “Promote to…”），理论上可以连接到其中标记为Q_SLOT的自定义槽。但在实际开发中，更灵活和常见的方式是在代码中建立更复杂的信号与槽连接。

4.4 Action Editor

Action Editor用于创建和管理“动作”（Actions）。动作是一个抽象的概念，可以代表菜单项、工具栏按钮或键盘快捷方式。一个动作可以绑定文本、图标、快捷键、状态提示等。

  • 创建动作： 在Action Editor中点击”+”按钮创建新动作，设置其text（显示文本）、icon（图标）、shortcut（快捷键）、statusTip（状态栏提示）等属性。
  • 将动作添加到菜单/工具栏： 在Main Window模板中，菜单栏和工具栏是自动创建的。您可以直接将Action Editor中创建的动作拖放到菜单栏或工具栏上，它们会自动变成菜单项或工具栏按钮。
  • 连接动作的信号： 动作有一个triggered()信号。您可以在Signal/Slot Editor中连接这个信号到相应的槽，实现点击菜单项或工具栏按钮时的功能。

Action Editor使得管理菜单和工具栏的逻辑更加集中和方便。

4.5 Resource Editor

Resource Editor允许您将应用程序中使用的资源文件（如图片、图标、翻译文件等）嵌入到一个.qrc文件（Qt Resource Collection file）中。

  • 创建.qrc文件： 在Resource Editor中点击”New Resource File”按钮，创建一个新的.qrc文件。
  • 添加前缀和文件： 在.qrc文件中，可以创建不同的前缀（Prefixes），然后将文件添加到相应的前缀下。前缀通常用于组织资源，例如/icons，/images。
  • 在Designer中使用资源： 在控件的属性中（如icon, pixmap），如果属性旁边有一个小图标，点击它可以选择资源文件中的图片。在弹出的对话框中，选择:/开头的路径，这就是引用.qrc文件中的资源的方式（例如:/icons/my_icon.png）。
  • 优势： 将资源嵌入.qrc文件并通过Qt的资源系统访问，可以确保资源始终随应用程序一起发布，避免文件丢失的问题，并且Qt的资源系统访问速度快。

4.6 Tab Order Editing

在设计完界面后，可以通过菜单栏 Edit -> Edit Tab Order 来进入Tab Order编辑模式。在此模式下，您可以点击控件，按照用户希望通过Tab键在控件之间切换的顺序来重新排列数字。这对于键盘导航非常重要。

5. 将 .ui 文件集成到代码中

设计好的.ui文件不能直接运行，需要与应用程序的代码结合。有两种主要的方法：

5.1 运行时加载 .ui 文件 (常用，尤其Python)

这种方法在应用程序运行时动态加载和解析.ui文件。这是Python (使用PyQt或PySide) 开发中最常用的方式。

  • 原理： 使用QUiLoader (或PyQt/PySide的等效加载器) 在运行时读取.ui文件，并创建一个对应的Qt对象实例。
  • 优点： .ui文件可以独立于代码进行修改，无需重新生成代码文件。设计师和开发者可以更好地协同工作。
  • 缺点： 运行时加载有轻微的性能开销（通常可以忽略），并且在某些静态语言中可能不如编译时集成方便。
  • Python 示例 (使用 PyQt6):

“`python
import sys
from PyQt6.QtWidgets import QApplication, QDialog
from PyQt6 import uic

从 .ui 文件加载界面

注意：uic.loadUi 返回的是 .ui 文件中定义的顶级对象的类型，

如果 .ui 是 Dialog，就返回 QDialog 实例

如果 .ui 是 Main Window，就返回 QMainWindow 实例

如果 .ui 是 Widget，就返回 QWidget 实例

class LoginDialog(QDialog): # 继承 QDialog，与 Designer 中创建的顶级对象类型匹配
def init(self, parent=None):
super().init(parent)
# 使用 uic.loadUi 加载 .ui 文件
uic.loadUi(“login_dialog.ui”, self)

    # 现在可以通过 self.objectName 来访问Designer中的控件
    # 例如：
    # self.usernameLineEdit 是 Designer 中命名为 usernameLineEdit 的 QLineEdit 对象
    # self.loginButton 是 Designer 中命名为 loginButton 的 QPushButton 对象

    # 连接信号与槽 (在Designer中未连接的或更复杂的连接)
    # 例如：连接登录按钮的点击信号到自定义槽
    self.loginButton.clicked.connect(self.on_login_clicked)
    # 取消按钮的连接已经在Designer中完成 (到 reject())，这里无需重复

def on_login_clicked(self):
    username = self.usernameLineEdit.text()
    password = self.passwordLineEdit.text()
    print(f"用户名: {username}, 密码: {password}")
    # 在这里添加实际的登录逻辑
    # 登录成功或失败后，可以调用 self.accept() 或 self.reject() 关闭对话框

if name == ‘main‘:
app = QApplication(sys.argv)
dialog = LoginDialog()
if dialog.exec(): # 以模态方式显示对话框并等待结果
print(“Dialog accepted (Login success or OK)”)
else:
print(“Dialog rejected (Cancel or Close)”)
sys.exit(app.exec())
“`

5.2 将 .ui 文件转换为代码

这种方法使用Qt提供的工具将.ui文件转换为对应语言（如Python或C++）的源代码文件。

  • 原理： 使用命令行工具（如Python的pyuic6或C++的uic）将.ui文件解析并生成一个包含界面构建代码的源代码文件。
  • 优点： 生成的代码可以直接导入并在应用程序中使用，无需运行时加载器。对于C++项目是标准做法。
  • 缺点： 每当修改.ui文件后，都需要重新运行转换工具生成新的代码文件。将自定义逻辑添加到生成的代码文件中比较麻烦，通常推荐将生成的代码作为一个基类，然后创建另一个继承该基类的类来添加逻辑。

  • Python 示例 (使用 PyQt6 和 pyuic6):

    1. 打开命令行终端。
    2. 运行转换命令：
      bash
      pyuic6 login_dialog.ui -o ui_login_dialog.py
      这条命令会将 login_dialog.ui 转换为 ui_login_dialog.py 文件。

    3. 查看生成的 ui_login_dialog.py 文件： 这个文件包含一个类（通常命名为Ui_Dialog或其他），其中有一个setupUi方法，该方法负责创建并设置界面上的所有控件和布局。

    4. 在您的主应用程序代码中使用生成的类：

    “`python
    import sys
    from PyQt6.QtWidgets import QApplication, QDialog

    导入从 .ui 文件生成的界面类

    from ui_login_dialog import Ui_Dialog

    class LoginDialog(QDialog, Ui_Dialog): # 继承 QDialog 和 生成的 Ui_Dialog 类
    def init(self, parent=None):
    super().init(parent)
    # 调用父类的 setupUi 方法来初始化界面
    self.setupUi(self)

        # 现在可以直接通过 self.objectName 来访问Designer中的控件
    # 例如：
    # self.usernameLineEdit
    # self.loginButton

    # 连接信号与槽 (在Designer中未连接的或更复杂的连接)
    self.loginButton.clicked.connect(self.on_login_clicked)

def on_login_clicked(self):
    username = self.usernameLineEdit.text()
    password = self.passwordLineEdit.text()
    print(f"用户名: {username}, 密码: {password}")
    # 在这里添加实际的登录逻辑
    # 登录成功或失败后，可以调用 self.accept() 或 self.reject() 关闭对话框

    if name == ‘main‘:
    app = QApplication(sys.argv)
    dialog = LoginDialog()
    if dialog.exec():
    print(“Dialog accepted”)
    else:
    print(“Dialog rejected”)
    sys.exit(app.exec())

    “`

选择哪种集成方式取决于您的项目需求、开发语言习惯以及团队的工作流程。对于Python，运行时加载通常更受欢迎，因为它提供了更大的灵活性。

6. 使用Qt Designer的技巧和最佳实践

  • 始终使用布局： 不要依赖手动定位控件。布局是Qt GUI的基石，确保界面在不同环境下都能正确显示。
  • 给控件有意义的名称 (objectName)： 特别是您需要在代码中引用的控件（如输入框、按钮、表格等）。清晰的名称有助于提高代码的可读性和维护性。
  • 利用 sizePolicy： 结合布局和 sizePolicy 来控制控件在空间分配时的行为。
  • 多使用容器控件： 使用 QGroupBox, QFrame, QWidget 等作为容器，将相关的控件分组，这有助于组织界面和应用更复杂的布局。
  • 善用 Spacers (空间分隔符)： Horizontal Spacer 和 Vertical Spacer 是布局中的重要元素，它们会占据可用空间，常用于将控件推向一侧或在控件之间创建可伸缩的空白区域。
  • 经常预览 (Ctrl+R)： 及时查看设计效果，发现并修正布局问题。
  • 了解常用的控件属性： 熟悉text, icon, enabled, visible, checked (对于复选框和单选按钮), readOnly (对于输入框) 等常用属性。
  • 掌握信号与槽的基本连接： 虽然复杂的连接在代码中实现，但简单的连接（如按钮点击关闭窗口）可以在Designer中完成，提高效率。
  • 保存资源文件(.qrc)： 对于应用程序使用的图片和图标，强烈建议使用Resource Editor将其嵌入到.qrc文件中，并通过资源系统访问。

7. 总结

Qt Designer是一个功能强大且易于使用的GUI设计工具，极大地简化了Qt应用程序用户界面的开发过程。通过本文的详细教程和功能解析，您应该对如何使用Qt Designer有了全面的了解：从创建新窗体、添加和设置控件、应用和配置布局，到使用Signal/Slot Editor、Action Editor和Resource Editor等进阶功能，以及最重要的——如何将设计好的.ui文件集成到您的代码中。

掌握Qt Designer不仅能帮助您更快地构建出美观、响应式的界面，还能促使您将UI设计与业务逻辑分离，写出更清晰、更易于维护的代码。现在，打开Qt Designer，开始您的可视化GUI设计之旅吧！通过不断实践和尝试，您将能充分发挥Qt Designer的强大潜力，创建出令人印象深刻的应用程序界面。

发表评论

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

滚动至顶部