ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

ElaWidgetTools编译实战:从源码到示例运行的完整指南

ElaWidgetTools编译实战:从源码到示例运行的完整指南 最近在折腾 Qt 界面库顺手把 ElaWidgetTools 从拉源码到跑起示例的整个过程捋了一遍。这个库在 GitHub 上口碑不错走的是 Windows 11 那种圆角半透明动态配色的路子做桌面端工具类软件很合适。这篇就把编译和运行的完整流程写出来包括我踩过的坑希望能让后来者少走点弯路。1. ElaWidgetTools 是什么为什么值得关注ElaWidgetTools 是一个基于 Qt 的现代 UI 组件库作者是 Liniyous。它参考了大量成熟 UI 框架的设计思路主打圆角卡片、柔和阴影、全局换肤和流畅动画。跟 QSS 那套写样式表的方式不同ElaWidgetTools 把控件封装好了开发者直接用现成的ElaWidget、ElaWindow、ElaMessageBar、ElaToggleButton这些类就能搭出接近原生 Win11 风格的界面。这个库的核心价值在于它解决了 Qt 原生控件长相“过时”的问题。很多做 Windows 桌面工具的人界面用 QSS 调来调去还是差口气ElaWidgetTools 直接帮你把底子打好——从窗口圆角特效到侧边导航栏再到消息提示条开箱即用。而且它同时支持 Windows 和 Linux动态换肤功能对做商城类、设置类界面的项目特别香。如果你正准备做一个面相客户的小工具、数据看板或者后台管理软件又不想把时间花在调 QSS 上这个库绝对值得研究。本篇文章我会以 Qt 5.15.2 MSVC 2019 64 位这套组合为例把编译链路上的所有细节讲透。2. 环境准备编译器、Qt 版本与构建工具的选择先说结论ElaWidgetTools 官方要求 Qt 5.15 或更高版本编译器支持 MSVC、MinGW 和 GCC。我推荐 Windows 上用 Qt 5.15.2 MSVC 2019 64 位原因有三一是稳定网上资料多二是 ElaWidgetTools 很多特性依赖 Windows 平台的 DWM 效果MSVC 配合更顺三是 5.15.2 是 5.x 系列最后对普通用户友好的版本。2.1 下载和安装 Qt到 Qt 官网下载 5.15.2 安装包时注意要选对组件。如果你是通过在线安装器在“选择组件”这一步务必勾选Qt 5.15.2 → MSVC 2019 64-bitQt 5.15.2 → Qt Debug Symbols可选方便排查Tools → Qt Creator如果你是离线安装包也是同样逻辑。安装路径建议用全英文、不含空格的目录比如D:\Qt\5.15.2\msvc2019_64。千万别往C:\Program Files这种带空格的路径塞后面配置 CMake 和编译的时候会哭的。2.2 安装 Visual Studio 2019 及相关工具链光有 Qt 还不够还需要 MSVC 编译器本体。安装 Visual Studio 2019 Community 时工作负载选择“使用 C 的桌面开发”右侧勾选MSVC v142 生成工具Windows 10 SDK选最新版本即可C CMake tools for Windows可选用命令行时方便装完之后建议验证一遍打开“开始菜单 → Visual Studio 2019 → Developer Command Prompt”在里面输入cl能输出版本号就说明编译器可用。提示如果 Win10 系统里同时装了 VS2022也能用它配 Qt 5.15.2但在 Qt Creator 里选套件时编译器要选对应版本的 v143 工具集否则编译时错乱就麻烦了。稳妥做法是先卸掉旧版或者新建套件。2.3 构建工具链CMake 与 NinjaElaWidgetTools 的源码结构采用 CMake 构建同时也保留了.pro文件方便 Qt Creator 直接加载。我个人的习惯是命令行编译CMake Ninja速度快、输出清爽IDE 编译Qt Creator 加载ElaWidgetTools.pro可视化方便装 CMake 直接到官网下载 Windows 安装包装完记得把C:\Program Files\CMake\bin加入系统 PATH。Ninja 可以在 Qt 安装目录下的 Tools 里找到也可以单独下载。命令行下确认版本cmake --version ninja --version如果 Ninja 提示找不到动态库把它所在目录加入 PATH 再试。3. 源码获取与 ElaWidgetTools 目录结构解析3.1 从 GitHub 拉取源码源码地址是https://github.com/Liniyous/ElaWidgetTools。建议用git clone而不是下载 ZIP因为后续拉更新方便git clone https://github.com/Liniyous/ElaWidgetTools.git cd ElaWidgetTools网络条件好的话一口气就下来了。这个仓库体积不大正常也就几十 MB。下完之后看一眼目录结构ElaWidgetTools.pro— qmake 工程文件Qt Creator 用的CMakeLists.txt— CMake 构建脚本src/— 库核心代码头文件和源码Example/— 示例工程内含 main.cpp 和一堆演示页logo/— 图标资源注意Example/里面也有自己的.pro文件这意味着编译示例前得先把 src 库编译出来或者通过工程依赖关系一起构建。如果用.proQt Creator 会自动处理这两个子工程。3.2 源码里的核心文件速览刚拿到源码别急着编译我建议先扫一遍src/下的文件有四个最关键的ElaWidget.h / ElaWidget.cpp— 圆角无边框窗口基类ElaWindow.h / ElaWindow.cpp— 带导航栏的主窗口ElaTheme.h— 主题管理亮色/暗色切换ElaApplication.h— 全局应用初始化入口另外在Example/目录里ElaWindowExample.h/.cpp是示例窗口的逻辑所在后续想改东西跑实验改的就是这些文件。注意ElaWidgetTools 对编译器的 C 标准要求较高部分代码用到了 C17 的特性。配置 CMake 时需要确保开启了 C17 或者更高的标准。4. 编译实操CMake 与 Qt Creator 双路径解析编译 ElaWidgetTools 有两种常见方式一种是纯 Qt Creator qmake适合新手另一种是 CMake Ninja 命令行适合集成到自动化构建流程。我两个都跑了一遍分别说。4.1 路径 AQt Creator 加载 .pro适合新人第一步打开 Qt Creator选择你安装好的 Qt 5.15.2 MSVC 2019 64-bit 套件。如果列表里是灰的点“工具 → 选项 → Kits”把编译器路径重新指定一下。第二步打开ElaWidgetTools.pro。它会自动加载两个子工程ElaWidgetTools库ElaWidgetToolsExample示例第三步编译顺序不用操心qmake 会自动生成依赖关系。直接点左下角的绿色三角按钮或按CtrlR编译并运行。第一次编译时间大约 1-3 分钟具体看机器配置。编译成功后Qt Creator 会启动示例窗口。界面左侧是导航栏点击切换不同控件演示页。如果一切正常说明编译链路通了。4.2 路径 B命令行 CMake Ninja适合自动化在仓库根目录下建一个build文件夹执行cmake -S . -B build -G Ninja -DCMAKE_BUILD_TYPERelease -DCMAKE_PREFIX_PATHD:/Qt/5.15.2/msvc2019_64 cmake --build build --config Release这条命令的-DCMAKE_PREFIX_PATH很关键它告诉 CMake 去哪里找 Qt 的库和 CMake 配置。如果你的 Qt 装在其他路径就改成你自己的。如果提示找不到 Qt6 或 Qt5多数情况就是这里配置不对。CMake 构建完成后会在build/bin目录下生成ElaWidgetTools.dll核心库ElaWidgetToolsExample.exe示例程序直接双击运行 exe系统会提示找不到 Qt 的 DLL。这不是编译失败了而是运行时没找到 Qt 库。两种解决办法方案一临时把示例 exe 复制到 Qt 的bin目录下运行。方案二正规用 windeployqt 部署windeployqt build/bin/ElaWidgetToolsExample.exewindeployqt 会自动把需要的 Qt DLL 和插件拷到 exe 所在目录。这也是发布 Qt 程序的常规做法。4.3 用命令行跑 qmake 的补充如果你还是想用 qmake nmake在 Visual Studio 开发者命令行里执行D:/Qt/5.15.2/msvc2019_64/bin/qmake.exe ElaWidgetTools.pro nmake release不过 qmake 现在基本是在 Qt Creator 内部使用命令行下正确性不如 CMake所以这条路径不推荐初学者上。5. 编译错误排查从路径依赖到编译器工具链我在编译时遇到过几次错误其中最典型的就是项目标题里提到的那条:-1: error: dependent ..\..\..\..\..\..\qt\5.15.2\msvc2019_64\include\qtwidgets does not exist这条信息看似五花八门其实就一个核心问题工程里的 Qt include 路径是相对路径且解析出来的目录不存在。一般在以下场景中出现.pro文件里的INCLUDEPATH写的是相对路径Qt Creator 的 kit构建套件选择错误导致QTDIR变量指向不存在的位置源码目录层级过深导致相对路径.计算远离实际 Qt 安装路径5.1 复现“dependent does not exist”的完整排查链路我当时用 Qt Creator 加载项目后直接点运行结果控制台输出那条:-1: error。第一反应不是去改工程文件而是先确认 Qt Creator 当前使用的套件。打开“工具 → 选项 → Kits”看到选中的套件是 “Desktop Qt 5.15.2 MSVC2019 64bit”但编译器下拉框显示“No compiler”。这就是根源——Qt 安装后没给 Qt Creator 关联到 VS2019 编译器。解决方法第一步在 Kits 界面点击“编译器”标签页如果列表空白点“添加 → MSVC → 检测”让它自动扫描 VS2019 的工具链。扫描完成后需要在“创建套件”里重新手动建一个套件把 Qt 版本设为 5.15.2C 编译器选刚才检测到的 MSVC 2019 x64。第二步回到项目工程在左侧“项目”面板的“Build”页把当前套件切到新建的套件上清除所有构建缓存。第三步重新编译。编译后如果还报路径问题就在.pro里手动指定 Qt 路径QT core gui widgets INCLUDEPATH D:/Qt/5.15.2/msvc2019_64/include加完之后重新 qmake 并构建。5.2 编译器版本不对导致的心累另一个我踩过的坑Qt 版本是 5.15.2 MSVC2019但系统默认的 VS 是 2022编译器变成了 v143。此时容易出现error: C2039: “setVersion”: 不是“QSslSocket”的成员看起来像是代码兼容问题实际是 Qt 库用 v142 编译的ABI 与 v143 不兼容。解决办法就是强制 Qt Creator 使用正确的编译器。在 Kits 里给套件指定的编译器版本务必与 Qt 安装包里的 msvc2019_64 后缀一致。5.3 缺少 Windows SDK 导致的“找不到 windows.h”这种错误更直白fatal error C1083: 无法打开包括文件: windows.h: No such file or directory。原因是 VS 安装时没选 Windows 10 SDK。回到 VS Installer勾选“Windows 10 SDK”后重启Qt Creator 再检测编译器即可。5.4 链接阶段常见的 unresolved external symbol编译过了、链接挂了这种情况在 ElaWidgetTools 里也有。典型提示长这样error LNK2019: 无法解析的外部符号 public: struct QMetaObject const * __cdecl ElaWindow::metaObject九成九是void ElaWindow::paintEvent这些带Q_OBJECT宏的类没有重新跑 moc。解决办法在 Qt Creator 里执行“构建 → 清理”再重新构建。一定要确保moc_*.cpp文件重新生成这是 Qt 项目最经典的问题不懂的人会以为是代码写错了。提示遇到任何 moc 相关报错优先执行“全量重新构建”而不是只编译单个文件。5.5 CMake 构建时的路径陷阱如果用 CMake 构建最常见的报错是Could not find a package configuration file provided by Qt5 with any of the following names: Qt5Config.cmake这张图只有一种解法-DCMAKE_PREFIX_PATH指向 Qt 安装目录比如D:/Qt/5.15.2/msvc2019_64。注意不要写成include目录CMake 需要的是 Qt 根目录。还有人会遇到 CMake 找到了 Qt6 而不是 Qt5导致一堆Qt6::Widgets not found的报错。解决办法是在 CMakeLists 里明确指定set(CMAKE_PREFIX_PATH D:/Qt/5.15.2/msvc2019_64) find_package(Qt5 5.15.2 REQUIRED COMPONENTS Widgets Gui Core)如果机器上同时存在 Qt5、Qt6需要给 CMake 设置Qt5_DIR变量指向 Qt5 的 cmake 配置目录。6. 编译完成后如何运行示例6.1 直接启动示例程序无论是 Qt Creator 里按CtrlR还是手动执行ElaWidgetToolsExample.exe程序启动后你会看到一个现代感很强的窗口默认是亮色主题左侧有导航栏右侧是内容卡片。首次运行时建议重点观察三个地方窗口边缘是否有圆角效果导航栏切换时是否有滑入动画右上角主题切换按钮是否让整体配色实时变化这三个点任何一个没生效说明对应特性在你的系统上没跑起来通常和 DWM 特效未开启、显卡驱动太旧或系统缩放比例设置有关。6.2 命令行参数与运行时依赖正常情况下 exe 直接双击就能跑。如果你是从命令行启动的可能会看到类似这样的输出Qt: Untested Windows version 11 detected!这只是一个提示不影响运行。如果运行时提示缺少ElaWidgetTools.dll记住先用 windeployqt 部署windeployqt --release --no-opengl-sw build/bin/ElaWidgetToolsExample.exe部署完之后exe 同目录下会出现platforms、styles等文件夹这些是 Qt 运行的必要插件。发布给别的机器前这一步必须有。6.3 示例窗口内部的功能演示进入示例后左侧导航栏主要提供几个演示页。可以对每个页面操作一下BasicControls 页面去看按钮、开关、进度条在不同主题下的表现Card 页面拖拽窗口看卡片阴影是否跟随Toast 页面点击按钮触发消息提示条观察动画和消失逻辑需要注意ElaWidgetTools 的窗口效果依赖系统支持如果在虚拟机里跑某些圆角特效、半透明效果可能显示不出来。遇到这种情况别以为是编译出错先切到真机看效果。7. 将 ElaWidgetTools 集成到您自己的工程跑通示例只是一个起点。真正把这个库用到自己的项目里需要搞明白依赖关系和工程配置。7.1 在 .pro 工程里集成自己项目的.pro文件里加上QT core gui widgets CONFIG c17 INCLUDEPATH D:/ElaWidgetTools/src LIBS D:/ElaWidgetTools/build/bin/ElaWidgetTools.lib注意 Windows 下链接的是.lib动态库的导入库运行的时候才需要同名的.dll。同时需要设置资源文件ElaWidgetTools 里很多图标是内置资源需要把它的 qrc 文件引入工程RESOURCES D:/ElaWidgetTools/src/ElaWidgetTools.qrc7.2 在 CMake 工程里集成在 CMakeLists.txt 里cmake_minimum_required(VERSION 3.16) project(MyApp) set(CMAKE_CXX_STANDARD 17) set(CMAKE_AUTOMOC ON) find_package(Qt5 REQUIRED COMPONENTS Core Gui Widgets) add_subdirectory(D:/ElaWidgetTools ElaWidgetTools_build) add_executable(MyApp main.cpp) target_link_libraries(MyApp PRIVATE ElaWidgetTools)这里用add_subdirectory的方式会把 ElaWidgetTools 的源码直接编译进自己的工程好处是免去预编译库的依赖管理。缺点是首次编译时间会变长。7.3 写出第一个 ElaWidget 窗口集成好了之后代码里这样初始化#include QApplication #include ElaApplication.h #include ElaWidget.h int main(int argc, char *argv[]) { QApplication a(argc, argv); ElaApplication::getInstance()-init(); // 初始化主题和特效 ElaWidget w; w.setTitle(Hello Ela); w.resize(800, 600); w.show(); return a.exec(); }关键就在ElaApplication::init()一定要放在窗口创建之前。没有这一步后续控件可能不显示圆角动画或者自动换肤功能直接失效。7.4 动态换肤功能的实现调用一行代码切换主题ElaTheme::getInstance()-setThemeMode(ElaThemeType::Dark);在按钮点击事件里调用就能立刻让整个应用变为暗色主题。但有个前提所有窗口必须继承自ElaWidget或ElaWindow如果你用的是原生QMainWindow主题切换不会对它产生任何效果。8. 实际使用中的表现与性能优化建议8.1 内存与 CPU 占用示例程序在双屏 2K 环境下启动后内存约 80-120MBCPU 空闲时基本为零占用说明动画框架用了定时器合并策略没有浪费刷新率。运行过程切换页面时CPU 峰值短暂冲到 5% 左右整体可接受。如果你的界面元素特别多建议在动画频繁的控件上开启WA_OpaquePaintEvent属性能减少合成开销。另外尽量少用setStyleSheet混搭一旦同时使用 QSS 和 ElaWidgetTools 自绘控件部分特效会被 Qt 样式系统接管导致动画失效。8.2 字体渲染问题默认字体在某些中文系统下会出现中文显示偏小或模糊。建议在初始化时统一设置QFont font(Microsoft YaHei UI, 10); a.setFont(font);不同 DPI 缩放下字体大小需要做适配。ElaWidgetTools 的布局大多用百分比和 sizePolicy字体变化后基本不会乱这点设计得比较良心。8.3 高 DPI 支持在 main.cpp 顶部一定要加QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);如果在 Qt 5.15 上不加高分屏下缩放会糊成一片。Qt 6 已经默认启用但 Qt 5.15 还必须手动加。9. 发布部署时需要注意的静态编译与动态库选择9.1 动态库部署默认 MSVC 构建出来的 exe发布时必须带上你自己构建的ElaWidgetTools.dllQt 的Qt5Core.dll、Qt5Gui.dll、Qt5Widgets.dllplatforms/qwindows.dllstyles/qmodernwindowsstyle.dll如果需要直接在命令行跑windeployqt是最稳的方案拷完后dumpbin /dependencies可以检查还缺哪些 DLL。9.2 静态编译的可行性ElaWidgetTools 可以静态编译但前提是你的 Qt 本身必须是静态库版本这要求从源码重新编译 Qt——非常耗时个人项目一般没必要。多数情况下动态发布即可exe 加 DLL 一起打包给用户不会太丑。如果你非要做静态编译Qt 源码配置时加上-static -release然后整个工程用静态 Qt 重新编译一次。ElaWidgetTools 本身没有特殊的外部依赖静态编译兼容性没有大问题但耗时和磁盘占用要提前有数。10. 编译运行全流程的个人经验总结最后把这次实操的经验浓缩成几句ElaWidgetTools 的编译体验在 Qt 第三方 UI 库里属于比较省心的只要环境对上了CMake 和 qmake 都是一次过的水平。真正让新手卡壳的绝大多数不是库本身的问题而是 Qt Creator 的套件没配对、编译器版本和 Qt 不匹配、或者构建缓存没清理干净。如果你是从零开始我的建议是先按 Qt Creator 流程走一遍跑通示例后再切换到 CMake 做自动化。第一次编译成功后那个现代感十足的窗口出来的一瞬间你会觉得前期配环境的时间花得值。在把库接进自己的项目之前最好先通读一遍src/里两三个核心控件的源码重点看ElaWidget.cpp怎么处理圆角重绘、ElaWindow.cpp怎么管理导航切换动画。这对后面定制自己的界面风格帮助非常大。毕竟这个库的好处是站在前人封装好的结构上而不是被封装框架束缚住手脚。
返回列表