QFluentWidgets: 基于 C++ Qt 的 Fluent Design 组件库

news2024/12/29 11:20:12

简介

QFluentWidgets 是一个基于 Qt 的 Fluent Designer 组件库，内置超过 150 个开箱即用的 Fluent Designer 组件，支持亮暗主题无缝切换和自定义主题色。搭配所见即所得的 Fluent Designer 软件，只需拖拖拽拽，不用编写一行 QSS，就能快速搭建现代化软件界面。

官网地址：https://qfluentwidgets.com/

仓库地址：https://github.com/zhiyiYo/PyQt-Fluent-Widgets

演示视频：https://www.bilibili.com/video/BV1o94y1a7Yv

image

编译示例

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

image

接着在终端输入指令进行编译，其中 -DCMAKE_PREFIX_PATH 用于设置本机 Qt5 SDK 的路径：

cmake -B ./build -DCMAKE_BUILD_TYPE=Release -DCMAKE_PREFIX_PATH="D:/Qt/5.15.2/mingw81_64" -G "MinGW Makefiles" .

cd build
cmake --build . --config Release --target all --parallel

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

image

搭配 Fluent Designer

项目结构如下图所示：

image

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

image

ui 代码如下，从 <customwidgets> 可以看到导入的组件来自 PyQt-Fluent-Widgets ：

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Form</class>
 <widget class="QWidget" name="Form">
	省略代码
 </widget>
    
 <customwidgets>
  <customwidget>
   <class>LineEdit</class>
   <extends>QLineEdit</extends>
   <header>qfluentwidgets</header>
  </customwidget>
  <customwidget>
   <class>CheckBox</class>
   <extends>QCheckBox</extends>
   <header>qfluentwidgets</header>
  </customwidget>
  <customwidget>
   <class>PrimaryPushButton</class>
   <extends>QPushButton</extends>
   <header>qfluentwidgets</header>
  </customwidget>
  <customwidget>
   <class>HyperlinkButton</class>
   <extends>QPushButton</extends>
   <header>qfluentwidgets</header>
  </customwidget>
  <customwidget>
   <class>BodyLabel</class>
   <extends>QLabel</extends>
   <header>qfluentwidgets</header>
  </customwidget>
 </customwidgets>
 <resources>
  <include location="login.qrc"/>
 </resources>
 <connections/>
</ui>

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

image

项目使用的 CMakeLists.txt 代码如下：

set(DEMO_NAME LoginDemo)
cmake_minimum_required(VERSION 3.5)
project(${DEMO_NAME} VERSION 1.0)

set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_BINARY_DIR}/bin)
set(CMAKE_CXX_STANDARD 17)
set(CMAKE_INCLUDE_CURRENT_DIR ON)
set(CMAKE_AUTOUIC ON)
set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)

find_package(Qt5 COMPONENTS Widgets Multimedia REQUIRED)

