对话框

cmake、QT 5、ubuntu、vscode、图传

vscode

项目结构

• hello.h
• hello.cpp
• main.cpp

#ifndef HELLO_H
#define HELLO_H

#include <QWidget>
#include <QPushButton>

class HelloWindow : public QWidget
{
    Q_OBJECT // 确保包含此宏

        public : explicit HelloWindow(QWidget *parent = nullptr);

private slots:
    void toggleText(); // 切换按钮文本

private:
    QPushButton *button; // 按钮控件
    bool isHello;        // 当前状态标志
};

#endif // HELLO_H

#include "hello.h"

HelloWindow::HelloWindow(QWidget *parent)
    : QWidget(parent), isHello(true) // 初始化 isHello 为 true
{
    // 创建按钮并设置初始文本
    button = new QPushButton("Hello", this);

    // 设置按钮大小和位置
    button->setGeometry(50, 50, 100, 50);

    // 连接按钮点击信号与槽函数
    connect(button, &QPushButton::clicked, this, &HelloWindow::toggleText);
}

void HelloWindow::toggleText()
{
    if (isHello)
    {
        button->setText("Word"); // 切换为 "Word"
    }
    else
    {
        button->setText("Hello"); // 切换为 "Hello"
    }
    isHello = !isHello; // 切换状态
}

#include <QApplication>
#include "hello.h"

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    HelloWindow window;
    window.setWindowTitle("Hello Word App");
    window.resize(200, 150);
    window.show();

    return app.exec();
}

CMakeLists.txt

• 请参考https://doc.qt.io/qt-5/cmake-get-started.html
• 注意生成可执行文件那里和普通项目的区别
  • 一般项目中，头文件不直接参与编译（预处理阶段通过 #include 处理了头文件内容），最终编译的单元是源文件（.cpp 或 .c）。
    • 在 Makefile 中，需要通过 -I 指定头文件路径，以便预处理器能够正确解析 #include 的路径。
    • 在 CMake 中，通过 target_include_directories() 等命令管理头文件路径，这些路径最终会转化为类似 -I 的选项，添加到生成的构建文件中。
  • 在 Qt 项目中，Q_OBJECT 宏需要 MOC 工具解析头文件并生成元对象代码。MOC 是构建过程中的独立阶段，与预处理或编译不同，因此头文件路径必须显式指定（将头文件加入构建目标）。

cmake_minimum_required(VERSION 3.14)
project(MyQtApp)

set(CMAKE_CXX_STANDARD 17)

# 设置 Qt 安装路径，可以通过 qmake -version 命令查看
set(CMAKE_PREFIX_PATH "/usr/lib/x86_64-linux-gnu/qt5")

# 启用 Qt 的自动 MOC 处理
set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)
set(CMAKE_AUTOUIC ON)

# 找到 Qt 模块
find_package(Qt5 COMPONENTS Core Widgets REQUIRED)

# 搜索源文件和头文件,UI文件
file(GLOB SRC_FILES "${CMAKE_SOURCE_DIR}/src/*.cpp")
file(GLOB HEADER_FILES "${CMAKE_SOURCE_DIR}/header/*.h")

# 添加可执行文件,注意QT项目这里要把头文件也加进去
add_executable(MyQtApp ${SRC_FILES} ${HEADER_FILES})

# 添加头文件路径
target_include_directories(MyQtApp PRIVATE "${CMAKE_SOURCE_DIR}/header")

# 链接 Qt 库,qt5::core省略了(因为QT::Widgets已经包含了QT::Core)
target_link_libraries(MyQtApp Qt5::Widgets)

qtcreator+vscode

项目重构

• 下方是一个使用qtcreator+qmake创建的qt项目,接下来用cmake改造
• 使用qtcreator+cmake创建的项目或者cmake改造项目，都需要把ui放到cpp所在目录(子目录也不行),参与编译。
• 使用vscode方便重构(如果有需求，下图是重构结构后的结果【保留了.pro等文件，后续也可以改造回使用qmake】)

• mainwindow.h
• mainwindow.cpp
• main.cpp
• mainwindow.ui

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private slots:
    void on_pushButton_clicked();

private:
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
}

MainWindow::~MainWindow()
{
    delete ui;
}


void MainWindow::on_pushButton_clicked()
{

}

#include "mainwindow.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    return a.exec();
}

就拖拽了个按键，也是最终的运行结果

CMakeLists.txt

多了ui参与编译

cmake_minimum_required(VERSION 3.14)
project(MyQtApp)

set(CMAKE_CXX_STANDARD 17)

set(CMAKE_PREFIX_PATH "/usr/lib/x86_64-linux-gnu/qt5")

set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)
set(CMAKE_AUTOUIC ON)

find_package(Qt5 COMPONENTS Core Widgets REQUIRED)

# 搜索源文件和头文件,UI文件
file(GLOB SRC_FILES "${CMAKE_SOURCE_DIR}/src/*.cpp")
file(GLOB HEADER_FILES "${CMAKE_SOURCE_DIR}/header/*.h")
file(GLOB UI_FILES "${CMAKE_SOURCE_DIR}/src/*.ui")

# 添加可执行文件,注意QT项目这里要把头文件和ui添加进去
add_executable(MyQtApp ${SRC_FILES} ${HEADER_FILES} ${UI_FILES})

target_include_directories(MyQtApp PRIVATE "${CMAKE_SOURCE_DIR}/header")

target_link_libraries(MyQtApp Qt5::Widgets)

我的方案

• 综合使用qtcreator+vscode+cmake
  • 使用ui文件(xml语法)，将界面和逻辑分离
  • qtcraeter+cmake
  • 可以使用vscode方便的连接修改、编译、运行、安装、打包，目录结构重构和重构后的测试。
  • 开启图传后，ssh或vscode 终端中输入qtcreator即可在windows下使用qtcreator

更多

参考ubuntu配置QT环境和测试