diff --git a/example/MainPage.qml b/example/MainPage.qml
index faa287b1..8047cb9f 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 e9594ede..ebad9aaf 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 00000000..fe6e42e1
--- /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 0610303f..56244fdd 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 772da0c8..87e8d033 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 ed45259c..f237561c 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 240bb81e..753020f1 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 17454a4f..c81c1726 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 17454a4f..d2d857f5 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 17454a4f..f245aab0 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 828b5359..acb3df6d 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 d126fdb8..f71a3897 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
}