QtCreator通过CMake多文件编译.cpp、.qss、.h、.ui文件，达到MVC三层架构的效果

博主在构建C++项目的时候，一般都喜欢将头文件和源文件分开为不同的文件夹，比如include目录下只存放.h文件和.ui文件，src目录下只存放.cpp和.qss文件，res目录下只存放图片、音频等文件，这时候使用CMake对项目进行分文件管理就特别方便和清晰了。

很多人写qt项目的时候，就是一大堆文件全部杂糅在一个文件目录下面，非常杂乱，不易于管理。

我们对项目进行分文件管理，整个项目结构就会清晰许多，比如下图所示。

那么问题来了，这么复杂的分包管理，Cmake要怎么写呢，根目录下的cmake文件如下：

看起来目录复杂，实际上Cmake却无比简单。

cpp 复制代码

cmake_minimum_required(VERSION 3.5) # CMake install : https://cmake.org/download/
project(qttest3 LANGUAGES CXX)
set(CMAKE_INCLUDE_CURRENT_DIR ON)
set(CMAKE_PREFIX_PATH "d:/c.app/QT6/6.6.2/mingw_64") # Qt Kit Dir
set(CMAKE_AUTOUIC ON)
set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)
set(CMAKE_CXX_STANDARD 11)
set(CMAKE_CXX_STANDARD_REQUIRED ON)
find_package(Qt6 COMPONENTS Widgets REQUIRED) # Qt COMPONENTS
aux_source_directory(./src srcs)
aux_source_directory(./src/view views)
file(GLOB includes "include/view/*.h")
add_executable(${PROJECT_NAME}
    ${includes}
    ${srcs}
    ${views}
    res.qrc
)
target_link_libraries(${PROJECT_NAME} PRIVATE Qt6::Widgets) # Qt5 Shared Library

include目录下的view目录下的qttest3.h

cpp 复制代码

//这个ui_qttest3.h文件的位置就是qttest3.ui文件的位置
#include "ui_qttest3.h"
#include <QMainWindow>

class qttest3 : public QMainWindow {
    Q_OBJECT
    
public:
    qttest3(QWidget* parent = nullptr);
    ~qttest3();

private:
    Ui_qttest3* ui;
};

qttest3.ui

XML 复制代码

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>qttest3</class>
 <widget class="QMainWindow" name="qttest3">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>600</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>qttest3</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <widget class="QListView" name="listView">
    <property name="geometry">
     <rect>
      <x>220</x>
      <y>120</y>
      <width>256</width>
      <height>192</height>
     </rect>
    </property>
   </widget>
   <widget class="QPushButton" name="pushButton">
    <property name="geometry">
     <rect>
      <x>250</x>
      <y>360</y>
      <width>75</width>
      <height>24</height>
     </rect>
    </property>
    <property name="text">
     <string>hello</string>
    </property>
   </widget>
   <widget class="QCheckBox" name="checkBox">
    <property name="geometry">
     <rect>
      <x>370</x>
      <y>360</y>
      <width>79</width>
      <height>20</height>
     </rect>
    </property>
    <property name="text">
     <string>CheckBox</string>
    </property>
   </widget>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>800</width>
     <height>17</height>
    </rect>
   </property>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <resources/>
 <connections/>
</ui>

src目录下的main.cpp

cpp 复制代码

#include "../include/view/qttest3.h"
#include <QApplication>
#include <QFile>
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QFile styleFile(":/src/view/qt.qss"); // 从资源文件中加载QSS文件
    styleFile.open(QFile::ReadOnly);
    QString styleSheet = QLatin1String(styleFile.readAll());
    qApp->setStyleSheet(styleSheet);
    qttest3 w;
    w.show();
    return a.exec();
}

对应src目录下的view目录下的qt.qss

css 复制代码

/* 设置窗口背景颜色 */
QWidget {
    background-color: hsl(116, 92%, 48%);
}

/* 设置按钮样式 */
QPushButton {
    background-color: lightblue;
    border: 2px solid darkblue;
    border-radius: 5px;
    padding: 5px 10px;
    color: darkblue;
}

/* 鼠标悬停时按钮样式 */
QPushButton:hover {
    background-color: #00d0ff;
    color: white;
}

/* 鼠标按下时按钮样式 */
QPushButton:pressed {
    background-color: #8b0076;
}

将qt.qss加入到资源文件中，这里的路径才是main.cpp里面引用qss文件的路径。

对应src目录下的qttest3.cpp

cpp 复制代码

#include "../../include/view/qttest3.h"

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

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

运行程序，这个项目目录是不是清晰很多了。