update

.cmake/Version.h.in

@@ -5,8 +5,9 @@
 
 #include <QtGlobal>
 
-#define APPLICATION_VERSION "${GIT_SEMVER}.${GIT_COMMIT_COUNT}"
+#define APPLICATION_FULL_VERSION "${GIT_SEMVER}.${GIT_COMMIT_COUNT}"
 #define VERSION_COUNTER ${GIT_COMMIT_COUNT}
 #define COMMIT_HASH "${GIT_DESCRIBE}"
+#define APPLICATION_VERSION "${GIT_SEMVER}"
 
 #endif  // VERSION_H

THIRD_PARTY_COPYRIGHT.txt

@@ -262,4 +262,29 @@ zxing-cpp
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
-   limitations under the License.
+   limitations under the License.
+
+************************************************************************************
+ChartJs2QML
+
+MIT License
+
+Copyright (c) 2020 ChartJs2QML contributors (starting with Elypson, Michael A. Voelkel, https://github.com/Elypson)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

example/qml-Qt6/App.qml

@@ -35,7 +35,8 @@ Window {
             "/hotload":"qrc:/example/qml/window/HotloadWindow.qml",
             "/singleTaskWindow":"qrc:/example/qml/window/SingleTaskWindow.qml",
             "/standardWindow":"qrc:/example/qml/window/StandardWindow.qml",
-            "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml"
+            "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml",
+            "/pageWindow":"qrc:/example/qml/window/PageWindow.qml"
         }
         FluApp.initialRoute = "/"
         FluApp.httpInterceptor = interceptor

example/qml-Qt6/component/CodeExpander.qml

@@ -136,7 +136,10 @@ FluExpander{
                     "FluTour",
                     "FluQRCode",
                     "FluTimeline",
-                    "FluChart"
+                    "FluChart",
+                    "FluRangeSlider",
+                    "FluStaggeredView",
+                    "FluProgressButton"
                 ];
         code = code.replace(/\n/g, "<br>");
         code = code.replace(/ /g, "&nbsp;");

example/qml-Qt6/global/ItemsFooter.qml

@@ -14,7 +14,8 @@ FluObject{
     FluPaneItem{
         title:lang.about
         icon:FluentIcons.Contact
-        tapFunc:function(){
+        onDropped: { FluApp.navigate("/about") }
+        onTapListener:function(){
             FluApp.navigate("/about")
         }
     }
@@ -22,8 +23,10 @@ FluObject{
     FluPaneItem{
         title:lang.settings
         icon:FluentIcons.Settings
+        url:"qrc:/example/qml/page/T_Settings.qml"
+        onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
         onTap:{
-            navigationView.push("qrc:/example/qml/page/T_Settings.qml")
+            navigationView.push(url)
         }
     }
 

example/qml-Qt6/global/ItemsOriginal.qml

@@ -21,11 +21,13 @@ FluObject{
             count: item_home.count
         }
         icon:FluentIcons.Home
+        url:"qrc:/example/qml/page/T_Home.qml"
+        onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
         onTap:{
             if(navigationView.getCurrentUrl()){
                 item_home.count = 0
             }
-            navigationView.push("qrc:/example/qml/page/T_Home.qml")
+            navigationView.push(url)
         }
         editDelegate: FluTextBox{
             text:item_home.title
@@ -69,9 +71,11 @@ FluObject{
             image:"qrc:/example/res/image/control/Button.png"
             recentlyUpdated:true
             desc:"A control that responds to user input and raisesa Click event."
+            url:"qrc:/example/qml/page/T_Buttons.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{
                 item_buttons.count = 0
-                navigationView.push("qrc:/example/qml/page/T_Buttons.qml")
+                navigationView.push(url)
             }
         }
         FluPaneItem{
@@ -82,46 +86,48 @@ FluObject{
                 count: item_text.count
                 color: Qt.rgba(82/255,196/255,26/255,1)
             }
+            url:"qrc:/example/qml/page/T_Text.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{
                 item_text.count = 0
-                navigationView.push("qrc:/example/qml/page/T_Text.qml")
+                navigationView.push(url)
             }
         }
         FluPaneItem{
             title:"Image"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Image.qml")
-            }
+            url:"qrc:/example/qml/page/T_Image.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Slider"
             image:"qrc:/example/res/image/control/Slider.png"
             recentlyUpdated:true
             desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Slider.qml")
-            }
+            url:"qrc:/example/qml/page/T_Slider.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"CheckBox"
             image:"qrc:/example/res/image/control/Checkbox.png"
             recentlyUpdated:true
             desc:"A control that a user can select or clear."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_CheckBox.qml")
-            }
+            url:"qrc:/example/qml/page/T_CheckBox.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"RadioButton"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_RadioButton.qml")
-            }
+            url:"qrc:/example/qml/page/T_RadioButton.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"ToggleSwitch"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_ToggleSwitch.qml")
-            }
+            url:"qrc:/example/qml/page/T_ToggleSwitch.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -130,33 +136,33 @@ FluObject{
         icon:FluentIcons.GridView
         FluPaneItem{
             title:"TextBox"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TextBox.qml")
-            }
+            url:"qrc:/example/qml/page/T_TextBox.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TimePicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TimePicker.qml")
-            }
+            url:"qrc:/example/qml/page/T_TimePicker.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"DatePicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_DatePicker.qml")
-            }
+            url:"qrc:/example/qml/page/T_DatePicker.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"CalendarPicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_CalendarPicker.qml")
-            }
+            url:"qrc:/example/qml/page/T_CalendarPicker.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"ColorPicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_ColorPicker.qml")
-            }
+            url:"qrc:/example/qml/page/T_ColorPicker.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -168,57 +174,63 @@ FluObject{
             image:"qrc:/example/res/image/control/InfoBar.png"
             recentlyUpdated:true
             desc:"An inline message to display app-wide statuschange information."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_InfoBar.qml")
-            }
+            url:"qrc:/example/qml/page/T_InfoBar.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Progress"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Progress.qml")
-            }
+            url:"qrc:/example/qml/page/T_Progress.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"RatingControl"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_RatingControl.qml")
-            }
+            url:"qrc:/example/qml/page/T_RatingControl.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Badge"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Badge.qml")
-            }
+            url:"qrc:/example/qml/page/T_Badge.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Rectangle"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Rectangle.qml")
-            }
+            url:"qrc:/example/qml/page/T_Rectangle.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"StatusView"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_StatusView.qml")
-            }
+            url:"qrc:/example/qml/page/T_StatusView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Carousel"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Carousel.qml")
-            }
+            url:"qrc:/example/qml/page/T_Carousel.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Expander"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Expander.qml")
-            }
+            url:"qrc:/example/qml/page/T_Expander.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:"StaggeredView"
+            url:"qrc:/example/qml/page/T_StaggeredView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Watermark"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Watermark.qml")
-            }
+            url:"qrc:/example/qml/page/T_Watermark.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -227,9 +239,9 @@ FluObject{
         icon:FluentIcons.ButtonMenu
         FluPaneItem{
             title:"Dialog"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Dialog.qml")
-            }
+            url:"qrc:/example/qml/page/T_Dialog.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             id:item_combobox
@@ -239,6 +251,8 @@ FluObject{
                 count: item_combobox.count
                 color: Qt.rgba(250/255,173/255,20/255,1)
             }
+            url:"qrc:/example/qml/page/T_ComboBox.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{
                 item_combobox.count = 0
                 navigationView.push("qrc:/example/qml/page/T_ComboBox.qml")
@@ -246,15 +260,15 @@ FluObject{
         }
         FluPaneItem{
             title:"Tooltip"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Tooltip.qml")
-            }
+            url:"qrc:/example/qml/page/T_Tooltip.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Menu"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Menu.qml")
-            }
+            url:"qrc:/example/qml/page/T_Menu.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -267,15 +281,15 @@ FluObject{
             recentlyAdded:true
             order:3
             desc:"Presents information from different sources in atabbed view."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Pivot.qml")
-            }
+            url:"qrc:/example/qml/page/T_Pivot.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"BreadcrumbBar"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_BreadcrumbBar.qml")
-            }
+            url:"qrc:/example/qml/page/T_BreadcrumbBar.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TabView"
@@ -283,15 +297,15 @@ FluObject{
             recentlyAdded:true
             order:1
             desc:"A control that displays a collection of tabs thatcan be used to display several documents."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TabView.qml")
-            }
+            url:"qrc:/example/qml/page/T_TabView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TreeView"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TreeView.qml")
-            }
+            url:"qrc:/example/qml/page/T_TreeView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TableView"
@@ -299,21 +313,21 @@ FluObject{
             recentlyAdded:true
             order:4
             desc:"The TableView control provides a flexible way to display a collection of data in rows and columns"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TableView.qml")
-            }
+            url:"qrc:/example/qml/page/T_TableView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Pagination"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Pagination.qml")
-            }
+            url:"qrc:/example/qml/page/T_Pagination.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"MultiWindow"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_MultiWindow.qml")
-            }
+            url:"qrc:/example/qml/page/T_MultiWindow.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"FlipView"
@@ -321,9 +335,9 @@ FluObject{
             recentlyAdded:true
             order:2
             desc:"Presents a collection of items that the user canflip through, one item at a time."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_FlipView.qml")
-            }
+            url:"qrc:/example/qml/page/T_FlipView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -332,27 +346,27 @@ FluObject{
         icon:FluentIcons.Brightness
         FluPaneItem{
             title:"Acrylic"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Acrylic.qml")
-            }
+            url:"qrc:/example/qml/page/T_Acrylic.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Theme"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Theme.qml")
-            }
+            url:"qrc:/example/qml/page/T_Theme.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Typography"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Typography.qml")
-            }
+            url:"qrc:/example/qml/page/T_Typography.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Awesome"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Awesome.qml")
-            }
+            url:"qrc:/example/qml/page/T_Awesome.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -366,45 +380,45 @@ FluObject{
         icon:FluentIcons.Shop
         FluPaneItem{
             title:"QRCode"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_QRCode.qml")
-            }
+            url:"qrc:/example/qml/page/T_QRCode.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Tour"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Tour.qml")
-            }
+            url:"qrc:/example/qml/page/T_Tour.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Timeline"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Timeline.qml")
-            }
+            url:"qrc:/example/qml/page/T_Timeline.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Screenshot"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Screenshot.qml")
-            }
+            title:"Screenshot(Todo)"
+            url:"qrc:/example/qml/page/T_Screenshot.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Captcha"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Captcha.qml")
-            }
+            url:"qrc:/example/qml/page/T_Captcha.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Chart"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Chart.qml")
-            }
+            url:"qrc:/example/qml/page/T_Chart.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Http"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Http.qml")
-            }
+            url:"qrc:/example/qml/page/T_Http.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             id:item_other
@@ -414,6 +428,8 @@ FluObject{
                 count: item_other.count
                 color: Qt.rgba(82/255,196/255,26/255,1)
             }
+            url:"qrc:/example/qml/page/T_RemoteLoader.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{
                 item_other.count = 0
                 navigationView.push("qrc:/example/qml/page/T_RemoteLoader.qml")
@@ -421,9 +437,10 @@ FluObject{
         }
         FluPaneItem{
             title:"HotLoader"
-            tapFunc:function(){
+            onTapListener:function(){
                 FluApp.navigate("/hotload")
             }
+            onDropped:{ FluApp.navigate("/hotload") }
         }
     }
 

example/qml-Qt6/page/T_Buttons.qml

@@ -161,6 +161,58 @@ FluScrollablePage{
 }'
     }
 
