发帖 回复
返回列表
  • 2768阅读
  • 5回复

QFluentWidgets: 基于 C++ Qt 的 Fluent Design 组件库 [复制链接]

 上一主题 下一主题
离线shokokawaii
新手上路
 
只看楼主 倒序阅读 楼主  发表于: 2023-10-20
关键词： qt5C++Windows跨平台开发

简介


QFluentWidgets 是一个基于 Qt 的 Fluent Designer 组件库，内置超过 150 个开箱即用的 Fluent Designer 组件，支持亮暗主题无缝切换和自定义主题色。搭配所见即所得的 Fluent Designer 软件，只需拖拖拽拽，不用编写一行 QSS，就能快速搭建现代化软件界面。
官网地址：https://qfluentwidgets.com/ https://
仓库地址：https://github.com/zhiyiYo/PyQt-Fluent-Widgets https://-Fluent-Widgets
演示视频：https://www.bilibili.com/video/BV12c411L73q/ https://www.94y1a7Yv
演示程序：https://github.com/zhiyiYo/PyQt-Fluent-Widgets/releases 下载解压 QFluentWidgets_v1.x.x.zip


编译示例

以 Qt5 为例（Qt6 也支持），将 libQFluentWidgets.dll、libFramlessHelperCore.dll和 libFramelessHelperWidgets.dll 放在 lib 文件夹中，QFluentWidgets 头文件放在 include 文件夹中，项目结构如下图所示





Qt5 示例项目结构接着在终端输入指令进行编译，其中 -DCMAKE_PREFIX_PATH 用于设置本机 Qt5 SDK 的路径：
复制代码
  1. cmake -B ./build -DCMAKE_BUILD_TYPE=Release -DCMAKE_PREFIX_PATH="D:/Qt/5.15.2/mingw81_64" -G "MinGW Makefiles" .
  3. cd build
  4. cmake --build . --config Release --target all --parallel


编译完成后可以在 build/bin 目录下看到所有生成的 exe 示例文件：



生成文件



搭配 Fluent Designer

项目结构如下图所示：







其中 LoginWindow.py.ui 是使用 Fluent Designer 拖拽 PyQt-Fluent-Widgets 组件生成的 ui 文件，预览效果如下：





将该 ui 文件拖拽到 Fluent Studio 软件的设计师界面中，点击转换按钮，即可得到 C++ 组件库使用的 ui 文件。





