网站导航
> 技术文档 > Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程

Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程

网友: 技术文档 2025-07-30 12:11:43

Qt Designer 是一个图形化的工具，用于快速设计 Qt Widgets 应用的用户界面（UI）。可以通过拖放控件，轻松创建界面，并且不需要编写界面相关的代码。设计完毕后，Qt Designer 会生成 .ui 文件，可以通过 Qt 编译器将其转换为 C++ 代码并与业务逻辑代码集成。在我们的Qt+PCL开发中需要用到UI设计，因此掌握本节内容十分有必要，将会为后面的内容打下坚实的基础，下面我们就开始详细的学习吧！

1、安装 Qt Designer

  1. 安装 Qt 和 Qt Creator：

    • 如果你已经安装了 Qt Creator，则已经包含了 Qt Designer。你可以从 Qt Creator 中直接启动它。如下图方式。
      Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程

  2. 单独使用 Qt Designer：

    • 如果你不使用 Qt Creator，你也可以单独安装 Qt Designer。通常，它包含在 Qt 的安装包中，可以通过 Qt Maintenance Tool 安装。本教材用的版本为qt-creator-opensource-windows-x86_64-12.0.0.exe，官方下载地址

2、启动 Qt Designer

  • 通过 Qt Creator 启动：

    1. 打开 Qt Creator。
    2. 选择 File -> New File or Project -> Application -> Qt Widgets Application。图示如下：
      Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程
    3. 在文件浏览器中右键点击 .ui 文件，然后选择 Open with Qt Designer。图示如下：
      Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程
      单击设计出现如下界面。Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程

  • 独立启动：

    1. 在系统的应用程序菜单中找到 Qt Designer。
    2. 启动 Qt Designer，你可以选择从零开始创建 UI 或打开现有的 .ui 文件。效果最终同上。

3、Qt Designer 界面概述

Qt Designer 提供了一个直观的界面，常见的元素包括：

  1. 工具箱（Widgets）：提供一组常用控件， 如按钮、标签、文本框、表格等，可以通过拖放方式添加到窗口中。拖放的按钮、文本框等效果如下。
    Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程

  2. 属性编辑器（Property Editor）：显示当前选中控件的属性，如尺寸、颜色、字体等，允许你修改控件的外观和行为。上图按钮的属于如下。
    Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程

  3. 信号槽编辑器（Signal/Slot Editor）：用于为控件设置交互事件，例如按钮的点击事件等。
    Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程

  4. 布局管理器（Layout Manager）：用来管理控件的布局，确保在窗口大小改变时，控件能够自动调整位置和大小。
    各模块的位置如下图所示。
    Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程

4、使用 Qt Designer 设计 UI

以下是设计一个简单 UI 界面的一般步骤。

1. 新建 UI 文件
  • 启动 Qt Designer 后，可以选择 File -> New，然后选择 Widget 作为类型。点击 Create，你会得到一个空白的窗口，开始设计界面，如下。
    Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程
2. 添加控件到 UI
  • 从 工具箱（Widgets） 中选择你需要的控件（例如按钮、标签、文本框等），然后将其拖动到主窗口中。
  • 控件 例如：
    • QPushButton：按钮控件
    • QLabel：标签控件
    • QLineEdit：文本输入框
    • QTextEdit：多行文本输入框
    • QComboBox：下拉框控件
    • QTableWidget：表格控件
      以QLabel标签控件为例，将其拖动到主窗口中效果如下。
      Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程
3. 设置控件的属性
  • 选中控件后，打开 属性编辑器（Property Editor），可以调整控件的各类属性，如大小、颜色、字体等。
  • 比如，你可以设置按钮的 text 属性来修改按钮显示的文字，或者设置 font 来改变字体大小，效果如下。
    Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程
4. 使用布局管理器
  • 在 UI 设计中，布局是很重要的，它确保控件在窗口尺寸调整时能够自适应。
  • 布局类型：
    • 水平布局（QHBoxLayout）：控件水平排列。
    • 垂直布局（QVBoxLayout）：控件垂直排列。
    • 网格布局（QGridLayout）：控件按网格排列。
  • 选择控件后，点击 布局工具栏 中的布局按钮来应用布局。
    在拖QLabel标签控件到主窗口中，有两个标签控件，采用水平布局效果如下。
    Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程