+    Timer{
+        id:timer_progress
+        interval: 200
+        onTriggered: {
+            btn_progress.progress = (btn_progress.progress + 0.1).toFixed(1)
+            if(btn_progress.progress==1){
+                timer_progress.stop()
+            }else{
+                timer_progress.start()
+            }
+        }
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        Layout.topMargin: 20
+        paddings: 10
+
+        FluProgressButton{
+            id:btn_progress
+            disabled:progress_button_switch.checked
+            text:"Progress Button"
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            onClicked: {
+                btn_progress.progress = 0
+                timer_progress.restart()
+            }
+        }
+        FluToggleSwitch{
+            id:progress_button_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text:"Disabled"
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluProgressButton{
+    text:"Progress Button"
+    onClicked: {
+
+    }
+}'
+    }
+
 
     FluArea{
         Layout.fillWidth: true

example/qml-Qt6/page/T_Home.qml

@@ -28,6 +28,7 @@ FluScrollablePage{
             fillMode:Image.PreserveAspectCrop
             anchors.fill: parent
             verticalAlignment: Qt.AlignTop
+            sourceSize: Qt.size(960,640)
             source: "qrc:/example/res/image/bg_home_header.png"
         }
         Rectangle{

example/qml-Qt6/page/T_Http.qml

@@ -10,14 +10,62 @@ import "qrc:///example/qml/component"
 FluContentPage{
 
     title:"Http"
+    property string cacheDirPath: FluTools.getApplicationDirPath() + "/cache/http"
 
     FluHttp{
         id:http
+        cacheDir:cacheDirPath
+    }
+
+    FluHttp{
+        id:http_breakpoint_download
+        cacheDir:cacheDirPath
+        breakPointDownload: true
+    }
+
+    FluHttp{
+        id:http_cache_ifnonecacherequest
+        cacheMode:FluHttpType.IfNoneCacheRequest
+        cacheDir:cacheDirPath
+    }
+
+    FluHttp{
+        id:http_cache_requestfailedreadcache
+        cacheMode:FluHttpType.RequestFailedReadCache
+        cacheDir:cacheDirPath
+    }
+
+    FluHttp{
+        id:http_cache_firstcachethenrequest
+        cacheMode:FluHttpType.FirstCacheThenRequest
+        cacheDir:cacheDirPath
+    }
+
+    HttpCallable{
+        id:callable
+        onStart: {
+            showLoading()
+        }
+        onFinish: {
+            hideLoading()
+        }
+        onError:
+            (status,errorString,result)=>{
+                console.debug(status+";"+errorString+";"+result)
+            }
+        onSuccess:
+            (result)=>{
+                text_info.text = result
+            }
+        onCache:
+            (result)=>{
+                text_info.text = result
+            }
     }
 
     Flickable{
         id:layout_flick
-        width: 160
+        width: 200
         clip: true
         anchors{
             top: parent.top
@@ -36,21 +84,8 @@ FluContentPage{
                 implicitHeight: 36
                 text: "Get请求"
                 onClicked: {
-                    var callable = {}
-                    callable.onStart = function(){
-                        showLoading()
-                    }
-                    callable.onFinish = function(){
-                        hideLoading()
-                    }
-                    callable.onSuccess = function(result){
-                        text_info.text = result
-                        console.debug(result)
-                    }
-                    callable.onError = function(status,errorString){
-                        console.debug(status+";"+errorString)
-                    }
-                    http.get("https://httpbingo.org/get",callable)
+                    var request = http.newRequest("https://httpbingo.org/get")
+                    http.get(request,callable)
                 }
             }
             FluButton{
@@ -58,25 +93,13 @@ FluContentPage{
                 implicitHeight: 36
                 text: "Post表单请求"
                 onClicked: {
-                    var callable = {}
-                    callable.onStart = function(){
-                        showLoading()
-                    }
-                    callable.onFinish = function(){
-                        hideLoading()
-                    }
-                    callable.onSuccess = function(result){
-                        text_info.text = result
-                        console.debug(result)
-                    }
-                    callable.onError = function(status,errorString){
-                        console.debug(status+";"+errorString)
-                    }
-                    var param = {}
-                    param.custname = "朱子楚"
-                    param.custtel = "1234567890"
-                    param.custemail = "zhuzichu520@gmail.com"
-                    http.post("https://httpbingo.org/post",callable,param)
+                    var request = http.newRequest("https://httpbingo.org/post")
+                    var params = {}
+                    params.custname = "朱子楚"
+                    params.custtel = "1234567890"
+                    params.custemail = "zhuzichu520@gmail.com"
+                    request.params = params
+                    http.post(request,callable)
                 }
             }
             FluButton{
@@ -84,25 +107,13 @@ FluContentPage{
                 implicitHeight: 36
                 text: "Post Json请求"
                 onClicked: {
-                    var callable = {}
-                    callable.onStart = function(){
-                        showLoading()
-                    }
-                    callable.onFinish = function(){
-                        hideLoading()
-                    }
-                    callable.onSuccess = function(result){
-                        text_info.text = result
-                        console.debug(result)
-                    }
-                    callable.onError = function(status,errorString){
-                        console.debug(status+";"+errorString)
-                    }
-                    var param = {}
-                    param.custname = "朱子楚"
-                    param.custtel = "1234567890"
-                    param.custemail = "zhuzichu520@gmail.com"
-                    http.postJson("https://httpbingo.org/post",callable,param)
+                    var request = http.newRequest("https://httpbingo.org/post")
+                    var params = {}
+                    params.custname = "朱子楚"
+                    params.custtel = "1234567890"
+                    params.custemail = "zhuzichu520@gmail.com"
+                    request.params = params
+                    http.postJson(request,callable)
                 }
             }
             FluButton{
@@ -110,25 +121,12 @@ FluContentPage{
                 implicitHeight: 36
                 text: "Post String请求"
                 onClicked: {
-                    var callable = {}
-                    callable.onStart = function(){
-                        showLoading()
-                    }
-                    callable.onFinish = function(){
-                        hideLoading()
-                    }
-                    callable.onSuccess = function(result){
-                        text_info.text = result
-                        console.debug(result)
-                    }
-                    callable.onError = function(status,errorString){
-                        console.debug(status+";"+errorString)
-                    }
-                    var param = "我命由我不由天"
-                    http.postString("https://httpbingo.org/post",callable,param)
+                    var request = http.newRequest("https://httpbingo.org/post")
+                    request.params = "我命由我不由天"
+                    http.postString(request,callable)
                 }
             }
-            FluButton{
+            FluProgressButton{
                 id:btn_download
                 implicitWidth: parent.width
                 implicitHeight: 36
@@ -137,7 +135,86 @@ FluContentPage{
                     folder_dialog.open()
                 }
             }
-            FluButton{
+            FluProgressButton{
+                property bool downloading: false
+                id:btn_breakpoint_download
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: {
+                    if(downloading){
+                        return "暂停下载"
+                    }
+                    if(progress === 0){
+                        return "断点下载文件"
+                    }else if(progress === 1){
+                        return "打开文件"
+                    }else{
+                        return "继续下载"
+                    }
+                }
+                HttpRequest{
+                    id:request_breakpoint_download
+                    url: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
+                    downloadSavePath: FluTools.getApplicationDirPath()+ "/download/big_buck_bunny.mp4"
+                }
+                HttpCallable{
+                    id:callable_breakpoint_download
+                    onStart: {
+                        btn_breakpoint_download.downloading = true
+                    }
+                    onFinish: {
+                        btn_breakpoint_download.downloading = false
+                    }
+                    onError:
+                        (status,errorString,result)=>{
+                            console.debug(status+";"+errorString+";"+result)
+                        }
+                    onSuccess:
+                        (result)=>{
+                            showSuccess(result)
+                        }
+                    onDownloadProgress:
+                        (recv,total)=>{
+                            btn_breakpoint_download.progress = recv/total
+                        }
+                }
+                Component.onCompleted: {
+                    progress = http_breakpoint_download.getBreakPointProgress(request_breakpoint_download)
+                }
+                onClicked: {
+                    if(downloading){
+                        http_breakpoint_download.cancel()
+                        return
+                    }
+                    if(progress === 1){
+                        FluTools.showFileInFolder(request_breakpoint_download.downloadSavePath)
+                    }else{
+                        http_breakpoint_download.download(request_breakpoint_download,callable_breakpoint_download)
+                    }
+                }
+                FluMenu{
+                    id:menu_breakpoint_download
+                    width: 120
+                    FluMenuItem{
+                        text: "删除文件"
+                        onClicked: {
+                            if(FluTools.removeFile(request_breakpoint_download.downloadSavePath)){
+                                btn_breakpoint_download.progress = 0
+                            }
+                        }
+                    }
+                }
+                MouseArea {
+                    anchors.fill: parent
+                    acceptedButtons: Qt.RightButton
+                    onClicked: {
+                        if(btn_breakpoint_download.progress === 1){
+                            menu_breakpoint_download.popup()
+                        }
+                    }
+                }
+            }
+            FluProgressButton{
                 id:btn_upload
                 implicitWidth: parent.width
                 implicitHeight: 36
@@ -146,81 +223,136 @@ FluContentPage{
                     file_dialog.open()
                 }
             }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "FirstCacheThenRequest缓存"
+                onClicked: {
+                    var request = http.newRequest("https://httpbingo.org/post")
+                    request.params = {cacheMode:"FirstCacheThenRequest"}
+                    http_cache_firstcachethenrequest.post(request,callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "RequestFailedReadCache缓存"
+                onClicked: {
+                    var request = http.newRequest("https://httpbingo.org/post")
+                    request.params = {cacheMode:"RequestFailedReadCache"}
+                    http_cache_requestfailedreadcache.post(request,callable)
+                }
+            }
+
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "IfNoneCacheRequest缓存"
+                onClicked: {
+                    var request = http.newRequest("https://httpbingo.org/post")
+                    request.params = {cacheMode:"IfNoneCacheRequest"}
+                    http_cache_ifnonecacherequest.post(request,callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "打开缓存路径"
+                onClicked: {
+                    Qt.openUrlExternally("file:///"+cacheDirPath)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "删除缓存"
+                onClicked: {
+                    console.debug(FluTools.removeDir(cacheDirPath))
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "清空右边数据"
+                onClicked: {
+                    text_info.text = ""
+                }
+            }
         }
     }
 
+    HttpCallable{
+        id:callable_upload
+        onStart: {
+            btn_upload.disabled = true
+        }
+        onFinish: {
+            btn_upload.disabled = false
+        }
+        onError:
+            (status,errorString,result)=>{
+                btn_upload.progress = 0
+                text_info.text = result
+                console.debug(result)
+            }
+        onSuccess:
+            (result)=>{
+                text_info.text = result
+            }
+        onUploadProgress:
+            (sent,total)=>{
+                btn_upload.progress = sent/total
+            }
+    }
     FileDialog {
         id: file_dialog
         onAccepted: {
-            var param = {}
+            var request = http.newRequest("https://httpbingo.org/post")
+            var params = {}
             for(var i=0;i<selectedFiles.length;i++){
                 var fileUrl = selectedFiles[i]
                 var fileName = FluTools.getFileNameByUrl(fileUrl)
                 var filePath = FluTools.toLocalPath(fileUrl)
-                param[fileName] = filePath
+                params[fileName] = filePath
             }
-            console.debug(JSON.stringify(param))
-            var callable = {}
-            callable.onStart = function(){
-                btn_upload.disabled = true
-            }
-            callable.onFinish = function(){
-                btn_upload.disabled = false
-                btn_upload.text = "上传文件"
-                layout_upload_file_size.visible = false
-                text_upload_file_size.text = ""
-            }
-            callable.onSuccess = function(result){
-                text_info.text = result
-                console.debug(result)
-            }
-            callable.onError = function(status,errorString,result){
-                text_info.text = result
-                console.debug(result)
-            }
-            callable.onUploadProgress = function(sent,total){
-                var locale = Qt.locale()
-                var precent = (sent/total * 100).toFixed(0) + "%"
-                btn_upload.text = "上传中..."+precent
-                text_upload_file_size.text =  "%1/%2".arg(locale.formattedDataSize(sent)).arg(locale.formattedDataSize(total))
-                layout_upload_file_size.visible = true
-            }
-            http.upload("https://httpbingo.org/post",callable,param)
+            request.params = params
+            http.upload(request,callable_upload)
         }
     }
 
+    HttpCallable{
+        id:callable_download
+        onStart: {
+            btn_download.progress = 0
+            btn_download.disabled = true
+        }
+        onFinish: {
+            btn_download.disabled = false
+        }
+        onError:
+            (status,errorString,result)=>{
+                btn_download.progress = 0
+                showError(errorString)
+                console.debug(status+";"+errorString+";"+result)
+            }
+        onSuccess:
+            (result)=>{
+                showSuccess(result)
+            }
+        onDownloadProgress:
+            (recv,total)=>{
+                btn_download.progress = recv/total
+            }
+    }
     FolderDialog {
         id: folder_dialog
         currentFolder: StandardPaths.standardLocations(StandardPaths.DownloadLocation)[0]
         onAccepted: {
-            var callable = {}
-            callable.onStart = function(){
-                btn_download.disabled = true
-            }
-            callable.onFinish = function(){
-                btn_download.disabled = false
-                btn_download.text = "下载文件"
-                layout_download_file_size.visible = false
-                text_download_file_size.text = ""
-            }
-            callable.onSuccess = function(result){
-                showSuccess(result)
-            }
-            callable.onError = function(status,errorString){
-                showError(errorString)
-            }
-            callable.onDownloadProgress = function(recv,total){
-                var locale = Qt.locale()
-                var precent = (recv/total * 100).toFixed(0) + "%"
-                btn_download.text = "下载中..."+precent
-                text_download_file_size.text =  "%1/%2".arg(locale.formattedDataSize(recv)).arg(locale.formattedDataSize(total))
-                layout_download_file_size.visible = true
-            }
-            var path = FluTools.toLocalPath(currentFolder)+ "/big_buck_bunny.mp4"
-            http.download("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",callable,path)
+            var request = http.newRequest("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4")
+            request.downloadSavePath = FluTools.toLocalPath(currentFolder)+ "/big_buck_bunny.mp4"
+            http.download(request,callable_download)
         }
     }
-
     FluArea{
         anchors{
             top: layout_flick.top
@@ -246,34 +378,4 @@ FluContentPage{
             }
         }
     }
-
-    FluRectangle{
-        id:layout_download_file_size
-        radius: [4,4,4,4]
-        height: 36
-        width: 160
-        visible: false
-        x:layout_flick.width
-        y: 173 - layout_flick.contentY
-        FluText{
-            id:text_download_file_size
-            anchors.centerIn: parent
-        }
-    }
-
-
-    FluRectangle{
-        id:layout_upload_file_size
-        radius: [4,4,4,4]
-        height: 36
-        width: 160
-        visible: false
-        x:layout_flick.width
-        y: 210 - layout_flick.contentY
-        FluText{
-            id:text_upload_file_size
-            anchors.centerIn: parent
-        }
-    }
-
 }

example/qml-Qt6/page/T_Slider.qml

@@ -11,11 +11,18 @@ FluScrollablePage{
 
     FluArea{
         Layout.fillWidth: true
-        height: 100
-        paddings: 10
+        Layout.preferredHeight: 200
         Layout.topMargin: 20
-        FluSlider{
-            anchors.verticalCenter: parent.verticalCenter
+        paddings: 10
+
+        Row{
+            spacing: 30
+            FluSlider{
+            }
+            FluSlider{
+                orientation: Qt.Vertical
+                anchors.verticalCenter: parent.verticalCenter
+            }
         }
     }
     CodeExpander{
@@ -26,25 +33,27 @@ FluScrollablePage{
 }'
     }
 
+
     FluArea{
         Layout.fillWidth: true
-        height: 200
-        paddings: 10
+        Layout.preferredHeight: 200
         Layout.topMargin: 20
-        FluSlider{
-            orientation: Qt.Vertical
-            anchors.left: parent.left
-            anchors.verticalCenter: parent.verticalCenter
+        paddings: 10
+        Row{
+            spacing: 30
+            FluRangeSlider{
+            }
+            FluRangeSlider{
+                orientation: Qt.Vertical
+                anchors.verticalCenter: parent.verticalCenter
+            }
         }
     }
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
-        code:'FluSlider{
+        code:'FluRangeSlider{
     orientation: Qt.Vertical
-    value:50
 }'
     }
-
-
 }

example/qml-Qt6/page/T_StaggeredView.qml

@@ -0,0 +1,59 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import "qrc:///example/qml/component"
+import FluentUI 1.0
+
+FluContentPage{
+
+    title:"StaggeredView"
+
+    property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
+
+    ListModel{
+        id:list_model
+        Component.onCompleted: {
+            for(var i=0;i<=100;i++){
+                var item = {}
+                item.color = colors[rand(0,7)].dark
+                item.height = rand(100,300)
+                append(item)
+            }
+        }
+
+    }
+
+    Flickable{
+        id: scroll
+        anchors.fill: parent
+        anchors.topMargin: 20
+        boundsBehavior:Flickable.StopAtBounds
+        contentHeight: staggered_view.implicitHeight
+        clip: true
+        ScrollBar.vertical: FluScrollBar {}
+        FluStaggeredView{
+            id:staggered_view
+            width: parent.width
+            itemWidth: 160
+            model:list_model
+            delegate: Rectangle{
+                height: model.height
+                color:model.color
+                FluText{
+                    color:"#FFFFFF"
+                    text:model.index
+                    font.bold: true
+                    font.pixelSize: 18
+                    anchors.centerIn: parent
+                }
+            }
+        }
+    }
+
+    function rand(minNum, maxNum){
+        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+    }
+
+}
+

example/qml-Qt6/window/MainWindow.qml

@@ -28,6 +28,7 @@ CustomWindow {
     Component.onCompleted: {
         FluTools.setQuitOnLastWindowClosed(false)
         tour.open()
+        checkUpdate()
     }
 
     SystemTrayIcon {
@@ -133,13 +134,11 @@ CustomWindow {
                     }
                 }
             }
-
             FluRemoteLoader{
                 id:loader
                 lazy: true
                 anchors.fill: parent
-                //                source: "http://localhost:9000/RemoteComponent.qml"
-                source: "https://zhu-zichu.gitee.io/RemoteComponent.qml"
+                source: "https://zhu-zichu.gitee.io/Qt6_156_LieflatPage.qml"
             }
         }
         front: Item{
@@ -277,4 +276,67 @@ CustomWindow {
         ]
     }
 
+    FluHttp{
+        id:http
+    }
+
+    FpsItem{
+        id:fps_item
+    }
+
+    FluText{
+        text:"fps %1".arg(fps_item.fps)
+        opacity: 0.3
+        anchors{
+            bottom: parent.bottom
+            right: parent.right
+            bottomMargin: 5
+            rightMargin: 5
+        }
+    }
+
+    FluContentDialog{
+        property string newVerson
+        property string body
+        id:dialog_update
+        title:"升级提示"
+        message:"FluentUI目前最新版本 "+ newVerson +" -- 当前应用版本 "+appInfo.version+" \n现在是否去下载新版本？\n\n更新内容：\n"+body
+        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
+        negativeText: "取消"
+        positiveText:"确定"
+        onPositiveClicked:{
+            Qt.openUrlExternally("https://github.com/zhuzichu520/FluentUI/releases/latest")
+        }
+    }
+
+    HttpCallable{
+        id:callable
+        onStart: {
+            console.debug("satrt check update...")
+        }
+        onFinish: {
+            console.debug("check update finish")
+        }
+        onSuccess:
+            (result)=>{
+                var data = JSON.parse(result)
+                console.debug("current version "+appInfo.version)
+                console.debug("new version "+data.tag_name)
+                if(data.tag_name !== appInfo.version){
+                    dialog_update.newVerson =  data.tag_name
+                    dialog_update.body = data.body
+                    dialog_update.open()
+                }
+            }
+        onError:
+            (status,errorString)=>{
+                console.debug(status+";"+errorString)
+            }
+    }
+
+    function checkUpdate(){
+        var request = http.newRequest("https://api.github.com/repos/zhuzichu520/FluentUI/releases/latest")
+        http.get(request,callable);
+    }
+
 }

example/qml-Qt6/window/PageWindow.qml

@@ -0,0 +1,25 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI
+import example
+import "qrc:///example/qml/component"
+
+CustomWindow {
+
+    id:window
+    width: 800
+    height: 600
+    minimumWidth: 520
+    minimumHeight: 200
+    launchMode: FluWindowType.SingleInstance
+    onInitArgument:
+        (arg)=>{
+            window.title = arg.title
+            loader.setSource( arg.url,{animDisabled:true})
+        }
+    Loader{
+        id: loader
+        anchors.fill: parent
+    }
+}

example/qml/App.qml

@@ -35,7 +35,8 @@ Window {
             "/hotload":"qrc:/example/qml/window/HotloadWindow.qml",
             "/singleTaskWindow":"qrc:/example/qml/window/SingleTaskWindow.qml",
             "/standardWindow":"qrc:/example/qml/window/StandardWindow.qml",
-            "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml"
+            "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml",
+            "/pageWindow":"qrc:/example/qml/window/PageWindow.qml"
         }
         FluApp.initialRoute = "/"
         FluApp.httpInterceptor = interceptor

example/qml/component/CodeExpander.qml

@@ -136,7 +136,10 @@ FluExpander{
                     "FluTour",
                     "FluQRCode",
                     "FluTimeline",
-                    "FluChart"
+                    "FluChart",
+                    "FluRangeSlider",
+                    "FluStaggeredView",
+                    "FluProgressButton"
                 ];
         code = code.replace(/\n/g, "<br>");
         code = code.replace(/ /g, "&nbsp;");

example/qml/global/ItemsFooter.qml

@@ -14,7 +14,8 @@ FluObject{
     FluPaneItem{
         title:lang.about
         icon:FluentIcons.Contact
-        tapFunc:function(){
+        onDropped: { FluApp.navigate("/about") }
+        onTapListener:function(){
             FluApp.navigate("/about")
         }
     }
@@ -22,8 +23,10 @@ FluObject{
     FluPaneItem{
         title:lang.settings
         icon:FluentIcons.Settings
+        url:"qrc:/example/qml/page/T_Settings.qml"
+        onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
         onTap:{
-            navigationView.push("qrc:/example/qml/page/T_Settings.qml")
+            navigationView.push(url)
         }
     }
 

example/qml/global/ItemsOriginal.qml

@@ -21,11 +21,13 @@ FluObject{
             count: item_home.count
         }
         icon:FluentIcons.Home
+        url:"qrc:/example/qml/page/T_Home.qml"
+        onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
         onTap:{
             if(navigationView.getCurrentUrl()){
                 item_home.count = 0
             }
-            navigationView.push("qrc:/example/qml/page/T_Home.qml")
+            navigationView.push(url)
         }
         editDelegate: FluTextBox{
             text:item_home.title
@@ -69,9 +71,11 @@ FluObject{
             image:"qrc:/example/res/image/control/Button.png"
             recentlyUpdated:true
             desc:"A control that responds to user input and raisesa Click event."
+            url:"qrc:/example/qml/page/T_Buttons.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{
                 item_buttons.count = 0
-                navigationView.push("qrc:/example/qml/page/T_Buttons.qml")
+                navigationView.push(url)
             }
         }
         FluPaneItem{
@@ -82,46 +86,48 @@ FluObject{
                 count: item_text.count
                 color: Qt.rgba(82/255,196/255,26/255,1)
             }
+            url:"qrc:/example/qml/page/T_Text.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{
                 item_text.count = 0
-                navigationView.push("qrc:/example/qml/page/T_Text.qml")
+                navigationView.push(url)
             }
         }
         FluPaneItem{
             title:"Image"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Image.qml")
-            }
+            url:"qrc:/example/qml/page/T_Image.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Slider"
             image:"qrc:/example/res/image/control/Slider.png"
             recentlyUpdated:true
             desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Slider.qml")
-            }
+            url:"qrc:/example/qml/page/T_Slider.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"CheckBox"
             image:"qrc:/example/res/image/control/Checkbox.png"
             recentlyUpdated:true
             desc:"A control that a user can select or clear."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_CheckBox.qml")
-            }
+            url:"qrc:/example/qml/page/T_CheckBox.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"RadioButton"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_RadioButton.qml")
-            }
+            url:"qrc:/example/qml/page/T_RadioButton.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"ToggleSwitch"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_ToggleSwitch.qml")
-            }
+            url:"qrc:/example/qml/page/T_ToggleSwitch.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -130,33 +136,33 @@ FluObject{
         icon:FluentIcons.GridView
         FluPaneItem{
             title:"TextBox"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TextBox.qml")
-            }
+            url:"qrc:/example/qml/page/T_TextBox.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TimePicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TimePicker.qml")
-            }
+            url:"qrc:/example/qml/page/T_TimePicker.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"DatePicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_DatePicker.qml")
-            }
+            url:"qrc:/example/qml/page/T_DatePicker.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"CalendarPicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_CalendarPicker.qml")
-            }
+            url:"qrc:/example/qml/page/T_CalendarPicker.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"ColorPicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_ColorPicker.qml")
-            }
+            url:"qrc:/example/qml/page/T_ColorPicker.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -168,57 +174,63 @@ FluObject{
             image:"qrc:/example/res/image/control/InfoBar.png"
             recentlyUpdated:true
             desc:"An inline message to display app-wide statuschange information."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_InfoBar.qml")
-            }
+            url:"qrc:/example/qml/page/T_InfoBar.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Progress"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Progress.qml")
-            }
+            url:"qrc:/example/qml/page/T_Progress.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"RatingControl"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_RatingControl.qml")
-            }
+            url:"qrc:/example/qml/page/T_RatingControl.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Badge"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Badge.qml")
-            }
+            url:"qrc:/example/qml/page/T_Badge.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Rectangle"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Rectangle.qml")
-            }
+            url:"qrc:/example/qml/page/T_Rectangle.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"StatusView"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_StatusView.qml")
-            }
+            url:"qrc:/example/qml/page/T_StatusView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Carousel"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Carousel.qml")
-            }
+            url:"qrc:/example/qml/page/T_Carousel.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Expander"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Expander.qml")
-            }
+            url:"qrc:/example/qml/page/T_Expander.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:"StaggeredView"
+            url:"qrc:/example/qml/page/T_StaggeredView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Watermark"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Watermark.qml")
-            }
+            url:"qrc:/example/qml/page/T_Watermark.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -227,9 +239,9 @@ FluObject{
         icon:FluentIcons.ButtonMenu
         FluPaneItem{
             title:"Dialog"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Dialog.qml")
-            }
+            url:"qrc:/example/qml/page/T_Dialog.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             id:item_combobox
@@ -239,6 +251,8 @@ FluObject{
                 count: item_combobox.count
                 color: Qt.rgba(250/255,173/255,20/255,1)
             }
