update

.cmake/QmlPlugin.cmake

@@ -1,5 +1,6 @@
 include(CMakeParseArguments)
-find_package(Qt5 REQUIRED COMPONENTS Core)
+find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core)
+find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Core)
 
 function(FindQmlPluginDump)
     get_target_property (QT_QMAKE_EXECUTABLE Qt5::qmake IMPORTED_LOCATION)
@@ -35,7 +36,6 @@ function(add_qmlplugin TARGET)
         ${QMLPLUGIN_SOURCES}
     )
 set(LIBRARY_OUTPUT_PATH ${CMAKE_CURRENT_BINARY_DIR}/lib)
-add_custom_target("${TARGET}-qmlfiles" SOURCES ${QMLPLUGIN_QMLFILES})
 
 if(QMLPLUGIN_NO_AUTORCC)
     set_target_properties(${TARGET} PROPERTIES AUTOMOC OFF)

.cmake/Version.h.in

@@ -1,12 +1,11 @@
-// 应用程序版本信息
-// 请勿修改此头文件，因为这个文件是自动生成的
 #ifndef VERSION_H
 #define VERSION_H
 
 #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

.github/workflows/windows-mingw.yml

@@ -18,9 +18,10 @@ on:
 jobs:
   build:
     name: Build
-    runs-on: windows-2022
+    runs-on: ${{ matrix.os }}
     strategy:
       matrix:
+        os: [windows-2022]
         include:
           - qt_arch: win64_mingw
             qt_ver: 6.5.0
@@ -35,6 +36,11 @@ jobs:
         with:
           submodules: recursive
           
+      - name: Setup ninja
+        uses: seanmiddleditch/gha-setup-ninja@master
+        with:
+          version: 1.10.2
+      
       - name: Install Qt
         uses: jurplel/install-qt-action@v3
         with:
@@ -62,6 +68,7 @@ jobs:
         run: |
           mkdir build
           cd build
+          ninja --version
           cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\6.5.0\mingw_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
           cmake --build . --target all --config Release --parallel
       

.github/workflows/windows-qt5.yml

@@ -0,0 +1,85 @@
+name: Windows Qt5.15.2
+on: 
+  push:
+    paths:
+      - '*.txt'
+      - 'src/**'
+      - 'example/**'
+      - 'scripts/**'
+      - '.github/workflows/windows_qt5.yml'
+  pull_request:
+    paths:
+      - '*.txt'
+      - 'example/**'
+      - 'src/**'
+      - 'scripts/**'
+      - '.github/workflows/windows_qt5.yml'
+      
+jobs:
+  build:
+    name: Build
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [windows-2019]
+        include:
+          - qt_ver: 5.15.2        
+            qt_arch: win32_msvc2019
+            msvc_arch: x86
+            qt_arch_install: msvc2019          
+    env:
+      targetName: example.exe
+      fileName: example
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v3
+        with:
+          submodules: recursive
+             
+      - name: Install Qt
+        uses: jurplel/install-qt-action@v3
+        with:
+          version: ${{ matrix.qt_ver }}
+          arch: ${{ matrix.qt_arch }}
+          cache: ${{steps.cache-qt.outputs.cache-hit}}
+          
+      - name: msvc-build
+        id: build
+        shell: cmd
+        run: |
+          call "C:\Program Files (x86)\Microsoft Visual Studio\2019\Enterprise\VC\Auxiliary\Build\vcvarsall.bat" ${{ matrix.msvc_arch }}
+          mkdir build
+          cd build
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\5.15.2\msvc2019 -DCMAKE_C_COMPILER=cl -DCMAKE_CXX_COMPILER=cl -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake --build . --target all --config Release --parallel
+          echo winSdkDir=%WindowsSdkDir% >> %GITHUB_ENV%
+          echo winSdkVer=%WindowsSdkVersion% >> %GITHUB_ENV%
+          echo vcToolsInstallDir=%VCToolsInstallDir% >> %GITHUB_ENV%
+          echo vcToolsRedistDir=%VCToolsRedistDir% >> %GITHUB_ENV%
+          
+      - name: package
+        id: package      
+        env:
+          archiveName: ${{ env.fileName }}-${{ matrix.qt_arch }}-${{ matrix.qt_ver }}
+          msvcArch: ${{ matrix.msvc_arch }}          
+        shell: pwsh
+        run: |
+          & scripts\windows-publish.ps1 ${env:archiveName} ${env:targetName}
+          # 记录packageName给后续step
+           $name = ${env:archiveName}
+           echo "::set-output name=packageName::$name"     
+           
+      - uses: actions/upload-artifact@v2
+        with:
+          name: ${{ steps.package.outputs.packageName }}
+          path: ${{ steps.package.outputs.packageName }}
+          
+      - name: uploadRelease
+        if: startsWith(github.event.ref, 'refs/tags/')
+        uses: svenstaro/upload-release-action@v2
+        with:
+          repo_token: ${{ secrets.GITHUB_TOKEN }}
+          file: ${{ steps.package.outputs.packageName }}.zip
+          asset_name: ${{ env.fileName }}_${{  github.ref_name }}_${{  matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.zip
+          tag: ${{ github.ref }}
+          overwrite: true 

.github/workflows/windows.yml

@@ -49,6 +49,7 @@ jobs:
         shell: cmd
         run: |
           call "C:\Program Files (x86)\Microsoft Visual Studio\2019\Enterprise\VC\Auxiliary\Build\vcvarsall.bat" ${{ matrix.msvc_arch }}
+          ninja --version
           mkdir build
           cd build
           cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\6.5.0\msvc2019_64 -DCMAKE_C_COMPILER=cl -DCMAKE_CXX_COMPILER=cl -DCMAKE_BUILD_TYPE=Release -GNinja ..

THIRD_PARTY_COPYRIGHT.txt

@@ -263,3 +263,53 @@ zxing-cpp
    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.
+
+************************************************************************************
+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.
+
+************************************************************************************
+qml-colorpicker
+
+MIT License
+
+Copyright (c) 2022 Ruslan Shestopalyuk
+
+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/CMakeLists.txt

@@ -53,7 +53,7 @@ endforeach(filepath)
 
 if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
     #遍历所有qml文件
-    file(GLOB_RECURSE QML_PATHS *.qml qmldir)
+    file(GLOB_RECURSE QML_PATHS *.qml)
     foreach(filepath ${QML_PATHS})
         string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
         if(${filepath} MATCHES "Qt${QT_VERSION_MAJOR}/")
@@ -64,7 +64,7 @@ if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
     endforeach(filepath)
 
     #遍历所有资源文件
-    file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp)
+    file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp qmldir)
     foreach(filepath ${RES_PATHS})
         string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
         list(APPEND resource_files ${filename})
@@ -93,12 +93,17 @@ else ()
     )
 endif ()
 
-#复制动态库到可执行文件同级目录下
 if(WIN32)
+    #复制动态库到可执行文件同级目录下
+    if(CMAKE_SIZEOF_VOID_P EQUAL 4)
+        set(3RDPARTY_ARCH_DIR ${CMAKE_SOURCE_DIR}/3rdparty/Win_x86)
+    elseif(CMAKE_SIZEOF_VOID_P EQUAL 8)
+        set(3RDPARTY_ARCH_DIR ${CMAKE_SOURCE_DIR}/3rdparty/Win_x64)
+    endif()
     if(CMAKE_CXX_COMPILER_ID STREQUAL "MSVC")
