FluentUI系列 - 1 - 介绍第一个窗口

介绍一个QML的UI库,国人编写,作者也耍知乎。这个UI库确实好用,但是教程基本等于无,个人在使用中顺便记录一下学习内容。这玩意儿也有Pyside6的版本,有需要的可以查看PySide6-FluentUI-QML。

FluentUI库地址​github.com/zhuzichu520/FluentUI

预览程序,可以在上面查看大部分组件

安装

浏览项目的Github页,注意有如下前置需求。

有缺少的可以在Qt目录下的MaintenanceTool.exe里进行安装。

  • Qt Core, Qt Quick, Qt QML, Qt ShaderTool, Qt 5 Compatibility Module. (必备)
  • Qt LinguistTool (optional,for translations)
    • Tips: 在 Qt安装目录\版本\编译环境类型\bin 里
    • 例如:F:\Qt\6.5.2\mingw_64\bin
  • Qt Svg (optional, however essential for Qt 5)

确认前置条件满足后,开始安装,具体步骤参考:

FluentUI:如何在新项目中使用?_哔哩哔哩_bilibili​www.bilibili.com/video/BV1ek4y1N7r8/​编辑

这里要注意git clone有些坑,作者的库里有引用别的库的,clone过程使用如下

cd source
git clone --recursive https://github.com/zhuzichu520/FluentUI.git
cd FluentUI

完成后的FluentUI源码目录

注意检查完成后的framelesshelper与zxing-cpp可能是空的。我写这篇文章的时候,作者的引用的framelesshelper仍然处于NotFound状态, 可能需要直接去clone再放进此目录下。

删除framelesshelper与zxing-cpp文件夹,直接clone:

git clone --recursive https://github.com/zhuzichu520/framelesshelper.git
git clone https://github.com/zhuzichu520/zxing-cpp.git

完成安装后,Qt目录下会有QML模块生成的。路径类似F:\Qt\6.5.2\mingw_64\qml\FluentUI

路径中的版本和编译环境类型来源于图中

第一个程序

  1. 新建一个Qt Quick Application,为了方便可以命名为Tutorial1-FirstWindow

2. 选择前面用来编译FluentUI的Qt版本

3. 如果有选择项,构建方式选cmake而不是qmake或者qbs

新建项目完成后

4. 把之前的FluentUI文件夹丢到项目根目录下

5. 修改CMakeLists.txt, 改完之后类似上面的构建视频的cmakelist

cmake_minimum_required(VERSION 3.16)# Tutorial1-FirstWindow是项目名, 修改为自己的项目名
project(Tutorial1-FirstWindow VERSION 0.1 LANGUAGES CXX)set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)
set(CMAKE_AUTOUIC ON)
set(CMAKE_CXX_STANDARD_REQUIRED ON)set(FLUENTUI_BUILD_EXAMPLES OFF)
set(FLUENTUI_BUILD_FRAMELESSHEPLER OFF)
find_package(FluentUI)
find_package(Qt6 6.4 REQUIRED COMPONENTS Quick)qt_standard_project_setup()qt_add_executable(appTutorial1-FirstWindowmain.cpp
)qt_add_qml_module(appTutorial1-FirstWindowURI Tutorial1-FirstWindowVERSION 1.0QML_FILES Main.qml
)# Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.
# If you are developing for iOS or macOS you should consider setting an
# explicit, fixed bundle identifier manually though.
set_target_properties(appTutorial1-FirstWindow PROPERTIES
#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.appTutorial1-FirstWindowMACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}MACOSX_BUNDLE TRUEWIN32_EXECUTABLE TRUE
)target_link_libraries(appTutorial1-FirstWindowPRIVATE Qt6::Quick
)include(GNUInstallDirs)
install(TARGETS appTutorial1-FirstWindowBUNDLE DESTINATION .LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
)

6. 修改Main.qml代码:

import QtQuick
import QtQuick.Window
// 注意这里,如果报错的话可能是前面构建FluentUI失败。检查这种路径F:\Qt\6.5.2\mingw_64\qml\FluentUI
import FluentUIWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")FluFilledButton {width: 100height: 50anchors.centerIn: parenttext: "HelloWorld"}}

FluFilledButton

使用FluApp与FluWindow

  1. QtCreator右键项目选择添加新文件->Qt Resource File->命名resource
  2. 在项目根目录下新建文件夹qml
  3. qml文件夹内新建文件AppMainWindow.qml
  4. 修改AppMainWindow.qml
