QT UI组件库 ElaWidgetTool 基于VSCode编译 导入个人项目

QT UI组件库 ElaWidgetTool 在VSCode中使用

ElaWidgetTool是使用QWidget编写的Fluent风格的组件库，包括主题切换，导航系统，路由跳转等

来自B站大佬：_Ela

作者也发布了视频教学了多种方式，但是好像没有使用VSCode编译的，这里补充使用VSCode进行编译 并导入个人项目

这是作者提供的一个Demo

组件库提供了很多炫酷的效果，更多可以去UP主页浏览

下面让我们从零开始在VSCode中搭建其所需环境

在VSCode中使用QT

个人环境（确保提前安装好C++与Qt环境）：

• C++ msvc 17 2022
• Qt 6.5.3 msvc2019

这里列出了所需使用的VSCode拓展

初次安装拓展要先配置Qt安装目录

首先创建一个空文件夹作为项目目录，使用VSCode打开

接着使用快捷键Ctrl+Shift+P进入设置搜索栏（也可以点击搜索栏输入>），搜索 QtConfigure: NewProject

然后进行下面一系列配置

• 输入项目名称
• 选择Qt套件
  • 这里选择msvc2019版本
• 选择CMake构建
• 配置是否需要ui文件
  

配置完成后，生成了如下一系列文件

点击CMakeList文件会弹出选择C++编辑器选项，这里选择要与Qt配置时选择的版本对应（MSVC或MInGW）

如果没弹出或未选择点到其他界面，可以Ctrl+Shift+P搜索`CMake: Select a Kit

如果列表中没有自己安装的版本，可以选择扫描，再重新选择

这里我使用的是Qt 6.5.3版本，VSCode的Qt拓展默认搭建的QT5的CMakeList，以下部分需要修改为QT6

修改完成后，点击build构建

这里对cpp内容作一定修改，查看修改效果

构建完成后点击build旁边的Debug按钮或者按键F5运行

成功运行

编译ElaWidgetTool源码

打开作者GitHub开源地址 https://github.com/Liniyous/ElaWidgetTools

同样创建一个空文件夹存放源码，从GitHub获取源码（建议使用Git克隆仓库，直接下载源码zip也可以）

VSCode中Ctrl+Shift+P输入Git:Clone，输入对应的git链接

https://github.com/Liniyous/ElaWidgetTools.git

选择一个存放目录

完成后选择打开

打开后出现同样的编辑器选择，选择对应版本，如果没出现 参考前文

完成后打开最外层的CMakeList文件，修改QT路径

打开CMake拓展，找到Build，ALL_Build后面有个铅笔按钮，点击

修改为install

点击下方的Build，等待其逐个编译完成

编译完成后，项目目录中会多出一个install文件夹

打开发现有两个，其中Example是作者提供的示例程序，点击示例程序exe可以直接运行

至此编译完成

Qt项目导入ElaWidgetTool

首先创建一个Qt项目，保证能够正常运行，这里直接利用前文创建的QtDemo项目

在CMakeLists文件中添加如下部分

完整CMakeLists文件:

cmake_minimum_required(VERSION 3.5) # CMake install : https://cmake.org/download/
project(QtDemo LANGUAGES CXX)
set(CMAKE_INCLUDE_CURRENT_DIR ON)
set(CMAKE_PREFIX_PATH "d:/ProgramPackege/QT/6.5.3/msvc2019_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)

# Specify MSVC UTF-8 encoding   
add_compile_options("$<$<C_COMPILER_ID:MSVC>:/utf-8>")
add_compile_options("$<$<CXX_COMPILER_ID:MSVC>:/utf-8>")

add_executable(${PROJECT_NAME}
    WIN32 # If you need a terminal for debug, please comment this statement 
    ${srcs} 
) 

# ElaWidgetTools 所在目录
set(ELA_WIDGET_TOOLS_DIR "D:/Code/Qt/VSCode/ElaWidget/ElaWidgetTools/Install/ElaWidgetTools")

target_include_directories(${PROJECT_NAME} PRIVATE
    ${ELA_WIDGET_TOOLS_DIR}/include
)
# 告诉链接器去哪里找 ElaWidgetTools 库文件
target_link_directories(${PROJECT_NAME} PRIVATE
    ${ELA_WIDGET_TOOLS_DIR}/lib
)

target_link_libraries(${PROJECT_NAME} PRIVATE 
    Qt6::Widgets
    ElaWidgetToolsd
) # Qt6 Shared Library

# 复制 DLL 文件到可执行文件目录
add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
    COMMAND ${CMAKE_COMMAND} -E copy
        "${ELA_WIDGET_TOOLS_DIR}/bin/ElaWidgetToolsd.dll"
        "$<TARGET_FILE_DIR:${PROJECT_NAME}>"
    COMMENT "Copying ElaWidgetToolsd.dll to output directory"
)

修改main.cpp内容

#include "QtDemo.h"
#include "ElaApplication.h"
#include "ElaWindow.h"
#include <QApplication>
#pragma comment(lib, "user32.lib")

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    ElaApplication::getInstance()->init();
    ElaWindow w;
    w.show();
    return a.exec();
}

运行查看效果

运行成功