From 0d6bc69b3c2b540352eb32c0d390f7471edb6ab5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=B1=E5=AD=90=E6=A5=9A=5Czhuzi?= Date: Tue, 28 Feb 2023 23:57:55 +0800 Subject: [PATCH] update --- example/MainPage.qml | 4 ++ example/T-Rectangle.qml | 1 + example/T_Progress.qml | 42 ++++++++++++++ example/qml.qrc | 1 + src/Fluent.cpp | 7 +-- src/build-preset/plugins.qmltypes | 19 ++++++- src/controls/FluAppBar.qml | 12 ++-- src/controls/FluProgressBar.qml | 59 +++++++++++++++++++- src/controls/FluProgressRing.qml | 83 +++++++++++++++++++++++++++- src/controls/FluSlider.qml | 92 ++++++++++++++++++++++++++++++- src/controls/FluText.qml | 2 +- src/controls/FluTooltip.qml | 1 + 12 files changed, 303 insertions(+), 20 deletions(-) create mode 100644 example/T_Progress.qml diff --git a/example/MainPage.qml b/example/MainPage.qml index faa287b..8047cb9 100644 --- a/example/MainPage.qml +++ b/example/MainPage.qml @@ -30,6 +30,10 @@ FluWindow { text:"InfoBar" page:"qrc:/T_InfoBar.qml" } + ListElement{ + text:"Progress" + page:"qrc:/T_Progress.qml" + } ListElement{ text:"Rectangle" page:"qrc:/T-Rectangle.qml" diff --git a/example/T-Rectangle.qml b/example/T-Rectangle.qml index e9594ed..ebad9aa 100644 --- a/example/T-Rectangle.qml +++ b/example/T-Rectangle.qml @@ -12,6 +12,7 @@ Item { FluText{ text:"Rectangle" fontStyle: FluText.TitleLarge + Layout.topMargin: 20 } FluRectangle{ diff --git a/example/T_Progress.qml b/example/T_Progress.qml new file mode 100644 index 0000000..fe6e42e --- /dev/null +++ b/example/T_Progress.qml @@ -0,0 +1,42 @@ +import QtQuick 2.15 +import QtQuick.Layouts 1.15 +import QtQuick.Window 2.15 +import QtGraphicalEffects 1.15 +import FluentUI 1.0 + +Item { + + ColumnLayout{ + spacing: 5 + + FluText{ + text:"Progress" + fontStyle: FluText.TitleLarge + } + FluProgressBar{ + Layout.topMargin: 20 + } + FluProgressRing{ + Layout.topMargin: 10 + } + FluProgressBar{ + id:progress_bar + Layout.topMargin: 20 + indeterminate: false + } + FluProgressRing{ + id:progress_ring + Layout.topMargin: 10 + indeterminate: false + } + + FluSlider{ + Layout.topMargin: 30 + value:50 + onValueChanged:{ + progress_bar.progress = value/100 + progress_ring.progress = value/100 + } + } + } +} diff --git a/example/qml.qrc b/example/qml.qrc index 0610303..56244fd 100644 --- a/example/qml.qrc +++ b/example/qml.qrc @@ -9,5 +9,6 @@ T_Buttons.qml T-Rectangle.qml T_InfoBar.qml + T_Progress.qml diff --git a/src/Fluent.cpp b/src/Fluent.cpp index 772da0c..87e8d03 100644 --- a/src/Fluent.cpp +++ b/src/Fluent.cpp @@ -63,10 +63,9 @@ void Fluent::initializeEngine(QQmlEngine *engine, const char *uri) { Q_UNUSED(engine) Q_UNUSED(uri) -// QFont font; -// font.setFamily("Microsoft YaHei"); -// QGuiApplication::setFont(font); -// QQuickWindow::setTextRenderType(QQuickWindow::NativeTextRendering); + QFont font; + font.setFamily("Microsoft YaHei"); + QGuiApplication::setFont(font); QFontDatabase::addApplicationFont(":/com.zhuzichu/res/font/fontawesome-webfont.ttf"); engine->rootContext()->setContextProperty("FluApp",FluApp::getInstance()); } diff --git a/src/build-preset/plugins.qmltypes b/src/build-preset/plugins.qmltypes index ed45259..f237561 100644 --- a/src/build-preset/plugins.qmltypes +++ b/src/build-preset/plugins.qmltypes @@ -1025,15 +1025,27 @@ Module { exports: ["FluentUI/FluProgressBar 1.0"] exportMetaObjectRevisions: [0] isComposite: true - defaultProperty: "data" + defaultProperty: "contentItem" + Property { name: "progress"; type: "double" } + Property { name: "indeterminate"; type: "bool" } + Property { name: "radius"; type: "QVariant" } + Property { name: "color"; type: "QColor" } + Property { name: "borderColor"; type: "QColor" } + Property { name: "borderWidth"; type: "int" } + Property { name: "contentItem"; type: "QQuickItem"; isList: true; isReadonly: true } } Component { - prototype: "QQuickItem" + prototype: "QQuickRectangle" name: "FluentUI/FluProgressRing 1.0" exports: ["FluentUI/FluProgressRing 1.0"] exportMetaObjectRevisions: [0] isComposite: true defaultProperty: "data" + Property { name: "linWidth"; type: "double" } + Property { name: "progress"; type: "double" } + Property { name: "indeterminate"; type: "bool" } + Property { name: "radius2"; type: "double"; isReadonly: true } + Property { name: "primaryColor"; type: "QColor" } } Component { prototype: "QQuickItem" @@ -1078,6 +1090,9 @@ Module { exportMetaObjectRevisions: [0] isComposite: true defaultProperty: "data" + Property { name: "lineWidth"; type: "int" } + Property { name: "dotSize"; type: "int" } + Property { name: "value"; type: "int" } } Component { prototype: "QQuickText" diff --git a/src/controls/FluAppBar.qml b/src/controls/FluAppBar.qml index 240bb81..753020f 100644 --- a/src/controls/FluAppBar.qml +++ b/src/controls/FluAppBar.qml @@ -8,9 +8,9 @@ Rectangle{ color: FluApp.isDark ? "#323232" : "#FFFFFF" height: 50 width: { - if(parent==null) - return 200 - return parent.width + if(parent==null) + return 200 + return parent.width } property string title: "标题" @@ -84,7 +84,11 @@ Rectangle{ return Window.Maximized === Window.window.visibility ? FluentIcons.FA_window_restore : FluentIcons.FA_window_maximize } Layout.alignment: Qt.AlignVCenter - text:Window.Maximized === Window.window.visibility?"向下还原":"最大化" + text:{ + if(Window.window == null) + return "" + Window.Maximized === Window.window.visibility?"向下还原":"最大化" + } iconSize: 15 onClicked: { toggleMaximized() diff --git a/src/controls/FluProgressBar.qml b/src/controls/FluProgressBar.qml index 17454a4..c81c172 100644 --- a/src/controls/FluProgressBar.qml +++ b/src/controls/FluProgressBar.qml @@ -1,6 +1,59 @@ -import QtQuick 2.15 -import FluentUI 1.0 +import QtQuick 2.12 +import QtQuick.Controls 2.12 -Item { +//进度条4 +FluRectangle { + id: control + width: 180 + height: 6 + radius: [3,3,3,3] + clip: true + color:Qt.rgba(214/255,214/255,214/255,1) + property real progress: 0.25 + property bool indeterminate: true + + Component.onCompleted: { + anim.enabled = false + if(indeterminate){ + rect.x = -control.width*0.5 + }else{ + rect.x = 0 + } + anim.enabled = true + } + + Rectangle{ + id:rect + radius: 3 + width: control.width*progress + height: control.height + color:Qt.rgba(0/255,102/255,180/255,1) + + Behavior on x{ + id:anim + enabled: true + NumberAnimation{ + duration: 800 + onRunningChanged: { + if(!running){ + anim.enabled = false + rect.x = -control.width*0.5 + anim.enabled = true + timer.start() + } + } + } + } + + Timer{ + id:timer + running: indeterminate + interval: 800 + triggeredOnStart: true + onTriggered: { + rect.x = control.width + } + } + } } diff --git a/src/controls/FluProgressRing.qml b/src/controls/FluProgressRing.qml index 17454a4..d2d857f 100644 --- a/src/controls/FluProgressRing.qml +++ b/src/controls/FluProgressRing.qml @@ -1,6 +1,83 @@ -import QtQuick 2.15 -import FluentUI 1.0 +import QtQuick 2.12 +import QtQuick.Controls 2.12 -Item { +//进度条4 +Rectangle { + id: control + + width: 60 + height: 60 + radius: 30 + border.width: linWidth + color: "#00000000" + border.color: Qt.rgba(214/255,214/255,214/255,1) + property real linWidth : 6 + property real progress: 0.25 + property bool indeterminate: true + readonly property real radius2 : radius - linWidth/2 + property color primaryColor : Qt.rgba(0/255,102/255,180/255,1) + + onProgressChanged: { + canvas.requestPaint() + } + + Behavior on rotation{ + id:anim + enabled: true + NumberAnimation{ + duration: 800 + onRunningChanged: { + if(!running){ + anim.enabled = false + control.rotation = 0 + anim.enabled = true + timer.start() + } + } + } + } + + Canvas { + id:canvas + anchors.fill: parent + antialiasing: true + renderTarget: Canvas.Image + onPaint: { + var ctx = canvas.getContext("2d"); + ctx.setTransform(1, 0, 0, 1, 0, 0); + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.save(); + ctx.lineWidth = linWidth; + ctx.strokeStyle = primaryColor; + ctx.fillStyle = primaryColor; + ctx.beginPath(); + ctx.arc(width/2, height/2, radius2 ,-0.5 * Math.PI,-0.5 * Math.PI + progress * 2 * Math.PI); + ctx.stroke(); + ctx.closePath(); +// var start_x = width/2 + Math.cos(-0.5 * Math.PI) * radius2; +// var start_y = height/2 + Math.sin(-0.5 * Math.PI) * radius2; +// ctx.beginPath(); +// ctx.arc(start_x, start_y, 3, 0, 2*Math.PI); +// ctx.fill(); +// ctx.closePath(); +// var end_x = width/2 + Math.cos(-0.5 * Math.PI + progress * 2 * Math.PI) * radius2; +// var end_y = height/2 + Math.sin(-0.5 * Math.PI + progress * 2 * Math.PI) * radius2; +// ctx.beginPath(); +// ctx.arc(end_x, end_y, 3, 0, 2*Math.PI); +// ctx.fill(); +// ctx.closePath(); + ctx.restore(); + } + } + + Timer{ + id:timer + running: indeterminate + interval: 800 + triggeredOnStart: true + onTriggered: { + control.rotation = 360 + } + } } diff --git a/src/controls/FluSlider.qml b/src/controls/FluSlider.qml index 17454a4..f245aab 100644 --- a/src/controls/FluSlider.qml +++ b/src/controls/FluSlider.qml @@ -1,6 +1,92 @@ -import QtQuick 2.15 -import FluentUI 1.0 +import QtQuick 2.12 +import QtQuick.Controls 2.12 +import QtGraphicalEffects 1.15 -Item { +Item{ + + id:root + + property int lineWidth: 6 + property int dotSize: 30 + property int value: 50 + + Component.onCompleted: { + dot.x =value/100*control.width - dotSize/2 + root.value = Qt.binding(function(){ + return (dot.x+15)/control.width*100 + }) + } + + FluRectangle { + + id: control + + width: 300 + height: root.lineWidth + radius: [3,3,3,3] + clip: true + anchors.verticalCenter: parent.verticalCenter + color:Qt.rgba(138/255,138/255,138/255,1) + + Rectangle{ + id:rect + radius: 3 + width: control.width*(value/100) + height: control.height + color:Qt.rgba(0/255,102/255,180/255,1) + } + + + } + Rectangle{ + id:dot + width: dotSize + height: dotSize + radius: 15 + anchors.verticalCenter: parent.verticalCenter + layer.enabled: true + layer.effect: DropShadow { + radius: 5 + samples: 4 + color: "#80000000" + } + Rectangle{ + width: dotSize/2 + height: dotSize/2 + radius: dotSize/4 + color:Qt.rgba(0/255,102/255,180/255,1) + anchors.centerIn: parent + scale: control_mouse.containsMouse ? 1.2 : 1 + Behavior on scale { + NumberAnimation{ + duration: 150 + } + } + } + MouseArea{ + id:control_mouse + anchors.fill: parent + hoverEnabled: true + drag { + target: dot + axis: Drag.XAxis + minimumX: -dotSize/2 + maximumX: control.width - dotSize/2 + } + onPressed: { + tool_tip.visible = true + } + + onReleased: { + tool_tip.visible = false + } + } + + FluTooltip{ + id:tool_tip + text:String(root.value) + } + } } + diff --git a/src/controls/FluText.qml b/src/controls/FluText.qml index 828b535..acb3df6 100644 --- a/src/controls/FluText.qml +++ b/src/controls/FluText.qml @@ -60,7 +60,7 @@ Text { case FluText.BodyStrong: return text.pixelSize * 1.0 case FluText.Body: - return text.font.pixelSize = 14 + return text.pixelSize * 1.0 case FluText.Caption: return text.pixelSize * 0.8 default: diff --git a/src/controls/FluTooltip.qml b/src/controls/FluTooltip.qml index d126fdb..f71a389 100644 --- a/src/controls/FluTooltip.qml +++ b/src/controls/FluTooltip.qml @@ -9,6 +9,7 @@ ToolTip { contentItem: FluText { text: tool_tip.text font: tool_tip.font + fontStyle: FluText.BodyLarge padding: 4 wrapMode: Text.WrapAnywhere }