项目使用的 CMakeLists.txt 代码如下：
复制代码
  1. set(DEMO_NAME LoginDemo)
  2. cmake_minimum_required(VERSION 3.5)
  3. project(${DEMO_NAME} VERSION 1.0)
  5. set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_BINARY_DIR}/bin)
  6. set(CMAKE_CXX_STANDARD 17)
  7. set(CMAKE_INCLUDE_CURRENT_DIR ON)
  8. set(CMAKE_AUTOUIC ON)
  9. set(CMAKE_AUTOMOC ON)
  10. set(CMAKE_AUTORCC ON)
  12. find_package(Qt5 COMPONENTS Widgets Multimedia REQUIRED)
  14. # -----------------------------------------------------------------------------
  15. file(GLOB inc_files ${CMAKE_SOURCE_DIR}/*.h)
  16. file(GLOB src_files ${CMAKE_SOURCE_DIR}/*.cpp)
  18. qt5_wrap_ui(UI_FILES ${CMAKE_SOURCE_DIR}/ui/LoginWindow.ui)
  20. # add resource
  21. SET(RCC_FILES ${CMAKE_SOURCE_DIR}/login.qrc)
  22. qt5_add_resources(RCC_SOURCES ${RCC_FILES})
  24. # 设置 dll 文件夹
  25. link_directories(${CMAKE_SOURCE_DIR}/lib)
  27. add_executable(${DEMO_NAME} ${src_files} ${inc_files} ${UI_FILES} ${RCC_SOURCES})
  29. target_link_libraries(${PROJECT_NAME} PRIVATE Qt::Widgets QFluentWidgets FramelessHelperCore FramelessHelperWidgets)
  31. # 设置头文件搜索路径
  32. target_include_directories(${PROJECT_NAME}
  33.     PRIVATE
  34.         ${CMAKE_SOURCE_DIR}/include
  35.         ${CMAKE_SOURCE_DIR}/include/framelesshelper/include
  36.         ${CMAKE_SOURCE_DIR}/include/framelesshelper/src/core
  37.         ${CMAKE_SOURCE_DIR}/include/framelesshelper/src/widgets
  38.         ${CMAKE_SOURCE_DIR}/include/framelesshelper/qmake/inc/core
  39. )
  41. # 拷贝 dll 到 bin 目录
  42. configure_file(${CMAKE_SOURCE_DIR}/lib/libFramelessHelperCore.dll ${CMAKE_SOURCE_DIR}/build/bin/libFramelessHelperCore.dll COPYONLY)
  43. configure_file(${CMAKE_SOURCE_DIR}/lib/libFramelessHelperWidgets.dll ${CMAKE_SOURCE_DIR}/build/bin/libFramelessHelperWidgets.dll COPYONLY)
  44. configure_file(${CMAKE_SOURCE_DIR}/lib/libQFluentWidgets.dll ${CMAKE_SOURCE_DIR}/build/bin/libQFluentWidgets.dll COPYONLY)



编译指令不变，双击 build/bin/LoginWindow.exe 就能看到效果：







写在最后

C++ 组件库需要购买许可证才能拿到头文件和链接库使用，如果想提前体验运行效果，可以安装 Python 组件库并运行各个 demo.py，或者直接下载编译好的 PyQt-Fluent-Widgets-Gallery，Gallery 中包含了一大部分组件，最终效果和 C++ 是一样的。
共5条评分 ，好评度+2 ，贡献值+1 ，金钱+10 ，威望+1
aiyaya 好评度 +1 支持！ 2023-11-07
20091001753 好评度 +1 - 2023-10-21
20091001753 贡献值 +1 - 2023-10-21
20091001753 威望 +1 - 2023-10-21
20091001753 金钱 +10 - 2023-10-21
QFluentWidgets 是基于 Qt 的 Fluent Designer 组件库，内置超过 160 个开箱即用的 Fluent Designer 组件，支持亮暗主题无缝切换和自定义主题色。搭配所见即所得的 Fluent Designer 软件，只需拖拖拽拽，不用编写一行 QSS，就能快速搭建现代化界面。有意者可联系邮箱或者 QQ~
官网：https://qfluentwidgets.com/zh/ （需要科学上网）
邮箱：shokokawaii@foxmail.com
QQ：1953658489
回复
举报
分享到 淘江湖 新浪 QQ微博 QQ空间 开心 人人 豆瓣 网易微博 百度 鲜果 白社会 飞信
离线toby520
论坛版主
只看该作者 1楼 发表于: 2023-10-30
            
QtQML多多指教开发社区 http://qtclub.heilqt.com
将QtCoding进行到底
关注移动互联网，关注金融
开发跨平台客户端，服务于金融行业
专业定制界面
群号:312125701   373955953(qml控件定做)
回复
举报
离线aiyaya
新手上路
只看该作者 2楼 发表于: 2023-11-07
运行效果可以啊，作为小白终于不用瞎调样式表了，想买一套试试看
回复
举报
离线boylebao
侠客
只看该作者 3楼 发表于: 2023-11-23
    
为Qt打造具有强大生产力的软件。
回复
举报
离线samhuilong
侠客
只看该作者 4楼 发表于: 2023-11-24
能问下大佬，qfluentwidgets的官方网站是用什么写的？
回复
举报
离线shokokawaii
新手上路
只看该作者 5楼 发表于: 2023-11-30
回 samhuilong 的帖子
samhuilong:能问下大佬，qfluentwidgets的官方网站是用什么写的？ (2023-11-24 12:55) 

vuepress
QFluentWidgets 是基于 Qt 的 Fluent Designer 组件库，内置超过 160 个开箱即用的 Fluent Designer 组件，支持亮暗主题无缝切换和自定义主题色。搭配所见即所得的 Fluent Designer 软件，只需拖拖拽拽，不用编写一行 QSS，就能快速搭建现代化界面。有意者可联系邮箱或者 QQ~
官网：https://qfluentwidgets.com/zh/ （需要科学上网）
邮箱：shokokawaii@foxmail.com
QQ：1953658489
回复
举报
发帖 回复
返回列表
快速回复
限100 字节
 
上一个 下一个