import QtQuick 2.15
import FluentUIFluWindow {id: mainWindow// 避免双屏情景下的宽度溢出minimumWidth: Screen.width * 0.8minimumHeight: Screen.desktopAvailableHeight * 0.8visible: truetitle: "Helloworld"//appBar: undefined}
  1. 右键resource.qrc->添加现有文件->AppMainWindow.qml

创建完成后的项目

5. 右键resource.qrc下的AppMainWindow-> Copy URL "qrc:/qml/AppMainWindow.qml"

6. 修改Main.qml

import QtQuick
import QtQuick.Window
import FluentUIWindow {id: appflags: Qt.SplashScreen// 一定要是falsevisible: falseComponent.onCompleted: {// 初始化FluApp,实质是记录了app这个根组件实例用以获取QQmlEngine// 然后从engine中以initialRoute文本找到用户定义的组件.qml(在这里是AppMainWindow.qml)// 实例化AppMainWindow,在窗口实例表中对照是否已有相同窗口存在,若存在则会判断launchMode// 所以AppMainWindow要继承自FluWindow, 否则必须自行添加Property: _pageRegister 、 argument、 _route、 launchModeFluApp.init(app)// 相关枚举大部分都在Def.h里FluTheme.darkMode = FluThemeType.Light// 开启动画FluTheme.enableAnimation = true// 开启文本本地渲染FluTheme.nativeText = true// 切换主题色// FluTheme.primaryColor = FluColors.Orange// 路由表FluApp.routes = {"/": "qrc:/qml/AppMainWindow.qml"}// 初始化路径FluApp.initialRoute = "/"FluApp.run()}
}

Ctrl+R运行

FluWindow

图中的FluWindow拥有一个默认的FluAppBar,这个玩意儿是使用Loader动态载入的Component。我遇到过一个bug就是因为window的appbar还没有载入完成,我的canvas组件就依据appBar进行paint导致页面错误。所以可以自定义一个appBar。

这个appBar其实是有与FramelessHelper联动的,我的工作机上FramelessHelper时好时坏,就不无人子弟了。

刚刚AppMainWindow.qml里,取消这一行的注释:

appBar: undefined

后面再加上新的AppBar,整个文件内容:

import QtQuick 2.15
import FluentUIFluWindow {id: mainWindow// 避免双屏情景下的宽度溢出minimumWidth: Screen.width * 0.8minimumHeight: Screen.desktopAvailableHeight * 0.8visible: truetitle: "Tutorial1-FirstWindow"appBar: undefined// 窗口标题栏FluAppBar {id: title_bartitle: mainWindow.title// 可以在resource.qrc中添加ico,把url复制过来,程序左上角就有图标了// icon:"qrc:/example/res/image/favicon.ico"anchors {top: parent.topleft: parent.leftright: parent.right}showDark: truedarkText: "Dark Mode"}
}

这里点了右上角的dark mode会切换黑/白模式

关闭窗口提示

在AppMainWindow.qml中添加代码

    // 退出软件确认提示框FluContentDialog {id: dialog_closetitle: "退出"message: "确定要退出程序吗?"negativeText: "最小化"buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.NeutralButton| FluContentDialogType.PositiveButtononNegativeClicked: {mainWindow.hide()}positiveText: "退出"neutralText: "取消"onPositiveClicked: {FluApp.exit()}}

onPositiveClicked这里,如果是1.6.0版本之前的FluentUI,需要写成

            mainWindow.deleteWindow()FluApp.closeApp()

现在Ctrl+R运行程序,点击右上角关闭窗口,发现并没有什么不一样

我们查看FluWindow的代码里有:

    Connections{target: windowfunction onClosing(event){closeListener(event)}}property var closeListener: function(event){if(closeDestory){destoryOnClose()}else{visible = falseevent.accepted = false}}

我们查看QML的Window 文档会发现

closing(CloseEvent close)

This signal is emitted when the user tries to close the window.
This signal includes a close parameter. The close.accepted property is true by default so that the window is allowed to close; but you can implement an onClosing handler and set close.accepted = false if you need to do something else before the window can be closed.

所以FluWindow的onClosing已经被监听了,会调用closeListener, 我们直接用closeListener就行。

    closeListener:function(event){// 打开关闭确认 弹窗dialog_close.open()// 取消关闭先event.accepted = false}

完整代码

import QtQuick 2.15
import FluentUIFluWindow {id: mainWindow// 避免双屏情景下的宽度溢出minimumWidth: Screen.width * 0.8minimumHeight: Screen.desktopAvailableHeight * 0.8visible: truetitle: "Tutorial1-FirstWindow"appBar: undefinedcloseListener: function (event) {dialog_close.open()// 取消窗口关闭event.accepted = false}// 窗口标题栏FluAppBar {id: title_bartitle: mainWindow.title// icon:"qrc:/example/res/image/favicon.ico"anchors {top: parent.topleft: parent.leftright: parent.right}showDark: truedarkText: "Dark Mode"}// 退出软件确认提示框FluContentDialog {id: dialog_closetitle: "退出"message: "确定要退出程序吗?"negativeText: "最小化"buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.NeutralButton| FluContentDialogType.PositiveButtononNegativeClicked: {mainWindow.hide()}positiveText: "退出"neutralText: "取消"onPositiveClicked: {FluApp.exit()}}
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【MVCC】深入浅出彻底理解MVCC

MVCC概述 MVCC(Multi-Version Concurrency Control)即多版本并发控制。主要是为了提高数据库的并发性能而提供的,采用了不加锁的方式处理读-写并发冲突,确保了任何时刻的读操作都是非阻塞的。只需要很小的开销,就可以…

ArcGIS Pro 3D建模简明教程

在本文中,我讲述了我最近一直在探索的在 ArcGIS Pro 中设计 3D 模型的过程。 我的目标是尽可能避免与其他软件交互(即使是专门用于 3D 建模的软件),并利用 Pro 可以提供的可能性。 这个短暂的旅程分为三个不同的阶段:…

信息系统项目管理师0048:审计内容(3信息系统治理—3.1 IT审计—3.2.4审计内容)

点击查看专栏目录 文章目录 3.2.4审计内容 3.2.4审计内容 IT审计业务和服务通常分为IT内部控制审计和IT专项审计。IT内部控制审计主要包括组织层面IT控制审计、IT一般控制审计及应用控制审计;IT专项审计主要是指根据当前面临的特殊风险或者需求开展的IT审计&#xf…

3、JVM对象的创建于内存分配原理

对象的创建 对象创建的主要流程: 1.类加载检查 虚拟机遇到一条new指令时,首先将去检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的类是否已被加载、解析和初始化过。如果没有,那必须先执行相应的类加…

Go——Goroutine介绍

一. 并发介绍 进程和线程 进程是程序在操作系统中一次执行过程,系统进程资源分配和调度的一个独立单位。线程是进程执行的实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。一个进程可以创建和撤销多个线程&#xff0c…

【若依前后端分离】首页-多个按钮控制同一个图表

示例图&#xff1a;上面四个框可以点击 重要代码片段 &#xff1a; index_v1中 <panel-group handleSetLineChartData"handleSetLineChartData" :data"totalData"/> : 这是一个自定义的 Vue 组件。名称是 panel-group。handleSetLineChartData"…

WEB3.0:互联网的下一阶段

随着互联网的发展&#xff0c;WEB3.0时代正在逐步到来。本文将深入探讨WEB3.0的定义、特点、技术应用以及未来展望&#xff0c;为读者带来全新的思考。 一、什么是WEB3.0&#xff1f; WEB3.0可以被理解为互联网发展的下一阶段&#xff0c;是当前WEB2.0的升级版。相较于2.0时代…

有哪些软件可以限制应用安装呢?

在限制应用安装方面&#xff0c;有几种方法和工具可供选择&#xff0c;具体取决于你的需求和设备类型。以下是一些常见的方法和软件&#xff1a; 1. **家长控制功能**&#xff1a;操作系统如iOS、Android和Windows等都提供了家长控制功能&#xff0c;允许家长限制特定用户的应…

二进制形式与编码方式的概念略有不同

二进制形式和编码方式在文件处理中有着密切的联系&#xff0c;但它们表示的概念略有不同。 1. **二进制形式**&#xff1a;指的是数据在计算机中以二进制&#xff08;0和1&#xff09;的形式表示。在文件处理中&#xff0c;以二进制形式写入文件意味着将数据按照原始的二进制格…

【DM8】同义词

同义词就是别名 同义词可以通过掩盖一个&#xff08;表、视图、序列、函数、存储过程等对象&#xff09;的真实的名字和拥有者。 1、公共同义词&#xff1a;所有的用户可以使用&#xff0c;使用的时候不加模式名。 2、普通同义词&#xff1a;在某个模式下面定义的同义词&#x…

C#:求两个整数的最大值

任务描述 本关任务&#xff1a;编写一个程序&#xff0c;实现从键盘输入的两个整数&#xff0c;输出两个整数的最大值。 测试说明 平台会对你编写的代码进行测试&#xff1a; 测试输入&#xff1a; 4 91 预期输出&#xff1a; 最大值&#xff1a;91 测试输入&#xff1a; 15…

实时数据开发

笔者并没有专业的实时数仓的开发经验&#xff0c;只是从别人经验和网上资料综合整理而来&#xff0c;仅供参考。 实时数据开发步骤&#xff1a;1、需求分析&#xff1b;2、确定Source、Sink、Dim&#xff1b;3、任务创建&#xff1b;4、任务开发和修改&#xff1b;5、参数与资…

【go从入门到精通】作用域,包详解

作者简介&#xff1a; 高科&#xff0c;先后在 IBM PlatformComputing从事网格计算&#xff0c;淘米网&#xff0c;网易从事游戏服务器开发&#xff0c;拥有丰富的C&#xff0c;go等语言开发经验&#xff0c;mysql&#xff0c;mongo&#xff0c;redis等数据库&#xff0c;设计模…

性能分析-数据库(安装、索引、sql、执行过程)与磁盘知识(读、写、同时读写、内存速度测试)

数据库 数据库&#xff0c;其实是数据库管理系统dbms。 数据库管理系统&#xff0c; 常见&#xff1a; 关系型数据库&#xff1a; mysql、pg、 库的表&#xff0c;表与表之间有关联关系&#xff1b; 表二维表统一标准的SQL&#xff08;不局限于CRUD&#xff09;非关系型数据…

【Python】关于函数

1.调用时 当有重名的时候&#xff0c;使用最后声明的同名函数 解决函数命名冲突问题&#xff1a; ~ 模块名.函数名 ----> 使用函数的完全限定名 ~ 别名 ----> 在导入函数的时候&#xff0c;使用as关键字对其别名 2.参数 (1)函数的参数的说明&#xff1a; ~ /…

阿里云9元服务器租用收费价格表_免费云服务器领取

2024年最新阿里云服务器租用费用优惠价格表&#xff0c;轻量2核2G3M带宽轻量服务器一年61元&#xff0c;折合5元1个月&#xff0c;新老用户同享99元一年服务器&#xff0c;2核4G5M服务器ECS优惠价199元一年&#xff0c;2核4G4M轻量服务器165元一年&#xff0c;2核4G服务器30元3…

第P2周:CIFAR10彩色图片识别

第P2周&#xff1a;CIFAR10彩色图片识别 &#x1f368; 本文为&#x1f517;365 天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K 同学啊 &#x1f4cc;第P2周&#xff1a;彩色图片识别&#x1f4cc; 难度&#xff1a;小白入门⭐ 语言&#xff1a;Python…

QSFP-DD 和 QSFP+ / QSFP28 / QSFP56 / OSFP / CFP8 / COBO 之间的区别

&#x1f31f;QSFP-DD 作为400G 光模块的最小外形尺寸&#xff0c;提供业界最高的带宽密度&#xff0c;同时利用对低速 QSFP 可插拔模块和电缆的向后兼容性&#xff0c;使其在光纤制造商中很受欢迎。作为400G高速应用中最新的热门光收发器&#xff0c;QSFP-DD经常被拿来与QSFP5…

目标检测YOLO实战应用案例100讲-基于多特征融合的SSD目标检测(续)

目录 3 基于多感受野融合的目标检测算法 3.1基于多特征图的网络结构 3.2感受野与空洞卷积

单例模式(Singleton Pattern)在JAVA中的应用

在软件开发中&#xff0c;设计模式是解决特定问题的一种模板或者指南。它们是在多年的软件开发实践中总结出的有效方法。JAVA设计模式广泛应用于各种编程场景中&#xff0c;以提高代码的可读性、可维护性和扩展性。本文将介绍单例模式&#xff0c;这是一种常用的创建型设计模式…