-        set(DLLPATH ${CMAKE_SOURCE_DIR}/3rdparty/msvc/*.dll)
+        set(DLLPATH ${3RDPARTY_ARCH_DIR}/msvc/*.dll)
     else()
-        set(DLLPATH ${CMAKE_SOURCE_DIR}/3rdparty/mingw/*.dll)
+        set(DLLPATH ${3RDPARTY_ARCH_DIR}/mingw/*.dll)
     endif()
     string(REPLACE "/" ${PATH_SEPARATOR} DLLPATH "${DLLPATH}")
     file(GLOB DLL_FILES ${DLLPATH})
@@ -122,7 +127,7 @@ else()
     target_include_directories(example PRIVATE
         ${CMAKE_CURRENT_SOURCE_DIR}
     )
-    target_sources(example PRIVATE resource.qrc)
+target_sources(example PRIVATE example.qrc)
 endif()
 
 #导入component头文件,不然通过QML_NAMED_ELEMENT生成的c++类会找不到头文件报错
@@ -130,6 +135,13 @@ target_include_directories(example PRIVATE
     ${CMAKE_CURRENT_SOURCE_DIR}/src/component
 )
 
+#如何是静态库则需要手动注册插件，导入FluentUI.h头文件
+if(FLUENTUI_BUILD_STATIC_LIB)
+    target_include_directories(example PRIVATE
+        ${CMAKE_SOURCE_DIR}/src
+    )
+endif()
+
 #设置属性
 set_target_properties(example PROPERTIES
     MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com
@@ -139,27 +151,14 @@ set_target_properties(example PROPERTIES
     WIN32_EXECUTABLE TRUE
 )
 
-#链接库
+target_link_libraries(example PRIVATE
-if (FLUENTUI_BUILD_STATIC_LIB)
+    Qt${QT_VERSION_MAJOR}::Quick
-    target_link_libraries(example PRIVATE
+    Qt${QT_VERSION_MAJOR}::Svg
-        Qt${QT_VERSION_MAJOR}::Quick
+    Qt${QT_VERSION_MAJOR}::Network
-        Qt${QT_VERSION_MAJOR}::Svg
+    fluentuiplugin
-        Qt${QT_VERSION_MAJOR}::Network
+    FramelessHelper::Core
-        fluentui
+    FramelessHelper::Quick
-        fluentuiplugin
+)
-        FramelessHelper::Core
-        FramelessHelper::Quick
-    )
-else()
-    target_link_libraries(example PRIVATE
-        Qt${QT_VERSION_MAJOR}::Quick
-        Qt${QT_VERSION_MAJOR}::Svg
-        Qt${QT_VERSION_MAJOR}::Network
-        fluentuiplugin
-        FramelessHelper::Core
-        FramelessHelper::Quick
-    )
-endif()
 
 #安装
 install(TARGETS example

example/example.qrc

@@ -126,7 +126,6 @@
         <file>qml/component/CustomWindow.qml</file>
         <file>qml/global/ItemsFooter.qml</file>
         <file>qml/global/ItemsOriginal.qml</file>
-        <file>qml/global/MainEvent.qml</file>
         <file>qml/global/qmldir</file>
         <file>qml/page/T_Acrylic.qml</file>
         <file>qml/page/T_Awesome.qml</file>
@@ -184,5 +183,9 @@
         <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>
+        <file>qml/viewmodel/SettingsViewModel.qml</file>
+        <file>qml/viewmodel/TextBoxViewModel.qml</file>
     </qresource>
 </RCC>

example/qml-Qt6/App.qml

@@ -8,6 +8,13 @@ Window {
     id: app
     flags: Qt.SplashScreen
 
+    Connections{
+        target: FluTheme
+        function onDarkModeChanged(){
+            SettingsHelper.saveDarkMode(FluTheme.darkMode)
+        }
+    }
+
     FluHttpInterceptor{
         id:interceptor
         function onIntercept(request){
@@ -26,7 +33,7 @@ Window {
 
     Component.onCompleted: {
         FluApp.init(app)
-        FluTheme.darkMode = FluThemeType.System
+        FluTheme.darkMode = SettingsHelper.getDarkMode()
         FluTheme.enableAnimation = true
         FluApp.routes = {
             "/":"qrc:/example/qml/window/MainWindow.qml",
@@ -35,7 +42,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

@@ -80,7 +80,6 @@ FluExpander{
                     "FluIcon",
                     "FluIconButton",
                     "FluInfoBar",
-                    "FluItem",
                     "FluMediaPlayer",
                     "FluMenu",
                     "FluMenuItem",
@@ -136,7 +135,11 @@ FluExpander{
                     "FluTour",
                     "FluQRCode",
                     "FluTimeline",
-                    "FluChart"
+                    "FluChart",
+                    "FluRangeSlider",
+                    "FluStaggeredView",
+                    "FluProgressButton",
+                    "FluLoadingButton"
                 ];
         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:{
+            url:"qrc:/example/qml/page/T_Image.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_Slider.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_CheckBox.qml"
-                navigationView.push("qrc:/example/qml/page/T_CheckBox.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"RadioButton"
-            onTap:{
+            url:"qrc:/example/qml/page/T_RadioButton.qml"
-                navigationView.push("qrc:/example/qml/page/T_RadioButton.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"ToggleSwitch"
-            onTap:{
+            url:"qrc:/example/qml/page/T_ToggleSwitch.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_TextBox.qml"
-                navigationView.push("qrc:/example/qml/page/T_TextBox.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TimePicker"
-            onTap:{
+            url:"qrc:/example/qml/page/T_TimePicker.qml"
-                navigationView.push("qrc:/example/qml/page/T_TimePicker.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"DatePicker"
-            onTap:{
+            url:"qrc:/example/qml/page/T_DatePicker.qml"
-                navigationView.push("qrc:/example/qml/page/T_DatePicker.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"CalendarPicker"
-            onTap:{
+            url:"qrc:/example/qml/page/T_CalendarPicker.qml"
-                navigationView.push("qrc:/example/qml/page/T_CalendarPicker.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"ColorPicker"
-            onTap:{
+            url:"qrc:/example/qml/page/T_ColorPicker.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_InfoBar.qml"
-                navigationView.push("qrc:/example/qml/page/T_InfoBar.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Progress"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Progress.qml"
-                navigationView.push("qrc:/example/qml/page/T_Progress.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"RatingControl"
-            onTap:{
+            url:"qrc:/example/qml/page/T_RatingControl.qml"
-                navigationView.push("qrc:/example/qml/page/T_RatingControl.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Badge"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Badge.qml"
-                navigationView.push("qrc:/example/qml/page/T_Badge.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Rectangle"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Rectangle.qml"
-                navigationView.push("qrc:/example/qml/page/T_Rectangle.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"StatusView"
-            onTap:{
+            url:"qrc:/example/qml/page/T_StatusView.qml"
-                navigationView.push("qrc:/example/qml/page/T_StatusView.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Carousel"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Carousel.qml"
-                navigationView.push("qrc:/example/qml/page/T_Carousel.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Expander"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Expander.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_Watermark.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_Dialog.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_Tooltip.qml"
-                navigationView.push("qrc:/example/qml/page/T_Tooltip.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Menu"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Menu.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_Pivot.qml"
-                navigationView.push("qrc:/example/qml/page/T_Pivot.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"BreadcrumbBar"
-            onTap:{
+            url:"qrc:/example/qml/page/T_BreadcrumbBar.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_TabView.qml"
-                navigationView.push("qrc:/example/qml/page/T_TabView.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TreeView"
-            onTap:{
+            url:"qrc:/example/qml/page/T_TreeView.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_TableView.qml"
-                navigationView.push("qrc:/example/qml/page/T_TableView.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Pagination"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Pagination.qml"
-                navigationView.push("qrc:/example/qml/page/T_Pagination.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"MultiWindow"
-            onTap:{
+            url:"qrc:/example/qml/page/T_MultiWindow.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_FlipView.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_Acrylic.qml"
-                navigationView.push("qrc:/example/qml/page/T_Acrylic.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Theme"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Theme.qml"
-                navigationView.push("qrc:/example/qml/page/T_Theme.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Typography"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Typography.qml"
-                navigationView.push("qrc:/example/qml/page/T_Typography.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Awesome"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Awesome.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_QRCode.qml"
-                navigationView.push("qrc:/example/qml/page/T_QRCode.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Tour"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Tour.qml"
-                navigationView.push("qrc:/example/qml/page/T_Tour.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Timeline"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Timeline.qml"
-                navigationView.push("qrc:/example/qml/page/T_Timeline.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Screenshot"
+            title:"Screenshot(Todo)"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Screenshot.qml"
-                navigationView.push("qrc:/example/qml/page/T_Screenshot.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Captcha"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Captcha.qml"
-                navigationView.push("qrc:/example/qml/page/T_Captcha.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Chart"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Chart.qml"
-                navigationView.push("qrc:/example/qml/page/T_Chart.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Http"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Http.qml"
-                navigationView.push("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") }
         }
     }
 
@@ -460,6 +477,9 @@ FluObject{
     }
 
     function getSearchData(){
+        if(!navigationView){
+            return
+        }
         var arr = []
         var items = navigationView.getItems();
         for(var i=0;i<items.length;i++){

example/qml-Qt6/global/MainEvent.qml

@@ -1,9 +0,0 @@
-pragma Singleton
-
-import QtQuick
-import QtQuick.Controls
-import FluentUI
-
-QtObject {
-    property int displayMode : FluNavigationViewType.Auto
-}

example/qml-Qt6/global/qmldir

@@ -1,3 +1,2 @@
 singleton ItemsOriginal 1.0 ItemsOriginal.qml
 singleton ItemsFooter 1.0 ItemsFooter.qml
-singleton MainEvent 1.0 MainEvent.qml

example/qml-Qt6/page/T_Acrylic.qml

@@ -47,10 +47,10 @@ FluScrollablePage{
         height: 1200/4+20
         paddings: 10
         Layout.topMargin: 10
-        FluRectangle{
+        FluClip{
             width: 1920/4
             height: 1200/4
-            radius:[15,15,15,15]
+            radius:[8,8,8,8]
             Image {
                 id:image
                 asynchronous: true

example/qml-Qt6/page/T_Buttons.qml

@@ -161,6 +161,97 @@ 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
+        height: 68
+        Layout.topMargin: 20
+        paddings: 10
+
+        FluLoadingButton{
+            id:btn_loading
+            loading:loading_button_switch.checked
+            text:"Loading Button"
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            onClicked: {
+
+            }
+        }
+        FluToggleSwitch{
+            id:loading_button_switch
+            checked: true
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text:"Loading"
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluLoadingButton{
+    text:"Loading Button"
+    onClicked: {
+
+    }
+}'
+    }
+
 
     FluArea{
         Layout.fillWidth: true

example/qml-Qt6/page/T_Captcha.qml

@@ -9,10 +9,10 @@ FluScrollablePage{
 
     title:"Captcha"
 
-
     FluCaptcha{
         id:captcha
         Layout.topMargin: 20
+        ignoreCase:switch_case.checked
         MouseArea{
             anchors.fill: parent
             cursorShape: Qt.PointingHandCursor
@@ -30,6 +30,13 @@ FluScrollablePage{
         }
     }
 
+    FluToggleSwitch{
+        id:switch_case
+        text:"Ignore Case"
+        checked: true
+        Layout.topMargin: 10
+    }
+
     RowLayout{
         spacing: 10
         Layout.topMargin: 10
@@ -49,6 +56,4 @@ FluScrollablePage{
             }
         }
     }
-
-
 }

example/qml-Qt6/page/T_Carousel.qml

@@ -36,20 +36,27 @@ FluScrollablePage{
             FluText{
                 text:"轮播图，支持无限轮播，无限滑动，用ListView实现的组件"
             }
-            FluCarousel{
+            Item{
-                radius:[5,5,5,5]
+                width: 400
-                delegate: Component{
+                height: 300
-                    Image {
+                FluShadow{
-                        anchors.fill: parent
+                    radius: 8
-                        source: model.url
-                        asynchronous: true
-                        fillMode:Image.PreserveAspectCrop
-                    }
                 }
-                Layout.topMargin: 20
+                FluCarousel{
-                Layout.leftMargin: 5
+                    anchors.fill: parent
-                Component.onCompleted: {
+                    delegate: Component{
-                    model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
+                        Image {
+                            anchors.fill: parent
+                            source: model.url
+                            asynchronous: true
+                            fillMode:Image.PreserveAspectCrop
+                        }
+                    }
+                    Layout.topMargin: 20
+                    Layout.leftMargin: 5
+                    Component.onCompleted: {
+                        model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
+                    }
                 }
             }
         }
@@ -66,46 +73,54 @@ FluScrollablePage{
                 verticalCenter: parent.verticalCenter
                 left:parent.left
             }
-            FluCarousel{
+            Item{
-                radius:[15,15,15,15]
+                width: 400
-                loopTime:1500
+                height: 300
-                indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
+                FluShadow{
-                indicatorMarginTop:15
+                    radius: 8
-                delegate: Component{
+                }
-                    Item{
+                FluCarousel{
-                        anchors.fill: parent
+                    anchors.fill: parent
-                        Image {
+                    loopTime:1500
+                    indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
+                    indicatorMarginTop:15
+                    delegate: Component{
+                        Item{
                             anchors.fill: parent
-                            source: model.url
+                            Image {
-                            asynchronous: true
-                            fillMode:Image.PreserveAspectCrop
-                        }
-                        Rectangle{
-                            height: 40
-                            width: parent.width
-                            anchors.bottom: parent.bottom
-                            color: "#33000000"
-                            FluText{
                                 anchors.fill: parent
-                                verticalAlignment: Qt.AlignVCenter
+                                source: model.url
-                                horizontalAlignment: Qt.AlignHCenter
+                                asynchronous: true
-                                text:model.title
+                                fillMode:Image.PreserveAspectCrop
-                                color: FluColors.Grey10
+                            }
-                                font.pixelSize: 15
+                            Rectangle{
+                                height: 40
+                                width: parent.width
+                                anchors.bottom: parent.bottom
+                                color: "#33000000"
+                                FluText{
+                                    anchors.fill: parent
+                                    verticalAlignment: Qt.AlignVCenter
+                                    horizontalAlignment: Qt.AlignHCenter
+                                    text:model.title
+                                    color: FluColors.Grey10
+                                    font.pixelSize: 15
+                                }
                             }
                         }
                     }
-                }
+                    Layout.topMargin: 20
-                Layout.topMargin: 20
+                    Layout.leftMargin: 5
-                Layout.leftMargin: 5
+                    Component.onCompleted: {
-                Component.onCompleted: {
+                        var arr = []
-                    var arr = []
+                        arr.push({url:"qrc:/example/res/image/banner_1.jpg",title:"共同应对全球性问题"})
-                    arr.push({url:"qrc:/example/res/image/banner_1.jpg",title:"共同应对全球性问题"})
+                        arr.push({url:"qrc:/example/res/image/banner_2.jpg",title:"三小只全程没互动"})
-                    arr.push({url:"qrc:/example/res/image/banner_2.jpg",title:"三小只全程没互动"})
+                        arr.push({url:"qrc:/example/res/image/banner_3.jpg",title:"有效投资扩大 激发增长动能"})
-                    arr.push({url:"qrc:/example/res/image/banner_3.jpg",title:"有效投资扩大 激发增长动能"})
+                        model = arr
-                    model = arr
+                    }
                 }
             }
+
         }
     }
 

example/qml-Qt6/page/T_ComboBox.qml

@@ -46,7 +46,6 @@ FluScrollablePage{
             }
             FluComboBox {
                 editable: true
-                font:FluTextStyle.BodyStrong
                 model: ListModel {
                     id: model_2
                     ListElement { text: "Banana" }

example/qml-Qt6/page/T_Home.qml

@@ -27,7 +27,9 @@ FluScrollablePage{
             id: bg
             fillMode:Image.PreserveAspectCrop
             anchors.fill: parent
+            asynchronous: true
             verticalAlignment: Qt.AlignTop
+            sourceSize: Qt.size(960,640)
             source: "qrc:/example/res/image/bg_home_header.png"
         }
         Rectangle{
@@ -48,33 +50,19 @@ FluScrollablePage{
             }
         }
 
-        ListView{
+        Component{
-            id: list
+            id:com_grallery
-            anchors{
+            Item{
-                left: parent.left
-                right: parent.right
-                bottom: parent.bottom
-            }
-            orientation: ListView.Horizontal
-            height: 240
-            model: model_header
-            header: Item{height: 10;width: 10}
-            footer: Item{height: 10;width: 10}
-            ScrollBar.horizontal: FluScrollBar{
-                id: scrollbar_header
-            }
-            clip: false
-            delegate:Item{
                 id: control
                 width: 220
                 height: 240
                 FluShadow{
-                    radius:8
+                    radius:5
                     anchors.fill: item_content
                 }
-                FluItem{
+                FluClip{
                     id:item_content
-                    radius: [8,8,8,8]
+                    radius: [5,5,5,5]
                     width: 200
                     height: 220
                     anchors.centerIn: parent
@@ -88,20 +76,15 @@ FluScrollablePage{
                     }
                     Rectangle{
                         anchors.fill: parent
-                        radius: 8
+                        radius: 5
-                        color:{
+                        color:FluTheme.dark ? Qt.rgba(1,1,1,0.03) : Qt.rgba(0,0,0,0.03)
-                            if(FluTheme.dark){
+                        visible: item_mouse.containsMouse
-                                if(item_mouse.containsMouse){
+                    }
-                                    return Qt.rgba(1,1,1,0.03)
+                    Rectangle{
-                                }
+                        anchors.fill: parent
-                                return Qt.rgba(0,0,0,0.0)
+                        radius: 5
-                            }else{
+                        color:Qt.rgba(0,0,0,0.0)
-                                if(item_mouse.containsMouse){
+                        visible: !item_mouse.containsMouse
-                                    return Qt.rgba(0,0,0,0.03)
-                                }
-                                return Qt.rgba(0,0,0,0.0)
-                            }
-                        }
                     }
                     ColumnLayout{
                         Image {
@@ -153,11 +136,31 @@ FluScrollablePage{
                 }
             }
         }
+
+        ListView{
+            id: list
+            anchors{
+                left: parent.left
+                right: parent.right
+                bottom: parent.bottom
+            }
+            orientation: ListView.Horizontal
+            height: 240
+            model: model_header
+            header: Item{height: 10;width: 10}
+            footer: Item{height: 10;width: 10}
+            ScrollBar.horizontal: FluScrollBar{
+                id: scrollbar_header
+            }
+            clip: false
+            delegate: com_grallery
+        }
     }
 
     Component{
         id:com_item
         Item{
+            property string desc: modelData.desc
             width: 320
             height: 120
             FluArea{
@@ -193,7 +196,6 @@ FluScrollablePage{
                         verticalCenter: parent.verticalCenter
                     }
                 }
-
                 FluText{
                     id:item_title
                     text:modelData.title
@@ -204,10 +206,9 @@ FluScrollablePage{
                         top: item_icon.top
                     }
                 }
-
                 FluText{
                     id:item_desc
-                    text:modelData.desc
+                    text:desc
                     color:FluColors.Grey120
                     wrapMode: Text.WrapAnywhere
                     elide: Text.ElideRight

example/qml-Qt6/page/T_Http.qml

@@ -10,14 +10,63 @@ import "qrc:///example/qml/component"
 FluContentPage{
 
     title:"Http"
+    property string cacheDirPath: FluTools.getApplicationDirPath() + "/cache/http"
+    property bool isDownCompleted: false
 
     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 = {}
+                    var request = http.newRequest("https://httpbingo.org/get")
-                    callable.onStart = function(){
+                    http.get(request,callable)
-                        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)
                 }
             }
             FluButton{
@@ -58,25 +94,13 @@ FluContentPage{
                 implicitHeight: 36
                 text: "Post表单请求"
                 onClicked: {
-                    var callable = {}
+                    var request = http.newRequest("https://httpbingo.org/post")
-                    callable.onStart = function(){
+                    var params = {}
-                        showLoading()
+                    params.custname = "朱子楚"
-                    }
+                    params.custtel = "1234567890"
-                    callable.onFinish = function(){
+                    params.custemail = "zhuzichu520@gmail.com"
-                        hideLoading()
+                    request.params = params
-                    }
+                    http.post(request,callable)
-                    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)
                 }
             }
             FluButton{
@@ -84,25 +108,13 @@ FluContentPage{
                 implicitHeight: 36
                 text: "Post Json请求"
                 onClicked: {
-                    var callable = {}
+                    var request = http.newRequest("https://httpbingo.org/post")
-                    callable.onStart = function(){
+                    var params = {}
-                        showLoading()
+                    params.custname = "朱子楚"
-                    }
+                    params.custtel = "1234567890"
-                    callable.onFinish = function(){
+                    params.custemail = "zhuzichu520@gmail.com"
-                        hideLoading()
+                    request.params = params
-                    }
+                    http.postJson(request,callable)
-                    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)
                 }
             }
             FluButton{
@@ -110,25 +122,12 @@ FluContentPage{
                 implicitHeight: 36
                 text: "Post String请求"
                 onClicked: {
-                    var callable = {}
+                    var request = http.newRequest("https://httpbingo.org/post")
-                    callable.onStart = function(){
+                    request.params = "我命由我不由天"
-                        showLoading()
+                    http.postString(request,callable)
-                    }
-                    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)
                 }
             }
-            FluButton{
+            FluProgressButton{
                 id:btn_download
                 implicitWidth: parent.width
                 implicitHeight: 36
@@ -137,7 +136,90 @@ 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)=>{
+                            if(!isDownCompleted){
+                                tour.open()
+                                isDownCompleted = true
+                            }
+                            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 +228,143 @@ 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 = ""
+                }
+            }
         }
     }
 
+    FluTour{
+        id:tour
+        steps:[
+            {title:"友情提示",description: "下载已完成，左击这里可以打开文件所在路径，右击可以弹出菜单删除文件！",target:()=>btn_breakpoint_download}
+        ]
+    }
+
+    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))
+            request.params = params
-            var callable = {}
+            http.upload(request,callable_upload)
-            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)
         }
     }
 
+    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 = {}
+            var request = http.newRequest("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4")
-            callable.onStart = function(){
+            request.downloadSavePath = FluTools.toLocalPath(currentFolder)+ "/big_buck_bunny.mp4"
-                btn_download.disabled = true
+            http.download(request,callable_download)
-            }
-            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)
         }
     }
-
     FluArea{
         anchors{
             top: layout_flick.top
@@ -246,34 +390,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_InfoBar.qml

@@ -12,7 +12,7 @@ FluScrollablePage{
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 240
+        height: 270
         paddings: 10
         ColumnLayout{
             spacing: 14
@@ -44,6 +44,12 @@ FluScrollablePage{
                     showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
                 }
             }
+            FluButton{
+                text:"手动关闭的InfoBar"
+                onClicked: {
+                    showInfo("这是一个Info样式的InfoBar",0,"支持手动关闭")
+                }
+            }
             FluButton{
                 text:"Loading"
                 onClicked: {

example/qml-Qt6/page/T_QRCode.qml

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

example/qml-Qt6/page/T_Rectangle.qml

@@ -68,7 +68,7 @@ FluScrollablePage{
             }
             RowLayout{
                 spacing: 14
-                FluRectangle{
+                FluClip{
                     width: 50
                     height: 50
                     radius:[25,0,25,25]
@@ -79,7 +79,7 @@ FluScrollablePage{
                         sourceSize: Qt.size(width,height)
                     }
                 }
-                FluRectangle{
+                FluClip{
                     width: 50
                     height: 50
                     radius:[10,10,10,10]
@@ -90,7 +90,7 @@ FluScrollablePage{
                         source: "qrc:/example/res/svg/avatar_2.svg"
                     }
                 }
-                FluRectangle{
+                FluClip{
                     width: 50
                     height: 50
                     radius:[25,25,25,25]
@@ -101,7 +101,7 @@ FluScrollablePage{
                         source: "qrc:/example/res/svg/avatar_3.svg"
                     }
                 }
-                FluRectangle{
+                FluClip{
                     width: 50
                     height: 50
                     radius:[0,25,25,25]
@@ -113,10 +113,10 @@ FluScrollablePage{
                     }
                 }
             }
-            FluRectangle{
+            FluClip{
                 width: 1920/5
                 height: 1200/5
-                radius:[15,15,15,15]
+                radius:[8,8,8,8]
                 Image {
                     asynchronous: true
                     source: "qrc:/example/res/image/banner_1.jpg"

example/qml-Qt6/page/T_Screenshot.qml

@@ -30,9 +30,10 @@ FluScrollablePage{
         Layout.topMargin: 10
         Layout.leftMargin: 4
         Layout.bottomMargin: 4
+        radius: 4
         color: FluTheme.dark ? FluColors.Black : FluColors.White
         FluShadow{
-            radius: 0
+            radius: 4
             color: FluTheme.primaryColor.dark
         }
         Image{

example/qml-Qt6/page/T_Settings.qml

@@ -5,11 +5,90 @@ import QtQuick.Controls
 import FluentUI
 import "qrc:///example/qml/global"
 import "qrc:///example/qml/component"
+import "qrc:///example/qml/viewmodel"
 
 FluScrollablePage{
 
     title:"Settings"
 
+    SettingsViewModel{
+        id:viewmodel_settings
+    }
+
+    FluEvent{
+        id:event_checkupdate_finish
+        name: "checkUpdateFinish"
+        onTriggered: {
+            btn_checkupdate.loading = false
+        }
+    }
+
+    Component.onCompleted: {
+        FluEventBus.registerEvent(event_checkupdate_finish)
+    }
+
+    Component.onDestruction: {
+        FluEventBus.unRegisterEvent(event_checkupdate_finish)
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 60
+        paddings: 10
+        Row{
+            spacing: 20
+            anchors.verticalCenter: parent.verticalCenter
+            FluText{
+                text:"当前版本 v%1".arg(AppInfo.version)
+                font: FluTextStyle.Body
+                anchors.verticalCenter: parent.verticalCenter
+            }
+            FluLoadingButton{
+                id:btn_checkupdate
+                text:"检查更新"
+                anchors.verticalCenter: parent.verticalCenter
+                onClicked: {
+                    loading = true
+                    FluEventBus.post("checkUpdate")
+                }
+            }
+        }
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 50
+        paddings: 10
+        FluCheckBox{
+            text:"Software Render"
+            checked: SettingsHelper.getReander() === "software"
+            anchors.verticalCenter: parent.verticalCenter
+            onClicked: {
+                if(SettingsHelper.getReander() === "software"){
+                    SettingsHelper.saveRender("")
+                }else{
+                    SettingsHelper.saveRender("software")
+                }
+                dialog_render.open()
+            }
+        }
+    }
+
+    FluContentDialog{
+        id:dialog_render
+        title:"友情提示"
+        message:"此操作需要重启才能生效，是否重新启动？"
+        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
+        negativeText: "取消"
+        positiveText:"确定"
+        onPositiveClicked:{
+            window.deleteWindow()
+            AppInfo.restart()
+        }
+    }
+
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
@@ -60,10 +139,10 @@ FluScrollablePage{
             Repeater{
                 model: [{title:"Open",mode:FluNavigationViewType.Open},{title:"Compact",mode:FluNavigationViewType.Compact},{title:"Minimal",mode:FluNavigationViewType.Minimal},{title:"Auto",mode:FluNavigationViewType.Auto}]
                 delegate: FluRadioButton{
-                    checked : MainEvent.displayMode===modelData.mode
+                    checked : viewmodel_settings.displayMode===modelData.mode
                     text:modelData.title
                     clickListener:function(){
-                        MainEvent.displayMode = modelData.mode
+                        viewmodel_settings.displayMode = modelData.mode
                     }
                 }
             }
@@ -94,10 +173,10 @@ FluScrollablePage{
                 Repeater{
                     model: ["Zh","En"]
                     delegate: FluRadioButton{
-                        checked: appInfo.lang.objectName === modelData
+                        checked: AppInfo.lang.objectName === modelData
                         text:modelData
                         clickListener:function(){
-                            appInfo.changeLang(modelData)
+                            AppInfo.changeLang(modelData)
                         }
                     }
                 }

example/qml-Qt6/page/T_Slider.qml

@@ -11,11 +11,18 @@ FluScrollablePage{
 
     FluArea{
         Layout.fillWidth: true
-        height: 100
+        Layout.preferredHeight: 200
-        paddings: 10
         Layout.topMargin: 20
-        FluSlider{
+        paddings: 10
-            anchors.verticalCenter: parent.verticalCenter
+
+        Row{
+            spacing: 30
+            FluSlider{
+            }
+            FluSlider{
+                orientation: Qt.Vertical
+                anchors.verticalCenter: parent.verticalCenter
+            }
         }
     }
     CodeExpander{
@@ -26,25 +33,27 @@ FluScrollablePage{
 }'
     }
 
+
     FluArea{
         Layout.fillWidth: true
-        height: 200
+        Layout.preferredHeight: 200
-        paddings: 10
         Layout.topMargin: 20
-        FluSlider{
+        paddings: 10
-            orientation: Qt.Vertical
+        Row{
-            anchors.left: parent.left
+            spacing: 30
-            anchors.verticalCenter: parent.verticalCenter
+            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/page/T_TextBox.qml

@@ -4,12 +4,19 @@ import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
 import "qrc:///example/qml/component"
+import "qrc:///example/qml/viewmodel"
 
 FluScrollablePage{
-
-    launchMode: FluPageType.SingleInstance
-
     title:"TextBox"
+
+    TextBoxViewModel{
+        id:viewModel
+    }
+
+    Component.onDestruction: {
+        console.debug("T_TextBox页面销毁了")
+    }
+
     FluArea{
         Layout.fillWidth: true
         height: 68
@@ -20,6 +27,10 @@ FluScrollablePage{
             placeholderText: "单行输入框"
             disabled:text_box_switch.checked
             cleanEnabled: true
+            text:viewModel.text1
+            onTextChanged: {
+                viewModel.text1 = text
+            }
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
@@ -84,6 +95,10 @@ FluScrollablePage{
         FluMultilineTextBox{
             id:multiine_textbox
             placeholderText: "多行输入框"
+            text:viewModel.text2
+            onTextChanged: {
+                viewModel.text2 = text
+            }
             disabled:text_box_multi_switch.checked
             anchors{
                 verticalCenter: parent.verticalCenter

example/qml-Qt6/page/T_TreeView.qml

@@ -5,152 +5,127 @@ import QtQuick.Controls
 import FluentUI
 import "qrc:///example/qml/component"
 
-FluScrollablePage {
+FluContentPage {
 
     title:"TreeView"
 
-    function randomName() {
+    function treeData(){
-        var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]
+        const dig = (path = '0', level = 4) => {
-        return names[Math.floor(Math.random() * names.length)]
+            const list = [];
+            for (let i = 0; i < 6; i += 1) {
+                const key = `${path}-${i}`;
+                const treeNode = {
+                    title: key,
+                    key,
+                };
+                if (level > 0) {
+                    treeNode.children = dig(key, level - 1);
+                }
+                list.push(treeNode);
+            }
+            return list;
+        };
+        return dig();
     }
 
-    function randomCompany() {
+    Column{
-        var companies = ["阿里巴巴", "腾讯", "百度", "京东", "华为", "小米", "字节跳动", "美团", "滴滴"]
+        id:layout_column
-        return companies[Math.floor(Math.random() * companies.length)]
+        spacing: 12
-    }
+        width: 300
-
+        anchors{
-    function randomDepartment() {
+            topMargin: 20
-        var departments = ["技术部", "销售部", "市场部", "人事部", "财务部", "客服部", "产品部", "设计部", "运营部"]
+            top:parent.top
-        return departments[Math.floor(Math.random() * departments.length)]
+            left: parent.left
-    }
+            leftMargin: 10
-
+            bottom:parent.bottom
-    function createEmployee() {
+            bottomMargin: 20
-        var name = randomName()
-        return tree_view.createItem(name, false)
-    }
-
-    function createSubtree(numEmployees) {
-        var employees = []
-        for (var i = 0; i < numEmployees; i++) {
-            employees.push(createEmployee())
         }
-        return tree_view.createItem(randomDepartment(), true, employees)
-    }
 
-    function createOrg(numLevels, numSubtrees, numEmployees) {
+        FluText{
-        if (numLevels === 0) {
+            text:"共计%1条数据，当前显示的%2条数据".arg(tree_view.count()).arg(tree_view.visibleCount())
-            return []
+        }
+
+        FluText{
+            text:"共计选中%1条数据".arg(tree_view.selectionModel().length)
         }
-        var subtrees = []
-        for (var i = 0; i < numSubtrees; i++) {
-            subtrees.push(createSubtree(numEmployees))
-        }
-        return [tree_view.createItem(randomCompany(), true, subtrees)].concat(createOrg(numLevels - 1, numSubtrees, numEmployees))
-    }
 
-    FluArea{
-        id:layout_actions
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 50
-        paddings: 10
         RowLayout{
-            spacing: 14
+            spacing: 10
-            FluDropDownButton{
+            FluText{
-                id:btn_selection_model
+                text:"cellHeight:"
-                Layout.preferredWidth: 140
+                Layout.alignment: Qt.AlignVCenter
-                text:"None"
-                FluMenuItem{
-                    text:"None"
-                    onClicked: {
-                        btn_selection_model.text = text
-                        tree_view.selectionMode = FluTabViewType.Equal
-                    }
-                }
-                FluMenuItem{
-                    text:"Single"
-                    onClicked: {
-                        btn_selection_model.text = text
-                        tree_view.selectionMode = FluTabViewType.SizeToContent
-                    }
-                }
-                FluMenuItem{
-                    text:"Muiltple"
-                    onClicked: {
-                        btn_selection_model.text = text
-                        tree_view.selectionMode = FluTabViewType.Compact
-                    }
-                }
             }
-            FluFilledButton{
+            FluSlider{
-                text:"获取选中的数据"
+                id:slider_cell_height
-                onClicked: {
+                value: 30
-                    if(tree_view.selectionMode === FluTreeViewType.None){
+                from: 30
-                        showError("当前非选择模式,没有选中的数据")
+                to:100
-                    }
+            }
-                    if(tree_view.selectionMode === FluTreeViewType.Single){
+        }
-                        if(!tree_view.signleData()){
+        RowLayout{
-                            showError("没有选中数据")
+            spacing: 10
-                            return
+            FluText{
-                        }
+                text:"depthPadding:"
-                        showSuccess(tree_view.signleData().text)
+                Layout.alignment: Qt.AlignVCenter
-                    }
+            }
-                    if(tree_view.selectionMode === FluTreeViewType.Multiple){
+            FluSlider{
-                        if(tree_view.multipData().length===0){
+                id:slider_depth_padding
-                            showError("没有选中数据")
+                value: 30
-                            return
+                from: 30
-                        }
+                to:100
-                        var info = []
+            }
-                        tree_view.multipData().map((value)=>info.push(value.text))
+        }
-                        showSuccess(info.join(","))
+        FluToggleSwitch{
-                    }
+            id:switch_showline
-                }
+            text:"showLine"
+            checked: false
+        }
+        FluToggleSwitch{
+            id:switch_draggable
+            text:"draggable"
+            checked: false
+        }
+        FluToggleSwitch{
+            id:switch_checkable
+            text:"checkable"
+            checked: false
+        }
+        FluButton{
+            text:"all expand"
+            onClicked: {
+                tree_view.allExpand()
+            }
+        }
+        FluButton{
+            text:"all collapse"
+            onClicked: {
+                tree_view.allCollapse()
             }
         }
     }
     FluArea{
-        Layout.fillWidth: true
+        anchors{
-        Layout.topMargin: 10
+            left: layout_column.right
-        paddings: 10
+            top: parent.top
-        height: 400
+            bottom: parent.bottom
+            right: parent.right
+            rightMargin: 5
+            topMargin: 5
+            bottomMargin: 5
+        }
+        FluShadow{}
         FluTreeView{
             id:tree_view
-            width:240
+            anchors.fill: parent
-            anchors{
+            cellHeight: slider_cell_height.value
-                top:parent.top
+            draggable:switch_draggable.checked
-                left:parent.left
+            showLine: switch_showline.checked
-                bottom:parent.bottom
+            checkable:switch_checkable.checked
-            }
+            depthPadding: slider_depth_padding.value
-            onItemClicked:
-                (model)=>{
-                    showSuccess(model.text)
-                }
-
             Component.onCompleted: {
-                var org = createOrg(3, 3, 3)
+                var data = treeData()
-                createItem()
+                dataSource = data
-                updateData(org)
             }
         }
     }
-
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluTreeView{
-    id:tree_view
-    width:240
-    height:600
-    Component.onCompleted: {
-        var datas = []
-        datas.push(createItem("Node1",false))
-        datas.push(createItem("Node2",false))
-        datas.push(createItem("Node2",true,[createItem("Node2-1",false),createItem("Node2-2",false)]))
-        updateData(datas)
-    }
-}
-'
-    }
-
-
 }

example/qml-Qt6/viewmodel/SettingsViewModel.qml

@@ -0,0 +1,13 @@
+import QtQuick
+import FluentUI
+
+FluViewModel{
+
+    objectName: "SettingsViewModel"
+    property int displayMode
+
+    onInitData: {
+        displayMode = FluNavigationViewType.Auto
+    }
+
+}

example/qml-Qt6/viewmodel/TextBoxViewModel.qml

@@ -0,0 +1,8 @@
+import QtQuick
+import FluentUI
+
+FluViewModel {
+    objectName: "TextBoxView"
+    property string text1
+    property string text2
+}

example/qml-Qt6/window/AboutWindow.qml

@@ -35,7 +35,7 @@ CustomWindow {
                 }
             }
             FluText{
-                text:"v%1".arg(appInfo.version)
+                text:"v%1".arg(AppInfo.version)
                 font: FluTextStyle.Body
                 Layout.alignment: Qt.AlignBottom
             }

example/qml-Qt6/window/MainWindow.qml

@@ -7,6 +7,7 @@ import FluentUI
 import example
 import "qrc:///example/qml/component"
 import "qrc:///example/qml/global"
+import "qrc:///example/qml/viewmodel"
 
 CustomWindow {
 
@@ -20,14 +21,32 @@ CustomWindow {
     appBarVisible: false
     launchMode: FluWindowType.SingleTask
 
+    SettingsViewModel{
+        id:viewmodel_settings
+    }
+
     closeFunc:function(event){
         dialog_close.open()
         event.accepted = false
     }
 
+    FluEvent{
+        id:event_checkupdate
+        name: "checkUpdate"
+        onTriggered: {
+            checkUpdate(false)
+        }
+    }
+
     Component.onCompleted: {
         FluTools.setQuitOnLastWindowClosed(false)
         tour.open()
+        checkUpdate(true)
+        FluEventBus.registerEvent(event_checkupdate)
+    }
+
+    Component.onDestruction: {
+        FluEventBus.unRegisterEvent(event_checkupdate)
     }
 
     SystemTrayIcon {
@@ -133,13 +152,11 @@ CustomWindow {
                     }
                 }
             }
-
             FluRemoteLoader{
                 id:loader
                 lazy: true
                 anchors.fill: parent
-                //                source: "http://localhost:9000/RemoteComponent.qml"
+                source: "https://zhu-zichu.gitee.io/Qt6_156_LieflatPage.qml"
-                source: "https://zhu-zichu.gitee.io/RemoteComponent.qml"
             }
         }
         front: Item{
@@ -165,13 +182,13 @@ CustomWindow {
                 height: parent.height
                 z:999
                 //Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式
-                pageMode: FluNavigationViewType.Stack
+                //                pageMode: FluNavigationViewType.Stack
-                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存（推荐）
+                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存，可以配合FluViewModel保存页面数据（推荐）
-                //                pageMode: FluNavigationViewType.NoStack
+                pageMode: FluNavigationViewType.NoStack
                 items: ItemsOriginal
                 footerItems:ItemsFooter
                 topPadding:FluTools.isMacos() ? 20 : 0
-                displayMode:MainEvent.displayMode
+                displayMode:viewmodel_settings.displayMode
                 logo: "qrc:/example/res/image/favicon.ico"
                 title:"FluentUI"
                 onLogoClicked:{
@@ -277,4 +294,77 @@ 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
+        property bool silent: true
+        onStart: {
+            console.debug("satrt check update...")
+        }
+        onFinish: {
+            console.debug("check update finish")
+            FluEventBus.post("checkUpdateFinish");
+        }
+        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()
+                }else{
+                    if(!silent){
+                        showInfo("当前版本已经是最新版")
+                    }
+                }
+            }
+        onError:
+            (status,errorString)=>{
+                if(!silent){
+                    showError("网络异常!")
+                }
+                console.debug(status+";"+errorString)
+            }
+    }
+
+    function checkUpdate(silent){
+        callable.silent = silent
+        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

@@ -8,6 +8,13 @@ Window {
     id: app
     flags: Qt.SplashScreen
 
+    Connections{
+        target: FluTheme
+        function onDarkModeChanged(){
+            SettingsHelper.saveDarkMode(FluTheme.darkMode)
+        }
+    }
+
     FluHttpInterceptor{
         id:interceptor
         function onIntercept(request){
@@ -26,7 +33,7 @@ Window {
 
     Component.onCompleted: {
         FluApp.init(app)
-        FluTheme.darkMode = FluThemeType.System
+        FluTheme.darkMode = SettingsHelper.getDarkMode()
         FluTheme.enableAnimation = true
         FluApp.routes = {
             "/":"qrc:/example/qml/window/MainWindow.qml",
@@ -35,7 +42,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

@@ -80,7 +80,6 @@ FluExpander{
                     "FluIcon",
                     "FluIconButton",
                     "FluInfoBar",
-                    "FluItem",
                     "FluMediaPlayer",
                     "FluMenu",
                     "FluMenuItem",
@@ -136,7 +135,11 @@ FluExpander{
                     "FluTour",
                     "FluQRCode",
                     "FluTimeline",
-                    "FluChart"
+                    "FluChart",
+                    "FluRangeSlider",
+                    "FluStaggeredView",
+                    "FluProgressButton",
+                    "FluLoadingButton"
                 ];
         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:{
+            url:"qrc:/example/qml/page/T_Image.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_Slider.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_CheckBox.qml"
-                navigationView.push("qrc:/example/qml/page/T_CheckBox.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"RadioButton"
-            onTap:{
+            url:"qrc:/example/qml/page/T_RadioButton.qml"
-                navigationView.push("qrc:/example/qml/page/T_RadioButton.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"ToggleSwitch"
-            onTap:{
+            url:"qrc:/example/qml/page/T_ToggleSwitch.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_TextBox.qml"
-                navigationView.push("qrc:/example/qml/page/T_TextBox.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TimePicker"
-            onTap:{
+            url:"qrc:/example/qml/page/T_TimePicker.qml"
-                navigationView.push("qrc:/example/qml/page/T_TimePicker.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"DatePicker"
-            onTap:{
+            url:"qrc:/example/qml/page/T_DatePicker.qml"
-                navigationView.push("qrc:/example/qml/page/T_DatePicker.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"CalendarPicker"
-            onTap:{
+            url:"qrc:/example/qml/page/T_CalendarPicker.qml"
-                navigationView.push("qrc:/example/qml/page/T_CalendarPicker.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"ColorPicker"
-            onTap:{
+            url:"qrc:/example/qml/page/T_ColorPicker.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_InfoBar.qml"
-                navigationView.push("qrc:/example/qml/page/T_InfoBar.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Progress"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Progress.qml"
-                navigationView.push("qrc:/example/qml/page/T_Progress.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"RatingControl"
-            onTap:{
+            url:"qrc:/example/qml/page/T_RatingControl.qml"
-                navigationView.push("qrc:/example/qml/page/T_RatingControl.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Badge"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Badge.qml"
-                navigationView.push("qrc:/example/qml/page/T_Badge.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Rectangle"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Rectangle.qml"
-                navigationView.push("qrc:/example/qml/page/T_Rectangle.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"StatusView"
-            onTap:{
+            url:"qrc:/example/qml/page/T_StatusView.qml"
-                navigationView.push("qrc:/example/qml/page/T_StatusView.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Carousel"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Carousel.qml"
-                navigationView.push("qrc:/example/qml/page/T_Carousel.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Expander"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Expander.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_Watermark.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_Dialog.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_Tooltip.qml"
-                navigationView.push("qrc:/example/qml/page/T_Tooltip.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Menu"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Menu.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_Pivot.qml"
-                navigationView.push("qrc:/example/qml/page/T_Pivot.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"BreadcrumbBar"
-            onTap:{
+            url:"qrc:/example/qml/page/T_BreadcrumbBar.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_TabView.qml"
-                navigationView.push("qrc:/example/qml/page/T_TabView.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TreeView"
-            onTap:{
+            url:"qrc:/example/qml/page/T_TreeView.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_TableView.qml"
-                navigationView.push("qrc:/example/qml/page/T_TableView.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Pagination"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Pagination.qml"
-                navigationView.push("qrc:/example/qml/page/T_Pagination.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"MultiWindow"
-            onTap:{
+            url:"qrc:/example/qml/page/T_MultiWindow.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_FlipView.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_Acrylic.qml"
-                navigationView.push("qrc:/example/qml/page/T_Acrylic.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Theme"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Theme.qml"
-                navigationView.push("qrc:/example/qml/page/T_Theme.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Typography"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Typography.qml"
-                navigationView.push("qrc:/example/qml/page/T_Typography.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Awesome"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Awesome.qml"
-                navigationView.push("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:{
+            url:"qrc:/example/qml/page/T_QRCode.qml"
-                navigationView.push("qrc:/example/qml/page/T_QRCode.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Tour"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Tour.qml"
-                navigationView.push("qrc:/example/qml/page/T_Tour.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Timeline"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Timeline.qml"
-                navigationView.push("qrc:/example/qml/page/T_Timeline.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Screenshot"
+            title:"Screenshot(Todo)"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Screenshot.qml"
-                navigationView.push("qrc:/example/qml/page/T_Screenshot.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Captcha"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Captcha.qml"
-                navigationView.push("qrc:/example/qml/page/T_Captcha.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Chart"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Chart.qml"
-                navigationView.push("qrc:/example/qml/page/T_Chart.qml")
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            }
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Http"
-            onTap:{
+            url:"qrc:/example/qml/page/T_Http.qml"
-                navigationView.push("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") }
         }
     }
 
@@ -460,6 +477,9 @@ FluObject{
     }
 
     function getSearchData(){
+        if(!navigationView){
+            return
+        }
         var arr = []
         var items = navigationView.getItems();
         for(var i=0;i<items.length;i++){

example/qml/global/MainEvent.qml

@@ -1,9 +0,0 @@
-pragma Singleton
-
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import FluentUI 1.0
-
-QtObject {
-    property int displayMode : FluNavigationViewType.Auto
-}

example/qml/global/qmldir

@@ -1,3 +1,2 @@
 singleton ItemsOriginal 1.0 ItemsOriginal.qml
 singleton ItemsFooter 1.0 ItemsFooter.qml
-singleton MainEvent 1.0 MainEvent.qml

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{
 
@@ -47,10 +48,10 @@ FluScrollablePage{
         height: 1200/4+20
         paddings: 10
         Layout.topMargin: 10
-        FluRectangle{
+        FluClip{
             width: 1920/4
             height: 1200/4
-            radius:[15,15,15,15]
+            radius:[8,8,8,8]
             Image {
                 id:image
                 asynchronous: true

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,97 @@ 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
+        height: 68
+        Layout.topMargin: 20
+        paddings: 10
+
+        FluLoadingButton{
+            id:btn_loading
+            loading:loading_button_switch.checked
+            text:"Loading Button"
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            onClicked: {
+
+            }
+        }
+        FluToggleSwitch{
+            id:loading_button_switch
+            checked: true
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text:"Loading"
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluLoadingButton{
+    text:"Loading 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,15 +4,16 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
     title:"Captcha"
 
-
     FluCaptcha{
         id:captcha
         Layout.topMargin: 20
+        ignoreCase:switch_case.checked
         MouseArea{
             anchors.fill: parent
             cursorShape: Qt.PointingHandCursor
@@ -30,6 +31,13 @@ FluScrollablePage{
         }
     }
 
+    FluToggleSwitch{
+        id:switch_case
+        text:"Ignore Case"
+        checked: true
+        Layout.topMargin: 10
+    }
+
     RowLayout{
         spacing: 10
         Layout.topMargin: 10
@@ -49,6 +57,4 @@ 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{
 
@@ -36,20 +37,27 @@ FluScrollablePage{
             FluText{
                 text:"轮播图，支持无限轮播，无限滑动，用ListView实现的组件"
             }
-            FluCarousel{
+            Item{
-                radius:[5,5,5,5]
+                width: 400
-                delegate: Component{
+                height: 300
-                    Image {
+                FluShadow{
-                        anchors.fill: parent
+                    radius: 8
-                        source: model.url
-                        asynchronous: true
-                        fillMode:Image.PreserveAspectCrop
-                    }
                 }
-                Layout.topMargin: 20
+                FluCarousel{
-                Layout.leftMargin: 5
+                    anchors.fill: parent
-                Component.onCompleted: {
+                    delegate: Component{
-                    model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
+                        Image {
+                            anchors.fill: parent
+                            source: model.url
+                            asynchronous: true
+                            fillMode:Image.PreserveAspectCrop
+                        }
+                    }
+                    Layout.topMargin: 20
+                    Layout.leftMargin: 5
+                    Component.onCompleted: {
+                        model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
+                    }
                 }
             }
         }
@@ -66,46 +74,54 @@ FluScrollablePage{
                 verticalCenter: parent.verticalCenter
                 left:parent.left
             }
-            FluCarousel{
+            Item{
-                radius:[15,15,15,15]
+                width: 400
-                loopTime:1500
+                height: 300
-                indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
+                FluShadow{
-                indicatorMarginTop:15
+                    radius: 8
-                delegate: Component{
+                }
-                    Item{
+                FluCarousel{
-                        anchors.fill: parent
+                    anchors.fill: parent
-                        Image {
+                    loopTime:1500
+                    indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
+                    indicatorMarginTop:15
+                    delegate: Component{
+                        Item{
                             anchors.fill: parent
-                            source: model.url
+                            Image {
-                            asynchronous: true
-                            fillMode:Image.PreserveAspectCrop
-                        }
-                        Rectangle{
-                            height: 40
-                            width: parent.width
-                            anchors.bottom: parent.bottom
-                            color: "#33000000"
-                            FluText{
                                 anchors.fill: parent
-                                verticalAlignment: Qt.AlignVCenter
+                                source: model.url
-                                horizontalAlignment: Qt.AlignHCenter
+                                asynchronous: true
-                                text:model.title
+                                fillMode:Image.PreserveAspectCrop
-                                color: FluColors.Grey10
+                            }
-                                font.pixelSize: 15
+                            Rectangle{
+                                height: 40
+                                width: parent.width
+                                anchors.bottom: parent.bottom
+                                color: "#33000000"
+                                FluText{
+                                    anchors.fill: parent
+                                    verticalAlignment: Qt.AlignVCenter
+                                    horizontalAlignment: Qt.AlignHCenter
+                                    text:model.title
+                                    color: FluColors.Grey10
+                                    font.pixelSize: 15
+                                }
                             }
                         }
                     }
-                }
+                    Layout.topMargin: 20
-                Layout.topMargin: 20
+                    Layout.leftMargin: 5
-                Layout.leftMargin: 5
+                    Component.onCompleted: {
-                Component.onCompleted: {
+                        var arr = []
-                    var arr = []
+                        arr.push({url:"qrc:/example/res/image/banner_1.jpg",title:"共同应对全球性问题"})
-                    arr.push({url:"qrc:/example/res/image/banner_1.jpg",title:"共同应对全球性问题"})
+                        arr.push({url:"qrc:/example/res/image/banner_2.jpg",title:"三小只全程没互动"})
-                    arr.push({url:"qrc:/example/res/image/banner_2.jpg",title:"三小只全程没互动"})
+                        arr.push({url:"qrc:/example/res/image/banner_3.jpg",title:"有效投资扩大 激发增长动能"})
-                    arr.push({url:"qrc:/example/res/image/banner_3.jpg",title:"有效投资扩大 激发增长动能"})
+                        model = arr
-                    model = arr
+                    }
                 }
             }
+
         }
     }
 

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{
 
@@ -46,7 +47,6 @@ FluScrollablePage{
             }
             FluComboBox {
                 editable: true
-                font:FluTextStyle.BodyStrong
                 model: ListModel {
                     id: model_2
                     ListElement { text: "Banana" }

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

@@ -2,6 +2,7 @@ import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
+import QtGraphicalEffects 1.0
 import "qrc:///example/qml/global"
 import FluentUI 1.0
 
@@ -29,6 +30,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{
@@ -49,33 +51,19 @@ FluScrollablePage{
             }
         }
 
-        ListView{
+        Component{
-            id: list
+            id:com_grallery
-            anchors{
+            Item{
-                left: parent.left
-                right: parent.right
-                bottom: parent.bottom
-            }
-            orientation: ListView.Horizontal
-            height: 240
-            model: model_header
-            header: Item{height: 10;width: 10}
-            footer: Item{height: 10;width: 10}
-            ScrollBar.horizontal: FluScrollBar{
-                id: scrollbar_header
-            }
-            clip: false
-            delegate:Item{
                 id: control
                 width: 220
                 height: 240
                 FluShadow{
-                    radius:8
+                    radius:5
                     anchors.fill: item_content
                 }
-                FluItem{
+                FluClip{
                     id:item_content
-                    radius: [8,8,8,8]
+                    radius: [5,5,5,5]
                     width: 200
                     height: 220
                     anchors.centerIn: parent
@@ -89,20 +77,15 @@ FluScrollablePage{
                     }
                     Rectangle{
                         anchors.fill: parent
-                        radius: 8
+                        radius: 5
-                        color:{
+                        color:FluTheme.dark ? Qt.rgba(1,1,1,0.03) : Qt.rgba(0,0,0,0.03)
-                            if(FluTheme.dark){
+                        visible: item_mouse.containsMouse
-                                if(item_mouse.containsMouse){
+                    }
-                                    return Qt.rgba(1,1,1,0.03)
+                    Rectangle{
-                                }
+                        anchors.fill: parent
-                                return Qt.rgba(0,0,0,0.0)
+                        radius: 5
-                            }else{
+                        color:Qt.rgba(0,0,0,0.0)
-                                if(item_mouse.containsMouse){
+                        visible: !item_mouse.containsMouse
-                                    return Qt.rgba(0,0,0,0.03)
-                                }
-                                return Qt.rgba(0,0,0,0.0)
-                            }
-                        }
                     }
                     ColumnLayout{
                         Image {
@@ -154,11 +137,31 @@ FluScrollablePage{
                 }
             }
         }
+
+        ListView{
+            id: list
+            anchors{
+                left: parent.left
+                right: parent.right
+                bottom: parent.bottom
+            }
+            orientation: ListView.Horizontal
+            height: 240
+            model: model_header
+            header: Item{height: 10;width: 10}
+            footer: Item{height: 10;width: 10}
+            ScrollBar.horizontal: FluScrollBar{
+                id: scrollbar_header
+            }
+            clip: false
+            delegate: com_grallery
+        }
     }
 
     Component{
         id:com_item
         Item{
+            property string desc: modelData.desc
             width: 320
             height: 120
             FluArea{
@@ -194,7 +197,6 @@ FluScrollablePage{
                         verticalCenter: parent.verticalCenter
                     }
                 }
-
                 FluText{
                     id:item_title
                     text:modelData.title
@@ -205,10 +207,9 @@ FluScrollablePage{
                         top: item_icon.top
                     }
                 }
-
                 FluText{
                     id:item_desc
-                    text:modelData.desc
+                    text:desc
                     color:FluColors.Grey120
                     wrapMode: Text.WrapAnywhere
                     elide: Text.ElideRight

example/qml/page/T_Http.qml

@@ -6,18 +6,68 @@ 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"
+    property bool isDownCompleted: false
 
     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 +86,8 @@ FluContentPage{
                 implicitHeight: 36
                 text: "Get请求"
                 onClicked: {
-                    var callable = {}
+                    var request = http.newRequest("https://httpbingo.org/get")
-                    callable.onStart = function(){
+                    http.get(request,callable)
-                        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)
                 }
             }
             FluButton{
@@ -58,25 +95,13 @@ FluContentPage{
                 implicitHeight: 36
                 text: "Post表单请求"
                 onClicked: {
-                    var callable = {}
+                    var request = http.newRequest("https://httpbingo.org/post")
-                    callable.onStart = function(){
+                    var params = {}
-                        showLoading()
+                    params.custname = "朱子楚"
-                    }
+                    params.custtel = "1234567890"
-                    callable.onFinish = function(){
+                    params.custemail = "zhuzichu520@gmail.com"
-                        hideLoading()
+                    request.params = params
-                    }
+                    http.post(request,callable)
-                    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)
                 }
             }
             FluButton{
@@ -84,25 +109,13 @@ FluContentPage{
                 implicitHeight: 36
                 text: "Post Json请求"
                 onClicked: {
-                    var callable = {}
+                    var request = http.newRequest("https://httpbingo.org/post")
-                    callable.onStart = function(){
+                    var params = {}
-                        showLoading()
+                    params.custname = "朱子楚"
-                    }
+                    params.custtel = "1234567890"
-                    callable.onFinish = function(){
+                    params.custemail = "zhuzichu520@gmail.com"
-                        hideLoading()
+                    request.params = params
-                    }
+                    http.postJson(request,callable)
-                    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)
                 }
             }
             FluButton{
@@ -110,25 +123,12 @@ FluContentPage{
                 implicitHeight: 36
                 text: "Post String请求"
                 onClicked: {
-                    var callable = {}
+                    var request = http.newRequest("https://httpbingo.org/post")
-                    callable.onStart = function(){
+                    request.params = "我命由我不由天"
-                        showLoading()
+                    http.postString(request,callable)
-                    }
-                    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)
                 }
             }
-            FluButton{
+            FluProgressButton{
                 id:btn_download
                 implicitWidth: parent.width
                 implicitHeight: 36
@@ -137,7 +137,90 @@ 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)=>{
+                            if(!isDownCompleted){
+                                tour.open()
+                                isDownCompleted = true
+                            }
+                            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 +229,143 @@ 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 = ""
+                }
+            }
         }
     }
 
+    FluTour{
+        id:tour
+        steps:[
+            {title:"友情提示",description: "下载已完成，左击这里可以打开文件所在路径，右击可以弹出菜单删除文件！",target:()=>btn_breakpoint_download}
+        ]
+    }
+
+    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))
+            request.params = params
-            var callable = {}
+            http.upload(request,callable_upload)
-            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)
         }
     }
 
+    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 = {}
+            var request = http.newRequest("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4")
-            callable.onStart = function(){
+            request.downloadSavePath = FluTools.toLocalPath(currentFolder)+ "/big_buck_bunny.mp4"
-                btn_download.disabled = true
+            http.download(request,callable_download)
-            }
-            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)
         }
     }
-
     FluArea{
         anchors{
             top: layout_flick.top
@@ -246,34 +391,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{
 
@@ -12,7 +13,7 @@ FluScrollablePage{
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 240
+        height: 270
         paddings: 10
         ColumnLayout{
             spacing: 14
@@ -44,6 +45,12 @@ FluScrollablePage{
                     showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
                 }
             }
+            FluButton{
+                text:"手动关闭的InfoBar"
+                onClicked: {
+                    showInfo("这是一个Info样式的InfoBar",0,"支持手动关闭")
+                }
+            }
             FluButton{
                 text:"Loading"
                 onClicked: {

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{
 
@@ -15,9 +16,12 @@ FluScrollablePage{
         height: 400
         paddings: 10
 
+
+
         FluPivot{
             anchors.fill: parent
             currentIndex: 2
+
             FluPivotItem{
                 title:"All"
                 contentItem:FluText{

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

@@ -3,8 +3,8 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 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{
 
@@ -68,7 +69,7 @@ FluScrollablePage{
             }
             RowLayout{
                 spacing: 14
-                FluRectangle{
+                FluClip{
                     width: 50
                     height: 50
                     radius:[25,0,25,25]
@@ -79,7 +80,7 @@ FluScrollablePage{
                         sourceSize: Qt.size(width,height)
                     }
                 }
-                FluRectangle{
+                FluClip{
                     width: 50
                     height: 50
                     radius:[10,10,10,10]
@@ -90,7 +91,7 @@ FluScrollablePage{
                         source: "qrc:/example/res/svg/avatar_2.svg"
                     }
                 }
-                FluRectangle{
+                FluClip{
                     width: 50
                     height: 50
                     radius:[25,25,25,25]
@@ -101,7 +102,7 @@ FluScrollablePage{
                         source: "qrc:/example/res/svg/avatar_3.svg"
                     }
                 }
-                FluRectangle{
+                FluClip{
                     width: 50
                     height: 50
                     radius:[0,25,25,25]
@@ -113,10 +114,10 @@ FluScrollablePage{
                     }
                 }
             }
-            FluRectangle{
+            FluClip{
                 width: 1920/5
                 height: 1200/5
-                radius:[15,15,15,15]
+                radius:[8,8,8,8]
                 Image {
                     asynchronous: true
                     source: "qrc:/example/res/image/banner_1.jpg"

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{
 
@@ -30,9 +31,10 @@ FluScrollablePage{
         Layout.topMargin: 10
         Layout.leftMargin: 4
         Layout.bottomMargin: 4
+        radius: 4
         color: FluTheme.dark ? FluColors.Black : FluColors.White
         FluShadow{
-            radius: 0
+            radius: 4
             color: FluTheme.primaryColor.dark
         }
         Image{

example/qml/page/T_Settings.qml

@@ -5,11 +5,93 @@ import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/global"
 import "qrc:///example/qml/component"
+import "qrc:///example/qml/viewmodel"
+import "../component"
+import "../viewmodel"
+import "../global"
 
 FluScrollablePage{
 
     title:"Settings"
 
+    SettingsViewModel{
+        id:viewmodel_settings
+    }
+
+    FluEvent{
+        id:event_checkupdate_finish
+        name: "checkUpdateFinish"
+        onTriggered: {
+            btn_checkupdate.loading = false
+        }
+    }
+
+    Component.onCompleted: {
+        FluEventBus.registerEvent(event_checkupdate_finish)
+    }
+
+    Component.onDestruction: {
+        FluEventBus.unRegisterEvent(event_checkupdate_finish)
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 60
+        paddings: 10
+        Row{
+            spacing: 20
+            anchors.verticalCenter: parent.verticalCenter
+            FluText{
+                text:"当前版本 v%1".arg(AppInfo.version)
+                font: FluTextStyle.Body
+                anchors.verticalCenter: parent.verticalCenter
+            }
+            FluLoadingButton{
+                id:btn_checkupdate
+                text:"检查更新"
+                anchors.verticalCenter: parent.verticalCenter
+                onClicked: {
+                    loading = true
+                    FluEventBus.post("checkUpdate")
+                }
+            }
+        }
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 50
+        paddings: 10
+        FluCheckBox{
+            text:"Software Render"
+            checked: SettingsHelper.getReander() === "software"
+            anchors.verticalCenter: parent.verticalCenter
+            onClicked: {
+                if(SettingsHelper.getReander() === "software"){
+                    SettingsHelper.saveRender("")
+                }else{
+                    SettingsHelper.saveRender("software")
+                }
+                dialog_render.open()
+            }
+        }
+    }
+
+    FluContentDialog{
+        id:dialog_render
+        title:"友情提示"
+        message:"此操作需要重启才能生效，是否重新启动？"
+        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
+        negativeText: "取消"
+        positiveText:"确定"
+        onPositiveClicked:{
+            window.deleteWindow()
+            AppInfo.restart()
+        }
+    }
+
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
@@ -60,10 +142,10 @@ FluScrollablePage{
             Repeater{
                 model: [{title:"Open",mode:FluNavigationViewType.Open},{title:"Compact",mode:FluNavigationViewType.Compact},{title:"Minimal",mode:FluNavigationViewType.Minimal},{title:"Auto",mode:FluNavigationViewType.Auto}]
                 delegate: FluRadioButton{
-                    checked : MainEvent.displayMode===modelData.mode
+                    checked : viewmodel_settings.displayMode===modelData.mode
                     text:modelData.title
                     clickListener:function(){
-                        MainEvent.displayMode = modelData.mode
+                        viewmodel_settings.displayMode = modelData.mode
                     }
                 }
             }
@@ -94,10 +176,10 @@ FluScrollablePage{
                 Repeater{
                     model: ["Zh","En"]
                     delegate: FluRadioButton{
-                        checked: appInfo.lang.objectName === modelData
+                        checked: AppInfo.lang.objectName === modelData
                         text:modelData
                         clickListener:function(){
-                            appInfo.changeLang(modelData)
+                            AppInfo.changeLang(modelData)
                         }
                     }
                 }

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
+        Layout.preferredHeight: 200
-        paddings: 10
         Layout.topMargin: 20
-        FluSlider{
+        paddings: 10
-            anchors.verticalCenter: parent.verticalCenter
+
+        Row{
+            spacing: 30
+            FluSlider{
+            }
+            FluSlider{
+                orientation: Qt.Vertical
+                anchors.verticalCenter: parent.verticalCenter
+            }
         }
     }
     CodeExpander{
@@ -26,25 +34,28 @@ FluScrollablePage{
 }'
     }
 
+
     FluArea{
         Layout.fillWidth: true
-        height: 200
+        Layout.preferredHeight: 200
-        paddings: 10
         Layout.topMargin: 20
-        FluSlider{
+        paddings: 10
-            orientation: Qt.Vertical
+        Row{
-            anchors.left: parent.left
+            spacing: 30
-            anchors.verticalCenter: parent.verticalCenter
+            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,12 +4,21 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "qrc:///example/qml/viewmodel"
+import "../component"
+import "../viewmodel"
 
 FluScrollablePage{
-
-    launchMode: FluPageType.SingleInstance
-
     title:"TextBox"
+
+    TextBoxViewModel{
+        id:viewModel
+    }
+
+    Component.onDestruction: {
+        console.debug("T_TextBox页面销毁了")
+    }
+
     FluArea{
         Layout.fillWidth: true
         height: 68
@@ -20,6 +29,10 @@ FluScrollablePage{
             placeholderText: "单行输入框"
             disabled:text_box_switch.checked
             cleanEnabled: true
+            text:viewModel.text1
+            onTextChanged: {
+                viewModel.text1 = text
+            }
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
@@ -84,6 +97,10 @@ FluScrollablePage{
         FluMultilineTextBox{
             id:multiine_textbox
             placeholderText: "多行输入框"
+            text:viewModel.text2
+            onTextChanged: {
+                viewModel.text2 = text
+            }
             disabled:text_box_multi_switch.checked
             anchors{
                 verticalCenter: parent.verticalCenter

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,153 +4,129 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "qrc:///example/qml/component"
+import "../component"
 
-FluScrollablePage {
+FluContentPage {
 
     title:"TreeView"
 
-    function randomName() {
+    function treeData(){
-        var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]
+        const dig = (path = '0', level = 4) => {
-        return names[Math.floor(Math.random() * names.length)]
+            const list = [];
+            for (let i = 0; i < 6; i += 1) {
+                const key = `${path}-${i}`;
+                const treeNode = {
+                    title: key,
+                    key,
+                };
+                if (level > 0) {
+                    treeNode.children = dig(key, level - 1);
+                }
+                list.push(treeNode);
+            }
+            return list;
+        };
+        return dig();
     }
 
-    function randomCompany() {
+    Column{
-        var companies = ["阿里巴巴", "腾讯", "百度", "京东", "华为", "小米", "字节跳动", "美团", "滴滴"]
+        id:layout_column
-        return companies[Math.floor(Math.random() * companies.length)]
+        spacing: 12
-    }
+        width: 300
-
+        anchors{
-    function randomDepartment() {
+            topMargin: 20
-        var departments = ["技术部", "销售部", "市场部", "人事部", "财务部", "客服部", "产品部", "设计部", "运营部"]
+            top:parent.top
-        return departments[Math.floor(Math.random() * departments.length)]
+            left: parent.left
-    }
+            leftMargin: 10
-
+            bottom:parent.bottom
-    function createEmployee() {
+            bottomMargin: 20
-        var name = randomName()
-        return tree_view.createItem(name, false)
-    }
-
-    function createSubtree(numEmployees) {
-        var employees = []
-        for (var i = 0; i < numEmployees; i++) {
-            employees.push(createEmployee())
         }
-        return tree_view.createItem(randomDepartment(), true, employees)
-    }
 
-    function createOrg(numLevels, numSubtrees, numEmployees) {
+        FluText{
-        if (numLevels === 0) {
+            text:"共计%1条数据，当前显示的%2条数据".arg(tree_view.count()).arg(tree_view.visibleCount())
-            return []
+        }
+
+        FluText{
+            text:"共计选中%1条数据".arg(tree_view.selectionModel().length)
         }
-        var subtrees = []
-        for (var i = 0; i < numSubtrees; i++) {
-            subtrees.push(createSubtree(numEmployees))
-        }
-        return [tree_view.createItem(randomCompany(), true, subtrees)].concat(createOrg(numLevels - 1, numSubtrees, numEmployees))
-    }
 
-    FluArea{
-        id:layout_actions
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 50
-        paddings: 10
         RowLayout{
-            spacing: 14
+            spacing: 10
-            FluDropDownButton{
+            FluText{
-                id:btn_selection_model
+                text:"cellHeight:"
-                Layout.preferredWidth: 140
+                Layout.alignment: Qt.AlignVCenter
-                text:"None"
-                FluMenuItem{
-                    text:"None"
-                    onClicked: {
-                        btn_selection_model.text = text
-                        tree_view.selectionMode = FluTabViewType.Equal
-                    }
-                }
-                FluMenuItem{
-                    text:"Single"
-                    onClicked: {
-                        btn_selection_model.text = text
-                        tree_view.selectionMode = FluTabViewType.SizeToContent
-                    }
-                }
-                FluMenuItem{
-                    text:"Muiltple"
-                    onClicked: {
-                        btn_selection_model.text = text
-                        tree_view.selectionMode = FluTabViewType.Compact
-                    }
-                }
             }
-            FluFilledButton{
+            FluSlider{
-                text:"获取选中的数据"
+                id:slider_cell_height
-                onClicked: {
+                value: 30
-                    if(tree_view.selectionMode === FluTreeViewType.None){
+                from: 30
-                        showError("当前非选择模式,没有选中的数据")
+                to:100
-                    }
+            }
-                    if(tree_view.selectionMode === FluTreeViewType.Single){
+        }
-                        if(!tree_view.signleData()){
+        RowLayout{
-                            showError("没有选中数据")
+            spacing: 10
-                            return
+            FluText{
-                        }
+                text:"depthPadding:"
-                        showSuccess(tree_view.signleData().text)
+                Layout.alignment: Qt.AlignVCenter
-                    }
+            }
-                    if(tree_view.selectionMode === FluTreeViewType.Multiple){
+            FluSlider{
-                        if(tree_view.multipData().length===0){
+                id:slider_depth_padding
-                            showError("没有选中数据")
+                value: 30
-                            return
+                from: 30
-                        }
+                to:100
-                        var info = []
+            }
-                        tree_view.multipData().map((value)=>info.push(value.text))
+        }
-                        showSuccess(info.join(","))
+        FluToggleSwitch{
-                    }
+            id:switch_showline
-                }
+            text:"showLine"
+            checked: false
+        }
+        FluToggleSwitch{
+            id:switch_draggable
+            text:"draggable"
+            checked: false
+        }
+        FluToggleSwitch{
+            id:switch_checkable
+            text:"checkable"
+            checked: false
+        }
+        FluButton{
+            text:"all expand"
+            onClicked: {
+                tree_view.allExpand()
+            }
+        }
+        FluButton{
+            text:"all collapse"
+            onClicked: {
+                tree_view.allCollapse()
             }
         }
     }
     FluArea{
-        Layout.fillWidth: true
+        anchors{
-        Layout.topMargin: 10
+            left: layout_column.right
-        paddings: 10
+            top: parent.top
-        height: 400
+            bottom: parent.bottom
+            right: parent.right
+            rightMargin: 5
+            topMargin: 5
+            bottomMargin: 5
+        }
+        FluShadow{}
         FluTreeView{
             id:tree_view
-            width:240
+            anchors.fill: parent
-            anchors{
+            cellHeight: slider_cell_height.value
-                top:parent.top
+            draggable:switch_draggable.checked
-                left:parent.left
+            showLine: switch_showline.checked
-                bottom:parent.bottom
+            checkable:switch_checkable.checked
-            }
+            depthPadding: slider_depth_padding.value
-            onItemClicked:
-                (model)=>{
-                    showSuccess(model.text)
-                }
-
             Component.onCompleted: {
-                var org = createOrg(3, 3, 3)
+                var data = treeData()
-                createItem()
+                dataSource = data
-                updateData(org)
             }
         }
     }
-
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluTreeView{
-    id:tree_view
-    width:240
-    height:600
-    Component.onCompleted: {
-        var datas = []
-        datas.push(createItem("Node1",false))
-        datas.push(createItem("Node2",false))
-        datas.push(createItem("Node2",true,[createItem("Node2-1",false),createItem("Node2-2",false)]))
-        updateData(datas)
-    }
-}
-'
-    }
-
-
 }

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/viewmodel/SettingsViewModel.qml

@@ -0,0 +1,13 @@
+import QtQuick 2.15
+import FluentUI 1.0
+
+FluViewModel{
+
+    objectName: "SettingsViewModel"
+    property int displayMode
+
+    onInitData: {
+        displayMode = FluNavigationViewType.Auto
+    }
+
+}

example/qml/viewmodel/TextBoxViewModel.qml

@@ -0,0 +1,8 @@
+import QtQuick 2.15
+import FluentUI 1.0
+
+FluViewModel {
+    objectName: "TextBoxView"
+    property string text1
+    property string text2
+}