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>