前言

通常我们在编写qt的时候都是在Qt creator中。而如何在VS Code中编写qt就是本文需要解决的问题

环境

Qt配套环境
cmake

注意：本文的代码所在环境为windows，mingw环境

最好把qt一件套的配置设为我们需要的环境，不然同样是mingw编译器，用别的版本可能会很多奇怪的问题

cmake基础

(CMake) 从下载到构建第一个CMake应用_天赐细莲的博客-CSDN博客_cmake下载教程

(CMake) 库的生成和链接_天赐细莲的博客-CSDN博客_cmake 生成的静态库链接不全

预备的项目代码

先在Qt creator中编写一个小demo，保证是一份能跑的正常代码是一切的前提

文件资源路径

E:\QT\cmake\qt_creator\demo>tree /f
卷 新加卷 的文件夹 PATH 列表
卷序列号为 BAEE-AEDC
E:.
│  demo.pro
│  main.cpp
│  res.qrc
│
├─imgs
│      background.jpg
│
└─modules
        mywidget.cpp
        mywidget.h
        mywidget.ui

在这里插入图片描述

demo.pro

QT += core
QT += gui
QT += widgets

SOURCES += \
    main.cpp \
    modules/mywidget.cpp

HEADERS += \
    modules/mywidget.h

FORMS += \
    modules/mywidget.ui

RESOURCES += \
    res.qrc

main.cpp

#include <QApplication>

#include "./modules/mywidget.h"

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

res.qrc

<RCC>
    <qresource prefix="/">
        <file>imgs/background.jpg</file>
    </qresource>
</RCC>

mywidget.cpp

#include <QMessageBox>

#include "mywidget.h"

MyWidget::MyWidget(QWidget *parent) : QWidget(parent) {
    ui.setupUi(this);

    /// 测试资源
    QString style = R"(background : url(://imgs/background.jpg))";
    ui.pushButton->setStyleSheet(style);

    /// 测试元对象
    connect(ui.pushButton, &QPushButton::clicked, this, []() {
        QMessageBox::information(Q_NULLPTR, "元对象机制", "触发信号槽");
    });
}

mywidget.h

#ifndef MYWIDGET_H
#define MYWIDGET_H

#include "ui_mywidget.h"

namespace Ui {
class MyWidget;
}

class MyWidget : public QWidget {
    Q_OBJECT
private:
    Ui::MyWidget ui;

public:
    MyWidget(QWidget *parent = nullptr);
};
#endif  // MYWIDGET_H

mywidget.ui

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MyWidget</class>
 <widget class="QWidget" name="MyWidget">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>600</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MyWidget</string>
  </property>
  <widget class="QPushButton" name="pushButton">
   <property name="geometry">
    <rect>
     <x>240</x>
     <y>230</y>
     <width>271</width>
     <height>101</height>
    </rect>
   </property>
   <property name="text">
    <string>触发信号槽</string>
   </property>
  </widget>
 </widget>
 <resources/>
 <connections/>
</ui>

在这里插入图片描述

运行效果

在这里插入图片描述

CMake

下面转到vscode中用cmake编译项目

文件资源路径

其实就是多了CMakeLists.txt文件

E:\QT\cmake\vscode\demo>tree /f
卷 新加卷 的文件夹 PATH 列表
卷序列号为 BAEE-AEDC
E:.
│  CMakeLists.txt
│  main.cpp
│  res.qrc
│
├─imgs
│      background.jpg
│
└─modules
        mywidget.cpp
        mywidget.h
        mywidget.ui

在这里插入图片描述

CMakeLists.txt

# 标注最低版本
cmake_minimum_required(VERSION 3.24)

# 设置项目名称
project(demo)

# 设置C++标准 C++11
set(CMAKE_CXX_STANDARD 11)

# 自动把ui转化为C++代码
# uic qtcmake.ui > ui_qtcmake.h
set(CMAKE_AUTOUIC ON)

# 自动生成元对象的C++代码
set(CMAKE_AUTOMOC ON)