5. 信号与槽的连接
  • 在设计界面时，你可以为控件设置信号（比如按钮点击事件），并将这些信号连接到槽函数（即响应事件的代码）。
  • 步骤：

    1. 选择一个控件（比如按钮）。

    2. 点击右键，选择 Go to Slot，你可以选择按钮的点击信号（例如 clicked()）并将其连接到槽函数。
      Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程

    3. Qt Designer 会生成相应的代码，你可以在项目中修改和实现这些槽函数。
      Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程

6. 保存 UI 文件
  • 在设计完成后，点击 File -> Save As，将你的设计保存为 .ui 文件。这个文件包含了所有的 UI 元素和控件布局。

5、将 Qt Designer 设计的 UI 集成到 C++ 项目中

1. 在 Qt 项目中使用 .ui 文件
  • 当你将设计好的 .ui 文件保存后，你可以将它集成到你的 C++ 项目中。你需要通过 uic（Qt 的 UI 编译器）工具将 .ui 文件转换成 C++ 代码。
2. 在项目中包含 .ui 文件

在你的 C++ 代码中使用 ui 文件，通常需要以下几步：

C++ 代码示例
  • mainwindow.ui：假设你设计了一个 mainwindow.ui 文件，并希望在主窗口中加载它。
#include \"mainwindow.h\"#include \"ui_mainwindow.h\"MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow) // 创建 Ui 对象{ ui->setupUi(this); // 设置 UI}MainWindow::~MainWindow(){ delete ui; // 清理 UI 对象}
  • .pro 文件：确保 .ui 文件已经添加到项目的 .pro 文件中。
FORMS += mainwindow.ui

如下图所示。
Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程

  • 编译和运行：
    • 在 Qt Creator 中点击 Build 和 Run，你的 UI 界面将被正确加载并显示。
3. 信号与槽的连接（通过代码）

你可以通过代码连接信号和槽，处理事件。

// 连接按钮点击信号到槽connect(ui->pushButton, SIGNAL(clicked()), this, SLOT(on_pushButton_clicked()));

6、综合示例展示

下面以输入半径计算圆的面积为示例，进行一般常规工具箱使用演示。最终的效果如下。
Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程

step1:新建项目——》Qt Widgets Application——》名称：CircleArea——》qmake
Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程
step2：基类名称：QDialog，如下图。
Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程
step3：一直下一步到完成，如下所示。
Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程
step4：双击dialog.ui，在Display Widget容器栏找到Label标签控件，拖拽三个到中间的编辑框中，同样在Input Widget容器栏中找到Line Edit控件，拖拽到中间的编辑框中，在Buttons容器栏找到Push Button按钮控件，拖拽到中间的编辑框中。初步的效果如下。
Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程
step5：修改各控件的属性，如下。
Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程
将areaLabel_2的“frameShape”修改为Panel;“frameShadow”为Sunken，最终效果如下。
Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程
step6：在“计算”按钮上按鼠标右键，在弹出的下拉菜单中选择“转到槽.”命令，在“转到槽”对话框中选择 QAbstractButton 的“clicked()”信号，单击“OK”按钮，如图下所示。
Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程
step7：进入 dialog.cpp 文件中按钮单击事件的槽函on_countBtn_clicked()，在函数中添加的代码如下：

void Dialog::on_countBtn_clicked(){ bool ok; QString tempStr; QString valueStr = ui->radiusLineEdit->text(); int valueInt = valueStr.toInt(&ok); double area = valueInt * valueInt * PI; // 计算圆面积 ui->areaLabel_2->setText(tempStr.setNum(area)); }

定义PI为const static double PI=3.14159;
step8：运行程序，输入半径10，单击“计算”，计算的结果如下。
Qt+PCL手把手教材（第6讲）——使用 Qt Designer 设计 UI 界面基础操作附综合示例（C++完整代码）_qt designer教程
至此完成综合示例。

7、调试与优化

  1. 调试界面布局：确保所有控件在不同的窗口大小下都能适应。
  2. 性能优化：如果有大量控件，避免使用过多嵌套的布局，否则可能影响性能。
  3. 多语言支持：如果你的应用需要支持多语言，可以使用 Qt 的 国际化功能，将字符串提取到 .ts 文件中进行翻译。

8、总结

使用 Qt Designer 设计 UI 界面能大大提高开发效率，尤其是在需要快速设计和调整用户界面时。你可以通过拖放控件、设置属性、应用布局以及连接信号槽来快速构建界面，然后将 .ui 文件集成到 C++ 项目中。通过这种方式，UI 和逻辑代码相对分离，易于维护和扩展。

至此完成第六讲的内容，欢迎喜欢朋友的关注订阅！

网络标签：

相关问题