QT---------GUI程序设计基础

代码UI化设计（QT）

实例功能概述

假设我们要创建一个简单的计算器应用程序。该应用程序具有以下功能：

• 包含数字按钮（0-9）、操作符按钮（+、-、*、/）、等于按钮（=）和清除按钮（C）。
• 有一个显示计算结果和输入表达式的文本框。
• 用户可以通过点击按钮输入数字和操作符，并进行简单的四则运算，点击等于按钮得出结果，点击清除按钮清除输入和结果。

实例功能实现

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QMainWindow>
#include <QLabel>
#include <QPushButton>
#include <QGridLayout>
#include <QString>class MainWindow : public QMainWindow
{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();private slots:void onNumberButtonClicked();void onOperatorButtonClicked();void onEqualButtonClicked();void onClearButtonClicked();private:QLabel *displayLabel;QString expression;QPushButton *createButton(const QString &text, const char *member);QGridLayout *gridLayout;
};#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include <QVBoxLayout>
#include <QPushButton>
#include <QString>
#include <iostream>MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), expression("")
{// 创建显示标签displayLabel = new QLabel("0", this);displayLabel->setAlignment(Qt::AlignRight);displayLabel->setFont(QFont("Arial", 20));// 创建网格布局gridLayout = new QGridLayout();// 创建数字按钮QStringList numberButtons = {"7", "8", "9", "4", "5", "6", "1", "2", "3", "0", "."};int row = 1, col = 0;for (const QString &text : numberButtons) {QPushButton *button = createButton(text, SLOT(onNumberButtonClicked()));gridLayout->addWidget(button, row, col);col++;if (col > 2) {col = 0;row++;}}// 创建操作符按钮QStringList operatorButtons = {"+", "-", "*", "/"};row = 1;col = 3;for (const QString &text : operatorButtons) {QPushButton *button = createButton(text, SLOT(onOperatorButtonClicked()));gridLayout->addWidget(button, row, col);row++;}// 创建等于按钮QPushButton *equalButton = createButton("=", SLOT(onEqualButtonClicked()));gridLayout->addWidget(equalButton, 4, 3);// 创建清除按钮QPushButton *clearButton = createButton("C", SLOT(onClearButtonClicked()));gridLayout->addWidget(clearButton, 0, 3);// 主布局QVBoxLayout *mainLayout = new QVBoxLayout();mainLayout->addWidget(displayLabel);mainLayout->addLayout(gridLayout);QWidget *centralWidget = new QWidget(this);centralWidget->setLayout(mainLayout);setCentralWidget(centralWidget);
}MainWindow::~MainWindow()
{// 析构函数中释放资源
}QPushButton *MainWindow::createButton(const QString &text, const char *member)
{QPushButton *button = new QPushButton(text, this);button->setFont(QFont("Arial", 20));connect(button, SIGNAL(clicked()), this, member);return button;
}void MainWindow::onNumberButtonClicked()
{QPushButton *button = qobject_cast<QPushButton*>(sender());if (button) {expression += button->text();displayLabel->setText(expression);}
}void MainWindow::onOperatorButtonClicked()
{QPushButton *button = qobject_cast<QPushButton*>(sender());if (button) {expression += button->text();displayLabel->setText(expression);}
}void MainWindow::onEqualButtonClicked()
{QString result = "";// 简单的计算逻辑，这里可以使用更复杂的表达式求值算法if (!expression.isEmpty()) {std::string expr = expression.toStdString();try {double eval = 0;// 简单计算eval = eval_expression(expr); result = QString::number(eval);} catch (const std::exception &e) {result = "Error";}displayLabel->setText(result);expression = result;}
}void MainWindow::onClearButtonClicked()
{expression = "";displayLabel->setText("0");
}

使用CMake构建系统

CMake项目配置

CMakeLists.txt

cmake_minimum_required(VERSION 3.5)project(CalculatorApp)# 查找所需的QT模块
find_package(Qt5 COMPONENTS Widgets REQUIRED)# 添加可执行文件
set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)
set(CMAKE_AUTOUIC ON)set(SOURCESmainwindow.cppmain.cpp
)set(HEADERSmainwindow.h
)add_executable(CalculatorApp${SOURCES}${HEADERS}
)# 链接QT库
target_link_libraries(CalculatorApp Qt5::Widgets)

CMake项目构建

1. 创建项目目录结构：

   CalculatorApp/
   ├── CMakeLists.txt
   ├── main.cpp
   ├── mainwindow.cpp
   ├── mainwindow.h
   

2. 配置CMake：

   cd CalculatorApp
   mkdir build
   cd build
   cmake..
   

3. 构建项目：

   make
   

代码解释：

mainwindow.h：

• 定义了 MainWindow 类，继承自 QMainWindow，包含显示计算结果的 QLabel 以及处理各种按钮点击事件的槽函数。
• Q_OBJECT 宏是为了启用信号与槽机制。

mainwindow.cpp：

• MainWindow 的构造函数中，创建并布局了各种按钮和显示标签。
• createButton 函数用于创建按钮并连接相应的槽函数。
• 不同的槽函数（如 onNumberButtonClicked、onOperatorButtonClicked 等）处理不同按钮的点击事件。

CMakeLists.txt：

