update

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"

example/T-Rectangle.qml

@@ -12,6 +12,7 @@ Item {
         FluText{
             text:"Rectangle"
             fontStyle: FluText.TitleLarge
+            Layout.topMargin: 20
         }
 
         FluRectangle{

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
+            }
+        }
+    }
+}

example/qml.qrc

@@ -9,5 +9,6 @@
         <file>T_Buttons.qml</file>
         <file>T-Rectangle.qml</file>
         <file>T_InfoBar.qml</file>
+        <file>T_Progress.qml</file>
     </qresource>
 </RCC>

src/Fluent.cpp

@@ -63,10 +63,9 @@ void Fluent::initializeEngine(QQmlEngine *engine, const char *uri)
 {
     Q_UNUSED(engine)
     Q_UNUSED(uri)
-//    QFont font;
+    QFont font;
-//    font.setFamily("Microsoft YaHei");
+    font.setFamily("Microsoft YaHei");
-//    QGuiApplication::setFont(font);
+    QGuiApplication::setFont(font);
-//    QQuickWindow::setTextRenderType(QQuickWindow::NativeTextRendering);
     QFontDatabase::addApplicationFont(":/com.zhuzichu/res/font/fontawesome-webfont.ttf");
     engine->rootContext()->setContextProperty("FluApp",FluApp::getInstance());
 }

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"

src/controls/FluAppBar.qml

@@ -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()

src/controls/FluProgressBar.qml

@@ -1,6 +1,59 @@
-import QtQuick 2.15
+import QtQuick 2.12
-import FluentUI 1.0
+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
+            }
+        }
+    }
 }

src/controls/FluProgressRing.qml

@@ -1,6 +1,83 @@
-import QtQuick 2.15
+import QtQuick 2.12
-import FluentUI 1.0
+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
+        }
+    }
 
 }

src/controls/FluSlider.qml

@@ -1,6 +1,92 @@
-import QtQuick 2.15
+import QtQuick 2.12
-import FluentUI 1.0
+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)
+        }
+    }
 
 }
+

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:

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
     }