+            url:"qrc:/example/qml/page/T_ComboBox.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{
                 item_combobox.count = 0
                 navigationView.push("qrc:/example/qml/page/T_ComboBox.qml")
@@ -246,15 +260,15 @@ FluObject{
         }
         FluPaneItem{
             title:"Tooltip"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Tooltip.qml")
-            }
+            url:"qrc:/example/qml/page/T_Tooltip.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Menu"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Menu.qml")
-            }
+            url:"qrc:/example/qml/page/T_Menu.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -267,15 +281,15 @@ FluObject{
             recentlyAdded:true
             order:3
             desc:"Presents information from different sources in atabbed view."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Pivot.qml")
-            }
+            url:"qrc:/example/qml/page/T_Pivot.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"BreadcrumbBar"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_BreadcrumbBar.qml")
-            }
+            url:"qrc:/example/qml/page/T_BreadcrumbBar.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TabView"
@@ -283,15 +297,15 @@ FluObject{
             recentlyAdded:true
             order:1
             desc:"A control that displays a collection of tabs thatcan be used to display several documents."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TabView.qml")
-            }
+            url:"qrc:/example/qml/page/T_TabView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TreeView"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TreeView.qml")
-            }
+            url:"qrc:/example/qml/page/T_TreeView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TableView"
@@ -299,21 +313,21 @@ FluObject{
             recentlyAdded:true
             order:4
             desc:"The TableView control provides a flexible way to display a collection of data in rows and columns"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TableView.qml")
-            }
+            url:"qrc:/example/qml/page/T_TableView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Pagination"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Pagination.qml")
-            }
+            url:"qrc:/example/qml/page/T_Pagination.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"MultiWindow"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_MultiWindow.qml")
-            }
+            url:"qrc:/example/qml/page/T_MultiWindow.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"FlipView"
@@ -321,9 +335,9 @@ FluObject{
             recentlyAdded:true
             order:2
             desc:"Presents a collection of items that the user canflip through, one item at a time."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_FlipView.qml")
-            }
+            url:"qrc:/example/qml/page/T_FlipView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -332,27 +346,27 @@ FluObject{
         icon:FluentIcons.Brightness
         FluPaneItem{
             title:"Acrylic"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Acrylic.qml")
-            }
+            url:"qrc:/example/qml/page/T_Acrylic.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Theme"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Theme.qml")
-            }
+            url:"qrc:/example/qml/page/T_Theme.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Typography"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Typography.qml")
-            }
+            url:"qrc:/example/qml/page/T_Typography.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Awesome"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Awesome.qml")
-            }
+            url:"qrc:/example/qml/page/T_Awesome.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -366,45 +380,45 @@ FluObject{
         icon:FluentIcons.Shop
         FluPaneItem{
             title:"QRCode"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_QRCode.qml")
-            }
+            url:"qrc:/example/qml/page/T_QRCode.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Tour"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Tour.qml")
-            }
+            url:"qrc:/example/qml/page/T_Tour.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Timeline"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Timeline.qml")
-            }
+            url:"qrc:/example/qml/page/T_Timeline.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Screenshot"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Screenshot.qml")
-            }
+            title:"Screenshot(Todo)"
+            url:"qrc:/example/qml/page/T_Screenshot.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Captcha"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Captcha.qml")
-            }
+            url:"qrc:/example/qml/page/T_Captcha.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Chart"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Chart.qml")
-            }
+            url:"qrc:/example/qml/page/T_Chart.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Http"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Http.qml")
-            }
+            url:"qrc:/example/qml/page/T_Http.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             id:item_other
@@ -414,6 +428,8 @@ FluObject{
                 count: item_other.count
                 color: Qt.rgba(82/255,196/255,26/255,1)
             }
+            url:"qrc:/example/qml/page/T_RemoteLoader.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{
                 item_other.count = 0
                 navigationView.push("qrc:/example/qml/page/T_RemoteLoader.qml")
@@ -421,9 +437,10 @@ FluObject{
         }
         FluPaneItem{
             title:"HotLoader"
-            tapFunc:function(){
+            onTapListener:function(){
                 FluApp.navigate("/hotload")
             }
+            onDropped:{ FluApp.navigate("/hotload") }
         }
     }
 

example/qml/page/T_Acrylic.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Badge.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_BreadcrumbBar.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Buttons.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
@@ -160,6 +161,58 @@ FluScrollablePage{
 }'
     }
 