• cmake_minimum_required(VERSION 3.5)：指定所需的CMake最低版本。
• find_package(Qt5 COMPONENTS Widgets REQUIRED)：查找QT的Widgets模块。
• set(CMAKE_AUTOMOC ON)、set(CMAKE_AUTORCC ON)、set(CMAKE_AUTOUIC ON)：启用自动生成MOC、RCC和UIC文件。
• add_executable(CalculatorApp ${SOURCES} ${HEADERS})：创建可执行文件。
• target_link_libraries(CalculatorApp Qt5::Widgets)：将可执行文件与QT的Widgets库链接。

使用步骤：

1. 确保已安装QT和CMake。
2. 创建上述项目目录结构并将代码文件和CMake文件放入其中。
3. 按照上述步骤配置和构建项目。
4. 运行生成的可执行文件，即可看到一个简单的计算器应用程序。
   

注意事项：

• 在使用CMake构建QT项目时，确保QT的开发环境变量设置正确，以便CMake能找到QT库。
• 对于更复杂的项目，可能需要添加更多的源文件、头文件和资源文件，相应地需要在 CMakeLists.txt 中进行配置。

使用 CMake-GUI 创建 Visual Studio 项目（基于 QT）

一、准备工作

1. 确保已经安装了以下软件：
   • Visual Studio：不同版本均可，但建议使用较新的稳定版，如 Visual Studio 2019 或 2022，安装时要包含 C++ 开发组件。
   • CMake：下载并安装适合你操作系统的版本，CMake 是跨平台的项目构建工具，它将帮助我们生成 Visual Studio 项目文件。
   • QT：安装 QT 开发环境，根据你的需求选择相应的版本和模块。例如，如果你要进行图形界面开发，要确保安装了 QT Widgets 等基础模块。

二、打开 CMake-GUI

1. 启动 CMake-GUI 应用程序，你会看到它的主界面分为几个主要区域：
   • 上部：用于设置源目录（Where is the source code）和构建目录（Where to build the binaries）。
   • 中部：各种配置选项，会根据项目的特性而有所不同。
   • 下部：操作按钮，如“Configure”“Generate”等。

三、配置源目录和构建目录

1. 在“Where is the source code”文本框中，浏览并选择你的 QT 项目的根目录，这个目录包含了你的项目源代码文件（通常是 .cpp、.h 文件以及 CMakeLists.txt 文件）。
   • 例如，如果你的项目名为“MyQTProject”，且存放在 C:\Projects\MyQTProject 目录下，就将此目录填入源目录文本框。
2. 在“Where to build the binaries”文本框中，选择一个用于存放构建生成文件的目录，这个目录最好与源目录分开，方便管理。
   • 可以在源目录同级创建一个名为“build”的目录，如 C:\Projects\MyQTProject\build，并将其填入构建目录文本框。

四、点击“Configure”按钮

1. 此时 CMake-GUI 会弹出一个对话框，让你选择生成器（Generator）。
   • 因为我们要创建 Visual Studio 项目，所以在下拉列表中选择对应的 Visual Studio 版本，如“Visual Studio 17 2022”（对应 Visual Studio 2022）或“Visual Studio 16 2019”等。
   • 同时，根据你的系统是 32 位还是 64 位，选择相应的平台选项，如“Win32”或“x64”。点击“OK”。
2. CMake 开始配置项目，它会读取源目录下的 CMakeLists.txt 文件，检查依赖关系，尝试找到所需的库和头文件路径，包括 QT 相关的库。这个过程可能会出现一些错误提示，常见的问题及解决方法如下：
   • 找不到 QT 库：
     • 原因：可能是 QT 安装路径未被 CMake 正确识别。
     • 解决方法：在 CMake-GUI 界面中，找到与 QT 相关的变量，如“QT_DIR”“QT_QMAKE_EXECUTABLE”等，手动将其值设置为 QT 的实际安装路径。例如，如果 QT 安装在 C:\Qt\5.15.2\msvc2019_64，则将对应的变量值修改为此路径。
   • 编译选项不兼容：
     • 原因：不同版本的软件组件之间可能存在编译选项冲突。
     • 解决方法：仔细查看错误提示，根据提示调整 CMakeLists.txt 文件中的编译选项，例如，更改某些库的链接方式、包含头文件的路径等。

五、配置项目细节（可选）

1. 在 CMake 完成首次配置后，你可以在 CMake-GUI 的中部区域看到一系列的配置选项。
   • 一些常用的选项包括：项目的名称、版本号、生成的可执行文件或库的类型（静态库、动态库、可执行程序等）。
   • 对于 QT 项目，还可能涉及到 QT 模块的选择，如是否启用 QT Widgets、QT Multimedia 等模块，你可以根据项目需求勾选或取消勾选相应的选项。

六、点击“Generate”按钮

1. 当你对配置选项满意后，点击“Generate”按钮。
   • CMake 会根据你的配置生成 Visual Studio 项目文件，这个过程通常很快。生成成功后，你会在构建目录下看到一系列的文件和子目录，其中最重要的是一个扩展名为 .sln 的解决方案文件，这就是你的 Visual Studio 项目文件。

七、打开 Visual Studio 项目

1. 进入构建目录，找到生成的 .sln 文件，双击打开它，Visual Studio 将会启动并加载你的项目。
2. 在 Visual Studio 中，你可以像往常一样进行项目的编译、调试等操作。需要注意的是，由于是 QT 项目，可能在运行时需要配置一些 QT 相关的环境变量，确保程序能够正确找到 QT 库，避免运行时错误，如“找不到 QT 插件”等问题。