Qt FluentUI 框架
Qt FluentUI 框架
安装
编译
直接用 Qt Creator 打开工程,编译运行 example 即可。
根据 CMakeLists.txt 可以看出,编译好了后会自动在 <Qt_SDK_DIR>/<Qt_Version>/<Your_compiler>/qml
下面生成 FluentUI
文件夹,其中存放着 FluentUI 的动态库。
集成到项目
因为库文件已经安装到 Qt 的 qml 目录,因此直接在QML里面 import FluentUI
即可,不需要额外的使用 find_package()
来寻找FluentUI。
自己的CMakeLists.txt只需要把源文件,QML文件和资源文件引入就可以了。最简单的就是用Qt Creator直接创建Qt Quick程序:
CMakeLists.txt
cmake_minimum_required(VERSION 3.16)
project(FluentTestWindow VERSION 0.1 LANGUAGES CXX)
set(CMAKE_AUTOMOC ON)
set(CMAKE_CXX_STANDARD_REQUIRED ON)
find_package(Qt6 REQUIRED COMPONENTS Quick)
qt_add_executable(appFluentTestWindow
main.cpp
)
qt_add_qml_module(appFluentTestWindow
URI FluentTestWindow
VERSION 1.0
QML_FILES Main.qml
)
set_target_properties(appFluentTestWindow PROPERTIES
MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com
MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
MACOSX_BUNDLE TRUE
WIN32_EXECUTABLE TRUE
)
target_link_libraries(appFluentTestWindow
PRIVATE Qt6::Quick
)
install(TARGETS appFluentTestWindow
BUNDLE DESTINATION .
LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
)
Main.qml
,需要引入FluentUI
:
import QtQuick
import QtQuick.Window
import FluentUI
FluWindow {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
FluFilledButton {
width: 125
height: 35
text: qsTr("Hello world!")
anchors.centerIn: parent
}
}
main.cpp
:
#include <QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
const QUrl url(u"qrc:/FluentTestWindow/Main.qml"_qs);
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
&app, [url](QObject *obj, const QUrl &objUrl) {
if (!obj && url == objUrl)
QCoreApplication::exit(-1);
}, Qt::QueuedConnection);
engine.load(url);
return app.exec();
}
发布
自己的项目发布时,是把fluentuiplugin的相关库都一起打包即可。
组件说明
直接参考库中 example 例程,给出了所有组件的效果和 qml 代码。