+    Timer{
+        id:timer_progress
+        interval: 200
+        onTriggered: {
+            btn_progress.progress = (btn_progress.progress + 0.1).toFixed(1)
+            if(btn_progress.progress==1){
+                timer_progress.stop()
+            }else{
+                timer_progress.start()
+            }
+        }
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        Layout.topMargin: 20
+        paddings: 10
+
+        FluProgressButton{
+            id:btn_progress
+            disabled:progress_button_switch.checked
+            text:"Progress Button"
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            onClicked: {
+                btn_progress.progress = 0
+                timer_progress.restart()
+            }
+        }
+        FluToggleSwitch{
+            id:progress_button_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text:"Disabled"
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluProgressButton{
+    text:"Progress Button"
+    onClicked: {
+
+    }
+}'
+    }
+
 
     FluArea{
         Layout.fillWidth: true

example/qml/page/T_CalendarPicker.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Captcha.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Carousel.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Chart.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_CheckBox.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_ColorPicker.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_ComboBox.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_DatePicker.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Dialog.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Expander.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_FlipView.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Home.qml

@@ -29,6 +29,7 @@ FluScrollablePage{
             anchors.fill: parent
             asynchronous: true
             verticalAlignment: Qt.AlignTop
+            sourceSize: Qt.size(960,640)
             source: "qrc:/example/res/image/bg_home_header.png"
         }
         Rectangle{

example/qml/page/T_Http.qml

@@ -6,18 +6,67 @@ import QtQuick.Controls 2.15
 import QtQuick.Dialogs 1.3
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluContentPage{
 
     title:"Http"
+    property string cacheDirPath: FluTools.getApplicationDirPath() + "/cache/http"
 
     FluHttp{
         id:http
+        cacheDir:cacheDirPath
+    }
+
+    FluHttp{
+        id:http_breakpoint_download
+        cacheDir:cacheDirPath
+        breakPointDownload: true
+    }
+
+    FluHttp{
+        id:http_cache_ifnonecacherequest
+        cacheMode:FluHttpType.IfNoneCacheRequest
+        cacheDir:cacheDirPath
+    }
+
+    FluHttp{
+        id:http_cache_requestfailedreadcache
+        cacheMode:FluHttpType.RequestFailedReadCache
+        cacheDir:cacheDirPath
+    }
+
+    FluHttp{
+        id:http_cache_firstcachethenrequest
+        cacheMode:FluHttpType.FirstCacheThenRequest
+        cacheDir:cacheDirPath
+    }
+
+    HttpCallable{
+        id:callable
+        onStart: {
+            showLoading()
+        }
+        onFinish: {
+            hideLoading()
+        }
+        onError:
+            (status,errorString,result)=>{
+                console.debug(status+";"+errorString+";"+result)
+            }
+        onSuccess:
+            (result)=>{
+                text_info.text = result
+            }
+        onCache:
+            (result)=>{
+                text_info.text = result
+            }
     }
 
     Flickable{
         id:layout_flick
-        width: 160
+        width: 200
         clip: true
         anchors{
             top: parent.top
@@ -36,21 +85,8 @@ FluContentPage{
                 implicitHeight: 36
                 text: "Get请求"
                 onClicked: {
-                    var callable = {}
-                    callable.onStart = function(){
-                        showLoading()
-                    }
-                    callable.onFinish = function(){
-                        hideLoading()
-                    }
-                    callable.onSuccess = function(result){
-                        text_info.text = result
-                        console.debug(result)
-                    }
-                    callable.onError = function(status,errorString){
-                        console.debug(status+";"+errorString)
-                    }
-                    http.get("https://httpbingo.org/get",callable)
+                    var request = http.newRequest("https://httpbingo.org/get")
+                    http.get(request,callable)
                 }
             }
             FluButton{
@@ -58,25 +94,13 @@ FluContentPage{
                 implicitHeight: 36
                 text: "Post表单请求"
                 onClicked: {
-                    var callable = {}
-                    callable.onStart = function(){
-                        showLoading()
-                    }
-                    callable.onFinish = function(){
-                        hideLoading()
-                    }
-                    callable.onSuccess = function(result){
-                        text_info.text = result
-                        console.debug(result)
-                    }
-                    callable.onError = function(status,errorString){
-                        console.debug(status+";"+errorString)
-                    }
-                    var param = {}
-                    param.custname = "朱子楚"
-                    param.custtel = "1234567890"
-                    param.custemail = "zhuzichu520@gmail.com"
-                    http.post("https://httpbingo.org/post",callable,param)
+                    var request = http.newRequest("https://httpbingo.org/post")
+                    var params = {}
+                    params.custname = "朱子楚"
+                    params.custtel = "1234567890"
+                    params.custemail = "zhuzichu520@gmail.com"
+                    request.params = params
+                    http.post(request,callable)
                 }
             }
             FluButton{
@@ -84,25 +108,13 @@ FluContentPage{
                 implicitHeight: 36
                 text: "Post Json请求"
                 onClicked: {
-                    var callable = {}
-                    callable.onStart = function(){
-                        showLoading()
-                    }
-                    callable.onFinish = function(){
-                        hideLoading()
-                    }
-                    callable.onSuccess = function(result){
-                        text_info.text = result
-                        console.debug(result)
-                    }
-                    callable.onError = function(status,errorString){
-                        console.debug(status+";"+errorString)
-                    }
-                    var param = {}
-                    param.custname = "朱子楚"
-                    param.custtel = "1234567890"
-                    param.custemail = "zhuzichu520@gmail.com"
-                    http.postJson("https://httpbingo.org/post",callable,param)
+                    var request = http.newRequest("https://httpbingo.org/post")
+                    var params = {}
+                    params.custname = "朱子楚"
+                    params.custtel = "1234567890"
+                    params.custemail = "zhuzichu520@gmail.com"
+                    request.params = params
+                    http.postJson(request,callable)
                 }
             }
             FluButton{
@@ -110,25 +122,12 @@ FluContentPage{
                 implicitHeight: 36
                 text: "Post String请求"
                 onClicked: {
-                    var callable = {}
-                    callable.onStart = function(){
-                        showLoading()
-                    }
-                    callable.onFinish = function(){
-                        hideLoading()
-                    }
-                    callable.onSuccess = function(result){
-                        text_info.text = result
-                        console.debug(result)
-                    }
-                    callable.onError = function(status,errorString){
-                        console.debug(status+";"+errorString)
-                    }
-                    var param = "我命由我不由天"
-                    http.postString("https://httpbingo.org/post",callable,param)
+                    var request = http.newRequest("https://httpbingo.org/post")
+                    request.params = "我命由我不由天"
+                    http.postString(request,callable)
                 }
             }
-            FluButton{
+            FluProgressButton{
                 id:btn_download
                 implicitWidth: parent.width
                 implicitHeight: 36
@@ -137,7 +136,86 @@ FluContentPage{
                     folder_dialog.open()
                 }
             }
-            FluButton{
+            FluProgressButton{
+                property bool downloading: false
+                id:btn_breakpoint_download
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: {
+                    if(downloading){
+                        return "暂停下载"
+                    }
+                    if(progress === 0){
+                        return "断点下载文件"
+                    }else if(progress === 1){
+                        return "打开文件"
+                    }else{
+                        return "继续下载"
+                    }
+                }
+                HttpRequest{
+                    id:request_breakpoint_download
+                    url: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
+                    downloadSavePath: FluTools.getApplicationDirPath()+ "/download/big_buck_bunny.mp4"
+                }
+                HttpCallable{
+                    id:callable_breakpoint_download
+                    onStart: {
+                        btn_breakpoint_download.downloading = true
+                    }
+                    onFinish: {
+                        btn_breakpoint_download.downloading = false
+                    }
+                    onError:
+                        (status,errorString,result)=>{
+                            console.debug(status+";"+errorString+";"+result)
+                        }
+                    onSuccess:
+                        (result)=>{
+                            showSuccess(result)
+                        }
+                    onDownloadProgress:
+                        (recv,total)=>{
+                            btn_breakpoint_download.progress = recv/total
+                        }
+                }
+                Component.onCompleted: {
+                    progress = http_breakpoint_download.getBreakPointProgress(request_breakpoint_download)
+                }
+                onClicked: {
+                    if(downloading){
+                        http_breakpoint_download.cancel()
+                        return
+                    }
+                    if(progress === 1){
+                        FluTools.showFileInFolder(request_breakpoint_download.downloadSavePath)
+                    }else{
+                        http_breakpoint_download.download(request_breakpoint_download,callable_breakpoint_download)
+                    }
+                }
+                FluMenu{
+                    id:menu_breakpoint_download
+                    width: 120
+                    FluMenuItem{
+                        text: "删除文件"
+                        onClicked: {
+                            if(FluTools.removeFile(request_breakpoint_download.downloadSavePath)){
+                                btn_breakpoint_download.progress = 0
+                            }
+                        }
+                    }
+                }
+                MouseArea {
+                    anchors.fill: parent
+                    acceptedButtons: Qt.RightButton
+                    onClicked: {
+                        if(btn_breakpoint_download.progress === 1){
+                            menu_breakpoint_download.popup()
+                        }
+                    }
+                }
+            }
+            FluProgressButton{
                 id:btn_upload
                 implicitWidth: parent.width
                 implicitHeight: 36
@@ -146,81 +224,136 @@ FluContentPage{
                     file_dialog.open()
                 }
             }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "FirstCacheThenRequest缓存"
+                onClicked: {
+                    var request = http.newRequest("https://httpbingo.org/post")
+                    request.params = {cacheMode:"FirstCacheThenRequest"}
+                    http_cache_firstcachethenrequest.post(request,callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "RequestFailedReadCache缓存"
+                onClicked: {
+                    var request = http.newRequest("https://httpbingo.org/post")
+                    request.params = {cacheMode:"RequestFailedReadCache"}
+                    http_cache_requestfailedreadcache.post(request,callable)
+                }
+            }
+
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "IfNoneCacheRequest缓存"
+                onClicked: {
+                    var request = http.newRequest("https://httpbingo.org/post")
+                    request.params = {cacheMode:"IfNoneCacheRequest"}
+                    http_cache_ifnonecacherequest.post(request,callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "打开缓存路径"
+                onClicked: {
+                    Qt.openUrlExternally("file:///"+cacheDirPath)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "删除缓存"
+                onClicked: {
+                    console.debug(FluTools.removeDir(cacheDirPath))
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "清空右边数据"
+                onClicked: {
+                    text_info.text = ""
+                }
+            }
         }
     }
 
+    HttpCallable{
+        id:callable_upload
+        onStart: {
+            btn_upload.disabled = true
+        }
+        onFinish: {
+            btn_upload.disabled = false
+        }
+        onError:
+            (status,errorString,result)=>{
+                btn_upload.progress = 0
+                text_info.text = result
+                console.debug(result)
+            }
+        onSuccess:
+            (result)=>{
+                text_info.text = result
+            }
+        onUploadProgress:
+            (sent,total)=>{
+                btn_upload.progress = sent/total
+            }
+    }
     FileDialog {
         id: file_dialog
         onAccepted: {
-            var param = {}
+            var request = http.newRequest("https://httpbingo.org/post")
+            var params = {}
             for(var i=0;i<selectedFiles.length;i++){
                 var fileUrl = selectedFiles[i]
                 var fileName = FluTools.getFileNameByUrl(fileUrl)
                 var filePath = FluTools.toLocalPath(fileUrl)
-                param[fileName] = filePath
+                params[fileName] = filePath
             }
-            console.debug(JSON.stringify(param))
-            var callable = {}
-            callable.onStart = function(){
-                btn_upload.disabled = true
-            }
-            callable.onFinish = function(){
-                btn_upload.disabled = false
-                btn_upload.text = "上传文件"
-                layout_upload_file_size.visible = false
-                text_upload_file_size.text = ""
-            }
-            callable.onSuccess = function(result){
-                text_info.text = result
-                console.debug(result)
-            }
-            callable.onError = function(status,errorString,result){
-                text_info.text = result
-                console.debug(result)
-            }
-            callable.onUploadProgress = function(sent,total){
-                var locale = Qt.locale()
-                var precent = (sent/total * 100).toFixed(0) + "%"
-                btn_upload.text = "上传中..."+precent
-                text_upload_file_size.text =  "%1/%2".arg(locale.formattedDataSize(sent)).arg(locale.formattedDataSize(total))
-                layout_upload_file_size.visible = true
-            }
-            http.upload("https://httpbingo.org/post",callable,param)
+            request.params = params
+            http.upload(request,callable_upload)
         }
     }
 
+    HttpCallable{
+        id:callable_download
+        onStart: {
+            btn_download.progress = 0
+            btn_download.disabled = true
+        }
+        onFinish: {
+            btn_download.disabled = false
+        }
+        onError:
+            (status,errorString,result)=>{
+                btn_download.progress = 0
+                showError(errorString)
+                console.debug(status+";"+errorString+";"+result)
+            }
+        onSuccess:
+            (result)=>{
+                showSuccess(result)
+            }
+        onDownloadProgress:
+            (recv,total)=>{
+                btn_download.progress = recv/total
+            }
+    }
     FolderDialog {
         id: folder_dialog
         currentFolder: StandardPaths.standardLocations(StandardPaths.DownloadLocation)[0]
         onAccepted: {
-            var callable = {}
-            callable.onStart = function(){
-                btn_download.disabled = true
-            }
-            callable.onFinish = function(){
-                btn_download.disabled = false
-                btn_download.text = "下载文件"
-                layout_download_file_size.visible = false
-                text_download_file_size.text = ""
-            }
-            callable.onSuccess = function(result){
-                showSuccess(result)
-            }
-            callable.onError = function(status,errorString){
-                showError(errorString)
-            }
-            callable.onDownloadProgress = function(recv,total){
-                var locale = Qt.locale()
-                var precent = (recv/total * 100).toFixed(0) + "%"
-                btn_download.text = "下载中..."+precent
-                text_download_file_size.text =  "%1/%2".arg(locale.formattedDataSize(recv)).arg(locale.formattedDataSize(total))
-                layout_download_file_size.visible = true
-            }
-            var path = FluTools.toLocalPath(currentFolder)+ "/big_buck_bunny.mp4"
-            http.download("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",callable,path)
+            var request = http.newRequest("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4")
+            request.downloadSavePath = FluTools.toLocalPath(currentFolder)+ "/big_buck_bunny.mp4"
+            http.download(request,callable_download)
         }
     }
-
     FluArea{
         anchors{
             top: layout_flick.top
@@ -246,34 +379,4 @@ FluContentPage{
             }
         }
     }
-
-    FluRectangle{
-        id:layout_download_file_size
-        radius: [4,4,4,4]
-        height: 36
-        width: 160
-        visible: false
-        x:layout_flick.width
-        y: 173 - layout_flick.contentY
-        FluText{
-            id:text_download_file_size
-            anchors.centerIn: parent
-        }
-    }
-
-
-    FluRectangle{
-        id:layout_upload_file_size
-        radius: [4,4,4,4]
-        height: 36
-        width: 160
-        visible: false
-        x:layout_flick.width
-        y: 210 - layout_flick.contentY
-        FluText{
-            id:text_upload_file_size
-            anchors.centerIn: parent
-        }
-    }
-
 }

example/qml/page/T_Image.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_InfoBar.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Menu.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_MultiWindow.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Pagination.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import "qrc:///example/qml/component"
+import "../component"
 import FluentUI 1.0
 
 FluScrollablePage{

example/qml/page/T_Pivot.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Progress.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_QRCode.qml

@@ -5,6 +5,7 @@ import QtQuick.Window 2.15
 import FluentUI 1.0
 import QtGraphicalEffects 1.15
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_RadioButton.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_RatingControl.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage {
 

example/qml/page/T_Rectangle.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_RemoteLoader.qml

@@ -4,11 +4,12 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluPage{
     launchMode: FluPageType.SingleTop
     FluRemoteLoader{
         anchors.fill: parent
-        source: "https://zhu-zichu.gitee.io/T_RemoteLoader.qml"
+        source: "https://zhu-zichu.gitee.io/Qt5_T_RemoteLoader.qml"
     }
 }

example/qml/page/T_Screenshot.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Settings.qml

@@ -5,6 +5,7 @@ import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/global"
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Slider.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import "qrc:///example/qml/component"
+import "../component"
 import FluentUI 1.0
 
 FluScrollablePage{
@@ -11,11 +12,18 @@ FluScrollablePage{
 
     FluArea{
         Layout.fillWidth: true
-        height: 100
-        paddings: 10
+        Layout.preferredHeight: 200
         Layout.topMargin: 20
-        FluSlider{
-            anchors.verticalCenter: parent.verticalCenter
+        paddings: 10
+
+        Row{
+            spacing: 30
+            FluSlider{
+            }
+            FluSlider{
+                orientation: Qt.Vertical
+                anchors.verticalCenter: parent.verticalCenter
+            }
         }
     }
     CodeExpander{
@@ -26,25 +34,28 @@ FluScrollablePage{
 }'
     }
 
+
     FluArea{
         Layout.fillWidth: true
-        height: 200
-        paddings: 10
+        Layout.preferredHeight: 200
         Layout.topMargin: 20
-        FluSlider{
-            orientation: Qt.Vertical
-            anchors.left: parent.left
-            anchors.verticalCenter: parent.verticalCenter
+        paddings: 10
+        Row{
+            spacing: 30
+            FluRangeSlider{
+            }
+            FluRangeSlider{
+                orientation: Qt.Vertical
+                anchors.verticalCenter: parent.verticalCenter
+            }
         }
     }
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
-        code:'FluSlider{
+        code:'FluRangeSlider{
     orientation: Qt.Vertical
-    value:50
 }'
     }
-
-
 }
+

example/qml/page/T_StaggeredView.qml

@@ -0,0 +1,61 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import "qrc:///example/qml/component"
+import "../component"
+import FluentUI 1.0
+
+FluContentPage{
+
+    title:"StaggeredView"
+
+    property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
+
+
+    ListModel{
+        id:list_model
+        Component.onCompleted: {
+            for(var i=0;i<=100;i++){
+                var item = {}
+                item.color = colors[rand(0,7)].dark
+                item.height = rand(100,300)
+                append(item)
+            }
+        }
+
+    }
+
+    Flickable{
+        id: scroll
+        anchors.fill: parent
+        anchors.topMargin: 20
+        boundsBehavior:Flickable.StopAtBounds
+        contentHeight: staggered_view.implicitHeight
+        clip: true
+        ScrollBar.vertical: FluScrollBar {}
+        FluStaggeredView{
+            id:staggered_view
+            width: parent.width
+            itemWidth: 160
+            model:list_model
+            delegate: Rectangle{
+                height: model.height
+                color:model.color
+                FluText{
+                    color:"#FFFFFF"
+                    text:model.index
+                    font.bold: true
+                    font.pixelSize: 18
+                    anchors.centerIn: parent
+                }
+            }
+        }
+    }
+
+    function rand(minNum, maxNum){
+        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+    }
+
+}
+

example/qml/page/T_StatusView.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_TabView.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_TableView.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluContentPage{
 

example/qml/page/T_Text.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_TextBox.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Theme.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_TimePicker.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Timeline.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_ToggleSwitch.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Tooltip.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_Tour.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml/page/T_TreeView.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage {
 

example/qml/page/T_Watermark.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluContentPage{
 

example/qml/window/AboutWindow.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 CustomWindow {
 

example/qml/window/HotloadWindow.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 import FluentUI 1.0
 import example 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 CustomWindow {
 

example/qml/window/LoginWindow.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 CustomWindow {
 

example/qml/window/MainWindow.qml

@@ -6,6 +6,7 @@ import Qt.labs.platform 1.1
 import FluentUI 1.0
 import example 1.0
 import "qrc:///example/qml/component"
+import "../component"
 import "qrc:///example/qml/global"
 
 CustomWindow {
@@ -28,6 +29,7 @@ CustomWindow {
     Component.onCompleted: {
         FluTools.setQuitOnLastWindowClosed(false)
         tour.open()
+        checkUpdate()
     }
 
     SystemTrayIcon {
@@ -133,13 +135,11 @@ CustomWindow {
                     }
                 }
             }
-
             FluRemoteLoader{
                 id:loader
                 lazy: true
                 anchors.fill: parent
-                //                source: "http://localhost:9000/RemoteComponent.qml"
-                source: "https://zhu-zichu.gitee.io/RemoteComponent.qml"
+                source: "https://zhu-zichu.gitee.io/Qt6_156_LieflatPage.qml"
             }
         }
         front: Item{
@@ -277,4 +277,67 @@ CustomWindow {
         ]
     }
 
+    FluHttp{
+        id:http
+    }
+
+    FpsItem{
+        id:fps_item
+    }
+
+    FluText{
+        text:"fps %1".arg(fps_item.fps)
+        opacity: 0.3
+        anchors{
+            bottom: parent.bottom
+            right: parent.right
+            bottomMargin: 5
+            rightMargin: 5
+        }
+    }
+
+    FluContentDialog{
+        property string newVerson
+        property string body
+        id:dialog_update
+        title:"升级提示"
+        message:"FluentUI目前最新版本 "+ newVerson +" -- 当前应用版本 "+appInfo.version+" \n现在是否去下载新版本？\n\n更新内容：\n"+body
+        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
+        negativeText: "取消"
+        positiveText:"确定"
+        onPositiveClicked:{
+            Qt.openUrlExternally("https://github.com/zhuzichu520/FluentUI/releases/latest")
+        }
+    }
+
+    HttpCallable{
+        id:callable
+        onStart: {
+            console.debug("satrt check update...")
+        }
+        onFinish: {
+            console.debug("check update finish")
+        }
+        onSuccess:
+            (result)=>{
+                var data = JSON.parse(result)
+                console.debug("current version "+appInfo.version)
+                console.debug("new version "+data.tag_name)
+                if(data.tag_name !== appInfo.version){
+                    dialog_update.newVerson =  data.tag_name
+                    dialog_update.body = data.body
+                    dialog_update.open()
+                }
+            }
+        onError:
+            (status,errorString)=>{
+                console.debug(status+";"+errorString)
+            }
+    }
+
+    function checkUpdate(){
+        var request = http.newRequest("https://api.github.com/repos/zhuzichu520/FluentUI/releases/latest")
+        http.get(request,callable);
+    }
+
 }

example/qml/window/PageWindow.qml

@@ -0,0 +1,26 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import FluentUI 1.0
+import example 1.0
+import "qrc:///example/qml/component"
+import "../component"
+
+CustomWindow {
+
+    id:window
+    width: 800
+    height: 600
+    minimumWidth: 520
+    minimumHeight: 200
+    launchMode: FluWindowType.SingleInstance
+    onInitArgument:
+        (arg)=>{
+            window.title = arg.title
+            loader.setSource( arg.url,{animDisabled:true})
+        }
+    Loader{
+        id: loader
+        anchors.fill: parent
+    }
+}

example/qml/window/SingleInstanceWindow.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 CustomWindow {
 

example/qml/window/SingleTaskWindow.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 CustomWindow {
 

example/qml/window/StandardWindow.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 CustomWindow {
 

example/resource.qrc

@@ -184,5 +184,7 @@
         <file>qml/window/StandardWindow.qml</file>
         <file>res/image/bg_scenic.png</file>
         <file>res/image/image_1.jpg</file>
+        <file>qml/window/PageWindow.qml</file>
+        <file>qml/page/T_StaggeredView.qml</file>
     </qresource>
 </RCC>

example/src/component/FpsItem.cpp

@@ -0,0 +1,19 @@
+#include "FpsItem.h"
+
+#include <QTimer>
+#include <QQuickWindow>
+
+FpsItem::FpsItem()
+{
+    QTimer *timer = new QTimer(this);
+    connect(timer, &QTimer::timeout, this, [this]{
+        fps(_frameCount);
+        _frameCount = 0;
+    });
+    connect(this, &QQuickItem::windowChanged, this, [this]{
+        if (window()){
+            connect(window(), &QQuickWindow::afterRendering, this, [this]{ _frameCount++; }, Qt::DirectConnection);
+        }
+    });
+    timer->start(1000);
+}

example/src/component/FpsItem.h

@@ -0,0 +1,19 @@
+#ifndef FPSITEM_H
+#define FPSITEM_H
+
+#include <QQuickItem>
+#include "src/stdafx.h"
+
+class FpsItem : public QQuickItem
+{
+    Q_OBJECT
+    Q_PROPERTY_AUTO(int,fps)
+public:
+    FpsItem();
+
+private:
+    int _frameCount = 0;
+
+};
+
+#endif // FPSITEM_H

example/src/main.cpp

@@ -11,6 +11,7 @@
 #include "AppInfo.h"
 #include "src/component/CircularReveal.h"
 #include "src/component/FileWatcher.h"
+#include "src/component/FpsItem.h"
 
 FRAMELESSHELPER_USE_NAMESPACE
 
@@ -49,6 +50,7 @@ int main(int argc, char *argv[])
 #endif
     qmlRegisterType<CircularReveal>("example", 1, 0, "CircularReveal");
     qmlRegisterType<FileWatcher>("example", 1, 0, "FileWatcher");
+    qmlRegisterType<FpsItem>("example", 1, 0, "FpsItem");
     appInfo->init(&engine);
     const QUrl url(QStringLiteral("qrc:/example/qml/App.qml"));
     QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,

src/Def.h

@@ -4,6 +4,24 @@
 #include <QObject>
 #include <QtQml/qqml.h>
 
+namespace FluHttpType {
+Q_NAMESPACE
+enum CacheMode {
+    /** 不使用缓存 */
+    NoCache = 0x0000,
+
+    /** 请求网络失败后，读取缓存 */
+    RequestFailedReadCache = 0x0001,
+
+    /** 如果缓存不存在才请求网络，否则使用缓存 */
+    IfNoneCacheRequest = 0x0002,
+
+    /** 先使用缓存，不管是否存在，仍然请求网络 */
+    FirstCacheThenRequest = 0x0004,
+};
+Q_ENUM_NS(CacheMode)
+QML_NAMED_ELEMENT(FluHttpType)
+}
 
 namespace FluScreenshotType {
 Q_NAMESPACE

src/FluHttp.cpp

@@ -5,15 +5,69 @@
 #include <QNetworkReply>
 #include <QUrlQuery>
 #include <QHttpMultiPart>
+#include <QGuiApplication>
 #include <QJsonDocument>
-#include "MainThread.h"
+#include <QStandardPaths>
+#include <QTextStream>
+#include <QDir>
+#include "Def.h"
 #include "FluApp.h"
+#include "FluTools.h"
+
+HttpRequest::HttpRequest(QObject *parent)
+    : QObject{parent}
+{
+}
+
+QMap<QString, QVariant> HttpRequest::toMap(){
+    QVariant _params;
+    bool isPostString = method() == "postString";
+    if(params().isNull()){
+        if(isPostString){
+            _params = "";
+        }else{
+            _params = QMap<QString,QVariant>();
+        }
+    }else{
+        _params = params();
+    }
+    QVariant _headers;
+    if(headers().isNull()){
+        _headers = QMap<QString,QVariant>();
+    }else{
+        _params = params();
+    }
+    QMap<QString, QVariant> request = {
+        {"url",url()},
+        {"headers",_headers.toMap()},
+        {"method",method()},
+        {"downloadSavePath",downloadSavePath()}
+    };
+    if(isPostString){
+        request.insert("params",_params.toString());
+    }else{
+        request.insert("params",_params.toMap());
+    }
+    return request;
+}
+
+QString HttpRequest::httpId(){
+    return FluTools::getInstance()->sha256(QJsonDocument::fromVariant(QVariant(toMap())).toJson(QJsonDocument::Compact));
+}
+
+HttpCallable::HttpCallable(QObject *parent)
+    : QObject{parent}
+{
+}
 
 FluHttp::FluHttp(QObject *parent)
     : QObject{parent}
 {
     retry(3);
     timeout(15000);
+    cacheMode(FluHttpType::CacheMode::NoCache);
+    cacheDir(QStandardPaths::writableLocation(QStandardPaths::CacheLocation)+"/httpcache");
+    breakPointDownload(false);
 }
 
 FluHttp::~FluHttp(){
@@ -21,27 +75,34 @@ FluHttp::~FluHttp(){
 }
 
 void FluHttp::cancel(){
-    foreach (QPointer<QNetworkReply> item, _cache) {
+    foreach (QPointer<QNetworkReply> item, _cacheReply) {
         if(item){
             item->abort();
         }
     }
 }
 
-void FluHttp::handleReply(QNetworkReply* reply){
-    _cache.append(reply);
-}
-
-void FluHttp::post(QString url,QJSValue callable,QMap<QString, QVariant> params,QMap<QString, QVariant> headers){
-    QMap<QString, QVariant> data = invokeIntercept(params,headers,"post").toMap();
+void FluHttp::post(HttpRequest* request,HttpCallable* callable){
+    request->method("post");
+    auto requestMap = request->toMap();
+    auto httpId = request->httpId();
+    QMap<QString, QVariant> data = invokeIntercept(requestMap).toMap();
     QThreadPool::globalInstance()->start([=](){
         onStart(callable);
+        if(_cacheMode == FluHttpType::CacheMode::IfNoneCacheRequest && cacheExists(httpId)){
+            onCache(callable,readCache(httpId));
+            onFinish(callable,request);
+            return;
+        }
+        if(_cacheMode == FluHttpType::CacheMode::FirstCacheThenRequest && cacheExists(httpId)){
+            onCache(callable,readCache(httpId));
+        }
+        QNetworkAccessManager manager;
+        manager.setTransferTimeout(timeout());
         for (int i = 0; i < retry(); ++i) {
-            QNetworkAccessManager manager;
-            manager.setTransferTimeout(timeout());
-            QUrl _url(url);
-            QNetworkRequest request(_url);
-            addHeaders(&request,data["headers"].toMap());
+            QUrl url(request->url());
+            QNetworkRequest req(url);
+            addHeaders(&req,data["headers"].toMap());
             QHttpMultiPart multiPart(QHttpMultiPart::FormDataType);
             for (const auto& each : data["params"].toMap().toStdMap())
             {
@@ -54,198 +115,283 @@ void FluHttp::post(QString url,QJSValue callable,QMap<QString, QVariant> params,
                 multiPart.append(part);
             }
             QEventLoop loop;
-            QNetworkReply* reply = manager.post(request,&multiPart);
-            _cache.append(reply);
-            connect(&manager,&QNetworkAccessManager::finished,this,[&loop](QNetworkReply *reply){
-                loop.quit();
-            });
+            QNetworkReply* reply = manager.post(req,&multiPart);
+            _cacheReply.append(reply);
+            connect(&manager,&QNetworkAccessManager::finished,&manager,[&loop](QNetworkReply *reply){loop.quit();});
+            connect(qApp,&QGuiApplication::aboutToQuit,&manager, [&loop](){loop.quit();});
             loop.exec();
             QString result = QString::fromUtf8(reply->readAll());
             int status = reply->attribute(QNetworkRequest::HttpStatusCodeAttribute).toInt();
             QString errorString = reply->errorString();
             bool isSuccess = reply->error() == QNetworkReply::NoError;
-            _cache.removeOne(reply);
             reply->deleteLater();
             reply = nullptr;
             if (isSuccess) {
+                handleCache(httpId,result);
                 onSuccess(callable,result);
                 break;
             }else{
                 if(i == retry()-1){
+                    if(_cacheMode == FluHttpType::CacheMode::RequestFailedReadCache && cacheExists(httpId)){
+                        onCache(callable,readCache(httpId));
+                    }
                     onError(callable,status,errorString,result);
                 }
             }
         }
-        onFinish(callable);
+        onFinish(callable,request);
     });
 }
 
-void FluHttp::postString(QString url,QJSValue callable,QString params,QMap<QString, QVariant> headers){
-    QMap<QString, QVariant> data = invokeIntercept(params,headers,"postString").toMap();
+void FluHttp::postString(HttpRequest* request,HttpCallable* callable){
+    request->method("postString");
+    auto requestMap = request->toMap();
+    auto httpId = request->httpId();
+    QString params = request->params().toString();
+    QMap<QString, QVariant> data = invokeIntercept(requestMap).toMap();
     QThreadPool::globalInstance()->start([=](){
         onStart(callable);
+        if(_cacheMode == FluHttpType::CacheMode::IfNoneCacheRequest && cacheExists(httpId)){
+            onCache(callable,readCache(httpId));
+            onFinish(callable,request);
+            return;
+        }
+        if(_cacheMode == FluHttpType::CacheMode::FirstCacheThenRequest && cacheExists(httpId)){
+            onCache(callable,readCache(httpId));
+        }
+        QNetworkAccessManager manager;
+        manager.setTransferTimeout(timeout());
         for (int i = 0; i < retry(); ++i) {
-            QNetworkAccessManager manager;
-            manager.setTransferTimeout(timeout());
-            QUrl _url(url);
-            QNetworkRequest request(_url);
-            addHeaders(&request,data["headers"].toMap());
+            QUrl url(request->url());
+            QNetworkRequest req(url);
+            addHeaders(&req,data["headers"].toMap());
             QString contentType = QString("text/plain;charset=utf-8");
-            request.setHeader(QNetworkRequest::ContentTypeHeader, contentType);
+            req.setHeader(QNetworkRequest::ContentTypeHeader, contentType);
             QEventLoop loop;
-            QNetworkReply* reply = manager.post(request,params.toUtf8());
-            _cache.append(reply);
-            connect(&manager,&QNetworkAccessManager::finished,this,[&loop](QNetworkReply *reply){
-                loop.quit();
-            });
+            QNetworkReply* reply = manager.post(req,params.toUtf8());
+            _cacheReply.append(reply);
+            connect(&manager,&QNetworkAccessManager::finished,&manager,[&loop](QNetworkReply *reply){loop.quit();});
+            connect(qApp,&QGuiApplication::aboutToQuit,&manager, [&loop](){loop.quit();});
             loop.exec();
             QString result = QString::fromUtf8(reply->readAll());
             int status = reply->attribute(QNetworkRequest::HttpStatusCodeAttribute).toInt();
             QString errorString = reply->errorString();
             bool isSuccess = reply->error() == QNetworkReply::NoError;
-            _cache.removeOne(reply);
             reply->deleteLater();
             reply = nullptr;
             if (isSuccess) {
+                handleCache(httpId,result);
                 onSuccess(callable,result);
                 break;
             }else{
                 if(i == retry()-1){
+                    if(_cacheMode == FluHttpType::CacheMode::RequestFailedReadCache && cacheExists(httpId)){
+                        onCache(callable,readCache(httpId));
+                    }
                     onError(callable,status,errorString,result);
                 }
             }
         }
-        onFinish(callable);
+        onFinish(callable,request);
     });
 }
 
-void FluHttp::postJson(QString url,QJSValue callable,QMap<QString, QVariant> params,QMap<QString, QVariant> headers){
-    QMap<QString, QVariant> data = invokeIntercept(params,headers,"postJson").toMap();
+void FluHttp::postJson(HttpRequest* request,HttpCallable* callable){
+    request->method("postJson");
+    auto requestMap = request->toMap();
+    auto httpId = request->httpId();
+    QMap<QString, QVariant> data = invokeIntercept(requestMap).toMap();
     QThreadPool::globalInstance()->start([=](){
         onStart(callable);
+        if(_cacheMode == FluHttpType::CacheMode::IfNoneCacheRequest && cacheExists(httpId)){
+            onCache(callable,readCache(httpId));
+            onFinish(callable,request);
+            return;
+        }
+        if(_cacheMode == FluHttpType::CacheMode::FirstCacheThenRequest && cacheExists(httpId)){
+            onCache(callable,readCache(httpId));
+        }
+        QNetworkAccessManager manager;
+        manager.setTransferTimeout(timeout());
         for (int i = 0; i < retry(); ++i) {
-            QNetworkAccessManager manager;
-            manager.setTransferTimeout(timeout());
-            QUrl _url(url);
-            QNetworkRequest request(_url);
-            addHeaders(&request,data["headers"].toMap());
+            QUrl url(request->url());
+            QNetworkRequest req(url);
+            addHeaders(&req,data["headers"].toMap());
             QString contentType = QString("application/json;charset=utf-8");
-            request.setHeader(QNetworkRequest::ContentTypeHeader, contentType);
+            req.setHeader(QNetworkRequest::ContentTypeHeader, contentType);
             QEventLoop loop;
-            QNetworkReply* reply = manager.post(request,QJsonDocument::fromVariant(data["params"]).toJson());
-            _cache.append(reply);
-            connect(&manager,&QNetworkAccessManager::finished,this,[&loop](QNetworkReply *reply){
-                loop.quit();
-            });
+            QNetworkReply* reply = manager.post(req,QJsonDocument::fromVariant(data["params"]).toJson());
+            _cacheReply.append(reply);
+            connect(&manager,&QNetworkAccessManager::finished,&manager,[&loop](QNetworkReply *reply){loop.quit();});
+            connect(qApp,&QGuiApplication::aboutToQuit,&manager, [&loop](){loop.quit();});
             loop.exec();
             QString result = QString::fromUtf8(reply->readAll());
             int status = reply->attribute(QNetworkRequest::HttpStatusCodeAttribute).toInt();
             QString errorString = reply->errorString();
             bool isSuccess = reply->error() == QNetworkReply::NoError;
-            _cache.removeOne(reply);
             reply->deleteLater();
             reply = nullptr;
             if (isSuccess) {
+                handleCache(httpId,result);
                 onSuccess(callable,result);
                 break;
             }else{
                 if(i == retry()-1){
+                    if(_cacheMode == FluHttpType::CacheMode::RequestFailedReadCache && cacheExists(httpId)){
+                        onCache(callable,readCache(httpId));
+                    }
                     onError(callable,status,errorString,result);
                 }
             }
         }
-        onFinish(callable);
+        onFinish(callable,request);
     });
 }
 
-void FluHttp::get(QString url,QJSValue callable,QMap<QString, QVariant> params,QMap<QString, QVariant> headers){
-    QMap<QString, QVariant> data = invokeIntercept(params,headers,"get").toMap();
+void FluHttp::get(HttpRequest* request,HttpCallable* callable){
+    request->method("get");
+    auto requestMap = request->toMap();
+    auto httpId = request->httpId();
+    QMap<QString, QVariant> data = invokeIntercept(requestMap).toMap();
     QThreadPool::globalInstance()->start([=](){
+        onStart(callable);
+        if(_cacheMode == FluHttpType::CacheMode::FirstCacheThenRequest && cacheExists(httpId)){
+            onCache(callable,readCache(httpId));
+        }
+        if(_cacheMode == FluHttpType::CacheMode::IfNoneCacheRequest && cacheExists(httpId)){
+            onCache(callable,readCache(httpId));
+            onFinish(callable,request);
+            return;
+        }
+        QNetworkAccessManager manager;
+        manager.setTransferTimeout(timeout());
         for (int i = 0; i < retry(); ++i) {
-            onStart(callable);
-            QNetworkAccessManager manager;
-            manager.setTransferTimeout(timeout());
-            QUrl _url(url);
-            addQueryParam(&_url,data["params"].toMap());
-            QNetworkRequest request(_url);
-            addHeaders(&request,data["headers"].toMap());
+            QUrl url(request->url());
+            addQueryParam(&url,data["params"].toMap());
+            QNetworkRequest req(url);
+            addHeaders(&req,data["headers"].toMap());
             QEventLoop loop;
-            QNetworkReply* reply = manager.get(request);
-            _cache.append(reply);
-            connect(&manager,&QNetworkAccessManager::finished,this,[&loop](QNetworkReply *reply){
-                loop.quit();
-            });
+            QNetworkReply* reply = manager.get(req);
+            _cacheReply.append(reply);
+            connect(&manager,&QNetworkAccessManager::finished,&manager,[&loop](QNetworkReply *reply){loop.quit();});
+            connect(qApp,&QGuiApplication::aboutToQuit,&manager, [&loop](){loop.quit();});
             loop.exec();
-            QString result = QString::fromUtf8(reply->readAll());
             int status = reply->attribute(QNetworkRequest::HttpStatusCodeAttribute).toInt();
             QString errorString = reply->errorString();
             bool isSuccess = reply->error() == QNetworkReply::NoError;
-            _cache.removeOne(reply);
-            reply->deleteLater();
-            reply = nullptr;
+            QString result = QString::fromUtf8(reply->readAll());
             if (isSuccess) {
+                handleCache(httpId,result);
                 onSuccess(callable,result);
                 break;
             }else{
                 if(i == retry()-1){
+                    if(_cacheMode == FluHttpType::CacheMode::RequestFailedReadCache && cacheExists(httpId)){
+                        onCache(callable,readCache(httpId));
+                    }
                     onError(callable,status,errorString,result);
                 }
             }
+            reply->deleteLater();
+            reply = nullptr;
         }
-        onFinish(callable);
+        onFinish(callable,request);
     });
 }
 
-void FluHttp::download(QString url,QJSValue callable,QString filePath,QMap<QString, QVariant> params,QMap<QString, QVariant> headers){
-    QMap<QString, QVariant> data = invokeIntercept(params,headers,"download").toMap();
+void FluHttp::download(HttpRequest* request,HttpCallable* callable){
+    request->method("download");
+    auto requestMap = request->toMap();
+    auto httpId = request->httpId();
+    auto savePath = request->downloadSavePath();
+    QMap<QString, QVariant> data = invokeIntercept(requestMap).toMap();
     QThreadPool::globalInstance()->start([=](){
         onStart(callable);
         QNetworkAccessManager manager;
-        QUrl _url(url);
-        addQueryParam(&_url,data["params"].toMap());
-        QNetworkRequest request(_url);
-        addHeaders(&request,data["headers"].toMap());
-        QSharedPointer<QFile> file(new QFile(filePath));
-        QIODevice::OpenMode mode = QIODevice::WriteOnly|QIODevice::Truncate;
-        if (!file->open(mode))
-        {
-            onError(callable,-1,QString("Url: %1 %2 Non-Writable").arg(request.url().toString(),file->fileName()),"");
-            onFinish(callable);
-            return;
+        QUrl url(request->url());
+        addQueryParam(&url,data["params"].toMap());
+        QNetworkRequest req(url);
+        addHeaders(&req,data["headers"].toMap());
+        QSharedPointer<QFile> file(new QFile(savePath));
+        QDir dir = QFileInfo(savePath).path();
+        if (!dir.exists(dir.path())){
+            dir.mkpath(dir.path());
         }
         QEventLoop loop;
-        connect(&manager,&QNetworkAccessManager::finished,this,[&loop](QNetworkReply *reply){
-            loop.quit();
-        });
-        QPointer<QNetworkReply> reply =  manager.get(request);
-        _cache.append(reply);
-        connect(reply,&QNetworkReply::downloadProgress,this,[=](qint64 bytesReceived, qint64 bytesTotal){
-            onDownloadProgress(callable,bytesReceived,bytesTotal);
+        connect(&manager,&QNetworkAccessManager::finished,&manager,[&loop](QNetworkReply *reply){loop.quit();});
+        connect(qApp,&QGuiApplication::aboutToQuit,&manager, [&loop](){loop.quit();});
+        qint64 seek = 0;
+        auto filePath = getCacheFilePath(httpId);
+        QSharedPointer<QFile> fileCache(new QFile(filePath));
+        if(fileCache->exists() && file->exists() && _breakPointDownload){
+            QJsonObject cacheInfo = QJsonDocument::fromJson(readCache(httpId).toUtf8()).object();
+            qint64 fileSize = cacheInfo.value("fileSize").toDouble();
+            qint64 contentLength = cacheInfo.value("contentLength").toDouble();
+            if(fileSize == contentLength && file->size() == contentLength){
+                onDownloadProgress(callable,fileSize,contentLength);
+                onSuccess(callable,savePath);
+                onFinish(callable,request);
+                return;
+            }
+            if(fileSize==file->size()){
+                req.setRawHeader("Range", QString("bytes=%1-").arg(fileSize).toUtf8());
+                seek = fileSize;
+                file->open(QIODevice::WriteOnly|QIODevice::Append);
+            }else{
+                file->open(QIODevice::WriteOnly|QIODevice::Truncate);
+            }
+        }else{
+            file->open(QIODevice::WriteOnly|QIODevice::Truncate);
+        }
+        QNetworkReply* reply =  manager.get(req);
+        _cacheReply.append(reply);
+        if (!fileCache->open(QIODevice::WriteOnly|QIODevice::Truncate))
+        {
+            qDebug()<<"FileCache Error";
+        }
+        connect(reply,&QNetworkReply::readyRead,reply,[reply,file,fileCache,requestMap,callable,seek,this]{
+            if (!reply || !file || reply->error() != QNetworkReply::NoError)
+            {
+                return;
+            }
+            QMap<QString, QVariant> downMap = requestMap;
+            qint64 contentLength = reply->header(QNetworkRequest::ContentLengthHeader).toLongLong()+seek;
+            downMap.insert("contentLength",contentLength);
+            QString eTag = reply->header(QNetworkRequest::ETagHeader).toString();
+            downMap.insert("eTag",eTag);
+            file->write(reply->readAll());
+            file->flush();
+            downMap.insert("fileSize",file->size());
+            fileCache->resize(0);
+            fileCache->write(FluTools::getInstance()->toBase64(QJsonDocument::fromVariant(QVariant(downMap)).toJson()).toUtf8());
+            fileCache->flush();
+            onDownloadProgress(callable,file->size(),contentLength);
         });
         loop.exec();
         if (reply->error() == QNetworkReply::NoError) {
-            file->write(reply->readAll());
-            onSuccess(callable,filePath);
+            onSuccess(callable,savePath);
         }else{
             onError(callable,reply->attribute(QNetworkRequest::HttpStatusCodeAttribute).toInt(),reply->errorString(),"");
         }
-        _cache.removeOne(reply);
         reply->deleteLater();
         reply = nullptr;
-        onFinish(callable);
+        onFinish(callable,request);
     });
 }
 
-void FluHttp::upload(QString url,QJSValue callable,QMap<QString, QVariant> params,QMap<QString, QVariant> headers){
-    QMap<QString, QVariant> data = invokeIntercept(params,headers,"upload").toMap();
+void FluHttp::upload(HttpRequest* request,HttpCallable* callable){
+    request->method("upload");
+    auto requestMap = request->toMap();
+    QMap<QString, QVariant> data = invokeIntercept(requestMap).toMap();
     QThreadPool::globalInstance()->start([=](){
         onStart(callable);
         QNetworkAccessManager manager;
         manager.setTransferTimeout(timeout());
-        QUrl _url(url);
-        QNetworkRequest request(_url);
-        addHeaders(&request,data["headers"].toMap());
+        QUrl url(request->url());
+        QNetworkRequest req(url);
+        addHeaders(&req,data["headers"].toMap());
         QHttpMultiPart multiPart(QHttpMultiPart::FormDataType);
+        qDebug()<<data["params"].toMap();
         for (const auto& each : data["params"].toMap().toStdMap())
         {
             const QString& key = each.first;
@@ -261,12 +407,11 @@ void FluHttp::upload(QString url,QJSValue callable,QMap<QString, QVariant> param
             multiPart.append(part);
         }
         QEventLoop loop;
-        QNetworkReply* reply = manager.post(request,&multiPart);
-        _cache.append(reply);
-        connect(&manager,&QNetworkAccessManager::finished,this,[&loop](QNetworkReply *reply){
-            loop.quit();
-        });
-        connect(reply,&QNetworkReply::uploadProgress,this,[=](qint64 bytesSent, qint64 bytesTotal){
+        QNetworkReply* reply = manager.post(req,&multiPart);
+        _cacheReply.append(reply);
+        connect(&manager,&QNetworkAccessManager::finished,&manager,[&loop](QNetworkReply *reply){loop.quit();});
+        connect(qApp,&QGuiApplication::aboutToQuit,&manager, [&loop](){loop.quit();});
+        connect(reply,&QNetworkReply::uploadProgress,reply,[=](qint64 bytesSent, qint64 bytesTotal){
             onUploadProgress(callable,bytesSent,bytesTotal);
         });
         loop.exec();
@@ -274,7 +419,6 @@ void FluHttp::upload(QString url,QJSValue callable,QMap<QString, QVariant> param
         int status = reply->attribute(QNetworkRequest::HttpStatusCodeAttribute).toInt();
         QString errorString = reply->errorString();
         bool isSuccess = reply->error() == QNetworkReply::NoError;
-        _cache.removeOne(reply);
         reply->deleteLater();
         reply = nullptr;
         if (isSuccess) {
@@ -282,21 +426,16 @@ void FluHttp::upload(QString url,QJSValue callable,QMap<QString, QVariant> param
         }else{
             onError(callable,status,errorString,result);
         }
-        onFinish(callable);
+        onFinish(callable,request);
     });
 }
 
-QVariant FluHttp::invokeIntercept(const QVariant& params,const QVariant& headers,const QString& method){
-    QMap<QString, QVariant> requet = {
-        {"params",params},
-        {"headers",headers},
-        {"method",method}
-    };
+QVariant FluHttp::invokeIntercept(QMap<QString, QVariant> request){
     if(!FluApp::getInstance()->httpInterceptor()){
-        return requet;
+        return request;
     }
     QVariant target;
-    QMetaObject::invokeMethod(FluApp::getInstance()->httpInterceptor(), "onIntercept",Q_RETURN_ARG(QVariant,target),Q_ARG(QVariant, requet));
+    QMetaObject::invokeMethod(FluApp::getInstance()->httpInterceptor(), "onIntercept",Q_RETURN_ARG(QVariant,target),Q_ARG(QVariant, request));
     return target;
 }
 
@@ -320,54 +459,117 @@ void FluHttp::addHeaders(QNetworkRequest* request,const QMap<QString, QVariant>&
     }
 }
 
-void FluHttp::onStart(const QJSValue& callable){
-    MainThread::post([=](){
-        QJSValue onStart = callable.property("onStart");
-        onStart.call();
-    });
+QString FluHttp::readCache(const QString& httpId){
+    auto filePath = getCacheFilePath(httpId);
+    QString result;
+    QFile file(filePath);
+    if(!file.exists()){
+        return result;
+    }
+    if (file.open(QIODevice::ReadOnly)) {
+        QTextStream stream(&file);
+        result = FluTools::getInstance()->fromBase64(stream.readAll().toUtf8());
+    }
+    return result;
 }
 
-void FluHttp::onFinish(const QJSValue& callable){
-    MainThread::post([=](){
-        QJSValue onFinish = callable.property("onFinish");
-        onFinish.call();
-    });
+bool FluHttp::cacheExists(const QString& httpId){
+    return QFile(getCacheFilePath(httpId)).exists();
 }
 
-void FluHttp::onError(const QJSValue& callable,int status,QString errorString,QString result){
-    MainThread::post([=](){
-        QJSValue onError = callable.property("onError");
-        QJSValueList args;
-        args<<status<<errorString<<result;
-        onError.call(args);
-    });
+QString FluHttp::getCacheFilePath(const QString& httpId){
+    QDir dir = _cacheDir;
+    if (!dir.exists(_cacheDir)){
+        dir.mkpath(_cacheDir);
+    }
+    auto filePath = _cacheDir+"/"+httpId;
+    return filePath;
 }
 
-void FluHttp::onSuccess(const QJSValue& callable,QString result){
-    MainThread::post([=](){
-        QJSValueList args;
-        args<<result;
-        QJSValue onSuccess = callable.property("onSuccess");
-        onSuccess.call(args);
-    });
+void FluHttp::handleCache(const QString& httpId,const QString& result){
+    if(_cacheMode==FluHttpType::CacheMode::NoCache){
+        return;
+    }
+    auto filePath = getCacheFilePath(httpId);
+    QSharedPointer<QFile> file(new QFile(filePath));
+    QIODevice::OpenMode mode = QIODevice::WriteOnly|QIODevice::Truncate;
+    if (!file->open(mode))
+    {
+        return;
+    }
+    file->write(FluTools::getInstance()->toBase64(result).toUtf8());
 }
 
-void FluHttp::onDownloadProgress(const QJSValue& callable,qint64 recv, qint64 total){
-    MainThread::post([=](){
-        QJSValueList args;
-        args<<static_cast<double>(recv);
-        args<<static_cast<double>(total);
-        QJSValue onDownloadProgress = callable.property("onDownloadProgress");
-        onDownloadProgress.call(args);
-    });
+qreal FluHttp::getBreakPointProgress(HttpRequest* request){
+    request->method("download");
+    auto httpId = request->httpId();
+    QSharedPointer<QFile> file(new QFile(request->downloadSavePath()));
+    auto filePath = getCacheFilePath(httpId);
+    QSharedPointer<QFile> fileCache(new QFile(filePath));
+    if(fileCache->exists() && file->exists() && _breakPointDownload){
+        QJsonObject cacheInfo = QJsonDocument::fromJson(readCache(httpId).toUtf8()).object();
+        double fileSize = cacheInfo.value("fileSize").toDouble();
+        double contentLength = cacheInfo.value("contentLength").toDouble();
+        if(fileSize == contentLength && file->size() == contentLength){
+            return 1;
+        }
+        if(fileSize==file->size()){
+            return fileSize/contentLength;
+        }else{
+            return 0;
+        }
+    }else{
+        return 0;
+    }
 }
 
-void FluHttp::onUploadProgress(const QJSValue& callable,qint64 sent, qint64 total){
-    MainThread::post([=](){
-        QJSValueList args;
-        args<<static_cast<double>(sent);
-        args<<static_cast<double>(total);
-        QJSValue onUploadProgress = callable.property("onUploadProgress");
-        onUploadProgress.call(args);
-    });
+HttpRequest* FluHttp::newRequest(QString url){
+    HttpRequest* request = new HttpRequest(this);
+    request->url(url);
+    return request;
+}
+
+void FluHttp::onStart(QPointer<HttpCallable> callable){
+    if(callable){
+        Q_EMIT callable->start();
+    }
+}
+
+void FluHttp::onFinish(QPointer<HttpCallable> callable,HttpRequest* request){
+    if(callable){
+        Q_EMIT callable->finish();
+    }
+    if(request->parent()->inherits("FluHttp")){
+        request->deleteLater();
+    }
+}
+
+void FluHttp::onError(QPointer<HttpCallable> callable,int status,QString errorString,QString result){
+    if(callable){
+        Q_EMIT callable->error(status,errorString,result);
+    }
+}
+
+void FluHttp::onSuccess(QPointer<HttpCallable> callable,QString result){
+    if(callable){
+        Q_EMIT callable->success(result);
+    }
+}
+
+void FluHttp::onCache(QPointer<HttpCallable> callable,QString result){
+    if(callable){
+        Q_EMIT callable->cache(result);
+    }
+}
+
+void FluHttp::onDownloadProgress(QPointer<HttpCallable> callable,qint64 recv,qint64 total){
+    if(callable){
+        Q_EMIT callable->downloadProgress(recv,total);
+    }
+}
+
+void FluHttp::onUploadProgress(QPointer<HttpCallable> callable,qint64 sent,qint64 total){
+    if(callable){
+        Q_EMIT callable->uploadProgress(sent,total);
+    }
 }

src/FluHttp.h

@@ -7,36 +7,72 @@
 #include <QNetworkAccessManager>
 #include "stdafx.h"
 
+class HttpRequest : public QObject{
+    Q_OBJECT
+    Q_PROPERTY_AUTO(QString,url);
+    Q_PROPERTY_AUTO(QVariant,params);
+    Q_PROPERTY_AUTO(QVariant,headers);
+    Q_PROPERTY_AUTO(QString,method);
+    Q_PROPERTY_AUTO(QString,downloadSavePath);
+    QML_NAMED_ELEMENT(HttpRequest)
+public:
+    explicit HttpRequest(QObject *parent = nullptr);
+    QMap<QString, QVariant> toMap();
+    Q_INVOKABLE QString httpId();
+};
+
+class HttpCallable : public QObject{
+    Q_OBJECT
+    QML_NAMED_ELEMENT(HttpCallable)
+public:
+    explicit HttpCallable(QObject *parent = nullptr);
+    Q_SIGNAL void start();
+    Q_SIGNAL void finish();
+    Q_SIGNAL void error(int status,QString errorString,QString result);
+    Q_SIGNAL void success(QString result);
+    Q_SIGNAL void cache(QString result);
+    Q_SIGNAL void downloadProgress(qint64 recv, qint64 total);
+    Q_SIGNAL void uploadProgress(qint64 sent, qint64 total);
+};
+
 class FluHttp : public QObject
 {
     Q_OBJECT
     Q_PROPERTY_AUTO(int,retry);
     Q_PROPERTY_AUTO(int,timeout)
+    Q_PROPERTY_AUTO(int,cacheMode);
+    Q_PROPERTY_AUTO(QString,cacheDir);
+    Q_PROPERTY_AUTO(bool,breakPointDownload);
     QML_NAMED_ELEMENT(FluHttp)
 private:
-    QVariant invokeIntercept(const QVariant& params,const QVariant& headers,const QString& method);
-    void handleReply(QNetworkReply* reply);
+    QVariant invokeIntercept(QMap<QString, QVariant> request);
     void addQueryParam(QUrl* url,const QMap<QString, QVariant>& params);
     void addHeaders(QNetworkRequest* request,const QMap<QString, QVariant>& params);
-    void onStart(const QJSValue& callable);
-    void onFinish(const QJSValue& callable);
-    void onError(const QJSValue& callable,int status,QString errorString,QString result);
-    void onSuccess(const QJSValue& callable,QString result);
-    void onDownloadProgress(const QJSValue& callable,qint64 recv, qint64 total);
-    void onUploadProgress(const QJSValue& callable,qint64 recv, qint64 total);
+    void handleCache(const QString& httpId, const QString& result);
+    QString readCache(const QString& httpId);
+    bool cacheExists(const QString& httpId);
+    QString getCacheFilePath(const QString& httpId);
+    void onStart(QPointer<HttpCallable> callable);
+    void onFinish(QPointer<HttpCallable> callable,HttpRequest* request);
+    void onError(QPointer<HttpCallable> callable,int status,QString errorString,QString result);
+    void onSuccess(QPointer<HttpCallable> callable,QString result);
+    void onCache(QPointer<HttpCallable> callable,QString result);
+    void onDownloadProgress(QPointer<HttpCallable> callable,qint64 recv,qint64 total);
+    void onUploadProgress(QPointer<HttpCallable> callable,qint64 sent,qint64 total);
 public:
     explicit FluHttp(QObject *parent = nullptr);
     ~FluHttp();
-    //神坑！！！ 如果参数使用QVariantMap会有问题，在6.4.3版本中QML一调用就会编译失败。所以改用QMap<QString, QVariant>
-    Q_INVOKABLE void get(QString url,QJSValue callable,QMap<QString, QVariant> params= {},QMap<QString, QVariant> headers = {});
-    Q_INVOKABLE void post(QString url,QJSValue callable,QMap<QString, QVariant> params= {},QMap<QString, QVariant> headers = {});
-    Q_INVOKABLE void postString(QString url,QJSValue callable,QString params = "",QMap<QString, QVariant> headers = {});
-    Q_INVOKABLE void postJson(QString url,QJSValue callable,QMap<QString, QVariant> params = {},QMap<QString, QVariant> headers = {});
-    Q_INVOKABLE void download(QString url,QJSValue callable,QString filePath,QMap<QString, QVariant> params = {},QMap<QString, QVariant> headers = {});
-    Q_INVOKABLE void upload(QString url,QJSValue callable,QMap<QString, QVariant> params = {},QMap<QString, QVariant> headers = {});
+    Q_INVOKABLE  HttpRequest* newRequest(QString url = "");
+    Q_INVOKABLE void get(HttpRequest* request,HttpCallable* callable);
+    Q_INVOKABLE void post(HttpRequest* request,HttpCallable* callable);
+    Q_INVOKABLE void postString(HttpRequest* request,HttpCallable* callable);
+    Q_INVOKABLE void postJson(HttpRequest* request,HttpCallable* callable);
+    Q_INVOKABLE void download(HttpRequest* request,HttpCallable* callable);
+    Q_INVOKABLE void upload(HttpRequest* request,HttpCallable* callable);
+    Q_INVOKABLE qreal getBreakPointProgress(HttpRequest* request);
     Q_INVOKABLE void cancel();
 private:
-    QList<QPointer<QNetworkReply>> _cache;
+    QList<QPointer<QNetworkReply>> _cacheReply;
 };
 
 #endif // FLUHTTP_H

src/FluTheme.cpp

@@ -31,7 +31,7 @@ FluTheme::FluTheme(QObject *parent)
     });
     primaryColor(FluColors::getInstance()->Blue());
     nativeText(false);
-    enableAnimation(false);
+    enableAnimation(true);
     darkMode(FluThemeType::DarkMode::Light);
     _systemDark = systemDark();
     qApp->installEventFilter(this);

src/FluTools.cpp

@@ -6,6 +6,9 @@
 #include <QScreen>
 #include <QColor>
 #include <QFileInfo>
+#include <QProcess>
+#include <QDir>
+#include <QCryptographicHash>
 #include <QTextDocument>
 
 FluTools* FluTools::m_instance = nullptr;
@@ -128,3 +131,48 @@ QUrl FluTools::getUrlByFilePath(const QString& path){
 QColor FluTools::colorAlpha(const QColor& color,qreal alpha){
     return QColor(color.red(),color.green(),color.blue(),255*alpha);
 }
+
+QString FluTools::md5(QString text)
+{
+    return QCryptographicHash::hash(text.toUtf8(), QCryptographicHash::Md5).toHex();
+}
+
+QString FluTools::toBase64(QString text)
+{
+    return text.toUtf8().toBase64();
+}
+
+QString FluTools::fromBase64(QString text)
+{
+    return QByteArray::fromBase64(text.toUtf8());
+}
+
+bool FluTools::removeDir(QString dirPath){
+    QDir qDir(dirPath);
+    return qDir.removeRecursively();
+}
+
+bool FluTools::removeFile(QString filePath){
+    QFile file(filePath);
+    return file.remove();
+}
+
+QString FluTools::sha256(QString text){
+    return QCryptographicHash::hash(text.toUtf8(), QCryptographicHash::Sha256).toHex();
+}
+
+void FluTools::showFileInFolder(QString path){
+#if defined(Q_OS_WIN)
+    QProcess::startDetached("explorer.exe", {"/select,", QDir::toNativeSeparators(path)});
+#endif
+#if defined(Q_OS_LINUX)
+    QFileInfo fileInfo(path);
+    auto process = "xdg-open";
+    auto arguments = { fileInfo.absoluteDir().absolutePath() };
+    QProcess::startDetached(process, arguments);
+#endif
+#if defined(Q_OS_MACOS)
+    QProcess::execute("/usr/bin/osascript", {"-e", "tell application \"Finder\" to reveal POSIX file \"" + path + "\""});
+    QProcess::execute("/usr/bin/osascript", {"-e", "tell application \"Finder\" to activate"});
+#endif
+}

src/FluTools.h

@@ -144,6 +144,55 @@ public:
      */
     Q_INVOKABLE QColor colorAlpha(const QColor&,qreal alpha);
 
+    /**
+     * @brief md5
+     * @param text
+     * @return
+     */
+    Q_INVOKABLE QString md5(QString text);
+
+    /**
+     * @brief sha256
+     * @param text
+     * @return
+     */
+    Q_INVOKABLE QString sha256(QString text);
+
+    /**
+     * @brief toBase64
+     * @param text
+     * @return
+     */
+    Q_INVOKABLE QString toBase64(QString text);
+
+    /**
+     * @brief fromBase64
+     * @param text
+     * @return
+     */
+    Q_INVOKABLE QString fromBase64(QString text);
+
+
+    /**
+     * @brief removeDir
+     * @param dirPath
+     * @return
+     */
+    Q_INVOKABLE bool removeDir(QString dirPath);
+
+    /**
+     * @brief removeFile
+     * @param filePath
+     * @return
+     */
+    Q_INVOKABLE bool removeFile(QString filePath);
+
+    /**
+     * @brief showFileInFolder
+     * @param path
+     */
+    Q_INVOKABLE void showFileInFolder(QString path);
+
 };
 
 #endif // FLUTOOLS_H

src/Qt5/imports/FluentUI/Controls/FluCarousel.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.15
 import FluentUI 1.0
 
 FluItem {
+    property bool autoPlay: true
     property int loopTime: 2000
     property var model
     property Component delegate
@@ -24,6 +25,7 @@ FluItem {
     QtObject{
         id:d
         property bool flagXChanged: true
+        property bool isAnimEnable: control.autoPlay && list_view.count>3
         function setData(data){
             if(!data){
                 return
@@ -35,7 +37,9 @@ FluItem {
             list_view.highlightMoveDuration = 0
             list_view.currentIndex = 1
             list_view.highlightMoveDuration = 250
-            timer_run.restart()
+            if(d.isAnimEnable){
+                timer_run.restart()
+            }
         }
     }
     ListView{
@@ -52,6 +56,7 @@ FluItem {
         Component.onCompleted: {
             d.setData(control.model)
         }
+        interactive: list_view.count>3
         Connections{
             target: control
             function onModelChanged(){
@@ -182,20 +187,20 @@ FluItem {
     Timer{
         id:timer_run
         interval: control.loopTime
-        repeat: true
+        repeat: d.isAnimEnable
         onTriggered: {
             list_view.highlightMoveDuration = 250
             list_view.currentIndex = list_view.currentIndex+1
             timer_anim.start()
         }
     }
-
     function changedIndex(index){
         d.flagXChanged = true
         timer_run.stop()
-         list_view.currentIndex = index
+        list_view.currentIndex = index
         d.flagXChanged = false
-        timer_run.restart()
+        if(d.isAnimEnable){
+            timer_run.restart()
+        }
     }
-
 }

src/Qt5/imports/FluentUI/Controls/FluContentDialog.qml

@@ -18,7 +18,7 @@ FluPopup {
     property int buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
     focus: true
     implicitWidth: 400
-    implicitHeight: text_title.height + text_message.height + layout_actions.height
+    implicitHeight: text_title.height + sroll_message.height + layout_actions.height
     Rectangle {
         id:layout_content
         anchors.fill: parent
@@ -38,28 +38,41 @@ FluPopup {
                 right: parent.right
             }
         }
-        FluText{
-            id:text_message
-            font: FluTextStyle.Body
-            wrapMode: Text.WrapAnywhere
-            text:message
-            topPadding: 14
-            leftPadding: 20
-            rightPadding: 20
-            bottomPadding: 14
+
+        Flickable{
+            id:sroll_message
+            contentWidth: width
             anchors{
                 top:text_title.bottom
                 left: parent.left
                 right: parent.right
             }
+            contentHeight: text_message.height
+            clip: true
+            height: Math.min(text_message.height,300)
+            ScrollBar.vertical: FluScrollBar {}
+
+            FluText{
+                id:text_message
+                font: FluTextStyle.Body
+                wrapMode: Text.WrapAnywhere
+                text:message
+                width: parent.width
+                topPadding: 14
+                leftPadding: 20
+                rightPadding: 20
+                bottomPadding: 14
+            }
+
         }
+
         Rectangle{
             id:layout_actions
             height: 68
             radius: 5
             color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
             anchors{
-                top:text_message.bottom
+                top:sroll_message.bottom
                 left: parent.left
                 right: parent.right
             }
@@ -127,3 +140,4 @@ FluPopup {
         }
     }
 }
+

src/Qt5/imports/FluentUI/Controls/FluNavigationView.qml

@@ -170,17 +170,17 @@ Item {
                 MouseArea{
                     anchors.fill: parent
                     acceptedButtons: Qt.RightButton
-                    onClicked: function(mouse){
-                        if (mouse.button === Qt.RightButton) {
-                            if(model.menuDelegate){
-                                loader_item_menu.sourceComponent = model.menuDelegate
-                                loader_item_menu.item.popup()
+                    onClicked:
+                        (mouse) =>{
+                            if (mouse.button === Qt.RightButton) {
+                                if(model.menuDelegate){
+                                    loader_item_menu.sourceComponent = model.menuDelegate
+                                    loader_item_menu.item.popup()
+                                }
                             }
                         }
-                    }
                     z:-100
                 }
-
                 onClicked: {
                     if(d.isCompactAndNotPanel){
                         control_popup.showPopup(Qt.point(50,mapToItem(control,0,0).y),model.children)
@@ -356,7 +356,7 @@ Item {
                             ignoreUnknownSignals:true
                             function onActiveFocusChanged(focus){
                                 if(focus === false){
-                                   model.showEdit = false
+                                    model.showEdit = false
                                 }
                             }
                             function onCommit(text){
@@ -393,6 +393,7 @@ Item {
             }
             width: layout_list.width
             FluControl{
+                property var modelData: model
                 id:item_control
                 anchors{
                     top: parent.top
@@ -404,43 +405,59 @@ Item {
                     leftMargin: 6
                     rightMargin: 6
                 }
+                Drag.active: item_mouse.drag.active
+                Drag.hotSpot.x: item_control.width / 2
+                Drag.hotSpot.y: item_control.height / 2
+                Drag.dragType: Drag.Automatic
                 MouseArea{
+                    id:item_mouse
                     anchors.fill: parent
-                    acceptedButtons:  Qt.RightButton
-                    onClicked: function(mouse){
-                        if (mouse.button === Qt.RightButton) {
-                            if(model.menuDelegate){
-                                loader_item_menu.sourceComponent = model.menuDelegate
-                                loader_item_menu.item.popup();
-                            }
-                        }
+                    acceptedButtons: Qt.RightButton | Qt.LeftButton
+                    drag.target: item_control
+                    onPositionChanged: {
+                        parent.grabToImage(function(result) {
+                            parent.Drag.imageSource = result.url;
+                        })
                     }
-                    z:-100
-                }
-                onClicked: {
-                    if(type === 0){
-                        if(model.tapFunc){
-                            model.tapFunc()
-                        }else{
-                            nav_list.currentIndex = _idx
-                            layout_footer.currentIndex = -1
-                            model.tap()
-                            if(d.isMinimal || d.isCompact){
-                                d.enableNavigationPanel = false
+                    drag.onActiveChanged:
+                        if (active) {
+                            parent.grabToImage(function(result) {
+                                parent.Drag.imageSource = result.url;
+                            })
+                        }
+                    onClicked:
+                        (mouse)=>{
+                            if (mouse.button === Qt.RightButton) {
+                                if(model.menuDelegate){
+                                    loader_item_menu.sourceComponent = model.menuDelegate
+                                    loader_item_menu.item.popup();
+                                }
+                            }else{
+                                if(type === 0){
+                                    if(model.onTapListener){
+                                        model.onTapListener()
+                                    }else{
+                                        nav_list.currentIndex = _idx
+                                        layout_footer.currentIndex = -1
+                                        model.tap()
+                                        if(d.isMinimal || d.isCompact){
+                                            d.enableNavigationPanel = false
+                                        }
+                                    }
+                                }else{
+                                    if(model.onTapListener){
+                                        model.onTapListener()
+                                    }else{
+                                        nav_list.currentIndex = nav_list.count-layout_footer.count+_idx
+                                        layout_footer.currentIndex = _idx
+                                        model.tap()
+                                        if(d.isMinimal || d.isCompact){
+                                            d.enableNavigationPanel = false
+                                        }
+                                    }
+                                }
                             }
                         }
-                    }else{
-                        if(model.tapFunc){
-                            model.tapFunc()
-                        }else{
-                            nav_list.currentIndex = nav_list.count-layout_footer.count+_idx
-                            layout_footer.currentIndex = _idx
-                            model.tap()
-                            if(d.isMinimal || d.isCompact){
-                                d.enableNavigationPanel = false
-                            }
-                        }
-                    }
                 }
                 Rectangle{
                     radius: 4
@@ -518,7 +535,7 @@ Item {
                         }
                         elide: Text.ElideRight
                         color:{
-                            if(item_control.pressed){
+                            if(item_mouse.pressed){
                                 return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
                             }
                             return FluTheme.dark ? FluColors.White : FluColors.Grey220
@@ -555,7 +572,7 @@ Item {
                             ignoreUnknownSignals:true
                             function onActiveFocusChanged(focus){
                                 if(focus === false){
-                                   model.showEdit = false
+                                    model.showEdit = false
                                 }
                             }
                             function onCommit(text){
@@ -735,7 +752,12 @@ Item {
                 id:nav_stack2
                 anchors.fill: nav_stack
                 clip: true
-                visible: FluPageType.SingleInstance === nav_stack.currentItem.launchMode
+                visible: {
+                    if(!nav_stack.currentItem){
+                        return false
+                    }
+                    return FluPageType.SingleInstance === nav_stack.currentItem.launchMode
+                }
             }
             function navStack(){
                 return nav_stack
@@ -745,7 +767,13 @@ Item {
             }
         }
     }
-
+    DropArea{
+        anchors.fill: loader_content
+        onDropped:
+            (drag)=>{
+                drag.source.modelData.dropped(drag)
+            }
+    }
     Loader{
         id:loader_content
         anchors{
@@ -880,6 +908,12 @@ Item {
             ListView{
                 id:nav_list
                 clip: true
+                displaced: Transition {
+                    NumberAnimation {
+                        properties: "x,y"
+                        easing.type: Easing.OutQuad
+                    }
+                }
                 anchors.fill: parent
                 model:d.handleItems()
                 boundsBehavior: ListView.StopAtBounds
@@ -899,7 +933,6 @@ Item {
                     }
                 }
                 currentIndex: -1
-
                 delegate: Loader{
                     property var model: modelData
                     property var _idx: index
@@ -1051,8 +1084,8 @@ Item {
                         }
                     }
                     onClicked: {
-                        if(modelData.tapFunc){
-                            modelData.tapFunc()
+                        if(modelData.onTapListener){
+                            modelData.onTapListener()
                         }else{
                             modelData.tap()
                             nav_list.currentIndex = _idx

src/Qt5/imports/FluentUI/Controls/FluPaneItem.qml

@@ -9,6 +9,7 @@ QtObject {
     property string title
     property int order : 0
     property int icon
+    property var url
     property Component cusIcon
     property Component infoBadge
     property bool recentlyAdded: false
@@ -18,8 +19,9 @@ QtObject {
     property var parent
     property int count: 0
     signal tap
-    property var tapFunc
+    property var onTapListener
     property Component menuDelegate
     property Component editDelegate
     property bool showEdit
+    signal dropped(var drag)
 }

src/Qt5/imports/FluentUI/Controls/FluProgressButton.qml

@@ -0,0 +1,134 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+
+Button {
+    property real progress
+    property bool disabled: false
+    property string contentDescription: ""
+    QtObject{
+        id:d
+        property bool checked: rect_back.height == background.height
+    }
+    property color normalColor: {
+        if(d.checked){
+            return FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
+        }else{
+            return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
+        }
+    }
+    property color hoverColor: {
+        if(d.checked){
+            return FluTheme.dark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
+        }else{
+            return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
+        }
+    }
+    property color disableColor: {
+        if(d.checked){
+            return FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
+        }else{
+            return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
+        }
+    }
+    property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2)
+    Accessible.role: Accessible.Button
+    Accessible.name: control.text
+    Accessible.description: contentDescription
+    Accessible.onPressAction: control.clicked()
+    focusPolicy:Qt.TabFocus
+    id: control
+    enabled: !disabled
+    horizontalPadding:12
+    background: FluItem{
+        implicitWidth: 28
+        implicitHeight: 28
+        radius: [4,4,4,4]
+        Rectangle{
+            anchors.fill: parent
+            border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
+            border.width: d.checked ? 0 : 1
+            radius: 4
+            color:{
+                if(!enabled){
+                    return disableColor
+                }
+                if(d.checked){
+                    if(pressed){
+                        return pressedColor
+                    }
+                }
+                return hovered ? hoverColor :normalColor
+            }
+        }
+        Rectangle{
+            id:rect_back
+            width: parent.width  * control.progress
+            height: control.progress === 1 ? background.height : 3
+            visible: !d.checked
+            color: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
+            anchors.bottom: parent.bottom
+            Behavior on height{
+                enabled: control.progress !== 1
+                SequentialAnimation {
+                    PauseAnimation {
+                        duration: FluTheme.enableAnimation ? 167 : 0
+                    }
+                    NumberAnimation{
+                        duration: FluTheme.enableAnimation ? 167 : 0
+                        from: 3
+                        to: background.height
+                    }
+                }
+            }
+            Behavior on width{
+                NumberAnimation{
+                    duration: 167
+                }
+            }
+        }
+        FluFocusRectangle{
+            visible: control.activeFocus
+            radius:4
+        }
+    }
+    contentItem: FluText {
+        text: control.text
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        color: {
+            if(d.checked){
+                if(FluTheme.dark){
+                    if(!enabled){
+                        return Qt.rgba(173/255,173/255,173/255,1)
+                    }
+                    return Qt.rgba(0,0,0,1)
+                }else{
+                    return Qt.rgba(1,1,1,1)
+                }
+            }else{
+                if(FluTheme.dark){
+                    if(!enabled){
+                        return Qt.rgba(131/255,131/255,131/255,1)
+                    }
+                    if(!d.checked){
+                        if(pressed){
+                            return Qt.rgba(162/255,162/255,162/255,1)
+                        }
+                    }
+                    return Qt.rgba(1,1,1,1)
+                }else{
+                    if(!enabled){
+                        return Qt.rgba(160/255,160/255,160/255,1)
+                    }
+                    if(!d.checked){
+                        if(pressed){
+                            return Qt.rgba(96/255,96/255,96/255,1)
+                        }
+                    }
+                    return Qt.rgba(0,0,0,1)
+                }
+            }
+        }
+    }
+}

src/Qt5/imports/FluentUI/Controls/FluRangeSlider.qml

@@ -0,0 +1,120 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Templates 2.15 as T
+import FluentUI 1.0
+
+T.RangeSlider {
+    id: control
+    property bool tooltipEnabled: true
+    property bool isTipInt: true
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            first.implicitHandleWidth + leftPadding + rightPadding,
+                            second.implicitHandleWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             first.implicitHandleHeight + topPadding + bottomPadding,
+                             second.implicitHandleHeight + topPadding + bottomPadding)
+    padding: 6
+    first.value: 0
+    second.value: 100
+    stepSize: 1
+    from: 0
+    to:100
+    snapMode: RangeSlider.SnapAlways
+    first.handle: Rectangle {
+        x: control.leftPadding + (control.horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height))
+        implicitWidth: 24
+        implicitHeight: 24
+        radius: width / 2
+        color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
+        FluShadow{
+            radius: 12
+        }
+        Rectangle{
+            width: 24
+            height: 24
+            radius: 12
+            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
+            anchors.centerIn: parent
+            scale: {
+                if(control.first.pressed){
+                    return 4/10
+                }
+                return control.first.hovered ? 6/10 : 5/10
+            }
+            Behavior on scale {
+                enabled: FluTheme.enableAnimation
+                NumberAnimation{
+                    duration: 167
+                    easing.type: Easing.OutCubic
+                }
+            }
+        }
+    }
+
+    second.handle: Rectangle {
+        x: control.leftPadding + (control.horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height))
+        implicitWidth: 24
+        implicitHeight: 24
+        radius: width / 2
+        color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
+        FluShadow{
+            radius: 12
+        }
+        Rectangle{
+            width: 24
+            height: 24
+            radius: 12
+            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
+            anchors.centerIn: parent
+            scale: {
+                if(control.second.pressed){
+                    return 4/10
+                }
+                return control.second.hovered ? 6/10 : 5/10
+            }
+            Behavior on scale {
+                enabled: FluTheme.enableAnimation
+                NumberAnimation{
+                    duration: 167
+                    easing.type: Easing.OutCubic
+                }
+            }
+        }
+    }
+
+    background: Item {
+        x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0)
+        implicitWidth: control.horizontal ? 180 : 6
+        implicitHeight: control.horizontal ? 6 : 180
+        width: control.horizontal ? control.availableWidth : implicitWidth
+        height: control.horizontal ? implicitHeight : control.availableHeight
+        scale: control.horizontal && control.mirrored ? -1 : 1
+        Rectangle{
+            anchors.fill: parent
+            anchors.margins: 1
+            radius: 2
+            color:FluTheme.dark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1)
+        }
+        Rectangle {
+            x: control.horizontal ? control.first.position * parent.width + 3 : 0
+            y: control.horizontal ? 0 : control.second.visualPosition * parent.height + 3
+            width: control.horizontal ? control.second.position * parent.width - control.first.position * parent.width - 6 : 6
+            height: control.horizontal ? 6 : control.second.position * parent.height - control.first.position * parent.height - 6
+            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
+        }
+    }
+    FluTooltip{
+        parent: control.first.handle
+        visible: control.tooltipEnabled && (control.first.pressed || control.first.hovered)
+        text:String(isTipInt?Math.round(control.first.value):control.first.value)
+    }
+    FluTooltip{
+        parent: control.second.handle
+        visible: control.tooltipEnabled && (control.second.pressed || control.second.hovered)
+        text:String(isTipInt?Math.round(control.second.value):control.second.value)
+    }
+}
+

src/Qt5/imports/FluentUI/Controls/FluScreenshot.qml

@@ -26,7 +26,7 @@ Item{
     Component{
         id:com_screen
         Window{
-            property bool isZeroPos: screenshot.start == Qt.point(0,0) && screenshot.end == Qt.point(0,0)
+            property bool isZeroPos: screenshot.start.x === 0 && screenshot.start.y === 0 && screenshot.end.x === 0 && screenshot.end.y === 0
             id:window_screen
             flags: Qt.FramelessWindowHint | Qt.WindowStaysOnTopHint
             x:-1
@@ -41,7 +41,7 @@ Item{
                 }
             }
             Component.onCompleted: {
-                setGeometry(0,0,screenshot_background.width,screenshot_background.height)
+                setGeometry(0,0,screenshot_background.width,screenshot_background.height+1)
             }
             ScreenshotBackground{
                 id:screenshot_background
@@ -123,7 +123,7 @@ Item{
                 MouseArea{
                     property point clickPos: Qt.point(0,0)
                     anchors.fill: parent
-                    cursorShape: Qt.SizeAllCursor
+                    cursorShape: d.isEdit ? Qt.ArrowCursor : Qt.SizeAllCursor
                     onPressed:
                         (mouse)=>{
                             clickPos = Qt.point(mouse.x, mouse.y)
@@ -134,7 +134,7 @@ Item{
                             var w = Math.abs(screenshot.end.x - screenshot.start.x)
                             var h = Math.abs(screenshot.end.y - screenshot.start.y)
                             var x = Math.min(Math.max(rect_capture.x + delta.x,0),window_screen.width-w)
-                            var y =Math.min(Math.max(rect_capture.y + delta.y,0),window_screen.height-h)
+                            var y = Math.min(Math.max(rect_capture.y + delta.y,0),window_screen.height-h)
                             screenshot.start = Qt.point(x,y)
                             screenshot.end = Qt.point(x+w,y+h)
                         }
@@ -477,7 +477,7 @@ Item{
                 width: 100
                 height: 40
                 visible: {
-                    if(screenshot.start === Qt.point(0,0) && screenshot.end === Qt.point(0,0)){
+                    if(isZeroPos){
                         return false
                     }
                     if(d.enablePosition){

src/Qt5/imports/FluentUI/Controls/FluSlider.qml

@@ -67,7 +67,7 @@ T.Slider {
     }
     FluTooltip{
         parent: control.handle
-        visible: control.tooltipEnabled && control.pressed
+        visible: control.tooltipEnabled && (control.pressed || control.hovered)
         text:String(control.value)
     }
 }

src/Qt5/imports/FluentUI/Controls/FluStaggeredView.qml

@@ -0,0 +1,68 @@
+import QtQuick 2.15
+
+Item {
+    property int itemWidth : 200
+    property alias model: rep.model
+    property alias delegate: rep.delegate
+    property int rowSpacing: 8
+    property int colSpacing: 8
+    id: control
+    QtObject{
+        id:d
+        property int cellWidth : itemWidth+rowSpacing
+        property int colCount: {
+            var cols = parseInt(control.width/cellWidth)
+            return cols>0?cols:1
+        }
+        property var colsHeightArr: []
+        property int maxHeight: 0
+        property var itemsInRep: []
+        onMaxHeightChanged: {
+            control.implicitHeight = maxHeight
+        }
+        onColCountChanged: {
+            refresh()
+        }
+        function refresh(){
+            d.colsHeightArr = []
+            var count = itemsInRep.length
+            for(var i=0; i<count; ++i){
+                addToFall(i, itemsInRep[i])
+            }
+        }
+        function addToFall(index, item){
+            var top = 0,left = 0
+            if(index<colCount){
+                colsHeightArr.push(item.height)
+                left = index * cellWidth
+            }else{
+                var minHeight = Math.min.apply(null, colsHeightArr)
+                var minIndex = colsHeightArr.indexOf(minHeight)
+                top = minHeight + control.colSpacing
+                left = minIndex * cellWidth
+                colsHeightArr[minIndex] = top + item.height
+            }
+            item.x = left
+            item.y = top
+            item.width = control.itemWidth
+            maxHeight = Math.max.apply(null, colsHeightArr)
+        }
+    }
+    Repeater {
+        id: rep
+        onCountChanged: {
+            d.refresh()
+        }
+        onItemAdded:
+            (index,item)=>  {
+                d.addToFall(index, item)
+                d.itemsInRep.push(item)
+            }
+    }
+    function clear(){
+        d.maxHeight = 0
+        d.colsHeightArr = []
+        d.itemsInRep = []
+        model.clear()
+    }
+}

src/Qt5/imports/FluentUI/Controls/FluStatusView.qml

@@ -1,4 +1,5 @@
 import QtQuick 2.15
+import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import FluentUI 1.0

src/Qt5/imports/FluentUI/Controls/FluToggleButton.qml

@@ -52,7 +52,7 @@ Button {
         border.width: checked ? 0 : 1
         FluFocusRectangle{
             visible: control.activeFocus
-            radius:8
+            radius:4
         }
         color:{
             if(!enabled){

src/Qt5/imports/FluentUI/Controls/FluTour.qml

@@ -96,24 +96,22 @@ Popup{
             ctx.globalCompositeOperation = 'destination-out'
             ctx.fillStyle = 'black'
             var rect = Qt.rect(d.pos.x-control.targetMargins,d.pos.y-control.targetMargins, d.target.width+control.targetMargins*2, d.target.height+control.targetMargins*2)
-            ctx.fillRect(rect.x,rect.y,rect.width,rect.height)
+            drawRoundedRect(rect,2,ctx)
             ctx.restore()
         }
-        //Todo
         function drawRoundedRect(rect, r, ctx) {
-            var ptA = Qt.point(rect.x + r, rect.y)
-            var ptB = Qt.point(rect.x + rect.width, rect.y)
-            var ptC = Qt.point(rect.x + rect.width, rect.y + rect.height)
-            var ptD = Qt.point(rect.x, rect.y + rect.height)
-            var ptE = Qt.point(rect.x, rect.y)
-            ctx.beginPath()
-            ctx.moveTo(ptA.x, ptA.y)
-            ctx.arcTo(ptB.x, ptB.y, ptC.x, ptC.y, r)
-            ctx.arcTo(ptC.x, ptC.y, ptD.x, ptD.y, r)
-            ctx.arcTo(ptD.x, ptD.y, ptE.x, ptE.y, r)
-            ctx.arcTo(ptE.x, ptE.y, ptA.x, ptA.y, r)
+            ctx.beginPath();
+            ctx.moveTo(rect.x + r, rect.y);
+            ctx.lineTo(rect.x + rect.width - r, rect.y);
+            ctx.arcTo(rect.x + rect.width, rect.y, rect.x + rect.width, rect.y + r, r);
+            ctx.lineTo(rect.x + rect.width, rect.y + rect.height - r);
+            ctx.arcTo(rect.x + rect.width, rect.y + rect.height, rect.x + rect.width - r, rect.y + rect.height, r);
+            ctx.lineTo(rect.x + r, rect.y + rect.height);
+            ctx.arcTo(rect.x, rect.y + rect.height, rect.x, rect.y + rect.height - r, r);
+            ctx.lineTo(rect.x, rect.y + r);
+            ctx.arcTo(rect.x, rect.y, rect.x + r, rect.y, r);
+            ctx.closePath();
             ctx.fill()
-            ctx.closePath()
         }
     }
     FluArea{

src/Qt5/imports/FluentUI/Controls/FluWindow.qml

@@ -69,6 +69,8 @@ Window {
             id:popup_loading
             modal:true
             focus: true
+            width: window.width
+            height: window.height
             anchors.centerIn: Overlay.overlay
             closePolicy: {
                 if(cancel){
@@ -76,17 +78,38 @@ Window {
                 }
                 return Popup.NoAutoClose
             }
-            Overlay.modal: Rectangle {
-                color: "#44000000"
-            }
+            Overlay.modal: Item {}
             onVisibleChanged: {
                 if(!visible){
                     loader_loading.sourceComponent = undefined
                 }
             }
-            visible: true
-            background: Item{}
+            padding: 0
+            opacity: 0
+            visible:true
+            Behavior on opacity {
+                SequentialAnimation {
+                    PauseAnimation {
+                        duration: 88
+                    }
+                    NumberAnimation{
+                        duration:  167
+                    }
+                }
+            }
+            Component.onCompleted: {
+                opacity = 1
+            }
+            background: Rectangle{
+                color:"#44000000"
+            }
             contentItem: Item{
+                MouseArea{
+                    anchors.fill: parent
+                    onClicked: {
+                        popup_loading.visible = false
+                    }
+                }
                 ColumnLayout{
                     spacing: 8
                     anchors.centerIn: parent

src/Qt5/imports/FluentUI/plugins.qmltypes

@@ -4,7 +4,7 @@ import QtQuick.tooling 1.2
 // It is used for QML tooling purposes only.
 //
 // This file was auto-generated by:
-// 'qmlplugindump -nonrelocatable FluentUI 1.0 D:/QtProjects/build-FluentUI-Desktop_Qt_5_15_2_MSVC2019_64bit-Release/src'
+// 'qmlplugindump -nonrelocatable FluentUI 1.0 D:\QtProjects\build-FluentUI-Desktop_Qt_5_15_2_MSVC2019_64bit-Release\src'
 
 Module {
     dependencies: ["QtQuick 2.0"]
@@ -70,116 +70,49 @@ Module {
         exportMetaObjectRevisions: [0]
         Property { name: "retry"; type: "int" }
         Property { name: "timeout"; type: "int" }
+        Property { name: "cacheMode"; type: "int" }
+        Property { name: "cacheDir"; type: "string" }
+        Property { name: "breakPointDownload"; type: "bool" }
         Method {
-            name: "get"
+            name: "newRequest"
+            type: "HttpRequest*"
             Parameter { name: "url"; type: "string" }
-            Parameter { name: "callable"; type: "QJSValue" }
-            Parameter { name: "params"; type: "QVariantMap" }
-            Parameter { name: "headers"; type: "QVariantMap" }
         }
+        Method { name: "newRequest"; type: "HttpRequest*" }
         Method {
             name: "get"
-            Parameter { name: "url"; type: "string" }
-            Parameter { name: "callable"; type: "QJSValue" }
-            Parameter { name: "params"; type: "QVariantMap" }
-        }
-        Method {
-            name: "get"
-            Parameter { name: "url"; type: "string" }
-            Parameter { name: "callable"; type: "QJSValue" }
+            Parameter { name: "request"; type: "HttpRequest"; isPointer: true }
+            Parameter { name: "callable"; type: "HttpCallable"; isPointer: true }
         }
         Method {
             name: "post"
-            Parameter { name: "url"; type: "string" }
-            Parameter { name: "callable"; type: "QJSValue" }
-            Parameter { name: "params"; type: "QVariantMap" }
-            Parameter { name: "headers"; type: "QVariantMap" }
-        }
-        Method {
-            name: "post"
-            Parameter { name: "url"; type: "string" }
-            Parameter { name: "callable"; type: "QJSValue" }
-            Parameter { name: "params"; type: "QVariantMap" }
-        }
-        Method {
-            name: "post"
-            Parameter { name: "url"; type: "string" }
-            Parameter { name: "callable"; type: "QJSValue" }
+            Parameter { name: "request"; type: "HttpRequest"; isPointer: true }
+            Parameter { name: "callable"; type: "HttpCallable"; isPointer: true }
         }
         Method {
             name: "postString"
-            Parameter { name: "url"; type: "string" }
-            Parameter { name: "callable"; type: "QJSValue" }
-            Parameter { name: "params"; type: "string" }
-            Parameter { name: "headers"; type: "QVariantMap" }
-        }
-        Method {
-            name: "postString"
-            Parameter { name: "url"; type: "string" }
-            Parameter { name: "callable"; type: "QJSValue" }
-            Parameter { name: "params"; type: "string" }
-        }
-        Method {
-            name: "postString"
-            Parameter { name: "url"; type: "string" }
-            Parameter { name: "callable"; type: "QJSValue" }
+            Parameter { name: "request"; type: "HttpRequest"; isPointer: true }
+            Parameter { name: "callable"; type: "HttpCallable"; isPointer: true }
         }
         Method {
             name: "postJson"
-            Parameter { name: "url"; type: "string" }
-            Parameter { name: "callable"; type: "QJSValue" }
-            Parameter { name: "params"; type: "QVariantMap" }
-            Parameter { name: "headers"; type: "QVariantMap" }
-        }
-        Method {
-            name: "postJson"
-            Parameter { name: "url"; type: "string" }
-            Parameter { name: "callable"; type: "QJSValue" }
-            Parameter { name: "params"; type: "QVariantMap" }
-        }
-        Method {
-            name: "postJson"
-            Parameter { name: "url"; type: "string" }
-            Parameter { name: "callable"; type: "QJSValue" }
+            Parameter { name: "request"; type: "HttpRequest"; isPointer: true }
+            Parameter { name: "callable"; type: "HttpCallable"; isPointer: true }
         }
         Method {
             name: "download"
-            Parameter { name: "url"; type: "string" }
-            Parameter { name: "callable"; type: "QJSValue" }
-            Parameter { name: "filePath"; type: "string" }
-            Parameter { name: "params"; type: "QVariantMap" }
-            Parameter { name: "headers"; type: "QVariantMap" }
-        }
-        Method {
-            name: "download"
-            Parameter { name: "url"; type: "string" }
-            Parameter { name: "callable"; type: "QJSValue" }
-            Parameter { name: "filePath"; type: "string" }
-            Parameter { name: "params"; type: "QVariantMap" }
-        }
-        Method {
-            name: "download"
-            Parameter { name: "url"; type: "string" }
-            Parameter { name: "callable"; type: "QJSValue" }
-            Parameter { name: "filePath"; type: "string" }
+            Parameter { name: "request"; type: "HttpRequest"; isPointer: true }
+            Parameter { name: "callable"; type: "HttpCallable"; isPointer: true }
         }
         Method {
             name: "upload"
-            Parameter { name: "url"; type: "string" }
-            Parameter { name: "callable"; type: "QJSValue" }
-            Parameter { name: "params"; type: "QVariantMap" }
-            Parameter { name: "headers"; type: "QVariantMap" }
+            Parameter { name: "request"; type: "HttpRequest"; isPointer: true }
+            Parameter { name: "callable"; type: "HttpCallable"; isPointer: true }
         }
         Method {
-            name: "upload"
-            Parameter { name: "url"; type: "string" }
-            Parameter { name: "callable"; type: "QJSValue" }
-            Parameter { name: "params"; type: "QVariantMap" }
-        }
-        Method {
-            name: "upload"
-            Parameter { name: "url"; type: "string" }
-            Parameter { name: "callable"; type: "QJSValue" }
+            name: "getBreakPointProgress"
+            type: "double"
+            Parameter { name: "request"; type: "HttpRequest"; isPointer: true }
         }
         Method { name: "cancel" }
     }
@@ -189,6 +122,21 @@ Module {
         exports: ["FluentUI/FluHttpInterceptor 1.0"]
         exportMetaObjectRevisions: [0]
     }
+    Component {
+        name: "FluHttpType"
+        exports: ["FluentUI/FluHttpType 1.0"]
+        isCreatable: false
+        exportMetaObjectRevisions: [0]
+        Enum {
+            name: "CacheMode"
+            values: {
+                "NoCache": 0,
+                "RequestFailedReadCache": 1,
+                "IfNoneCacheRequest": 2,
+                "FirstCacheThenRequest": 4
+            }
+        }
+    }
     Component {
         name: "FluNavigationViewType"
         exports: ["FluentUI/FluNavigationViewType 1.0"]
@@ -226,7 +174,7 @@ Module {
             }
         }
     }
-	Component {
+    Component {
         name: "FluScreenshotType"
         exports: ["FluentUI/FluScreenshotType 1.0"]
         isCreatable: false
@@ -238,20 +186,6 @@ Module {
                 "File": 1
             }
         }
-    }
-	Component {
-        name: "FluTimelineType"
-        exports: ["FluentUI/FluTimelineType 1.0"]
-        isCreatable: false
-        exportMetaObjectRevisions: [0]
-        Enum {
-            name: "Mode"
-            values: {
-                "Left": 0,
-                "Right": 1,
-				"Alternate": 2
-            }
-        }
     }
     Component {
         name: "FluStatusViewType"
@@ -317,6 +251,20 @@ Module {
             }
         }
     }
+    Component {
+        name: "FluTimelineType"
+        exports: ["FluentUI/FluTimelineType 1.0"]
+        isCreatable: false
+        exportMetaObjectRevisions: [0]
+        Enum {
+            name: "Mode"
+            values: {
+                "Left": 0,
+                "Right": 1,
+                "Alternate": 2
+            }
+        }
+    }
     Component {
         name: "FluTreeViewType"
         exports: ["FluentUI/FluTreeViewType 1.0"]
@@ -1772,6 +1720,50 @@ Module {
             }
         }
     }
+    Component {
+        name: "HttpCallable"
+        prototype: "QObject"
+        exports: ["FluentUI/HttpCallable 1.0"]
+        exportMetaObjectRevisions: [0]
+        Signal { name: "start" }
+        Signal { name: "finish" }
+        Signal {
+            name: "error"
+            Parameter { name: "status"; type: "int" }
+            Parameter { name: "errorString"; type: "string" }
+            Parameter { name: "result"; type: "string" }
+        }
+        Signal {
+            name: "success"
+            Parameter { name: "result"; type: "string" }
+        }
+        Signal {
+            name: "cache"
+            Parameter { name: "result"; type: "string" }
+        }
+        Signal {
+            name: "downloadProgress"
+            Parameter { name: "recv"; type: "qlonglong" }
+            Parameter { name: "total"; type: "qlonglong" }
+        }
+        Signal {
+            name: "uploadProgress"
+            Parameter { name: "sent"; type: "qlonglong" }
+            Parameter { name: "total"; type: "qlonglong" }
+        }
+    }
+    Component {
+        name: "HttpRequest"
+        prototype: "QObject"
+        exports: ["FluentUI/HttpRequest 1.0"]
+        exportMetaObjectRevisions: [0]
+        Property { name: "url"; type: "string" }
+        Property { name: "params"; type: "QVariant" }
+        Property { name: "headers"; type: "QVariant" }
+        Property { name: "method"; type: "string" }
+        Property { name: "downloadSavePath"; type: "string" }
+        Method { name: "httpId"; type: "string" }
+    }
     Component {
         name: "QRCode"
         defaultProperty: "data"

src/Qt5/imports/FluentUI/qmldir

@@ -92,4 +92,7 @@ FluTooltip 1.0 Controls/FluTooltip.qml
 FluTour 1.0 Controls/FluTour.qml
 FluTreeView 1.0 Controls/FluTreeView.qml
 FluWindow 1.0 Controls/FluWindow.qml
+FluRangeSlider 1.0 Controls/FluRangeSlider.qml
+FluStaggeredView 1.0 Controls/FluStaggeredView.qml
+FluProgressButton 1.0 Controls/FluProgressButton.qml
 plugin fluentuiplugin

src/Qt6/imports/FluentUI/Controls/FluCarousel.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls
 import FluentUI
 
 FluItem {
+    property bool autoPlay: true
     property int loopTime: 2000
     property var model
     property Component delegate
@@ -24,6 +25,7 @@ FluItem {
     QtObject{
         id:d
         property bool flagXChanged: true
+        property bool isAnimEnable: control.autoPlay && list_view.count>3
         function setData(data){
             if(!data){
                 return
@@ -35,7 +37,9 @@ FluItem {
             list_view.highlightMoveDuration = 0
             list_view.currentIndex = 1
             list_view.highlightMoveDuration = 250
-            timer_run.restart()
+            if(d.isAnimEnable){
+                timer_run.restart()
+            }
         }
     }
     ListView{
@@ -52,6 +56,7 @@ FluItem {
         Component.onCompleted: {
             d.setData(control.model)
         }
+        interactive: list_view.count>3
         Connections{
             target: control
             function onModelChanged(){
@@ -182,20 +187,20 @@ FluItem {
     Timer{
         id:timer_run
         interval: control.loopTime
-        repeat: true
+        repeat: d.isAnimEnable
         onTriggered: {
             list_view.highlightMoveDuration = 250
             list_view.currentIndex = list_view.currentIndex+1
             timer_anim.start()
         }
     }
-
     function changedIndex(index){
         d.flagXChanged = true
         timer_run.stop()
-         list_view.currentIndex = index
+        list_view.currentIndex = index
         d.flagXChanged = false
-        timer_run.restart()
+        if(d.isAnimEnable){
+            timer_run.restart()
+        }
     }
-
 }

src/Qt6/imports/FluentUI/Controls/FluContentDialog.qml

@@ -18,7 +18,7 @@ FluPopup {
     property int buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
     focus: true
     implicitWidth: 400
-    implicitHeight: text_title.height + text_message.height + layout_actions.height
+    implicitHeight: text_title.height + sroll_message.height + layout_actions.height
     Rectangle {
         id:layout_content
         anchors.fill: parent
@@ -38,28 +38,41 @@ FluPopup {
                 right: parent.right
             }
         }
-        FluText{
-            id:text_message
-            font: FluTextStyle.Body
-            wrapMode: Text.WrapAnywhere
-            text:message
-            topPadding: 14
-            leftPadding: 20
-            rightPadding: 20
-            bottomPadding: 14
+
+        Flickable{
+            id:sroll_message
+            contentWidth: width
             anchors{
                 top:text_title.bottom
                 left: parent.left
                 right: parent.right
             }
+            contentHeight: text_message.height
+            clip: true
+            height: Math.min(text_message.height,300)
+            ScrollBar.vertical: FluScrollBar {}
+
+            FluText{
+                id:text_message
+                font: FluTextStyle.Body
+                wrapMode: Text.WrapAnywhere
+                text:message
+                width: parent.width
+                topPadding: 14
+                leftPadding: 20
+                rightPadding: 20
+                bottomPadding: 14
+            }
+
         }
+
         Rectangle{
             id:layout_actions
             height: 68
             radius: 5
             color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
             anchors{
-                top:text_message.bottom
+                top:sroll_message.bottom
                 left: parent.left
                 right: parent.right
             }

src/Qt6/imports/FluentUI/Controls/FluNavigationView.qml

@@ -171,17 +171,17 @@ Item {
                 MouseArea{
                     anchors.fill: parent
                     acceptedButtons: Qt.RightButton
-                    onClicked: function(mouse){
-                        if (mouse.button === Qt.RightButton) {
-                            if(model.menuDelegate){
-                                loader_item_menu.sourceComponent = model.menuDelegate
-                                loader_item_menu.item.popup()
+                    onClicked:
+                        (mouse) =>{
+                            if (mouse.button === Qt.RightButton) {
+                                if(model.menuDelegate){
+                                    loader_item_menu.sourceComponent = model.menuDelegate
+                                    loader_item_menu.item.popup()
+                                }
                             }
                         }
-                    }
                     z:-100
                 }
-
                 onClicked: {
                     if(d.isCompactAndNotPanel){
                         control_popup.showPopup(Qt.point(50,mapToItem(control,0,0).y),model.children)
@@ -357,7 +357,7 @@ Item {
                             ignoreUnknownSignals:true
                             function onActiveFocusChanged(focus){
                                 if(focus === false){
-                                   model.showEdit = false
+                                    model.showEdit = false
                                 }
                             }
                             function onCommit(text){
@@ -394,6 +394,7 @@ Item {
             }
             width: layout_list.width
             FluControl{
+                property var modelData: model
                 id:item_control
                 anchors{
                     top: parent.top
@@ -405,43 +406,59 @@ Item {
                     leftMargin: 6
                     rightMargin: 6
                 }
+                Drag.active: item_mouse.drag.active
+                Drag.hotSpot.x: item_control.width / 2
+                Drag.hotSpot.y: item_control.height / 2
+                Drag.dragType: Drag.Automatic
                 MouseArea{
+                    id:item_mouse
                     anchors.fill: parent
-                    acceptedButtons:  Qt.RightButton
-                    onClicked: function(mouse){
-                        if (mouse.button === Qt.RightButton) {
-                            if(model.menuDelegate){
-                                loader_item_menu.sourceComponent = model.menuDelegate
-                                loader_item_menu.item.popup();
-                            }
-                        }
+                    acceptedButtons: Qt.RightButton | Qt.LeftButton
+                    drag.target: item_control
+                    onPositionChanged: {
+                        parent.grabToImage(function(result) {
+                            parent.Drag.imageSource = result.url;
+                        })
                     }
-                    z:-100
-                }
-                onClicked: {
-                    if(type === 0){
-                        if(model.tapFunc){
-                            model.tapFunc()
-                        }else{
-                            nav_list.currentIndex = _idx
-                            layout_footer.currentIndex = -1
-                            model.tap()
-                            if(d.isMinimal || d.isCompact){
-                                d.enableNavigationPanel = false
+                    drag.onActiveChanged:
+                        if (active) {
+                            parent.grabToImage(function(result) {
+                                parent.Drag.imageSource = result.url;
+                            })
+                        }
+                    onClicked:
+                        (mouse)=>{
+                            if (mouse.button === Qt.RightButton) {
+                                if(model.menuDelegate){
+                                    loader_item_menu.sourceComponent = model.menuDelegate
+                                    loader_item_menu.item.popup();
+                                }
+                            }else{
+                                if(type === 0){
+                                    if(model.onTapListener){
+                                        model.onTapListener()
+                                    }else{
+                                        nav_list.currentIndex = _idx
+                                        layout_footer.currentIndex = -1
+                                        model.tap()
+                                        if(d.isMinimal || d.isCompact){
+                                            d.enableNavigationPanel = false
+                                        }
+                                    }
+                                }else{
+                                    if(model.onTapListener){
+                                        model.onTapListener()
+                                    }else{
+                                        nav_list.currentIndex = nav_list.count-layout_footer.count+_idx
+                                        layout_footer.currentIndex = _idx
+                                        model.tap()
+                                        if(d.isMinimal || d.isCompact){
+                                            d.enableNavigationPanel = false
+                                        }
+                                    }
+                                }
                             }
                         }
-                    }else{
-                        if(model.tapFunc){
-                            model.tapFunc()
-                        }else{
-                            nav_list.currentIndex = nav_list.count-layout_footer.count+_idx
-                            layout_footer.currentIndex = _idx
-                            model.tap()
-                            if(d.isMinimal || d.isCompact){
-                                d.enableNavigationPanel = false
-                            }
-                        }
-                    }
                 }
                 Rectangle{
                     radius: 4
@@ -519,7 +536,7 @@ Item {
                         }
                         elide: Text.ElideRight
                         color:{
-                            if(item_control.pressed){
+                            if(item_mouse.pressed){
                                 return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
                             }
                             return FluTheme.dark ? FluColors.White : FluColors.Grey220
@@ -556,7 +573,7 @@ Item {
                             ignoreUnknownSignals:true
                             function onActiveFocusChanged(focus){
                                 if(focus === false){
-                                   model.showEdit = false
+                                    model.showEdit = false
                                 }
                             }
                             function onCommit(text){
@@ -736,7 +753,12 @@ Item {
                 id:nav_stack2
                 anchors.fill: nav_stack
                 clip: true
-                visible: nav_stack.currentItem?.launchMode === FluPageType.SingleInstance
+                visible: {
+                    if(!nav_stack.currentItem){
+                        return false
+                    }
+                    return FluPageType.SingleInstance === nav_stack.currentItem.launchMode
+                }
             }
             function navStack(){
                 return nav_stack
@@ -746,7 +768,13 @@ Item {
             }
         }
     }
-
+    DropArea{
+        anchors.fill: loader_content
+        onDropped:
+            (drag)=>{
+                drag.source.modelData.dropped(drag)
+            }
+    }
     Loader{
         id:loader_content
         anchors{
@@ -881,6 +909,12 @@ Item {
             ListView{
                 id:nav_list
                 clip: true
+                displaced: Transition {
+                    NumberAnimation {
+                        properties: "x,y"
+                        easing.type: Easing.OutQuad
+                    }
+                }
                 anchors.fill: parent
                 model:d.handleItems()
                 boundsBehavior: ListView.StopAtBounds
@@ -900,7 +934,6 @@ Item {
                     }
                 }
                 currentIndex: -1
-
                 delegate: Loader{
                     property var model: modelData
                     property var _idx: index
@@ -1052,8 +1085,8 @@ Item {
                         }
                     }
                     onClicked: {
-                        if(modelData.tapFunc){
-                            modelData.tapFunc()
+                        if(modelData.onTapListener){
+                            modelData.onTapListener()
                         }else{
                             modelData.tap()
                             nav_list.currentIndex = _idx

src/Qt6/imports/FluentUI/Controls/FluPaneItem.qml

@@ -9,6 +9,7 @@ QtObject {
     property string title
     property int order : 0
     property int icon
+    property var url
     property Component cusIcon
     property Component infoBadge
     property bool recentlyAdded: false
@@ -18,8 +19,9 @@ QtObject {
     property var parent
     property int count: 0
     signal tap
-    property var tapFunc
+    property var onTapListener
     property Component menuDelegate
     property Component editDelegate
     property bool showEdit
+    signal dropped(var drag)
 }