update

example/App.qml

@@ -9,6 +9,7 @@ Window {
     id:app
     color: "#00000000"
     Component.onCompleted: {
+        FluApp.isFps = true
         FluApp.setAppWindow(app)
         FluApp.routes = {
             "/":"qrc:/MainPage.qml",

example/MainPage.qml

@@ -10,6 +10,8 @@ FluWindow {
     width: 800
     height: 600
     title: "FluentUI"
+    minimumSize: Qt.size(600,400)
+    //    property var maximumSize
 
     FluAppBar{
         id:appbar
@@ -26,6 +28,10 @@ FluWindow {
             text:"ToggleSwitch"
             page:"qrc:/T_ToggleSwitch.qml"
         }
+        ListElement{
+            text:"Slider"
+            page:"qrc:/T_Slider.qml"
+        }
         ListElement{
             text:"InfoBar"
             page:"qrc:/T_InfoBar.qml"
@@ -36,7 +42,7 @@ FluWindow {
         }
         ListElement{
             text:"Rectangle"
-            page:"qrc:/T-Rectangle.qml"
+            page:"qrc:/T_Rectangle.qml"
         }
         ListElement{
             text:"Typography"

example/T-Rectangle.qml

@@ -1,60 +0,0 @@
-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:"Rectangle"
-            fontStyle: FluText.TitleLarge
-            Layout.topMargin: 20
-        }
-
-        FluRectangle{
-            width: 50
-            height: 50
-            color:"#ffeb3b"
-            radius:[15,0,0,0]
-        }
-
-        FluRectangle{
-            width: 50
-            height: 50
-            color:"#f7630c"
-            radius:[0,15,0,0]
-        }
-
-        FluRectangle{
-            width: 50
-            height: 50
-            color:"#e71123"
-            radius:[0,0,15,0]
-        }
-
-        FluRectangle{
-            width: 50
-            height: 50
-            color:"#b4009e"
-            radius:[0,0,0,15]
-        }
-
-        FluRectangle{
-            width: 50
-            height: 50
-            color:"#744da9"
-            radius:[15,15,15,15]
-        }
-
-        FluRectangle{
-            width: 50
-            height: 50
-            color:"#0078d4"
-            radius:[0,0,0,0]
-        }
-    }
-}

example/T_Rectangle.qml

@@ -0,0 +1,145 @@
+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:"Rectangle"
+            fontStyle: FluText.TitleLarge
+        }
+
+        RowLayout{
+            Layout.topMargin: 20
+
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#0078d4"
+                radius:[0,0,0,0]
+            }
+
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#744da9"
+                radius:[15,15,15,15]
+            }
+
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#ffeb3b"
+                radius:[15,0,0,0]
+            }
+
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#f7630c"
+                radius:[0,15,0,0]
+            }
+
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#e71123"
+                radius:[0,0,15,0]
+            }
+
+            FluRectangle{
+                width: 50
+                height: 50
+                color:"#b4009e"
+                radius:[0,0,0,15]
+            }
+
+        }
+
+        FluText{
+            text:"配合图片使用"
+            fontStyle: FluText.Subtitle
+            Layout.topMargin: 20
+        }
+
+        RowLayout{
+            spacing: 14
+            FluRectangle{
+                width: 50
+                height: 50
+                radius:[25,0,25,25]
+                Image {
+                    asynchronous: true
+                    anchors.fill: parent
+                    source: "qrc:/res/svg/avatar_1.svg"
+                }
+                layer.enabled: true
+                layer.effect: FluDropShadow {}
+
+            }
+            FluRectangle{
+                width: 50
+                height: 50
+                radius:[10,10,10,10]
+                Image {
+                    asynchronous: true
+                    anchors.fill: parent
+                    source: "qrc:/res/svg/avatar_2.svg"
+                }
+                layer.enabled: true
+                layer.effect: FluDropShadow {}
+            }
+            FluRectangle{
+                width: 50
+                height: 50
+                radius:[25,25,25,25]
+                Image {
+                    asynchronous: true
+                    anchors.fill: parent
+                    source: "qrc:/res/svg/avatar_3.svg"
+                }
+                layer.enabled: true
+                layer.effect: DropShadow {
+                    radius: 5
+                    samples: 4
+                    color: "#80000000"
+                }
+            }
+            FluRectangle{
+                width: 50
+                height: 50
+                radius:[0,25,25,25]
+                Image {
+                    asynchronous: true
+                    anchors.fill: parent
+                    source: "qrc:/res/svg/avatar_4.svg"
+                }
+                layer.enabled: true
+                layer.effect: FluDropShadow {}
+            }
+        }
+
+        FluRectangle{
+            width: 1080/5
+            height: 1439/5
+            radius:[25,25,25,25]
+            Image {
+                asynchronous: true
+                source: "qrc:/res/image/image_huoyin.webp"
+                anchors.fill: parent
+            }
+            Layout.topMargin: 10
+            layer.enabled: true
+            layer.effect: FluDropShadow {}
+        }
+
+
+
+
+    }
+}

