那些网站是专门做一些调研的,wap网站制作视频教程,太原网站建设制作,网站建设需要多少天时间介绍一个QML的UI库#xff0c;国人编写#xff0c;作者也耍知乎。这个UI库确实好用#xff0c;但是教程基本等于无#xff0c;个人在使用中顺便记录一下学习内容。这玩意儿也有Pyside6的版本#xff0c;有需要的可以查看PySide6-FluentUI-QML。
FluentUI库地址github.c…介绍一个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\binQt Svg (optional, however essential for Qt 5)
确认前置条件满足后开始安装具体步骤参考
FluentUI如何在新项目中使用_哔哩哔哩_bilibiliwww.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 路径中的版本和编译环境类型来源于图中
第一个程序
新建一个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
QtCreator右键项目选择添加新文件-Qt Resource File-命名resource在项目根目录下新建文件夹qmlqml文件夹内新建文件AppMainWindow.qml修改AppMainWindow.qml
import QtQuick 2.15
import FluentUIFluWindow {id: mainWindow// 避免双屏情景下的宽度溢出minimumWidth: Screen.width * 0.8minimumHeight: Screen.desktopAvailableHeight * 0.8visible: truetitle: Helloworld//appBar: undefined}
右键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()}
}
CtrlR运行 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-FirstWindowappBar: undefined// 窗口标题栏FluAppBar {id: title_bartitle: mainWindow.title// 可以在resource.qrc中添加ico把url复制过来程序左上角就有图标了// icon:qrc:/example/res/image/favicon.icoanchors {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()
现在CtrlR运行程序点击右上角关闭窗口发现并没有什么不一样
我们查看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-FirstWindowappBar: undefinedcloseListener: function (event) {dialog_close.open()// 取消窗口关闭event.accepted false}// 窗口标题栏FluAppBar {id: title_bartitle: mainWindow.title// icon:qrc:/example/res/image/favicon.icoanchors {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()}}
}