# -----------------------------------------------------------------------------
file(GLOB inc_files ${CMAKE_SOURCE_DIR}/*.h)
file(GLOB src_files ${CMAKE_SOURCE_DIR}/*.cpp)

qt5_wrap_ui(UI_FILES ${CMAKE_SOURCE_DIR}/ui/LoginWindow.ui)

# add resource
SET(RCC_FILES ${CMAKE_SOURCE_DIR}/login.qrc)
qt5_add_resources(RCC_SOURCES ${RCC_FILES})

# 设置 dll 文件夹
link_directories(${CMAKE_SOURCE_DIR}/lib)

add_executable(${DEMO_NAME} ${src_files} ${inc_files} ${UI_FILES} ${RCC_SOURCES})

target_link_libraries(${PROJECT_NAME} PRIVATE Qt::Widgets QFluentWidgets FramelessHelperCore FramelessHelperWidgets)

# 设置头文件搜索路径
target_include_directories(${PROJECT_NAME}
    PRIVATE
        ${CMAKE_SOURCE_DIR}/include
        ${CMAKE_SOURCE_DIR}/include/framelesshelper/include
        ${CMAKE_SOURCE_DIR}/include/framelesshelper/src/core
        ${CMAKE_SOURCE_DIR}/include/framelesshelper/src/widgets
        ${CMAKE_SOURCE_DIR}/include/framelesshelper/qmake/inc/core
)

# 拷贝 dll 到 bin 目录
configure_file(${CMAKE_SOURCE_DIR}/lib/libFramelessHelperCore.dll ${CMAKE_SOURCE_DIR}/build/bin/libFramelessHelperCore.dll COPYONLY)
configure_file(${CMAKE_SOURCE_DIR}/lib/libFramelessHelperWidgets.dll ${CMAKE_SOURCE_DIR}/build/bin/libFramelessHelperWidgets.dll COPYONLY)
configure_file(${CMAKE_SOURCE_DIR}/lib/libQFluentWidgets.dll ${CMAKE_SOURCE_DIR}/build/bin/libQFluentWidgets.dll COPYONLY)

main.cpp 代码如下，可以看到这里通过 #include "ui_LoginWindow.h" 和 ui->setupUi(this) 来使用 Fluent 组件初始化界面：

#include "ui_LoginWindow.h"
#include <FramelessHelper/Core/FramelessManager>
#include <FramelessHelper/Widgets/FramelessWidgetsHelper>
#include <FramelessHelper/Widgets/StandardSystemButton>
#include <framelessconfig_p.h>
#include <QApplication>

#include <QFluentWidgets/Common/FluentApp.h>
#include <QFluentWidgets/Common/Translator.h>
#include <QFluentWidgets/Window/FluentWindow.h>

using namespace qfluentwidgets;
FRAMELESSHELPER_USE_NAMESPACE
using namespace Global;

class Demo : public QWidget
{
    Q_OBJECT
public:
    Demo(QWidget *parent = nullptr) : QWidget(parent), ui(new Ui::Form), titleBar(new SplitTitleBar(this))
    {
        // 启用无边框
        FramelessWidgetsHelper::get(this)->extendsContentIntoTitleBar();

        // 设置主题色
        setThemeColor("#28afe9");

        // 初始化 UI
        ui->setupUi(this);
        setWindowIcon(QIcon(":/qfluentwidgets/images/logo.png"));
        setWindowTitle("QFluentWidgets");
        resize(1000, 650);

        setStyleSheet("Demo{background: transparent}");
        titleBar->titleLabel()->setStyleSheet(
            "QLabel{ background: transparent; font: 13px 'Segoe UI'; padding: 0 4px; color: white}");

        // 隐藏系统标题栏的最大化和最小化按钮
        setWindowFlags(windowFlags() & ~Qt::WindowMinMaxButtonsHint & ~Qt::WindowCloseButtonHint);

        // 设置标题栏
        FramelessWidgetsHelper *helper = FramelessWidgetsHelper::get(this);
        helper->setTitleBarWidget(titleBar);
        helper->setSystemButton(titleBar->minButton(), SystemButtonType::Minimize);
        helper->setSystemButton(titleBar->maxButton(), SystemButtonType::Maximize);
        helper->setSystemButton(titleBar->closeButton(), SystemButtonType::Close);
        titleBar->raise();
    }

protected:
    void resizeEvent(QResizeEvent *e)
    {
        QWidget::resizeEvent(e);
        titleBar->resize(width(), titleBar->height());
    }

private:
    Ui::Form *ui;
    SplitTitleBar *titleBar;
};

int main(int argc, char *argv[])
{
    // enable dpi scale
#if (QT_VERSION > QT_VERSION_CHECK(5, 14, 0))
    QApplication::setHighDpiScaleFactorRoundingPolicy(Qt::HighDpiScaleFactorRoundingPolicy::PassThrough);
#endif
    QApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QApplication::setAttribute(Qt::AA_UseHighDpiPixmaps);

    QApplication app(argc, argv);

    // 启用云母效果
    FramelessConfig::instance()->set(Option::EnableBlurBehindWindow);
    FramelessConfig::instance()->set(Option::DisableLazyInitializationForMicaMaterial);

    // 国际化
    ftranslator.load(QLocale());

    Demo w;
    w.show();

    return app.exec();
}

#include "main.moc"

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

image

写在最后

C++ 组件库需要许可证才能拿到头文件和动态链接库使用，如果想体验运行效果，可以安装 Python 组件库并运行各个 demo.py，或者下载编译好的 PyQt-Fluent-Widgets-Gallery，最终效果和 C++ 是一样的。

经常有小伙伴留言为什么不将 C++ 组件库一起开源，其实原因很简单：白嫖的话有 Python 组件库就够了，一个人的精力是有限的，无法为爱发电维持这么多个组件库分支的开发，以上~~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1060035.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

腾讯云服务器简介和使用流程

腾讯云服务器简介和使用流程

腾讯云服务器在云服务器CVM或轻量应用服务器页面自定义购买价格比较贵&#xff0c;但是自定义购买云服务器CPU内存带宽配置选择范围广&#xff0c;活动上购买只能选择固定的活动机&#xff0c;选择范围窄&#xff0c;但是云服务器价格便宜比较省钱。腾讯云服务器网来详细说下腾…
阅读更多...
driver.js 扩展下次“不再提示”功能

driver.js 扩展下次“不再提示”功能

文档地址&#xff1a;https://github.com/kamranahmedse/driver.js 官方demo&#xff1a;https://kamranahmed.info/driver.js/ /*** Title: 页面引导 ……* Author: JackieZheng* Date: 2023-08-16 10:43:31* LastEditTime: 2023-08-16 10:55:08* LastEditors:* Description:*…
阅读更多...
找不到msvcp110.dll是什么意思？总结msvcp110.dll丢失修复方法分享

找不到msvcp110.dll是什么意思？总结msvcp110.dll丢失修复方法分享

随着电脑技术的不断发展&#xff0c;我们也会遇到各种各样的问题。最近&#xff0c;我就遇到了一个问题&#xff1a;电脑丢失msvcp110.dll的困扰。这个问题让我深感无奈&#xff0c;但同时也让我学到了很多关于电脑维修和系统修复的知识。在这篇文章中&#xff0c;我将分享我的…
阅读更多...
前端JavaScript入门到精通，javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs（五）

前端JavaScript入门到精通，javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs（五）

思维导图 Bom操作 一、Window对象 1.1 BOM(浏览器对象模型) <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"vi…
阅读更多...
macOS Sonoma 正式版系统已发布，macos14值得更新吗

macOS Sonoma 正式版系统已发布，macos14值得更新吗

北京时间9月27日macOS Sonoma 正式版系统发布&#xff0c;为 Mac 带来一系列丰富新功能&#xff1a;优化小组件、升级视频会议、沉浸式游戏体验等&#xff0c;最新macos14值得更新吗&#xff1f;这里根据我一个月的试用beta版本体验来分享一下。 我使用的是M1芯片的MacBook air…
阅读更多...
Java架构师功能设计和架构设计

Java架构师功能设计和架构设计

目录 1 架构设计理念1.1 架构定义1.2 文档编写1.3 维护和改进1.4 验证实现1.5 总结 2 深入理解和认识架构设计2.1 架构设计关注哪些东西2.2 架构设计是一系列的活动不断演化和完善的过程2.3 架构设计跨越软工的全流程2.3.1 软工的全流程的原因 3 功能设计概念4 理解和认识功能设…
阅读更多...
【Vue3】定义全局变量和全局函数

【Vue3】定义全局变量和全局函数

// main.ts import { createApp } from vue import App from ./App.vue const app createApp(App)// 解决 ts 报错 type Filter {format<T>(str: T): string } declare module vue {export interface ComponentCustomProperties {$filters: Filter,$myArgs: string} }a…
阅读更多...
openwrt使用教程

openwrt使用教程

openwrt 插件安装 首先 我们需要明确自己什么版本的cpu 进入docker 然后 cat /proc/cpuinfo# 查看CPU信息 uname -m# 查看CPU架构 cat /proc/meminfo# 查看内存使用情况 df -h# 查看磁盘的使用率 uname -a# 查看内核信息 opkg print-architecture# 可接受的架构arm a5 比较奇…
阅读更多...
Maven超细致史上最全Maven下载安装配置教学（2023更新...全版本）建议收藏...赠送IDEA配置Maven教程

Maven超细致史上最全Maven下载安装配置教学（2023更新...全版本）建议收藏...赠送IDEA配置Maven教程

Maven安装与配置 Maven 的主要目标是让开发人员能够在最短的时间内了解开发工作的完整状态。为了实现这一目标&#xff0c;Maven 处理了几个关注领域&#xff1a; 简化构建过程 提供统一的构建系统 提供优质的项目信息 鼓励更好的发展实践 基于项目对象模型 (POM&#xff0…
阅读更多...
找不到msvcr110.dll丢失的解决方法-常见修复方法分享

找不到msvcr110.dll丢失的解决方法-常见修复方法分享

在计算机使用过程中&#xff0c;我们可能会遇到 msvcr110.dll 丢失的问题。msvcr110.dll 是 Microsoft Visual C Redistributable 的一部分&#xff0c;是一个运行库文件&#xff0c;用于支持一些软件和游戏的运行。如果它丢失或损坏了&#xff0c;那么你就需要进行修复了。本文…
阅读更多...
【C语言】循环结构程序设计(第二部分 -- 习题讲解)

【C语言】循环结构程序设计(第二部分 -- 习题讲解)

前言:昨天我们学习了C语言中循环结构程序设计&#xff0c;并分析了循环结构的特点和实现方法&#xff0c;有了初步编写循环程序的能力&#xff0c;那么今天我们通过一些例子来进一步掌握循环程序的编写和应用。 &#x1f496; 博主CSDN主页:卫卫卫的个人主页 &#x1f49e; &am…
阅读更多...
conda安装使用jupyterlab注意事项

conda安装使用jupyterlab注意事项

文章目录 一、conda安装1.1 conda安装1.2 常见命令1.3 常见问题 二、jupyterlab2.1 jupyterlab安装和卸载2.2 常见错误2.2.1 版本冲突&#xff0c;jupyterlab无法启动2.2.2 插件版本冲突 2.3 常用插件2.3.1 debugger2.3.2 jupyterlab_code_formatter 2.4 jupyter技巧 一、conda…
阅读更多...
聊聊分布式架构——Http到Https

聊聊分布式架构——Http到Https

目录 HTTP通信协议 请求报文 响应报文 持久连接 状态管理 HTTPS通信协议 安全的HTTPS HTTP到HTTPS的演变 对称加密 非对称加密 混合加密机制 证书机构 SSL到底是什么 HTTPS是身披SSL外壳的HTTP HTTP通信协议 一次HTTP请求的通信流程&#xff1a;客户端浏览器通过…
阅读更多...
【C++】STL简介（了解）

【C++】STL简介（了解）

一、什么是STL STL (standard template libaray- 标准模板库 ) &#xff1a; 是 C 标准库的重要组成部分 &#xff0c;不仅是一个可复用的组件库&#xff0c;而且 是一个包罗数据结构与算法的软件框架 。 二、STL的版本 原始版本 Alexander Stepanov 、 Meng Lee 在惠普实验…
阅读更多...
swift加载h5页面空白

swift加载h5页面空白

swift加载h5页面空白 problem 背景 xcode swift 项目&#xff0c;WebView方式加载h5页面本地h5地址是&#xff1a;http://localhost:5173/ 浏览器打开正常 Swift 加载h5&#xff1a; 百度官网 加载正常本地h5页面 加载空白&#xff0c;没有报错 override func viewDidLoad…
阅读更多...
RabbitMQ-工作队列

RabbitMQ-工作队列

接上文 RabbitMQ-死信队列 1 工作队列模式 xx模式只是一种设计思路&#xff0c;并不是指具体的某种实现&#xff0c;可理解为实现XX模式需要怎么去写业务代码。 之前的是简单的一个消费者一个生产者模式&#xff0c;下边是一个生产者多个消费者的情况&#xff1a; 这里先定义两…
阅读更多...
想要精通算法和SQL的成长之路 - 最长连续序列

想要精通算法和SQL的成长之路 - 最长连续序列

想要精通算法和SQL的成长之路 - 最长连续序列 前言一. 最长连续序列1.1 并查集数据结构创建1.2 find 查找1.3 union 合并操作1.4 最终代码 前言 想要精通算法和SQL的成长之路 - 系列导航 并查集的运用 一. 最长连续序列 原题链接 这个题目&#xff0c;如何使用并查集是一个小难…
阅读更多...
带你10分钟学会红黑树

带你10分钟学会红黑树

前言&#xff1a; 我们都知道二叉搜索树&#xff0c;是一种不错的用于搜索的数据结构&#xff0c;如果二叉搜索树越接近完全二叉树&#xff0c;那么它的效率就会也高&#xff0c;但是它也存在的致命的缺陷&#xff0c;在最坏的情况下&#xff0c;二叉搜索树会退化成为单链表&am…
阅读更多...
Spring三大核心组件

Spring三大核心组件

Spring架构图 Spring三大核心组件分别为&#xff1a;Core、Beans和Context 1. Core&#xff08;核心&#xff09;&#xff1a; 思想&#xff1a;Core组件的核心思想是控制反转&#xff08;IoC&#xff09;和依赖注入&#xff08;DI&#xff09;。它将对象的创建、组装和管理的…
阅读更多...
【图像处理】使用各向异性滤波器和分割图像处理从MRI图像检测脑肿瘤（Matlab代码实现）

【图像处理】使用各向异性滤波器和分割图像处理从MRI图像检测脑肿瘤（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023