example/T_Slider.qml

@@ -0,0 +1,27 @@
+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:"Slider"
+            fontStyle: FluText.TitleLarge
+        }
+
+        FluSlider{
+            Layout.topMargin: 20
+            value: 50
+        }
+
+
+    }
+
+
+}

example/qml.qrc

@@ -7,8 +7,22 @@
         <file>SettingPage.qml</file>
         <file>AboutPage.qml</file>
         <file>T_Buttons.qml</file>
-        <file>T-Rectangle.qml</file>
+        <file>T_Rectangle.qml</file>
         <file>T_InfoBar.qml</file>
         <file>T_Progress.qml</file>
+        <file>T_Slider.qml</file>
+        <file>res/image/image_huoyin.webp</file>
+        <file>res/svg/avatar_1.svg</file>
+        <file>res/svg/avatar_2.svg</file>
+        <file>res/svg/avatar_3.svg</file>
+        <file>res/svg/avatar_4.svg</file>
+        <file>res/svg/avatar_5.svg</file>
+        <file>res/svg/avatar_6.svg</file>
+        <file>res/svg/avatar_7.svg</file>
+        <file>res/svg/avatar_8.svg</file>
+        <file>res/svg/avatar_9.svg</file>
+        <file>res/svg/avatar_10.svg</file>
+        <file>res/svg/avatar_11.svg</file>
+        <file>res/svg/avatar_12.svg</file>
     </qresource>
 </RCC>

src/FluApp.cpp

@@ -22,6 +22,7 @@ FluApp::FluApp(QObject *parent)
     : QObject{parent}
 {
     isDark(true);
+    isFps(true);
 }
 
 

src/FluApp.h

@@ -12,6 +12,7 @@ class FluApp : public QObject
     Q_OBJECT
     Q_PROPERTY_AUTO(QString,initialRoute);
     Q_PROPERTY_AUTO(bool,isDark);
+    Q_PROPERTY_AUTO(bool,isFps);
     Q_PROPERTY_AUTO(QJsonObject,routes);
 
 public:

src/Fluent.cpp

@@ -30,7 +30,7 @@ void Fluent::registerTypes(const char *uri){
 
     qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
 
-    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluShadow.qml"),uri,major,minor,"FluShadow");
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluDropShadow.qml"),uri,major,minor,"FluDropShadow");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTooltip.qml"),uri,major,minor,"FluTooltip");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluDivider.qml"),uri,major,minor,"FluDivider");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluIcon.qml"),uri,major,minor,"FluIcon");

src/WindowHelper.cpp