# 自动生成资源文件
set(CMAKE_AUTORCC ON)

# 在项目中加入需要编译的文件
add_executable(${PROJECT_NAME}
    main.cpp
    res.qrc
    modules/mywidget.cpp
    modules/mywidget.h
    modules/mywidget.ui
)

# find_package 查找内部库
# 导入qt的库
# cmake通过qt5提供的查找方案，去查找对应的库
# 这里以查找 Widgets库 为例
find_package(Qt5 COMPONENTS Widgets REQUIRED)

# 根据自己电脑的环境，写死的指定Qt5_DIR这个变量
# 目的是寻找 Qt5Config.cmake 这个文件
set(Qt5_DIR B:/Qt/Qt5.14.2/5.14.2/mingw73_32/lib/cmake/Qt5)

# 指定qt依赖的动态库
# Qt5 自带连接头文件
target_link_libraries(${PROJECT_NAME}
    Qt5::Widgets
)

# 编译指令
# 没 set Qt5_DIR
# cmake -G "MinGW Makefiles" -S . -B build -DQt5_DIR=自己电脑的Qt5路径
# set 了 Qt5_DIR
# cmake -G "MinGW Makefiles" -S . -B build

生成与构建

# 下面两条指令在 CMakeLists.txt 所在路径操作

# 生成项目
# 用MinGW Makefiles 来执行cmake
# -S 源文件 .表示当前位置
# -B 构建目录 build 表示生成到build文件夹
cmake -G "MinGW Makefiles" -S . -B build

# 构建
# 到build目录进行构建
cmake --build ./build

E:\QT\cmake\vscode\demo>cmake -G "MinGW Makefiles" -S . -B build
-- The C compiler identification is GNU 7.3.0
-- The CXX compiler identification is GNU 7.3.0
-- Detecting C compiler ABI info
-- Detecting C compiler ABI info - done
-- Check for working C compiler: B:/Qt/Qt5.14.2/Tools/mingw730_32/bin/gcc.exe - skipped
-- Detecting C compile features
-- Detecting C compile features - done
-- Detecting CXX compiler ABI info
-- Detecting CXX compiler ABI info - done
-- Check for working CXX compiler: B:/Qt/Qt5.14.2/Tools/mingw730_32/bin/c++.exe - skipped
-- Detecting CXX compile features
-- Detecting CXX compile features - done
-- Configuring done
-- Generating done
-- Build files have been written to: E:/QT/cmake/vscode/demo/build

E:\QT\cmake\vscode\demo>cmake --build build
[ 14%] Automatic MOC and UIC for target demo
[ 14%] Built target demo_autogen
[ 28%] Automatic RCC for res.qrc
[ 42%] Building CXX object CMakeFiles/demo.dir/demo_autogen/mocs_compilation.cpp.obj
[ 57%] Building CXX object CMakeFiles/demo.dir/main.cpp.obj
[ 71%] Building CXX object CMakeFiles/demo.dir/modules/mywidget.cpp.obj
[ 85%] Building CXX object CMakeFiles/demo.dir/demo_autogen/EWIEGA46WW/qrc_res.cpp.obj
[100%] Linking CXX executable demo.exe
[100%] Built target demo

生成

注意：如果没有set(Qt5_DIR XXX)

则需要在编译指令中指定Qt5_DIR

cmake -G "MinGW Makefiles" -S . -B build -DQt5_DIR=自己电脑的Qt5路径

目的是获取Qt5的Qt5Config.cmake

执行cmake -G "MinGW Makefiles" -S . -B build后，没有提示错误

且生成build中有

cmake_install.cmake
CMakeCache.txt
Makefile

表示生成功

在这里插入图片描述

构建

执行cmake --build ./build后，没有提示错误

若一切正常

则此时在build中会生成目标文件和目标文件_autogen的文件夹

并有三个文件夹，分别对应

set(CMAKE_AUTOUIC ON) ui
set(CMAKE_AUTOMOC ON) 元对象
set(CMAKE_AUTORCC ON) 资源