@@ -14,3 +14,10 @@ void WindowHelper::setTitle(const QString& text){
 void WindowHelper::initWindow(FramelessView* window){
     this->window = window;
 }
+
+void WindowHelper::setMinimumSize(const QSize &size){
+    this->window->setMinimumSize(size);
+}
+void WindowHelper::setMaximumSize(const QSize &size){
+    this->window->setMaximumSize(size);
+}

src/WindowHelper.h

@@ -16,6 +16,8 @@ public:
 
     Q_INVOKABLE void initWindow(FramelessView* window);
     Q_INVOKABLE void setTitle(const QString& text);
+    Q_INVOKABLE void setMinimumSize(const QSize &size);
+    Q_INVOKABLE void setMaximumSize(const QSize &size);
 
 private:
     FramelessView* window;

src/build-preset/plugins.qmltypes

@@ -817,6 +817,14 @@ Module {
             name: "setTitle"
             Parameter { name: "text"; type: "string" }
         }
+        Method {
+            name: "setMinimumSize"
+            Parameter { name: "size"; type: "QSize" }
+        }
+        Method {
+            name: "setMaximumSize"
+            Parameter { name: "size"; type: "QSize" }
+        }
     }
     Component {
         prototype: "QQuickRectangle"
@@ -896,6 +904,24 @@ Module {
         isComposite: true
         defaultProperty: "data"
     }
+    Component {
+        prototype: "QQuickItem"
+        name: "FluentUI/FluDropShadow 1.0"
+        exports: ["FluentUI/FluDropShadow 1.0"]
+        exportMetaObjectRevisions: [0]
+        isComposite: true
+        defaultProperty: "data"
+        Property { name: "fast"; type: "bool" }
+        Property { name: "source"; type: "QVariant" }
+        Property { name: "radius"; type: "double" }
+        Property { name: "samples"; type: "int" }
+        Property { name: "color"; type: "QColor" }
+        Property { name: "horizontalOffset"; type: "double" }
+        Property { name: "verticalOffset"; type: "double" }
+        Property { name: "spread"; type: "double" }
+        Property { name: "cached"; type: "bool" }
+        Property { name: "transparentBorder"; type: "bool" }
+    }
     Component {
         prototype: "QQuickRectangle"
         name: "FluentUI/FluFilledButton 1.0"
@@ -1072,17 +1098,6 @@ Module {
         Property { name: "borderWidth"; type: "int" }
         Property { name: "contentItem"; type: "QQuickItem"; isList: true; isReadonly: true }
     }
-    Component {
-        prototype: "QQuickItem"
-        name: "FluentUI/FluShadow 1.0"
-        exports: ["FluentUI/FluShadow 1.0"]
-        exportMetaObjectRevisions: [0]
-        isComposite: true
-        defaultProperty: "data"
-        Property { name: "shadowColor"; type: "QColor" }
-        Property { name: "radius"; type: "int" }
-        Property { name: "isShadow"; type: "bool" }
-    }
     Component {
         prototype: "QQuickItem"
         name: "FluentUI/FluSlider 1.0"
@@ -1161,6 +1176,8 @@ Module {
         defaultProperty: "data"
         Property { name: "isMax"; type: "bool" }
         Property { name: "title"; type: "string" }
+        Property { name: "minimumSize"; type: "QVariant" }
+        Property { name: "maximumSize"; type: "QVariant" }
         Property { name: "window"; type: "QVariant" }
         Method {
             name: "showSuccess"

src/controls/FluAppBar.qml

@@ -53,6 +53,13 @@ Rectangle{
         height: parent.height
         spacing: 5
 
+        TFpsMonitor{
+           Layout.alignment: Qt.AlignVCenter
+           Layout.rightMargin: 12
+           Layout.topMargin: 5
+           visible: FluApp.isFps
+        }
+
         RowLayout{
             Layout.alignment: Qt.AlignVCenter
             spacing: 5

src/controls/FluDropShadow.qml

@@ -0,0 +1,8 @@
+import QtQuick 2.15
+import QtGraphicalEffects 1.15
+
+DropShadow {
+    radius: 5
+    samples: 4
+    color: FluApp.isDark ? "#80FFFFFF" : "#80000000"
+}

src/controls/FluProgressBar.qml

@@ -1,7 +1,6 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 
-//进度条4
 FluRectangle {
     id: control
 
@@ -9,51 +8,41 @@ FluRectangle {
     height: 6
     radius: [3,3,3,3]
     clip: true
-    color:Qt.rgba(214/255,214/255,214/255,1)
+    color:  FluApp.isDark ? Qt.rgba(41/255,41/255,41/255,1) : Qt.rgba(214/255,214/255,214/255,1)
-    property real progress: 0.25
+    property real progress: 0.5
     property bool indeterminate: true
 
     Component.onCompleted: {
-        anim.enabled = false
         if(indeterminate){
-            rect.x = -control.width*0.5
+            bar.x = -control.width*0.5
+            behavior.enabled = true
+            bar.x = control.width
         }else{
-            rect.x = 0
+            bar.x = 0
         }
-        anim.enabled = true
+    }
-    } 
 
     Rectangle{
-        id:rect
+        id:bar
         radius: 3
         width: control.width*progress
         height:  control.height
-        color:Qt.rgba(0/255,102/255,180/255,1)
+        color:FluApp.isDark ? Qt.rgba(76/255,160/255,224/255,1) : Qt.rgba(0/255,102/255,180/255,1)
 
         Behavior on x{
-            id:anim
+            id:behavior
-            enabled: true
+            enabled: false
             NumberAnimation{
-                duration: 800
+                duration: 1000
                 onRunningChanged: {
                     if(!running){
-                        anim.enabled = false
+                        behavior.enabled = false
-                        rect.x = -control.width*0.5
+                        bar.x = -control.width*0.5
-                        anim.enabled = true
+                        behavior.enabled = true
-                        timer.start()
+                        bar.x = control.width
                     }
                 }
             }
         }
-
-        Timer{
-            id:timer
-            running: indeterminate
-            interval: 800
-            triggeredOnStart: true
-            onTriggered: {
-                rect.x = control.width
-            }
-        }
     }
 }

src/controls/FluProgressRing.qml

@@ -1,7 +1,6 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 
-//进度条4
 Rectangle {
     id: control
 
@@ -10,28 +9,42 @@ Rectangle {
     radius: 30
     border.width: linWidth
     color: "#00000000"
-    border.color: Qt.rgba(214/255,214/255,214/255,1)
+    border.color: FluApp.isDark ? Qt.rgba(41/255,41/255,41/255,1) : 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)
+    property color primaryColor : FluApp.isDark ? Qt.rgba(76/255,160/255,224/255,1) : Qt.rgba(0/255,102/255,180/255,1)
 
     onProgressChanged: {
         canvas.requestPaint()
     }
 
+    Connections{
+        target: FluApp
+        function onIsDarkChanged(isDark){
+            canvas.requestPaint()
+        }
+    }
+
+    Component.onCompleted: {
+        if(indeterminate){
+            behavior.enabled = true
+            control.rotation = 360
+        }
+    }
+
     Behavior on rotation{
-        id:anim
+        id:behavior
-        enabled: true
+        enabled: false
         NumberAnimation{
-            duration: 800
+            duration: 1000
             onRunningChanged: {
                 if(!running){
-                    anim.enabled = false
+                    behavior.enabled = false
                     control.rotation = 0
-                    anim.enabled = true
+                    behavior.enabled = true
-                    timer.start()
+                    control.rotation = 360
                 }
             }
         }
@@ -54,30 +67,21 @@ Rectangle {
             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_x = width/2 + Math.cos(-0.5 * Math.PI) * radius2;
-//            var start_y = height/2 + Math.sin(-0.5 * Math.PI) * radius2;
+            //            var start_y = height/2 + Math.sin(-0.5 * Math.PI) * radius2;
-//            ctx.beginPath();
+            //            ctx.beginPath();
-//            ctx.arc(start_x, start_y, 3, 0, 2*Math.PI);
+            //            ctx.arc(start_x, start_y, 3, 0, 2*Math.PI);
-//            ctx.fill();
+            //            ctx.fill();
-//            ctx.closePath();
+            //            ctx.closePath();
-//            var end_x = width/2 + Math.cos(-0.5 * Math.PI + progress * 2 * Math.PI) * radius2;
+            //            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;
+            //            var end_y = height/2 + Math.sin(-0.5 * Math.PI + progress * 2 * Math.PI) * radius2;
-//            ctx.beginPath();
+            //            ctx.beginPath();
-//            ctx.arc(end_x, end_y, 3, 0, 2*Math.PI);
+            //            ctx.arc(end_x, end_y, 3, 0, 2*Math.PI);
-//            ctx.fill();
+            //            ctx.fill();
-//            ctx.closePath();
+            //            ctx.closePath();
             ctx.restore();
         }
     }
 
-    Timer{
-        id:timer
-        running: indeterminate
-        interval: 800
-        triggeredOnStart: true
-        onTriggered: {
-            control.rotation = 360
-        }
-    }
 
 }

src/controls/FluRectangle.qml

@@ -1,13 +1,12 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
-import QtQuick.Shapes 1.15
 import QtGraphicalEffects 1.15
 
 Item{
     id:root
     property var radius:[0,0,0,0]
     property color color : "#FFFFFF"
-    property color borderColor:"transparent"
+    property color borderColor:"red"
     property int borderWidth: 1
     default property alias contentItem: container.children
 
@@ -20,35 +19,40 @@ Item{
 
     }
 
-    Shape {
+    Canvas {
-        id: shape
+        id: canvas
-        width: root.width
+        anchors.fill: parent
-        height: root.height
-        layer.enabled: true
-        layer.samples: 4
-        layer.smooth: true
         visible: false
-        ShapePath {
+        onPaint: {
-            startX: 0
+            var ctx = getContext("2d");
-            startY: radius[0]
+            var x = 0;
-            fillColor: color
+            var y = 0;
-            strokeColor: borderColor
+            var w = root.width;
-            strokeWidth: borderWidth
+            var h = root.height;
-            PathQuad { x: radius[0]; y: 0; controlX: 0; controlY: 0 }
+            ctx.setTransform(1, 0, 0, 1, 0, 0);
-            PathLine { x: shape.width - radius[1]; y: 0 }
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            PathQuad { x: shape.width; y: radius[1]; controlX: shape.width; controlY: 0 }
+            ctx.save();
-            PathLine { x: shape.width; y: shape.height - radius[2] }
+            ctx.beginPath();
-            PathQuad { x: shape.width - radius[2]; y: shape.height; controlX: shape.width; controlY: shape.height }
+            ctx.moveTo(x + radius[0], y);
-            PathLine { x: radius[3]; y: shape.height }
+            ctx.lineTo(x + w - radius[1], y);
-            PathQuad { x: 0; y: shape.height - radius[3]; controlX: 0; controlY: shape.height }
+            ctx.arcTo(x + w, y, x + w, y + radius[1], radius[1]);
-            PathLine { x: 0; y: radius[0] }
+            ctx.lineTo(x + w, y + h - radius[2]);
+            ctx.arcTo(x + w, y + h, x + w - radius[2], y + h, radius[2]);
+            ctx.lineTo(x + radius[3], y + h);
+            ctx.arcTo(x, y + h, x, y + h - radius[3], radius[3]);
+            ctx.lineTo(x, y + radius[0]);
+            ctx.arcTo(x, y, x + radius[0], y, radius[0]);
+            ctx.closePath();
+            ctx.fillStyle = root.color;
+            ctx.fill();
+            ctx.restore();
         }
     }
 
     OpacityMask {
         anchors.fill: container
         source: container
-        maskSource: shape
+        maskSource: canvas
     }
 
 }

src/controls/FluShadow.qml

@@ -1,71 +0,0 @@
-import QtQuick 2.15
-
-Item {
-
-    id:root
-
-    anchors.fill: parent
-    anchors.margins: -5
-    property color shadowColor: "#333333"
-    property int radius: 5
-    property bool isShadow: true
-
-
-    Rectangle{
-        id:react_background
-        width: root.width - 8
-        height: root.height - 8
-        anchors.centerIn: parent
-        radius: root.radius
-        color:"#00000000"
-        opacity:  0.25
-        border.width: 1
-        border.color : Qt.lighter(shadowColor,1.1)
-    }
-
-    Rectangle{
-        width: root.width - 6
-        height: root.height - 6
-        anchors.centerIn: parent
-        radius: root.radius
-        color:"#00000000"
-        border.width: 1
-        opacity:  0.2
-        border.color : Qt.lighter(shadowColor,1.2)
-    }
-
-    Rectangle{
-        width: root.width - 4
-        height: root.height - 4
-        anchors.centerIn: parent
-        radius: root.radius
-        color:"#00000000"
-        border.width: 1
-        opacity: 0.15
-        border.color : Qt.lighter(shadowColor,1.3)
-    }
-
-    Rectangle{
-        width: root.width - 2
-        height: root.height - 2
-        anchors.centerIn: parent
-        radius: root.radius
-        color:"#00000000"
-        border.width: 1
-        opacity: 0.1
-        border.color : Qt.lighter(shadowColor,1.4)
-    }
-
-    Rectangle{
-        width: root.width
-        height: root.height
-        anchors.centerIn: parent
-        radius: root.radius
-        color:"#00000000"
-        border.width: 1
-        opacity:0.05
-        border.color : Qt.lighter(shadowColor,1.5)
-    }
-
-
-}

src/controls/FluSlider.qml

@@ -26,18 +26,16 @@ Item{
         radius: [3,3,3,3]
         clip: true
         anchors.verticalCenter: parent.verticalCenter
-        color:Qt.rgba(138/255,138/255,138/255,1)
+        color:FluApp.isDark ? Qt.rgba(162/255,162/255,162/255,1) : 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)
+            color:FluApp.isDark ? Qt.rgba(76/255,160/255,224/255,1) :Qt.rgba(0/255,102/255,180/255,1)
         }
-
-
     }
+
     Rectangle{
         id:dot
         width: dotSize
@@ -45,16 +43,13 @@ Item{
         radius: 15
         anchors.verticalCenter: parent.verticalCenter
         layer.enabled: true
-        layer.effect: DropShadow {
+        color:FluApp.isDark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
-            radius: 5
+        layer.effect: FluDropShadow {}
-            samples: 4
-            color: "#80000000"
-        }
         Rectangle{
             width: dotSize/2
             height: dotSize/2
             radius: dotSize/4
-            color:Qt.rgba(0/255,102/255,180/255,1)
+            color:FluApp.isDark ? Qt.rgba(76/255,160/255,224/255,1) :Qt.rgba(0/255,102/255,180/255,1)
             anchors.centerIn: parent
             scale: control_mouse.containsMouse ? 1.2 : 1
             Behavior on scale {

src/controls/FluTooltip.qml

@@ -19,10 +19,6 @@ ToolTip {
         color: FluApp.isDark ? Qt.rgba(50/255,49/255,48/255,1) : Qt.rgba(1,1,1,1)
         radius: 5
         layer.enabled: true
-        layer.effect: DropShadow {
+        layer.effect: FluDropShadow {}
-             radius: 5
-             samples: 4
-             color: "#80000000"
-         }
     }
 }

src/controls/FluWindow.qml

@@ -12,6 +12,8 @@ Rectangle {
         return Window.Maximized === Window.window.visibility
     }
     property string title: "FluentUI"
+    property var minimumSize
+    property var maximumSize
 
     Behavior on opacity{
         NumberAnimation{
@@ -47,6 +49,12 @@ Rectangle {
             if(FluApp.equalsWindow(view,window)){
                 helper.initWindow(view);
                 helper.setTitle(title);
+                if(minimumSize){
+                    helper.setMinimumSize(minimumSize)
+                }
+                if(maximumSize){
+                    helper.setMaximumSize(maximumSize)
+                }
             }
         }
     }

src/controls/TFpsMonitor.qml

@@ -0,0 +1,70 @@
+import QtQuick 2.15
+import FluentUI 1.0
+
+
+/*! TODO */
+Item {
+    id: toou2d_fps
+    width: contentItemLoader.width + 5;
+    height: contentItemLoader.height + 5;
+
+    readonly property alias fps: _private.fps;
+    readonly property alias fpsAvg: _private.fpsAvg;
+
+    property color color: "#C0C0C0"
+    property Component contentItem: contentComponent;
+
+    Component{
+        id:contentComponent
+        FluText{
+            text: " Avg " + fpsAvg + " | " + fps + " Fps";
+        }
+    }
+
+    FluObject{
+        id:_private;
+        property int frameCounter: 0
+        property int frameCounterAvg: 0
+        property int counter: 0
+        property int fps: 0
+        property int fpsAvg: 0
+    }
+
+    Rectangle {
+        id: monitor
+        radius: 3
+        width: 6
+        height: width
+        opacity: 0;
+
+        NumberAnimation on rotation {
+            from:0
+            to: 360
+            duration: 800
+            loops: Animation.Infinite
+        }
+        onRotationChanged: _private.frameCounter++;
+    }
+
+    Loader{
+        id:contentItemLoader
+        sourceComponent: contentItem
+    }
+
+    Timer {
+        interval: 2000
+        repeat: true
+        running: visible
+        onTriggered: {
+            _private.frameCounterAvg += _private.frameCounter;
+            _private.fps = _private.frameCounter/2;
+            _private.counter++;
+            _private.frameCounter = 0;
+            if (_private.counter >= 3) {
+                _private.fpsAvg = _private.frameCounterAvg/(2 * _private.counter)
+                _private.frameCounterAvg = 0;
+                _private.counter = 0;
+            }
+        }
+    }
+}

src/res.qrc

@@ -23,6 +23,7 @@
         <file>controls/FluIcon.qml</file>
         <file>controls/FluDivider.qml</file>
         <file>controls/FluTooltip.qml</file>
-        <file>controls/FluShadow.qml</file>
+        <file>controls/FluDropShadow.qml</file>
+        <file>controls/TFpsMonitor.qml</file>
     </qresource>
 </RCC>