update

fix(FluSplitLayout): solve binding loop on qt 6.6.0

.cmake/GetGitRevisionDescription.cmake

@@ -34,7 +34,7 @@ function(get_git_head_revision _refspecvar _hashvar)
     endif()
     if(NOT "${GIT_DIR}" STREQUAL "")
         file(RELATIVE_PATH _relative_to_source_dir "${CMAKE_SOURCE_DIR}"
-             "${GIT_DIR}")
+            "${GIT_DIR}")
         if("${_relative_to_source_dir}" MATCHES "[.][.]" AND NOT ALLOW_LOOKING_ABOVE_CMAKE_SOURCE_DIR)
             set(GIT_DIR "")
         endif()
@@ -52,23 +52,23 @@ function(get_git_head_revision _refspecvar _hashvar)
     if(NOT IS_DIRECTORY ${GIT_DIR})
         execute_process(
             COMMAND "${GIT_EXECUTABLE}" rev-parse
-                    --show-superproject-working-tree
+            --show-superproject-working-tree
             WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
             OUTPUT_VARIABLE out
             ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
         if(NOT "${out}" STREQUAL "")
             file(READ ${GIT_DIR} submodule)
             string(REGEX REPLACE "gitdir: (.*)$" "\\1" GIT_DIR_RELATIVE
-                                 ${submodule})
+                ${submodule})
             string(STRIP ${GIT_DIR_RELATIVE} GIT_DIR_RELATIVE)
             get_filename_component(SUBMODULE_DIR ${GIT_DIR} PATH)
             get_filename_component(GIT_DIR ${SUBMODULE_DIR}/${GIT_DIR_RELATIVE}
-                                   ABSOLUTE)
+                ABSOLUTE)
             set(HEAD_SOURCE_FILE "${GIT_DIR}/HEAD")
         else()
             file(READ ${GIT_DIR} worktree_ref)
             string(REGEX REPLACE "gitdir: (.*)$" "\\1" git_worktree_dir
-                                 ${worktree_ref})
+                ${worktree_ref})
             string(STRIP ${git_worktree_dir} git_worktree_dir)
             _git_find_closest_git_dir("${git_worktree_dir}" GIT_DIR)
             set(HEAD_SOURCE_FILE "${git_worktree_dir}/HEAD")
@@ -88,7 +88,7 @@ function(get_git_head_revision _refspecvar _hashvar)
     configure_file("${HEAD_SOURCE_FILE}" "${HEAD_FILE}" COPYONLY)
 
     configure_file("${_gitdescmoddir}/GetGitRevisionDescription.cmake.in"
-                   "${GIT_DATA}/grabRef.cmake" @ONLY)
+        "${GIT_DATA}/grabRef.cmake" @ONLY)
     include("${GIT_DATA}/grabRef.cmake")
 
     set(${_refspecvar}
@@ -299,12 +299,12 @@ git_describe(GIT_DESCRIBE)
 git_commit_counts(GIT_COMMIT_COUNT)
 _git_find_closest_git_dir("${CMAKE_CURRENT_SOURCE_DIR}" GIT_DIR)
 if(NOT IS_DIRECTORY ${GIT_DIR})
-  message(STATUS "Current .git not exist")
-  set(GIT_COMMIT_COUNT "1")
-  set(GIT_DESCRIBE "1.0.0")
-  set(GIT_TAG "1.0.0")
+    message(STATUS "Current .git not exist")
+    set(GIT_COMMIT_COUNT "1")
+    set(GIT_DESCRIBE "1.0.0")
+    set(GIT_TAG "1.0.0")
 else()
-  message(STATUS "Current .git exist")
+    message(STATUS "Current .git exist")
 endif()
 string(REPLACE "." "," GIT_TAG_WITH_COMMA ${GIT_TAG})
 string(REGEX MATCH "[0-9]+\\.[0-9]+\\.[0-9]+" GIT_SEMVER "${GIT_TAG}")

.cmake/GetGitRevisionDescription.cmake.in

@@ -1,43 +1,21 @@
-#
-# Internal file for GetGitRevisionDescription.cmake
-#
-# Requires CMake 2.6 or newer (uses the 'function' command)
-#
-# Original Author:
-# 2009-2010 Ryan Pavlik <rpavlik@iastate.edu> <abiryan@ryand.net>
-# http://academic.cleardefinition.com
-# Iowa State University HCI Graduate Program/VRAC
-#
-# Copyright 2009-2012, Iowa State University
-# Copyright 2011-2015, Contributors
-# Distributed under the Boost Software License, Version 1.0.
-# (See accompanying file LICENSE_1_0.txt or copy at
-# http://www.boost.org/LICENSE_1_0.txt)
-# SPDX-License-Identifier: BSL-1.0
-
 set(HEAD_HASH)
-
 file(READ "@HEAD_FILE@" HEAD_CONTENTS LIMIT 1024)
-
 string(STRIP "${HEAD_CONTENTS}" HEAD_CONTENTS)
 if(HEAD_CONTENTS MATCHES "ref")
-	# named branch
-	string(REPLACE "ref: " "" HEAD_REF "${HEAD_CONTENTS}")
-	if(EXISTS "@GIT_DIR@/${HEAD_REF}")
-		configure_file("@GIT_DIR@/${HEAD_REF}" "@GIT_DATA@/head-ref" COPYONLY)
-	else()
-		configure_file("@GIT_DIR@/packed-refs" "@GIT_DATA@/packed-refs" COPYONLY)
-		file(READ "@GIT_DATA@/packed-refs" PACKED_REFS)
-		if(${PACKED_REFS} MATCHES "([0-9a-z]*) ${HEAD_REF}")
-			set(HEAD_HASH "${CMAKE_MATCH_1}")
-		endif()
-	endif()
+    string(REPLACE "ref: " "" HEAD_REF "${HEAD_CONTENTS}")
+    if(EXISTS "@GIT_DIR@/${HEAD_REF}")
+        configure_file("@GIT_DIR@/${HEAD_REF}" "@GIT_DATA@/head-ref" COPYONLY)
+    else()
+        configure_file("@GIT_DIR@/packed-refs" "@GIT_DATA@/packed-refs" COPYONLY)
+        file(READ "@GIT_DATA@/packed-refs" PACKED_REFS)
+            if(${PACKED_REFS} MATCHES "([0-9a-z]*) ${HEAD_REF}")
+                set(HEAD_HASH "${CMAKE_MATCH_1}")
+            endif()
+    endif()
 else()
-	# detached HEAD
-	configure_file("@GIT_DIR@/HEAD" "@GIT_DATA@/head-ref" COPYONLY)
+    configure_file("@GIT_DIR@/HEAD" "@GIT_DATA@/head-ref" COPYONLY)
 endif()
-
 if(NOT HEAD_HASH)
-	file(READ "@GIT_DATA@/head-ref" HEAD_HASH LIMIT 1024)
-	string(STRIP "${HEAD_HASH}" HEAD_HASH)
+    file(READ "@GIT_DATA@/head-ref" HEAD_HASH LIMIT 1024)
+    string(STRIP "${HEAD_HASH}" HEAD_HASH)
 endif()

.cmake/InstallerScript.iss.in

@@ -0,0 +1,52 @@
+; Script generated by the Inno Setup Script Wizard.
+; SEE THE DOCUMENTATION FOR DETAILS ON CREATING INNO SETUP SCRIPT FILES!
+
+#define MyAppName "example"
+#define MyAppVersion "${GIT_SEMVER}"
+#define MyAppPublisher "ZhuZiChu"
+#define MyAppURL "https://zhuzichu520.github.io/"
+#define MyAppExeName "example.exe"
+#define MyAppFileDir "dist"
+
+[Setup]
+; NOTE: The value of AppId uniquely identifies this application. Do not use the same AppId value in installers for other applications.
+; (To generate a new GUID, click Tools | Generate GUID inside the IDE.)
+AppId={{A053D1AE-AEA9-4105-A79B-B5F5BEDC9208}
+AppName={#MyAppName}
+AppVersion={#MyAppVersion}
+;AppVerName={#MyAppName} {#MyAppVersion}
+AppPublisher={#MyAppPublisher}
+AppPublisherURL={#MyAppURL}
+AppSupportURL={#MyAppURL}
+AppUpdatesURL={#MyAppURL}
+DefaultDirName={autopf}\{#MyAppName}
+DisableProgramGroupPage=yes
+; Uncomment the following line to run in non administrative install mode (install for current user only.)
+;PrivilegesRequired=lowest
+OutputDir=.\
+OutputBaseFilename=installer
+Compression=lzma
+SolidCompression=yes
+WizardStyle=modern
+UninstallDisplayIcon={app}\{#MyAppExeName}
+SetupIconFile=.\..\favicon.ico
+MinVersion = 6.0
+
+[Languages]
+Name: "chinesesimplified"; MessagesFile: "compiler:Languages\ChineseSimplified.isl"
+
+[Tasks]
+Name: "desktopicon"; Description: "{cm:CreateDesktopIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: checkablealone
+
+[Files]
+Source: ".\..\{#MyAppFileDir}\{#MyAppExeName}"; DestDir: "{app}"; Flags: ignoreversion
+Source: ".\..\{#MyAppFileDir}\*"; DestDir: "{app}"; Flags: ignoreversion recursesubdirs createallsubdirs
+; NOTE: Don't use "Flags: ignoreversion" on any shared system files
+
+[Icons]
+Name: "{autoprograms}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"
+Name: "{autodesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon
+
+[Run]
+Filename: "{app}\{#MyAppExeName}"; Description: "{cm:LaunchProgram,{#StringChange(MyAppName, '&', '&&')}}"; Flags: nowait postinstall skipifsilent
+

.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)
@@ -58,8 +58,8 @@ if (${QMLPLUGIN_LIBTYPE} MATCHES "SHARED")
     set(INSTALL_QMLDIR_COMMAND ${CMAKE_COMMAND} -E copy ${CMAKE_CURRENT_LIST_DIR}/Qt5/${QMLPLUGIN_QMLDIR}/qmldir ${QMLPLUGIN_BINARY_DIR}/qmldir)
     set(COPY_QMLTYPES_COMMAND ${CMAKE_COMMAND} -E copy ${CMAKE_CURRENT_LIST_DIR}/Qt5/${QMLPLUGIN_QMLDIR}/plugins.qmltypes $<TARGET_FILE_DIR:${TARGET}>/${QMLPLUGIN_URI}/plugins.qmltypes)
     set(INSTALL_QMLTYPES_COMMAND ${CMAKE_COMMAND} -E copy ${CMAKE_CURRENT_LIST_DIR}/Qt5/${QMLPLUGIN_QMLDIR}/plugins.qmltypes ${QMLPLUGIN_BINARY_DIR}/plugins.qmltypes)
-    set(COPY_LIBRARY_COMMAND ${CMAKE_COMMAND} -E copy ${CMAKE_CURRENT_BINARY_DIR}/$<TARGET_FILE_NAME:${TARGET}> $<TARGET_FILE_DIR:${TARGET}>/${QMLPLUGIN_URI})
-    set(INSTALL_LIBRARY_COMMAND ${CMAKE_COMMAND} -E copy ${CMAKE_CURRENT_BINARY_DIR}/$<TARGET_FILE_NAME:${TARGET}> ${QMLPLUGIN_BINARY_DIR})
+    set(COPY_LIBRARY_COMMAND ${CMAKE_COMMAND} -E copy $<TARGET_FILE_DIR:${TARGET}>/$<TARGET_FILE_NAME:${TARGET}> $<TARGET_FILE_DIR:${TARGET}>/${QMLPLUGIN_URI})
+    set(INSTALL_LIBRARY_COMMAND ${CMAKE_COMMAND} -E copy $<TARGET_FILE_DIR:${TARGET}>/$<TARGET_FILE_NAME:${TARGET}> ${QMLPLUGIN_BINARY_DIR})
     if(QMLPLUGIN_QMLDIR)
         set(COPY_QMLFILES_COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_CURRENT_LIST_DIR}/Qt5/${QMLPLUGIN_QMLDIR} $<TARGET_FILE_DIR:${TARGET}>/${QMLPLUGIN_URI})
     else()

.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

.cmake/version_exe.rc.in

@@ -31,4 +31,4 @@ BEGIN
     END
 END
 
-IDI_ICON1 ICON DISCARDABLE "${CMAKE_SOURCE_DIR}/example/favicon.ico"
+IDI_ICON1 ICON DISCARDABLE "${FLUENTUI_DIRECTORY}/example/favicon.ico"

.github/workflows/macos.yml

@@ -21,8 +21,8 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [macos-12]
-        qt_ver: [6.5.0]
+        os: [macos-latest]
+        qt_ver: [6.6.2]
         qt_arch: [clang_64]
     env:
       targetName: example
@@ -38,7 +38,7 @@ jobs:
           version: ${{ matrix.qt_ver }}
           cache: ${{steps.cache-qt.outputs.cache-hit}}
           arch: ${{ matrix.qt_arch }}
-          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qt3d'
           
       - name: Set up Ninja
         uses: seanmiddleditch/gha-setup-ninja@v3
@@ -50,17 +50,19 @@ jobs:
           cmake --version
           mkdir build
           cd build
-          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/Users/runner/work/FluentUI/Qt/6.5.0/macos -DCMAKE_C_COMPILER=clang -DCMAKE_CXX_COMPILER=clang++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/Users/runner/work/FluentUI/Qt/${{ matrix.qt_ver }}/macos -DCMAKE_C_COMPILER=clang -DCMAKE_CXX_COMPILER=clang++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
           cmake --build . --target all --config Release --parallel
           
       - name: package
         run: |
+          # 先删除所有dSYM文件，减少包的体积
+          sudo find /Users/runner/work/FluentUI/Qt/${{ matrix.qt_ver }}/macos/qml -name "*.dSYM" | xargs rm -r
           # 拷贝依赖
-          macdeployqt bin/release/${targetName}.app -qmldir=. -verbose=1 -dmg     
+          sudo macdeployqt bin/release/${targetName}.app -qmldir=. -dmg     
           
       - uses: actions/upload-artifact@v2
         with:
-          name: ${{ env.targetName }}_${{ matrix.os }}_${{matrix.qt_ver}}.zip
+          name: ${{ env.targetName }}_${{ matrix.os }}_${{matrix.qt_ver}}
           path: bin/release/${{ env.targetName }}.app
           
       - name: uploadRelease
@@ -71,4 +73,4 @@ jobs:
           file: bin/release/${{ env.targetName }}.dmg
           asset_name: ${{ env.targetName }}_${{  github.ref_name }}_${{ matrix.os }}_Qt${{ matrix.qt_ver }}.dmg
           tag: ${{ github.ref }}
-          overwrite: true
+          overwrite: true

.github/workflows/ubuntu.yml

@@ -22,8 +22,8 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [ubuntu-20.04]
-        qt_ver: [6.5.0]
+        os: [ubuntu-latest]
+        qt_ver: [6.6.2]
         qt_arch: [gcc_64]
     env:
       targetName: example
@@ -39,7 +39,7 @@ jobs:
           version: ${{ matrix.qt_ver }}
           cache: ${{steps.cache-qt.outputs.cache-hit}}
           arch: ${{ matrix.qt_arch }}
-          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qt3d'
       
       - name: Set up Ninja
         uses: seanmiddleditch/gha-setup-ninja@v3
@@ -49,13 +49,16 @@ jobs:
       - name: ubuntu install GL library
         run: sudo apt-get install -y libxcb-cursor0 libgl1-mesa-dev libxcb1-dev libgtk-3-dev libxkbcommon-x11-dev libxcb-icccm4-dev libxcb-image0-dev libxcb-keysyms1-dev libxcb-randr0-dev libxcb-shape0-dev libxcb-xfixes0-dev libxcb-xinerama0-dev libxcb-sync-dev  libxcb-render-util0-dev libxcb-shm0-dev
         
+      - name: ubuntu install libfuse2
+        run: sudo apt install libfuse2
+        
       - name: build ubuntu
         run: |
           ninja --version
           cmake --version
           mkdir build
           cd build
-          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/home/runner/work/FluentUI/Qt/6.5.0/gcc_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/home/runner/work/FluentUI/Qt/${{ matrix.qt_ver }}/gcc_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
           cmake --build . --target all --config Release --parallel
           
       - name: install QT linux deploy
@@ -87,4 +90,4 @@ jobs:
           file: ${{ env.targetName }}.AppImage
           asset_name: ${{ env.targetName }}_${{  github.ref_name }}_${{ matrix.os }}_Qt${{ matrix.qt_ver }}.AppImage
           tag: ${{ github.ref }}
-          overwrite: true
+          overwrite: true

.github/workflows/windows-mingw.yml

@@ -18,12 +18,13 @@ on:
 jobs:
   build:
     name: Build
-    runs-on: windows-2022
+    runs-on: ${{ matrix.os }}
     strategy:
       matrix:
+        os: [windows-latest]
         include:
           - qt_arch: win64_mingw
-            qt_ver: 6.5.0
+            qt_ver: 6.6.2
             qt_tools: "tools_mingw,9.0.0-1-202203221220,qt.tools.win64_mingw900"
             qt_tools_mingw_install: mingw900_64
     env:
@@ -34,6 +35,11 @@ jobs:
         uses: actions/checkout@v3
         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
@@ -41,7 +47,7 @@ jobs:
           version: ${{ matrix.qt_ver }}
           arch: ${{ matrix.qt_arch }}
           cache: ${{steps.cache-qt.outputs.cache-hit}}
-          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qt3d'
       
       - name: Qt6 environment configuration
         if: ${{ startsWith( matrix.qt_ver, 6 ) }}
@@ -62,7 +68,8 @@ jobs:
         run: |
           mkdir build
           cd build
-          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 ..
+          ninja --version
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\${{ matrix.qt_ver }}\mingw_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
           cmake --build . --target all --config Release --parallel
       
       - name: package
@@ -78,14 +85,20 @@ jobs:
       - uses: actions/upload-artifact@v2
         with:
           name: ${{ steps.package.outputs.packageName }}
-          path: ${{ steps.package.outputs.packageName }}
+          path: dist
       
+      - name: inno setup install
+        if: startsWith(github.event.ref, 'refs/tags/')
+        uses: zhuzichu520/inno-setup-action@v1.0.1
+        with:
+          filepath: ./action-cli/InstallerScript.iss
+          
       - 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
+          file: ./action-cli/installer.exe
+          asset_name: ${{ env.fileName }}_${{ github.ref_name }}_${{ matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.exe
           tag: ${{ github.ref }}
-          overwrite: true 
+          overwrite: true

.github/workflows/windows-qt5.yml

@@ -0,0 +1,91 @@
+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\${{ matrix.qt_ver }}\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: dist
+          
+      - name: inno setup install
+        if: startsWith(github.event.ref, 'refs/tags/')
+        uses: zhuzichu520/inno-setup-action@v1.0.1
+        with:
+          filepath: ./action-cli/InstallerScript.iss
+          
+      - name: uploadRelease
+        if: startsWith(github.event.ref, 'refs/tags/')
+        uses: svenstaro/upload-release-action@v2
+        with:
+          repo_token: ${{ secrets.GITHUB_TOKEN }}
+          file: ./action-cli/installer.exe
+          asset_name: ${{ env.fileName }}_${{ github.ref_name }}_${{ matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.exe
+          tag: ${{ github.ref }}
+          overwrite: true

.github/workflows/windows.yml

@@ -21,12 +21,12 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [windows-2019]
+        os: [windows-latest]
         include:
-          - qt_ver: 6.5.0        
+          - qt_ver: 6.6.2        
             qt_arch: win64_msvc2019_64
             msvc_arch: x64
-            qt_arch_install: msvc2019_64          
+            qt_arch_install: msvc2019_64  
     env:
       targetName: example.exe
       fileName: example
@@ -35,23 +35,29 @@ jobs:
         uses: actions/checkout@v3
         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:
           version: ${{ matrix.qt_ver }}
           arch: ${{ matrix.qt_arch }}
           cache: ${{steps.cache-qt.outputs.cache-hit}}
-          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qtspeech'
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qtspeech qt3d'
           
       - 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 }}
+          call "C:\Program Files\Microsoft Visual Studio\2022\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 ..
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\${{ matrix.qt_ver }}\msvc2019_64 -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%
@@ -73,14 +79,20 @@ jobs:
       - uses: actions/upload-artifact@v2
         with:
           name: ${{ steps.package.outputs.packageName }}
-          path: ${{ steps.package.outputs.packageName }}
+          path: dist
+          
+      - name: inno setup install
+        if: startsWith(github.event.ref, 'refs/tags/')
+        uses: zhuzichu520/inno-setup-action@v1.0.1
+        with:
+          filepath: ./action-cli/InstallerScript.iss
           
       - 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
+          file: ./action-cli/installer.exe
+          asset_name: ${{ env.fileName }}_${{ github.ref_name }}_${{ matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.exe
           tag: ${{ github.ref }}
-          overwrite: true 
+          overwrite: true 

.gitignore

@@ -37,4 +37,7 @@ build
 cmake-build-*
 .idea
 
-example/Version.h
+example/Version.h
+
+action-cli
+dist

.gitmodules

@@ -1,6 +0,0 @@
-[submodule "framelesshelper"]
-	path = framelesshelper
-	url = https://github.com/zhuzichu520/framelesshelper.git
-[submodule "zxing-cpp"]
-	path = zxing-cpp
-	url = https://github.com/zhuzichu520/zxing-cpp.git

CMakeLists.txt

@@ -1,6 +1,12 @@
 cmake_minimum_required(VERSION 3.20)
 
-project(FluentUI VERSION 0.1 LANGUAGES CXX)
+project(FluentUI VERSION 1.0)
+
+if(MSVC)
+    #让Release也生成pdb文件
+    set(CMAKE_SHARED_LINKER_FLAGS_RELEASE "${CMAKE_SHARED_LINKER_FLAGS_RELEASE} /DEBUG /OPT:REF /OPT:ICF")
+    set(CMAKE_EXE_LINKER_FLAGS_RELEASE "${CMAKE_EXE_LINKER_FLAGS_RELEASE} /DEBUG /OPT:REF /OPT:ICF")
+endif()
 
 set(FLUENTUI_DIRECTORY ${CMAKE_CURRENT_LIST_DIR})
 list(APPEND CMAKE_MODULE_PATH ${FLUENTUI_DIRECTORY}/.cmake/)
@@ -8,7 +14,6 @@ list(APPEND CMAKE_MODULE_PATH ${FLUENTUI_DIRECTORY}/.cmake/)
 include(GetGitRevisionDescription)
 
 option(FLUENTUI_BUILD_EXAMPLES "Build FluentUI demo applications." ON)
-option(FLUENTUI_BUILD_FRAMELESSHEPLER "Build FramelessHelper." ON)
 option(FLUENTUI_BUILD_STATIC_LIB "Build static library." OFF)
 
 find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core)
@@ -26,20 +31,18 @@ if(NOT FLUENTUI_QML_PLUGIN_DIRECTORY)
 endif()
 
 add_subdirectory(src)
-add_subdirectory(zxing-cpp)
+
+#Release也支持日志打印代码位置
+target_compile_definitions(fluentuiplugin
+    PRIVATE
+    QT_MESSAGELOGCONTEXT
+)
 
 if (FLUENTUI_BUILD_EXAMPLES)
     add_subdirectory(example)
 endif ()
 
-if (FLUENTUI_BUILD_FRAMELESSHEPLER)
-    set(FRAMELESSHELPER_BUILD_STATIC ON)
-    set(FRAMELESSHELPER_NO_DEBUG_OUTPUT ON)
-    add_subdirectory(framelesshelper)
-endif ()
-
 message("------------------------ FluentUI ------------------------")
 message("Build FluentUI demo applications.: ${FLUENTUI_BUILD_EXAMPLES}")
-message("Build FramelessHelper.: ${FLUENTUI_BUILD_FRAMELESSHEPLER}")
 message("Build static library.: ${FLUENTUI_BUILD_STATIC_LIB}")
 message("Path to FluentUI plugin.: ${FLUENTUI_QML_PLUGIN_DIRECTORY}")

README.md

@@ -6,7 +6,7 @@
   QML FluentUI 
 </h1>
 <p align="center">
-  A fluent design component library for Qt QML。 <a href="https://zhuzichu520.github.io">official wasm app.</a>
+  A fluent design component library for Qt QML， You need Pyside6 <a href="https://github.com/zhuzichu520/PySide6-FluentUI-QML">PySide6-FluentUI-QML</a>。
 </p>
 
 ![win-badge] ![ubuntu-badge] ![macos-badge] ![release-badge] ![download-badge] ![download-latest]
@@ -46,7 +46,7 @@ Use [Qt Online Installers](https://download.qt.io/archive/online_installers/) to
 
 ## ⚽ Get started
 
-+ Download the [pre-built release](https://github.com/zhuzichu520/FluentUI/releases). (Please pecify your platform and compilers.)
++ Download the [pre-built release](https://github.com/zhuzichu520/FluentUI/releases). (Please specify your platform and compilers.)
 
 + run `example` program.
 

THIRD_PARTY_COPYRIGHT.txt

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

@@ -1,12 +1,10 @@
 cmake_minimum_required(VERSION 3.20)
 
-project(example VERSION 0.1 LANGUAGES CXX)
+project(example VERSION 1.0 LANGUAGES CXX)
 
 #配置通用编译
+set(CMAKE_CXX_STANDARD 17)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
-if(APPLE)
-    set(CMAKE_OSX_ARCHITECTURES "arm64;x86_64" CACHE STRING "" FORCE)
-endif()
 
 #导入exmaple的QML位置，不然import example有时候会爆红
 set(QML_IMPORT_PATH ${CMAKE_BINARY_DIR}/example CACHE STRING "Qt Creator extra QML import paths" FORCE)
@@ -18,14 +16,12 @@ endif()
 
 #设置可执行文件输出目录
 if(CMAKE_BUILD_TYPE STREQUAL "Debug")
-    set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/debug)
+    set(CMAKE_RUNTIME_OUTPUT_DIRECTORY $<1:${FLUENTUI_DIRECTORY}/bin/debug>)
 else()
-    set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/release)
+    set(CMAKE_RUNTIME_OUTPUT_DIRECTORY $<1:${FLUENTUI_DIRECTORY}/bin/release>)
 endif()
 
-#获取文件路径分隔符（解决执行命令的时候有些平台会报错）
-file(TO_CMAKE_PATH "/" PATH_SEPARATOR)
-
+#导入Qt相关依赖包
 find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Quick Svg Network)
 find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Quick Svg Network)
 
@@ -51,27 +47,36 @@ foreach(filepath ${CPP_FILES})
     list(APPEND sources_files ${filename})
 endforeach(filepath)
 
+if(WIN32)
+    list(APPEND sources_files "src/app_dmp.h")
+endif()
+
 if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
     #遍历所有qml文件
     file(GLOB_RECURSE QML_PATHS *.qml qmldir)
     foreach(filepath ${QML_PATHS})
         string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
-        if(${filepath} MATCHES "Qt${QT_VERSION_MAJOR}/")
-            string(REPLACE "qml-Qt${QT_VERSION_MAJOR}" "qml" filealias ${filename})
+        if(${filepath} MATCHES "qml-Qt6")
+            string(REPLACE "qml-Qt6" "qml" filealias ${filename})
             set_source_files_properties(${filename} PROPERTIES QT_RESOURCE_ALIAS ${filealias})
-            list(APPEND qml_files ${filename})
+            if(${filename} MATCHES "qmldir")
+                list(APPEND resource_files ${filename})
+            else()
+                list(APPEND qml_files ${filename})
+            endif()
         endif()
     endforeach(filepath)
 
     #遍历所有资源文件
-    file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp)
+    file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp *.obj)
     foreach(filepath ${RES_PATHS})
         string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
         list(APPEND resource_files ${filename})
     endforeach(filepath)
+
 endif()
 
-#如果是Windows平台，则生成rc文件
+#如果是Windows平台，则生成rc文件，还有inno setup脚本文件
 set(EXAMPLE_VERSION_RC_PATH "")
 if(WIN32)
     set(EXAMPLE_VERSION_RC_PATH ${CMAKE_BINARY_DIR}/version_${PROJECT_NAME}.rc)
@@ -79,6 +84,10 @@ if(WIN32)
         ${FLUENTUI_DIRECTORY}/.cmake/version_exe.rc.in
         ${EXAMPLE_VERSION_RC_PATH}
     )
+configure_file(
+    ${FLUENTUI_DIRECTORY}/.cmake/InstallerScript.iss.in
+    ${FLUENTUI_DIRECTORY}/action-cli/InstallerScript.iss
+)
 endif()
 
 #添加可执行文件
@@ -93,24 +102,26 @@ else ()
     )
 endif ()
 
-#复制动态库到可执行文件同级目录下
+#复制程序运行所需要的动态库
 if(WIN32)
-    if(CMAKE_CXX_COMPILER_ID STREQUAL "MSVC")
-        set(DLLPATH ${CMAKE_SOURCE_DIR}/3rdparty/msvc/*.dll)
-    else()
-        set(DLLPATH ${CMAKE_SOURCE_DIR}/3rdparty/mingw/*.dll)
+    if(MSVC)
+        if(CMAKE_SIZEOF_VOID_P EQUAL 4)
+            file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x86/*.dll)
+        elseif(CMAKE_SIZEOF_VOID_P EQUAL 8)
+            file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x64/*.dll)
+        endif()
+    elseif(MINGW)
+        file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/mingw/*.dll)
     endif()
-    string(REPLACE "/" ${PATH_SEPARATOR} DLLPATH "${DLLPATH}")
-    file(GLOB DLL_FILES ${DLLPATH})
     add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
         COMMAND ${CMAKE_COMMAND} -E copy
-        ${DLL_FILES}
+        ${3RDPARTY_DLL_DIR}
         ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}
     )
 endif()
 
 if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
-    #添加qml模块
+    #如果是Qt6.2以上，则使用qt_add_qml_module添加资源文件
     qt_add_qml_module(example
         URI "example"
         VERSION 1.0
@@ -119,10 +130,11 @@ if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
         RESOURCE_PREFIX "/"
     )
 else()
+    #如果是Qt6.2以下，则使用qrc添加资源文件
     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 +142,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 +158,19 @@ set_target_properties(example PROPERTIES
     WIN32_EXECUTABLE TRUE
 )
 
-#链接库
-if (FLUENTUI_BUILD_STATIC_LIB)
-    target_link_libraries(example PRIVATE
-        Qt${QT_VERSION_MAJOR}::Quick
-        Qt${QT_VERSION_MAJOR}::Svg
-        Qt${QT_VERSION_MAJOR}::Network
-        fluentui
-        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()
+#Release也支持日志打印代码位置
+target_compile_definitions(example
+    PRIVATE
+    QT_MESSAGELOGCONTEXT
+)
+
+#目标文件链接库
+target_link_libraries(example PRIVATE
+    Qt${QT_VERSION_MAJOR}::Quick
+    Qt${QT_VERSION_MAJOR}::Svg
+    Qt${QT_VERSION_MAJOR}::Network
+    fluentuiplugin
+)
 
 #安装
 install(TARGETS example

example/example.qrc

@@ -123,10 +123,8 @@
         <file>res/image/qrcode_zfb.jpg</file>
         <file>qml/App.qml</file>
         <file>qml/component/CodeExpander.qml</file>
-        <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>
@@ -136,7 +134,6 @@
         <file>qml/page/T_CalendarPicker.qml</file>
         <file>qml/page/T_Captcha.qml</file>
         <file>qml/page/T_Carousel.qml</file>
-        <file>qml/page/T_Chart.qml</file>
         <file>qml/page/T_CheckBox.qml</file>
         <file>qml/page/T_ColorPicker.qml</file>
         <file>qml/page/T_ComboBox.qml</file>
@@ -145,7 +142,6 @@
         <file>qml/page/T_Expander.qml</file>
         <file>qml/page/T_FlipView.qml</file>
         <file>qml/page/T_Home.qml</file>
-        <file>qml/page/T_Http.qml</file>
         <file>qml/page/T_Image.qml</file>
         <file>qml/page/T_InfoBar.qml</file>
         <file>qml/page/T_Menu.qml</file>
@@ -158,10 +154,9 @@
         <file>qml/page/T_RatingControl.qml</file>
         <file>qml/page/T_Rectangle.qml</file>
         <file>qml/page/T_RemoteLoader.qml</file>
-        <file>qml/page/T_Screenshot.qml</file>
         <file>qml/page/T_Settings.qml</file>
         <file>qml/page/T_Slider.qml</file>
-        <file>qml/page/T_StatusView.qml</file>
+        <file>qml/page/T_StatusLayout.qml</file>
         <file>qml/page/T_TableView.qml</file>
         <file>qml/page/T_TabView.qml</file>
         <file>qml/page/T_Text.qml</file>
@@ -184,5 +179,24 @@
         <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_StaggeredLayout.qml</file>
+        <file>qml/viewmodel/SettingsViewModel.qml</file>
+        <file>qml/viewmodel/TextBoxViewModel.qml</file>
+        <file>qml/page/T_Clip.qml</file>
+        <file>qml/page/T_3D.qml</file>
+        <file>qml/global/Lang.qml</file>
+        <file>qml/page/T_Network.qml</file>
+        <file>qml/page/T_ShortcutPicker.qml</file>
+        <file>qml/chart/T_BarChart.qml</file>
+        <file>qml/chart/T_LineChart.qml</file>
+        <file>qml/chart/T_PieChart.qml</file>
+        <file>qml/chart/T_RadarChart.qml</file>
+        <file>qml/chart/T_ScatterChart.qml</file>
+        <file>qml/chart/T_BubbleChart.qml</file>
+        <file>qml/chart/T_PolarAreaChart.qml</file>
+        <file>res/image/ic_crash.png</file>
+        <file>qml/window/CrashWindow.qml</file>
+        <file>qml/page/T_SplitLayout.qml</file>
     </qresource>
 </RCC>

example/qml-Qt6/App.qml

@@ -4,41 +4,49 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
 
-Window {
+Item {
     id: app
-    flags: Qt.SplashScreen
 
-    FluHttpInterceptor{
-        id:interceptor
-        function onIntercept(request){
-            if(request.method === "get"){
-                request.params["method"] = "get"
-            }
-            if(request.method === "post"){
-                request.params["method"] = "post"
-            }
-            request.headers["token"] ="yyds"
-            request.headers["os"] ="pc"
-            console.debug(JSON.stringify(request))
-            return request
+    Connections{
+        target: FluTheme
+        function onDarkModeChanged(){
+            SettingsHelper.saveDarkMode(FluTheme.darkMode)
+        }
+    }
+
+    Connections{
+        target: FluApp
+        function onUseSystemAppBarChanged(){
+            SettingsHelper.saveUseSystemAppBar(FluApp.useSystemAppBar)
         }
     }
 
     Component.onCompleted: {
+        FluNetwork.openLog = false
+        FluNetwork.setInterceptor(function(param){
+            param.addHeader("Token","000000000000000000000")
+        })
         FluApp.init(app)
-        FluTheme.darkMode = FluThemeType.System
+        FluApp.windowIcon = "qrc:/example/res/image/favicon.ico"
+        FluApp.useSystemAppBar = SettingsHelper.getUseSystemAppBar()
+        FluTheme.darkMode = SettingsHelper.getDarkMode()
         FluTheme.enableAnimation = true
         FluApp.routes = {
             "/":"qrc:/example/qml/window/MainWindow.qml",
             "/about":"qrc:/example/qml/window/AboutWindow.qml",
             "/login":"qrc:/example/qml/window/LoginWindow.qml",
             "/hotload":"qrc:/example/qml/window/HotloadWindow.qml",
+            "/crash":"qrc:/example/qml/window/CrashWindow.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"
+        }
+        var args = Qt.application.arguments
+        if(args.length>=2 && args[1].startsWith("-crashed=")){
+            FluApp.navigate("/crash",{crashFilePath:args[1].replace("-crashed=","")})
+        }else{
+            FluApp.navigate("/")
         }
-        FluApp.initialRoute = "/"
-        FluApp.httpInterceptor = interceptor
-        FluApp.run()
     }
 }

example/qml-Qt6/chart/T_BarChart.qml

@@ -0,0 +1,132 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title:"Bar Chart"
+
+    FluArea{
+        width: 500
+        height: 370
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'bar'
+            chartData: { return {
+                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [65, 59, 80, 81, 56, 55, 40],
+                            backgroundColor: [
+                                'rgba(255, 99, 132, 0.2)',
+                                'rgba(255, 159, 64, 0.2)',
+                                'rgba(255, 205, 86, 0.2)',
+                                'rgba(75, 192, 192, 0.2)',
+                                'rgba(54, 162, 235, 0.2)',
+                                'rgba(153, 102, 255, 0.2)',
+                                'rgba(201, 203, 207, 0.2)'
+                            ],
+                            borderColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(255, 159, 64)',
+                                'rgb(255, 205, 86)',
+                                'rgb(75, 192, 192)',
+                                'rgb(54, 162, 235)',
+                                'rgb(153, 102, 255)',
+                                'rgb(201, 203, 207)'
+                            ],
+                            borderWidth: 1
+                        }]
+                }
+            }
+
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Bar Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    },
+                    responsive: true,
+                    scales: {
+                        xAxes: [{
+                                stacked: true,
+                            }],
+                        yAxes: [{
+                                stacked: true
+                            }]
+                    }
+                }
+            }
+        }
+    }
+
+    FluArea{
+        width: 500
+        height: 370
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'horizontalBar'
+            chartData: { return {
+                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [65, 59, 80, 81, 56, 55, 40],
+                            backgroundColor: [
+                                'rgba(255, 99, 132, 0.2)',
+                                'rgba(255, 159, 64, 0.2)',
+                                'rgba(255, 205, 86, 0.2)',
+                                'rgba(75, 192, 192, 0.2)',
+                                'rgba(54, 162, 235, 0.2)',
+                                'rgba(153, 102, 255, 0.2)',
+                                'rgba(201, 203, 207, 0.2)'
+                            ],
+                            borderColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(255, 159, 64)',
+                                'rgb(255, 205, 86)',
+                                'rgb(75, 192, 192)',
+                                'rgb(54, 162, 235)',
+                                'rgb(153, 102, 255)',
+                                'rgb(201, 203, 207)'
+                            ],
+                            borderWidth: 1
+                        }]
+                }
+            }
+
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js HorizontalBar Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    },
+                    responsive: true,
+                    scales: {
+                        xAxes: [{
+                                stacked: true,
+                            }],
+                        yAxes: [{
+                                stacked: true
+                            }]
+                    }
+                }
+            }
+        }
+    }
+
+}

example/qml-Qt6/chart/T_BubbleChart.qml

@@ -0,0 +1,74 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title:"Bubble Chart"
+
+    function randomScalingFactor() {
+        return Math.random().toFixed(1);
+    }
+
+    FluArea{
+        height: 370
+        width: 500
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'bubble'
+            chartData: {
+                return {
+                    datasets: [{
+                            label: 'First Dataset',
+                            data: [{
+                                    x: 20,
+                                    y: 30,
+                                    r: 15
+                                }, {
+                                    x: 12,
+                                    y: 70,
+                                    r: 20
+                                }, {
+                                    x: 11,
+                                    y: 28,
+                                    r: 8
+                                }, {
+                                    x: 9,
+                                    y: 28,
+                                    r: 10
+                                }, {
+                                    x: 43,
+                                    y: 7,
+                                    r: 14
+                                }, {
+                                    x: 22,
+                                    y: 22,
+                                    r: 12
+                                }, {
+                                    x: 40,
+                                    y: 10,
+                                    r: 10
+                                }],
+                            backgroundColor: 'rgb(255, 99, 132)'
+                        }]
+                }}
+            chartOptions: {return {
+                    maintainAspectRatio: false,
+                    responsive: true,
+                    hoverMode: 'nearest',
+                    intersect: true,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Bubble Chart - Multi Axis'
+                    }
+                }
+            }
+        }
+    }
+
+}

example/qml-Qt6/chart/T_LineChart.qml

@@ -0,0 +1,45 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title:"Line Chart"
+
+    FluArea{
+        width: 500
+        height: 370
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'line'
+            chartData: { return {
+                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [65, 59, 80, 81, 56, 55, 40],
+                            fill: false,
+                            borderColor: 'rgb(75, 192, 192)',
+                            tension: 0.1
+                        }]
+                }
+            }
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Line Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                }
+            }
+        }
+    }
+}

example/qml-Qt6/chart/T_PieChart.qml

@@ -0,0 +1,93 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title:"Doughnut and Pie Chart"
+
+    FluArea{
+        width: 500
+        height: 370
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: "doughnut"
+            chartData: { return {
+                    labels: [
+                        'Red',
+                        'Blue',
+                        'Yellow'
+                    ],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [300, 50, 100],
+                            backgroundColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(54, 162, 235)',
+                                'rgb(255, 205, 86)'
+                            ],
+                            hoverOffset: 4
+                        }]
+                }
+            }
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Doughnut Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                }
+            }
+        }
+    }
+
+    FluArea{
+        width: 500
+        height: 370
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: "pie"
+            chartData: { return {
+                    labels: [
+                        'Red',
+                        'Blue',
+                        'Yellow'
+                    ],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [300, 50, 100],
+                            backgroundColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(54, 162, 235)',
+                                'rgb(255, 205, 86)'
+                            ],
+                            hoverOffset: 4
+                        }]
+                }
+            }
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Pie Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                }
+            }
+        }
+    }
+}

example/qml-Qt6/chart/T_PolarAreaChart.qml

@@ -0,0 +1,57 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title:"PolarArea Chart"
+
+    FluArea{
+        width: 500
+        height: 370
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'polarArea'
+            chartData: { return {
+                    labels: [
+                        'Red',
+                        'Green',
+                        'Yellow',
+                        'Grey',
+                        'Blue'
+                    ],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: [11, 16, 7, 3, 14],
+                            backgroundColor: [
+                                'rgb(255, 99, 132)',
+                                'rgb(75, 192, 192)',
+                                'rgb(255, 205, 86)',
+                                'rgb(201, 203, 207)',
+                                'rgb(54, 162, 235)'
+                            ]
+                        }]
+                }
+            }
+
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js PolarArea Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                }
+            }
+        }
+    }
+
+}

example/qml-Qt6/chart/T_RadarChart.qml

@@ -0,0 +1,74 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title:"Radar Chart"
+
+    FluArea{
+        width: 500
+        height: 370
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'radar'
+            chartData: { return {
+                    labels: [
+                        'Eating',
+                        'Drinking',
+                        'Sleeping',
+                        'Designing',
+                        'Coding',
+                        'Cycling',
+                        'Running'
+                    ],
+                    datasets:
+                        [{
+                            label: 'My First Dataset',
+                            data: [65, 59, 90, 81, 56, 55, 40],
+                            fill: true,
+                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                            borderColor: 'rgb(255, 99, 132)',
+                            pointBackgroundColor: 'rgb(255, 99, 132)',
+                            pointBorderColor: '#fff',
+                            pointHoverBackgroundColor: '#fff',
+                            pointHoverBorderColor: 'rgb(255, 99, 132)'
+                        }, {
+                            label: 'My Second Dataset',
+                            data: [28, 48, 40, 19, 96, 27, 100],
+                            fill: true,
+                            backgroundColor: 'rgba(54, 162, 235, 0.2)',
+                            borderColor: 'rgb(54, 162, 235)',
+                            pointBackgroundColor: 'rgb(54, 162, 235)',
+                            pointBorderColor: '#fff',
+                            pointHoverBackgroundColor: '#fff',
+                            pointHoverBorderColor: 'rgb(54, 162, 235)'
+                        }]
+                }
+            }
+            chartOptions: { return {
+                    maintainAspectRatio: false,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Radar Chart - Stacked'
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    },
+                    elements: {
+                        line: {
+                            borderWidth: 3
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+}

example/qml-Qt6/chart/T_ScatterChart.qml

@@ -0,0 +1,123 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title:"Scatter Chart"
+
+    function randomScalingFactor() {
+        return Math.random().toFixed(1);
+    }
+
+    FluArea{
+        height: 370
+        width: 500
+        paddings: 10
+        Layout.topMargin: 20
+        FluChart{
+            anchors.fill: parent
+            chartType: 'scatter'
+            chartData: {
+                return {
+                    datasets: [{
+                            label: 'My First dataset',
+                            xAxisID: 'x-axis-1',
+                            yAxisID: 'y-axis-1',
+                            borderColor: '#ff5555',
+                            backgroundColor: 'rgba(255,192,192,0.3)',
+                            data: [{
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }]
+                        }, {
+                            label: 'My Second dataset',
+                            xAxisID: 'x-axis-1',
+                            yAxisID: 'y-axis-2',
+                            borderColor: '#5555ff',
+                            backgroundColor: 'rgba(192,192,255,0.3)',
+                            data: [{
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }, {
+                                    x: randomScalingFactor(),
+                                    y: randomScalingFactor(),
+                                }]
+                        }]
+                }}
+            chartOptions: {return {
+                    maintainAspectRatio: false,
+                    responsive: true,
+                    hoverMode: 'nearest',
+                    intersect: true,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Scatter Chart - Multi Axis'
+                    },
+                    scales: {
+                        xAxes: [{
+                                position: 'bottom',
+                                gridLines: {
+                                    zeroLineColor: 'rgba(0,0,0,1)'
+                                }
+                            }],
+                        yAxes: [{
+                                type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+                                display: true,
+                                position: 'left',
+                                id: 'y-axis-1',
+                            }, {
+                                type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+                                display: true,
+                                position: 'right',
+                                reverse: true,
+                                id: 'y-axis-2',
+
+                                // grid line settings
+                                gridLines: {
+                                    drawOnChartArea: false, // only want the grid lines for one axis to show up
+                                },
+                            }],
+                    }
+                }
+            }
+        }
+    }
+
+}

example/qml-Qt6/component/CodeExpander.qml

@@ -80,7 +80,6 @@ FluExpander{
                     "FluIcon",
                     "FluIconButton",
                     "FluInfoBar",
-                    "FluItem",
                     "FluMediaPlayer",
                     "FluMenu",
                     "FluMenuItem",
@@ -119,7 +118,7 @@ FluExpander{
                     "FluTableView",
                     "FluColors",
                     "FluTheme",
-                    "FluStatusView",
+                    "FluStatusLayout",
                     "FluRatingControl",
                     "FluPasswordBox",
                     "FluBreadcrumbBar",
@@ -131,12 +130,18 @@ FluExpander{
                     "FluRadioButtons",
                     "FluImage",
                     "FluSpinBox",
-                    "FluHttp",
                     "FluWatermark",
                     "FluTour",
                     "FluQRCode",
                     "FluTimeline",
-                    "FluChart"
+                    "FluChart",
+                    "FluRangeSlider",
+                    "FluStaggeredLayout",
+                    "FluProgressButton",
+                    "FluLoadingButton",
+                    "FluClip",
+                    "FluNetwork",
+                    "FluShortcutPicker"
                 ];
         code = code.replace(/\n/g, "<br>");
         code = code.replace(/ /g, "&nbsp;");

example/qml-Qt6/component/CustomWindow.qml

@@ -1,64 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import FluentUI
-import org.wangwenx190.FramelessHelper
-
-FluWindow {
-    id:window
-    property bool fixSize
-    property alias titleVisible: title_bar.titleVisible
-    property bool appBarVisible: true
-    default property alias content: container.data
-    FluAppBar {
-        id: title_bar
-        title: window.title
-        visible: window.appBarVisible
-        icon:"qrc:/example/res/image/favicon.ico"
-        anchors {
-            top: parent.top
-            left: parent.left
-            right: parent.right
-        }
-        darkText: lang.dark_mode
-    }
-    Item{
-        id:container
-        anchors{
-            top: title_bar.bottom
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-        }
-        clip: true
-    }
-    FramelessHelper{
-        id:framless_helper
-        onReady: {
-            setTitleBarItem(title_bar)
-            moveWindowToDesktopCenter()
-            setHitTestVisible(title_bar.minimizeButton())
-            setHitTestVisible(title_bar.maximizeButton())
-            setHitTestVisible(title_bar.closeButton())
-            setWindowFixedSize(fixSize)
-            title_bar.maximizeButton.visible = !fixSize
-            if (blurBehindWindowEnabled)
-                window.background = undefined
-            window.show()
-        }
-    }
-    Connections{
-        target: FluTheme
-        function onDarkChanged(){
-            if (FluTheme.dark)
-                FramelessUtils.systemTheme = FramelessHelperConstants.Dark
-            else
-                FramelessUtils.systemTheme = FramelessHelperConstants.Light
-        }
-    }
-    function setHitTestVisible(com){
-        framless_helper.setHitTestVisible(com)
-    }
-    function setTitleBarItem(com){
-        framless_helper.setTitleBarItem(com)
-    }
-}

example/qml-Qt6/global/ItemsFooter.qml

@@ -6,24 +6,27 @@ import FluentUI
 FluObject{
 
     property var navigationView
+    property var paneItemMenu
 
     id:footer_items
 
     FluPaneItemSeparator{}
 
     FluPaneItem{
-        title:lang.about
+        title:Lang.about
         icon:FluentIcons.Contact
-        tapFunc:function(){
+        onTapListener:function(){
             FluApp.navigate("/about")
         }
     }
 
     FluPaneItem{
-        title:lang.settings
+        title:Lang.settings
+        menuDelegate: paneItemMenu
         icon:FluentIcons.Settings
+        url:"qrc:/example/qml/page/T_Settings.qml"
         onTap:{
-            navigationView.push("qrc:/example/qml/page/T_Settings.qml")
+            navigationView.push(url)
         }
     }
 

example/qml-Qt6/global/ItemsOriginal.qml

@@ -6,6 +6,7 @@ import FluentUI
 FluObject{
 
     property var navigationView
+    property var paneItemMenu
 
     function rename(item, newName){
         if(newName && newName.trim().length>0){
@@ -16,49 +17,31 @@ FluObject{
     FluPaneItem{
         id:item_home
         count: 9
-        title:lang.home
+        title:Lang.home
+        menuDelegate: paneItemMenu
         infoBadge:FluBadge{
             count: item_home.count
         }
         icon:FluentIcons.Home
+        url:"qrc:/example/qml/page/T_Home.qml"
         onTap:{
             if(navigationView.getCurrentUrl()){
                 item_home.count = 0
             }
-            navigationView.push("qrc:/example/qml/page/T_Home.qml")
-        }
-        editDelegate: FluTextBox{
-            text:item_home.title
-        }
-        menuDelegate: FluMenu{
-            id:nav_item_right_menu
-            width: 120
-            FluMenuItem{
-                text: "重命名"
-                visible: true
-                onClicked: {
-                    item_home.showEdit = true
-                }
-            }
+            navigationView.push(url)
         }
     }
 
+    FluPaneItemExpander{
+        title:"PaneItemExpander Disabled"
+        iconVisible: false
+        disabled: true
+    }
+
     FluPaneItemExpander{
         id:item_expander_basic_input
-        title:lang.basic_input
+        title:Lang.basic_input
         icon:FluentIcons.CheckboxComposite
-        editDelegate: FluTextBox{
-            text:item_expander_basic_input.title
-        }
-        menuDelegate: FluMenu{
-            FluMenuItem{
-                text: "重命名"
-                visible: true
-                onClicked: {
-                    item_expander_basic_input.showEdit = true
-                }
-            }
-        }
         FluPaneItem{
             id:item_buttons
             count: 99
@@ -66,179 +49,211 @@ FluObject{
                 count: item_buttons.count
             }
             title:"Buttons"
-            image:"qrc:/example/res/image/control/Button.png"
-            recentlyUpdated:true
-            desc:"A control that responds to user input and raisesa Click event."
+            menuDelegate: paneItemMenu
+            extra:({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"
             onTap:{
                 item_buttons.count = 0
-                navigationView.push("qrc:/example/qml/page/T_Buttons.qml")
+                navigationView.push(url)
             }
         }
         FluPaneItem{
             id:item_text
             title:"Text"
+            menuDelegate: paneItemMenu
             count: 5
             infoBadge:FluBadge{
                 count: item_text.count
                 color: Qt.rgba(82/255,196/255,26/255,1)
             }
+            url:"qrc:/example/qml/page/T_Text.qml"
             onTap:{
                 item_text.count = 0
-                navigationView.push("qrc:/example/qml/page/T_Text.qml")
+                navigationView.push(url)
             }
         }
         FluPaneItem{
             title:"Image"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Image.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_Image.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Slider"
-            image:"qrc:/example/res/image/control/Slider.png"
-            recentlyUpdated:true
-            desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Slider.qml")
-            }
+            menuDelegate: paneItemMenu
+            extra:({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."})
+            url:"qrc:/example/qml/page/T_Slider.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"CheckBox"
-            image:"qrc:/example/res/image/control/Checkbox.png"
-            recentlyUpdated:true
-            desc:"A control that a user can select or clear."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_CheckBox.qml")
-            }
+            menuDelegate: paneItemMenu
+            extra:({image:"qrc:/example/res/image/control/Checkbox.png",recentlyUpdated:true,desc:"A control that a user can select or clear."})
+            url:"qrc:/example/qml/page/T_CheckBox.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"RadioButton"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_RadioButton.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_RadioButton.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"ToggleSwitch"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_ToggleSwitch.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_ToggleSwitch.qml"
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:"PaneItem Disabled"
+            disabled: true
+            icon: FluentIcons.Error
         }
     }
 
     FluPaneItemExpander{
-        title:lang.form
+        title:Lang.form
         icon:FluentIcons.GridView
         FluPaneItem{
             title:"TextBox"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TextBox.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_TextBox.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TimePicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TimePicker.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_TimePicker.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"DatePicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_DatePicker.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_DatePicker.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"CalendarPicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_CalendarPicker.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_CalendarPicker.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"ColorPicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_ColorPicker.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_ColorPicker.qml"
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:"ShortcutPicker"
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_ShortcutPicker.qml"
+            onTap:{ navigationView.push(url) }
         }
     }
 
     FluPaneItemExpander{
-        title:lang.surface
+        title:Lang.surface
         icon:FluentIcons.SurfaceHub
         FluPaneItem{
             title:"InfoBar"
-            image:"qrc:/example/res/image/control/InfoBar.png"
-            recentlyUpdated:true
-            desc:"An inline message to display app-wide statuschange information."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_InfoBar.qml")
-            }
+            menuDelegate: paneItemMenu
+            extra:({image:"qrc:/example/res/image/control/InfoBar.png",recentlyUpdated:true,desc:"An inline message to display app-wide statuschange information."})
+            url:"qrc:/example/qml/page/T_InfoBar.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Progress"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Progress.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_Progress.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"RatingControl"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_RatingControl.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_RatingControl.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Badge"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Badge.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_Badge.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Rectangle"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Rectangle.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_Rectangle.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
-            title:"StatusView"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_StatusView.qml")
-            }
+            title:"Clip"
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_Clip.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Carousel"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Carousel.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_Carousel.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Expander"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Expander.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_Expander.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Watermark"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Watermark.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_Watermark.qml"
+            onTap:{ navigationView.push(url) }
         }
     }
 
     FluPaneItemExpander{
-        title:lang.popus
+        title:Lang.layout
+        icon:FluentIcons.DockLeft
+        FluPaneItem{
+            title:"StaggeredLayout"
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_StaggeredLayout.qml"
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:"SplitLayout"
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_SplitLayout.qml"
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:"StatusLayout"
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_StatusLayout.qml"
+            onTap:{ navigationView.push(url) }
+        }
+    }
+
+    FluPaneItemExpander{
+        title:Lang.popus
         icon:FluentIcons.ButtonMenu
         FluPaneItem{
             title:"Dialog"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Dialog.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_Dialog.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             id:item_combobox
             title:"ComboBox"
+            menuDelegate: paneItemMenu
             count: 9
             infoBadge:FluBadge{
                 count: item_combobox.count
                 color: Qt.rgba(250/255,173/255,20/255,1)
             }
+            url:"qrc:/example/qml/page/T_ComboBox.qml"
             onTap:{
                 item_combobox.count = 0
                 navigationView.push("qrc:/example/qml/page/T_ComboBox.qml")
@@ -246,113 +261,148 @@ FluObject{
         }
         FluPaneItem{
             title:"Tooltip"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Tooltip.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_Tooltip.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Menu"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Menu.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_Menu.qml"
+            onTap:{ navigationView.push(url) }
         }
     }
 
     FluPaneItemExpander{
-        title:lang.navigation
+        title:Lang.navigation
         icon:FluentIcons.AllApps
         FluPaneItem{
             title:"Pivot"
-            image:"qrc:/example/res/image/control/Pivot.png"
-            recentlyAdded:true
-            order:3
-            desc:"Presents information from different sources in atabbed view."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Pivot.qml")
-            }
+            menuDelegate: paneItemMenu
+            extra:({image:"qrc:/example/res/image/control/Pivot.png",order:3,recentlyAdded:true,desc:"Presents information from different sources in atabbed view."})
+            url:"qrc:/example/qml/page/T_Pivot.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"BreadcrumbBar"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_BreadcrumbBar.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_BreadcrumbBar.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TabView"
-            image:"qrc:/example/res/image/control/TabView.png"
-            recentlyAdded:true
-            order:1
-            desc:"A control that displays a collection of tabs thatcan be used to display several documents."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TabView.qml")
-            }
+            menuDelegate: paneItemMenu
+            extra:({image:"qrc:/example/res/image/control/TabView.png",order:1,recentlyAdded:true,desc:"A control that displays a collection of tabs thatcan be used to display several documents."})
+            url:"qrc:/example/qml/page/T_TabView.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TreeView"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TreeView.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_TreeView.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TableView"
-            image:"qrc:/example/res/image/control/DataGrid.png"
-            recentlyAdded:true
-            order:4
-            desc:"The TableView control provides a flexible way to display a collection of data in rows and columns"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TableView.qml")
-            }
+            menuDelegate: paneItemMenu
+            extra:({image:"qrc:/example/res/image/control/DataGrid.png",order:4,recentlyAdded:true,desc:"The TableView control provides a flexible way to display a collection of data in rows and columns"})
+            url:"qrc:/example/qml/page/T_TableView.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Pagination"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Pagination.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_Pagination.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"MultiWindow"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_MultiWindow.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_MultiWindow.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"FlipView"
-            image:"qrc:/example/res/image/control/FlipView.png"
-            recentlyAdded:true
-            order:2
-            desc:"Presents a collection of items that the user canflip through, one item at a time."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_FlipView.qml")
-            }
+            menuDelegate: paneItemMenu
+            extra:({image:"qrc:/example/res/image/control/FlipView.png",order:2,recentlyAdded:true,desc:"Presents a collection of items that the user canflip through, one item at a time."})
+            url:"qrc:/example/qml/page/T_FlipView.qml"
+            onTap:{ navigationView.push(url) }
         }
     }
 
     FluPaneItemExpander{
-        title:lang.theming
+        title:Lang.theming
         icon:FluentIcons.Brightness
         FluPaneItem{
             title:"Acrylic"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Acrylic.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_Acrylic.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Theme"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Theme.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_Theme.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Typography"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Typography.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_Typography.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Awesome"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Awesome.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_Awesome.qml"
+            onTap:{ navigationView.push(url) }
+        }
+    }
+
+    FluPaneItemExpander{
+        title: Lang.chart
+        icon:FluentIcons.AreaChart
+        FluPaneItem{
+            title:Lang.bar_chart
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/chart/T_BarChart.qml"
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:Lang.line_chart
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/chart/T_LineChart.qml"
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:Lang.pie_chart
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/chart/T_PieChart.qml"
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:Lang.polar_area_chart
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/chart/T_PolarAreaChart.qml"
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:Lang.bubble_chart
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/chart/T_BubbleChart.qml"
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:Lang.scatter_chart
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/chart/T_ScatterChart.qml"
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:Lang.radar_chart
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/chart/T_RadarChart.qml"
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -362,58 +412,48 @@ FluObject{
     }
 
     FluPaneItemExpander{
-        title:lang.other
+        title:Lang.other
         icon:FluentIcons.Shop
         FluPaneItem{
             title:"QRCode"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_QRCode.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_QRCode.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Tour"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Tour.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_Tour.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Timeline"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Timeline.qml")
-            }
-        }
-        FluPaneItem{
-            title:"Screenshot"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Screenshot.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_Timeline.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Captcha"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Captcha.qml")
-            }
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_Captcha.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Chart"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Chart.qml")
-            }
-        }
-        FluPaneItem{
-            title:"Http"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Http.qml")
-            }
+            title:"Network"
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_Network.qml"
+            onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             id:item_other
             title:"RemoteLoader"
+            menuDelegate: paneItemMenu
             count: 99
             infoBadge:FluBadge{
                 count: item_other.count
                 color: Qt.rgba(82/255,196/255,26/255,1)
             }
+            url:"qrc:/example/qml/page/T_RemoteLoader.qml"
             onTap:{
                 item_other.count = 0
                 navigationView.push("qrc:/example/qml/page/T_RemoteLoader.qml")
@@ -421,29 +461,35 @@ FluObject{
         }
         FluPaneItem{
             title:"HotLoader"
-            tapFunc:function(){
+            onTapListener:function(){
                 FluApp.navigate("/hotload")
             }
         }
+        FluPaneItem{
+            title:"3D"
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_3D.qml"
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:"Test Crash"
+            visible: FluTools.isWin()
+            onTapListener: function(){
+                AppInfo.testCrash()
+            }
+        }
     }
 
     function getRecentlyAddedData(){
         var arr = []
-        for(var i=0;i<children.length;i++){
-            var item = children[i]
-            if(item instanceof FluPaneItem && item.recentlyAdded){
+        var items = navigationView.getItems();
+        for(var i=0;i<items.length;i++){
+            var item = items[i]
+            if(item instanceof FluPaneItem && item.extra && item.extra.recentlyAdded){
                 arr.push(item)
             }
-            if(item instanceof FluPaneItemExpander){
-                for(var j=0;j<item.children.length;j++){
-                    var itemChild = item.children[j]
-                    if(itemChild instanceof FluPaneItem && itemChild.recentlyAdded){
-                        arr.push(itemChild)
-                    }
-                }
-            }
         }
-        arr.sort(function(o1,o2){ return o2.order-o1.order })
+        arr.sort(function(o1,o2){ return o2.extra.order-o1.extra.order })
         return arr
     }
 
@@ -452,7 +498,7 @@ FluObject{
         var items = navigationView.getItems();
         for(var i=0;i<items.length;i++){
             var item = items[i]
-            if(item instanceof FluPaneItem && item.recentlyUpdated){
+            if(item instanceof FluPaneItem && item.extra && item.extra.recentlyUpdated){
                 arr.push(item)
             }
         }
@@ -460,6 +506,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/Lang.qml

@@ -0,0 +1,104 @@
+pragma Singleton
+
+import QtQuick
+
+QtObject {
+
+    property string home
+    property string basic_input
+    property string form
+    property string surface
+    property string layout
+    property string popus
+    property string navigation
+    property string theming
+    property string media
+    property string dark_mode
+    property string sys_dark_mode
+    property string search
+    property string about
+    property string settings
+    property string locale
+    property string navigation_view_display_mode
+    property string other
+    property string chart
+    property string bar_chart
+    property string line_chart
+    property string pie_chart
+    property string polar_area_chart
+    property string bubble_chart
+    property string scatter_chart
+    property string radar_chart
+
+    function zh(){
+        home="首页"
+        basic_input="基本输入"
+        form="表单"
+        surface="表面"
+        layout="布局"
+        popus="弹窗"
+        navigation="导航"
+        theming="主题"
+        media="媒体"
+        dark_mode="夜间模式"
+        sys_dark_mode="跟随系统"
+        search="查找"
+        about="关于"
+        settings="设置"
+        locale="语言环境"
+        navigation_view_display_mode="导航视图显示模式"
+        other="其他"
+        chart="表格"
+        bar_chart="条形图"
+        line_chart="折线图"
+        pie_chart="饼图"
+        polar_area_chart="极坐标区域图"
+        bubble_chart="气泡图"
+        scatter_chart="散点图"
+        radar_chart="雷达图"
+    }
+
+    function en(){
+        home="Home"
+        basic_input="Basic Input"
+        form="Form"
+        surface="Surfaces"
+        layout="Layout"
+        popus="Popus"
+        navigation="Navigation"
+        theming="Theming"
+        media="Media"
+        dark_mode="Dark Mode"
+        sys_dark_mode="Sync with system"
+        search="Search"
+        about="About"
+        settings="Settings"
+        locale="Locale"
+        navigation_view_display_mode="NavigationView Display Mode"
+        other="Other"
+        chart="Chart"
+        bar_chart="Bar Chart"
+        line_chart="Line Chart"
+        pie_chart="Pie Chart"
+        polar_area_chart="Polar Area Chart"
+        bubble_chart="Bubble Chart"
+        scatter_chart="Scatter Chart"
+        radar_chart="Radar Chart"
+    }
+
+    property string __locale
+    property var __localeList: ["Zh","En"]
+
+    on__LocaleChanged: {
+        if(__locale === "Zh"){
+            zh()
+        }else{
+            en()
+        }
+    }
+
+    Component.onCompleted: {
+        __locale = "En"
+    }
+
+}

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,3 @@
 singleton ItemsOriginal 1.0 ItemsOriginal.qml
 singleton ItemsFooter 1.0 ItemsFooter.qml
-singleton MainEvent 1.0 MainEvent.qml
+singleton Lang 1.0 Lang.qml

example/qml-Qt6/page/T_3D.qml

@@ -0,0 +1,120 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtQuick.Window
+import FluentUI
+import Qt3D.Core
+import Qt3D.Render
+import Qt3D.Input
+import Qt3D.Extras
+import QtQuick.Scene3D
+import QtQuick.Dialogs
+import Qt.labs.platform
+import "../component"
+
+FluContentPage{
+
+    id:root
+    title:"3D"
+
+    Scene3D{
+        id:scene_3d
+        anchors.fill: parent
+        focus: true
+        aspects: ["input", "logic"]
+        cameraAspectRatioMode: Scene3D.AutomaticAspectRatio
+        Entity {
+            Camera {
+                id: camera
+                projectionType: CameraLens.PerspectiveProjection
+                fieldOfView: 22.5
+                aspectRatio: scene_3d.width / scene_3d.height
+                nearPlane: 1
+                farPlane: 1000.0
+                viewCenter: Qt.vector3d( 0.0, 0.0, 0.0 )
+                upVector: Qt.vector3d( 0.0, 1.0, 0.0 )
+                position: Qt.vector3d( 0.0, 0.0, 15.0 )
+            }
+            FirstPersonCameraController {
+                linearSpeed: 100
+                lookSpeed: 50
+                camera: camera
+            }
+            components: [
+                RenderSettings{
+                    activeFrameGraph: ForwardRenderer{
+                        clearColor: Qt.rgba(0,0,0,0);
+                        camera: camera
+                    }
+                },
+                InputSettings{}
+            ]
+            Mesh {
+                id: mesh
+                source: "https://zhu-zichu.gitee.io/test.obj"
+            }
+            PhongMaterial {
+                id: material
+                ambient: color_picker.colorValue
+            }
+            Transform{
+                id:transform
+                scale: 1.0
+                translation: Qt.vector3d(0, 0, 0)
+                rotation: fromEulerAngles(0, 0, 0)
+                property real hAngle:0.0
+                NumberAnimation on hAngle{
+                    from:0
+                    to:360.0
+                    duration: 5000
+                    loops: Animation.Infinite
+                }
+                matrix:{
+                    var m=Qt.matrix4x4();
+                    m.rotate(hAngle,Qt.vector3d(0,1,0));
+                    m.translate(Qt.vector3d(0,0,0));
+                    return m;
+                }
+            }
+            Entity {
+                id: entity
+                components: [mesh, material,transform]
+            }
+        }
+    }
+    ColumnLayout{
+        RowLayout{
+            spacing: 10
+            Layout.topMargin: 20
+            FluText{
+                text:"tintColor:"
+                Layout.alignment: Qt.AlignVCenter
+            }
+            FluColorPicker{
+                id:color_picker
+                enableAlphaChannel:false
+                Component.onCompleted: {
+                    setColor("gray")
+                }
+            }
+        }
+
+        FluButton{
+            text:"选择obj资源"
+            onClicked: {
+                file_dialog.open()
+            }
+        }
+    }
+
+    FileDialog {
+        id: file_dialog
+        nameFilters: ["Obj files (*.obj)"]
+        folder: StandardPaths.writableLocation(StandardPaths.DocumentsLocation)
+        onAccepted: {
+            var fileUrl =  file_dialog.currentFile
+            mesh.source = fileUrl
+        }
+    }
+
+}

example/qml-Qt6/page/T_Acrylic.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
@@ -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_Awesome.qml

@@ -25,7 +25,7 @@ FluContentPage {
             leftMargin: 14
         }
         onClicked: {
-            grid_view.model = FluApp.awesomelist(text_box.text)
+            grid_view.model = FluTheme.awesomeList(text_box.text)
         }
     }
     GridView{
@@ -34,7 +34,7 @@ FluContentPage {
         cellHeight: 80
         clip: true
         boundsBehavior: GridView.StopAtBounds
-        model:FluApp.awesomelist()
+        model:FluTheme.awesomeList()
         ScrollBar.vertical: FluScrollBar {}
         anchors{
             topMargin: 10

example/qml-Qt6/page/T_Badge.qml

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

example/qml-Qt6/page/T_BreadcrumbBar.qml

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

example/qml-Qt6/page/T_Buttons.qml

@@ -4,7 +4,7 @@ import QtQuick.Window
 import QtQuick.Controls
 import QtQuick.Controls.Basic
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
@@ -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_CalendarPicker.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
@@ -36,7 +36,7 @@ FluScrollablePage{
                 left: parent.left
             }
             FluCalendarPicker{
-                current:Date.fromLocaleString("2013年7月11日 21:17:42")
+                current:new Date()
                 onAccepted:{
                     showSuccess(current.toLocaleString())
                 }

example/qml-Qt6/page/T_Captcha.qml

@@ -3,16 +3,16 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-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,12 +30,20 @@ FluScrollablePage{
         }
     }
 
+    FluToggleSwitch{
+        id:switch_case
+        text:"Ignore Case"
+        checked: true
+        Layout.topMargin: 10
+    }
+
     RowLayout{
         spacing: 10
         Layout.topMargin: 10
         FluTextBox{
             id:text_box
             placeholderText: "请输入验证码"
+            Layout.preferredWidth: 240
         }
         FluButton{
             text:"verify"
@@ -49,6 +57,4 @@ FluScrollablePage{
             }
         }
     }
-
-
 }

example/qml-Qt6/page/T_Carousel.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
@@ -36,20 +36,27 @@ FluScrollablePage{
             FluText{
                 text:"轮播图，支持无限轮播，无限滑动，用ListView实现的组件"
             }
-            FluCarousel{
-                radius:[5,5,5,5]
-                delegate: Component{
-                    Image {
-                        anchors.fill: parent
-                        source: model.url
-                        asynchronous: true
-                        fillMode:Image.PreserveAspectCrop
-                    }
+            Item{
+                width: 400
+                height: 300
+                FluShadow{
+                    radius: 8
                 }
-                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"}]
+                FluCarousel{
+                    anchors.fill: parent
+                    delegate: Component{
+                        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{
-                radius:[15,15,15,15]
-                loopTime:1500
-                indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
-                indicatorMarginTop:15
-                delegate: Component{
-                    Item{
-                        anchors.fill: parent
-                        Image {
+            Item{
+                width: 400
+                height: 300
+                FluShadow{
+                    radius: 8
+                }
+                FluCarousel{
+                    anchors.fill: parent
+                    loopTime:1500
+                    indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
+                    indicatorMarginTop:15
+                    delegate: Component{
+                        Item{
                             anchors.fill: parent
-                            source: model.url
-                            asynchronous: true
-                            fillMode:Image.PreserveAspectCrop
-                        }
-                        Rectangle{
-                            height: 40
-                            width: parent.width
-                            anchors.bottom: parent.bottom
-                            color: "#33000000"
-                            FluText{
+                            Image {
                                 anchors.fill: parent
-                                verticalAlignment: Qt.AlignVCenter
-                                horizontalAlignment: Qt.AlignHCenter
-                                text:model.title
-                                color: FluColors.Grey10
-                                font.pixelSize: 15
+                                source: model.url
+                                asynchronous: true
+                                fillMode:Image.PreserveAspectCrop
+                            }
+                            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.leftMargin: 5
-                Component.onCompleted: {
-                    var arr = []
-                    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_3.jpg",title:"有效投资扩大 激发增长动能"})
-                    model = arr
+                    Layout.topMargin: 20
+                    Layout.leftMargin: 5
+                    Component.onCompleted: {
+                        var arr = []
+                        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_3.jpg",title:"有效投资扩大 激发增长动能"})
+                        model = arr
+                    }
                 }
             }
+
         }
     }
 

example/qml-Qt6/page/T_Chart.qml

@@ -1,331 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"Chart"
-
-    function randomScalingFactor() {
-        return Math.random().toFixed(1);
-    }
-
-    FluArea{
-        height: 370
-        width: 500
-        paddings: 10
-        Layout.topMargin: 20
-        FluChart{
-            anchors.fill: parent
-            chartType: 'scatter'
-            chartData: {
-                return {
-                    datasets: [{
-                            label: 'My First dataset',
-                            xAxisID: 'x-axis-1',
-                            yAxisID: 'y-axis-1',
-                            borderColor: '#ff5555',
-                            backgroundColor: 'rgba(255,192,192,0.3)',
-                            data: [{
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }]
-                        }, {
-                            label: 'My Second dataset',
-                            xAxisID: 'x-axis-1',
-                            yAxisID: 'y-axis-2',
-                            borderColor: '#5555ff',
-                            backgroundColor: 'rgba(192,192,255,0.3)',
-                            data: [{
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }, {
-                                    x: randomScalingFactor(),
-                                    y: randomScalingFactor(),
-                                }]
-                        }]
-                }}
-            chartOptions: {return {
-                    maintainAspectRatio: false,
-                    responsive: true,
-                    hoverMode: 'nearest',
-                    intersect: true,
-                    title: {
-                        display: true,
-                        text: 'Chart.js Scatter Chart - Multi Axis'
-                    },
-                    scales: {
-                        xAxes: [{
-                                position: 'bottom',
-                                gridLines: {
-                                    zeroLineColor: 'rgba(0,0,0,1)'
-                                }
-                            }],
-                        yAxes: [{
-                                type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
-                                display: true,
-                                position: 'left',
-                                id: 'y-axis-1',
-                            }, {
-                                type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
-                                display: true,
-                                position: 'right',
-                                reverse: true,
-                                id: 'y-axis-2',
-
-                                // grid line settings
-                                gridLines: {
-                                    drawOnChartArea: false, // only want the grid lines for one axis to show up
-                                },
-                            }],
-                    }
-                }
-            }
-        }
-    }
-
-    FluArea{
-        width: 500
-        height: 370
-        paddings: 10
-        Layout.topMargin: 20
-        FluChart{
-            anchors.fill: parent
-            chartType: 'bar'
-            chartData: { return {
-                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                    datasets: [{
-                            label: 'Dataset 1',
-                            backgroundColor: '#ff9999',
-                            stack: 'Stack 0',
-                            data: [
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor()
-                            ]
-                        }, {
-                            label: 'Dataset 2',
-                            backgroundColor: '#9999ff',
-                            stack: 'Stack 0',
-                            data: [
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor()
-                            ]
-                        }, {
-                            label: 'Dataset 3',
-                            backgroundColor: '#99ff99',
-                            stack: 'Stack 1',
-                            data: [
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor()
-                            ]
-                        }]
-                }
-            }
-
-            chartOptions: { return {
-                    maintainAspectRatio: false,
-                    title: {
-                        display: true,
-                        text: 'Chart.js Bar Chart - Stacked'
-                    },
-                    tooltips: {
-                        mode: 'index',
-                        intersect: false
-                    },
-                    responsive: true,
-                    scales: {
-                        xAxes: [{
-                                stacked: true,
-                            }],
-                        yAxes: [{
-                                stacked: true
-                            }]
-                    }
-                }
-            }
-        }
-    }
-
-    FluArea{
-        width: 500
-        height: 370
-        paddings: 10
-        Layout.topMargin: 20
-        FluChart{
-            anchors.fill: parent
-            chartType: 'pie'
-            chartData: {return {
-                    datasets: [{
-                            data: [
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                            ],
-                            backgroundColor: [
-                                '#ffbbbb',
-                                '#ffddaa',
-                                '#ffffbb',
-                                '#bbffbb',
-                                '#bbbbff'
-                            ],
-                            label: 'Dataset 1'
-                        }],
-                    labels: [
-                        'Red',
-                        'Orange',
-                        'Yellow',
-                        'Green',
-                        'Blue'
-                    ]
-                }}
-            chartOptions: {return {maintainAspectRatio: false, responsive: true}}
-        }
-    }
-
-    FluArea{
-        width: 500
-        height: 370
-        paddings: 10
-        Layout.topMargin: 20
-        FluChart{
-            anchors.fill: parent
-            chartType: 'line'
-            chartData: { return {
-                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                    datasets: [{
-                            label: 'Filled',
-                            fill: true,
-                            backgroundColor: 'rgba(192,222,255,0.3)',
-                            borderColor: 'rgba(128,192,255,255)',
-                            data: [
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor()
-                            ],
-                        }, {
-                            label: 'Dashed',
-                            fill: false,
-                            backgroundColor: 'rgba(0,0,0,0)',
-                            borderColor: '#009900',
-                            borderDash: [5, 5],
-                            data: [
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor()
-                            ],
-                        }, {
-                            label: 'Filled',
-                            backgroundColor: 'rgba(0,0,0,0)',
-                            borderColor: '#990000',
-                            data: [
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor(),
-                                randomScalingFactor()
-                            ],
-                            fill: false,
-                        }]
-                }
-            }
-
-            chartOptions: {return {
-                    maintainAspectRatio: false,
-                    responsive: true,
-                    title: {
-                        display: true,
-                        text: 'Chart.js Line Chart'
-                    },
-                    tooltips: {
-                        mode: 'index',
-                        intersect: false,
-                    },
-                    hover: {
-                        mode: 'nearest',
-                        intersect: true
-                    },
-                    scales: {
-                        xAxes: [{
-                                display: true,
-                                scaleLabel: {
-                                    display: true,
-                                    labelString: 'Month'
-                                }
-                            }],
-                        yAxes: [{
-                                display: true,
-                                scaleLabel: {
-                                    display: true,
-                                    labelString: 'Value'
-                                }
-                            }]
-                    }
-                }
-            }
-        }
-    }
-
-}

example/qml-Qt6/page/T_CheckBox.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
@@ -11,27 +11,35 @@ FluScrollablePage{
 
     FluArea{
         Layout.fillWidth: true
-        height: 68
+        height: 72
         paddings: 10
         Layout.topMargin: 20
+
+        FluText{
+            text:"A 2-state CheckBox"
+        }
+
         Row{
             spacing: 30
-            anchors.verticalCenter: parent.verticalCenter
-            FluCheckBox{
-                disabled: check_box_switch.checked
+            anchors{
+                top: parent.top
+                topMargin: 30
             }
             FluCheckBox{
-                disabled: check_box_switch.checked
+                disabled: check_box_switch_two.checked
+            }
+            FluCheckBox{
+                disabled: check_box_switch_two.checked
                 text:"Right"
             }
             FluCheckBox{
-                disabled: check_box_switch.checked
+                disabled: check_box_switch_two.checked
                 text:"Left"
                 textRight: false
             }
         }
         FluToggleSwitch{
-            id:check_box_switch
+            id:check_box_switch_two
             anchors{
                 right: parent.right
                 verticalCenter: parent.verticalCenter
@@ -47,4 +55,60 @@ FluScrollablePage{
 }'
     }
 
+    FluArea{
+        Layout.fillWidth: true
+        height: 72
+        paddings: 10
+        Layout.topMargin: 20
+
+        FluText{
+            text:"A 3-state CheckBox"
+        }
+
+        Row{
+            spacing: 30
+            anchors{
+                top: parent.top
+                topMargin: 30
+            }
+            FluCheckBox{
+                property int count: 1
+                text:"Three State"
+                disabled: check_box_switch_three.checked
+                clickListener: function(){
+                    var flag = count%3
+                    if(flag === 0){
+                        checked = false
+                        indeterminate = false
+                    }
+                    if(flag === 1){
+                        checked = true
+                        indeterminate = false
+                    }
+                    if(flag === 2){
+                        checked = true
+                        indeterminate = true
+                    }
+                    count++
+                }
+            }
+        }
+        FluToggleSwitch{
+            id:check_box_switch_three
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text:"Disabled"
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluCheckBox{
+    text:"Text"
+    indeterminate:true
+}'
+    }
+
 }

example/qml-Qt6/page/T_Clip.qml

@@ -0,0 +1,107 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtQuick.Window
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title:"Clip"
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 380
+        paddings: 10
+
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text:"配合图片使用(software渲染下该组件将没有效果)"
+                font: FluTextStyle.Subtitle
+                Layout.topMargin: 20
+            }
+            RowLayout{
+                spacing: 14
+                FluClip{
+                    width: 50
+                    height: 50
+                    radius:[25,0,25,25]
+                    Image {
+                        asynchronous: true
+                        anchors.fill: parent
+                        source: "qrc:/example/res/svg/avatar_1.svg"
+                        sourceSize: Qt.size(width,height)
+                    }
+                }
+                FluClip{
+                    width: 50
+                    height: 50
+                    radius:[10,10,10,10]
+                    Image {
+                        asynchronous: true
+                        anchors.fill: parent
+                        sourceSize: Qt.size(width,height)
+                        source: "qrc:/example/res/svg/avatar_2.svg"
+                    }
+                }
+                FluClip{
+                    width: 50
+                    height: 50
+                    radius:[25,25,25,25]
+                    Image {
+                        asynchronous: true
+                        anchors.fill: parent
+                        sourceSize: Qt.size(width,height)
+                        source: "qrc:/example/res/svg/avatar_3.svg"
+                    }
+                }
+                FluClip{
+                    width: 50
+                    height: 50
+                    radius:[0,25,25,25]
+                    Image {
+                        asynchronous: true
+                        anchors.fill: parent
+                        sourceSize: Qt.size(width,height)
+                        source: "qrc:/example/res/svg/avatar_4.svg"
+                    }
+                }
+            }
+            FluClip{
+                width: 1920/5
+                height: 1200/5
+                radius:[8,8,8,8]
+                Image {
+                    asynchronous: true
+                    source: "qrc:/example/res/image/banner_1.jpg"
+                    anchors.fill: parent
+                    sourceSize: Qt.size(2*width,2*height)
+                }
+                Layout.topMargin: 20
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluClip{
+    radius: [25,25,25,25]
+    width: 50
+    height: 50
+    Image{
+        asynchronous: true
+        anchors.fill: parent
+        source: "qrc:/example/res/svg/avatar_4.svg"
+        sourceSize: Qt.size(width,height)
+    }
+}'
+    }
+
+
+}

example/qml-Qt6/page/T_ColorPicker.qml

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

example/qml-Qt6/page/T_ComboBox.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
@@ -46,7 +46,6 @@ FluScrollablePage{
             }
             FluComboBox {
                 editable: true
-                font:FluTextStyle.BodyStrong
                 model: ListModel {
                     id: model_2
                     ListElement { text: "Banana" }

example/qml-Qt6/page/T_DatePicker.qml

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

example/qml-Qt6/page/T_Dialog.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
@@ -16,7 +16,6 @@ FluScrollablePage{
         Layout.topMargin: 20
         FluButton{
             anchors.verticalCenter: parent.verticalCenter
-            Layout.topMargin: 20
             text:"Show Double Button Dialog"
             onClicked: {
                 double_btn_dialog.open()
@@ -65,7 +64,6 @@ FluScrollablePage{
         Layout.topMargin: 20
         FluButton{
             anchors.verticalCenter: parent.verticalCenter
-            Layout.topMargin: 20
             text:"Show Triple Button Dialog"
             onClicked: {
                 triple_btn_dialog.open()
@@ -115,4 +113,119 @@ FluScrollablePage{
             showSuccess("点击最小化按钮")
         }
     }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 100
+        paddings: 10
+        Layout.topMargin: 20
+        FluButton{
+            anchors.top: parent.top
+            anchors.topMargin: 5
+            text:"Custom Content Dialog"
+            onClicked: {
+                custom_btn_dialog.open()
+            }
+        }
+        FluButton{
+            anchors.top: parent.top
+            anchors.topMargin: 48
+            text:"Custom Content Dialog2"
+            onClicked: {
+                custom_btn_dialog2.open()
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluContentDialog{
+    id:dialog
+    title:"友情提示"
+    message:"数据正在加载中，请稍等..."
+    negativeText:"取消加载"
+    contentDelegate: Component{
+        Item{
+            width: parent.width
+            height: 80
+            FluProgressRing{
+                anchors.centerIn: parent
+            }
+        }
+    }
+    onNegativeClicked:{
+        showSuccess("点击取消按钮")
+    }
+    positiveText:"确定"
+    onPositiveClicked:{
+        showSuccess("点击确定按钮")
+    }
+    dialog.open()'
+    }
+
+    FluContentDialog{
+        id:custom_btn_dialog
+        title:"友情提示"
+        message:"数据正在加载中，请稍等..."
+        negativeText:"取消加载"
+        contentDelegate: Component{
+            Item{
+                implicitWidth: parent.width
+                implicitHeight: 80
+                FluProgressRing{
+                    anchors.centerIn: parent
+                }
+            }
+        }
+        onNegativeClicked:{
+            showSuccess("点击取消按钮")
+        }
+        positiveText:"确定"
+        onPositiveClicked:{
+            showSuccess("点击确定按钮")
+        }
+    }
+
+    FluContentDialog{
+        id:custom_btn_dialog2
+        title:"折线图"
+        contentDelegate: Component{
+            Item{
+                implicitWidth: parent.width
+                implicitHeight: 300
+                FluChart{
+                    anchors.fill: parent
+                    chartType: 'line'
+                    chartData: { return {
+                            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                            datasets: [{
+                                    label: 'My First Dataset',
+                                    data: [65, 59, 80, 81, 56, 55, 40],
+                                    fill: false,
+                                    borderColor: 'rgb(75, 192, 192)',
+                                    tension: 0.1
+                                }]
+                        }
+                    }
+                    chartOptions: { return {
+                            maintainAspectRatio: false,
+                            title: {
+                                display: true,
+                                text: 'Chart.js Line Chart - Stacked'
+                            },
+                            tooltips: {
+                                mode: 'index',
+                                intersect: false
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        buttonFlags: FluContentDialogType.PositiveButton
+        positiveText:"确定"
+        onPositiveClicked:{
+            showSuccess("点击确定按钮")
+        }
+    }
 }

example/qml-Qt6/page/T_Expander.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
@@ -58,6 +58,7 @@ FluScrollablePage{
                         width: parent.width
                         height: parent.height
                         contentWidth: width
+                        boundsBehavior: Flickable.StopAtBounds
                         contentHeight: text_info.height
                         ScrollBar.vertical: FluScrollBar {}
                         FluText{

example/qml-Qt6/page/T_FlipView.qml

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

example/qml-Qt6/page/T_Home.qml

@@ -2,8 +2,8 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
-import "qrc:///example/qml/global"
 import FluentUI
+import "../global"
 
 FluScrollablePage{
 
@@ -28,6 +28,7 @@ FluScrollablePage{
             fillMode:Image.PreserveAspectCrop
             anchors.fill: parent
             verticalAlignment: Qt.AlignTop
+            sourceSize: Qt.size(960,640)
             source: "qrc:/example/res/image/bg_home_header.png"
         }
         Rectangle{
@@ -48,33 +49,19 @@ 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:Item{
+        Component{
+            id:com_grallery
+            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 +75,15 @@ FluScrollablePage{
                     }
                     Rectangle{
                         anchors.fill: parent
-                        radius: 8
-                        color:{
-                            if(FluTheme.dark){
-                                if(item_mouse.containsMouse){
-                                    return Qt.rgba(1,1,1,0.03)
-                                }
-                                return Qt.rgba(0,0,0,0.0)
-                            }else{
-                                if(item_mouse.containsMouse){
-                                    return Qt.rgba(0,0,0,0.03)
-                                }
-                                return Qt.rgba(0,0,0,0.0)
-                            }
-                        }
+                        radius: 5
+                        color:FluTheme.itemHoverColor
+                        visible: item_mouse.containsMouse
+                    }
+                    Rectangle{
+                        anchors.fill: parent
+                        radius: 5
+                        color:Qt.rgba(0,0,0,0.0)
+                        visible: !item_mouse.containsMouse
                     }
                     ColumnLayout{
                         Image {
@@ -153,11 +135,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.extra.desc
             width: 320
             height: 120
             FluArea{
@@ -169,31 +171,23 @@ FluScrollablePage{
                     anchors.fill: parent
                     radius: 8
                     color:{
-                        if(FluTheme.dark){
-                            if(item_mouse.containsMouse){
-                                return Qt.rgba(1,1,1,0.03)
-                            }
-                            return Qt.rgba(0,0,0,0)
-                        }else{
-                            if(item_mouse.containsMouse){
-                                return Qt.rgba(0,0,0,0.03)
-                            }
-                            return Qt.rgba(0,0,0,0)
+                        if(item_mouse.containsMouse){
+                            return FluTheme.itemHoverColor
                         }
+                        return FluTheme.itemNormalColor
                     }
                 }
                 Image{
                     id:item_icon
                     height: 40
                     width: 40
-                    source: modelData.image
+                    source: modelData.extra.image
                     anchors{
                         left: parent.left
                         leftMargin: 20
                         verticalCenter: parent.verticalCenter
                     }
                 }
-
                 FluText{
                     id:item_title
                     text:modelData.title
@@ -204,10 +198,9 @@ FluScrollablePage{
                         top: item_icon.top
                     }
                 }
-
                 FluText{
                     id:item_desc
-                    text:modelData.desc
+                    text:desc
                     color:FluColors.Grey120
                     wrapMode: Text.WrapAnywhere
                     elide: Text.ElideRight
@@ -226,7 +219,7 @@ FluScrollablePage{
                     height: 12
                     width: 12
                     radius:  6
-                    color: FluTheme.primaryColor.dark
+                    color: FluTheme.primaryColor
                     anchors{
                         right: parent.right
                         top: parent.top

example/qml-Qt6/page/T_Http.qml

@@ -1,279 +0,0 @@
-import QtQuick
-import Qt.labs.platform
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import QtQuick.Dialogs
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluContentPage{
-
-    title:"Http"
-
-    FluHttp{
-        id:http
-    }
-
-    Flickable{
-        id:layout_flick
-        width: 160
-        clip: true
-        anchors{
-            top: parent.top
-            topMargin: 20
-            bottom: parent.bottom
-            left: parent.left
-        }
-        ScrollBar.vertical: FluScrollBar {}
-        contentHeight:layout_column.height
-        Column{
-            spacing: 2
-            id:layout_column
-            width: parent.width
-            FluButton{
-                implicitWidth: parent.width
-                implicitHeight: 36
-                text: "Get请求"
-                onClicked: {
-                    var callable = {}
-                    callable.onStart = function(){
-                        showLoading()
-                    }
-                    callable.onFinish = function(){
-                        hideLoading()
-                    }
-                    callable.onSuccess = function(result){
-                        text_info.text = result
-                        console.debug(result)
-                    }
-                    callable.onError = function(status,errorString){
-                        console.debug(status+";"+errorString)
-                    }
-                    http.get("https://httpbingo.org/get",callable)
-                }
-            }
-            FluButton{
-                implicitWidth: parent.width
-                implicitHeight: 36
-                text: "Post表单请求"
-                onClicked: {
-                    var callable = {}
-                    callable.onStart = function(){
-                        showLoading()
-                    }
-                    callable.onFinish = function(){
-                        hideLoading()
-                    }
-                    callable.onSuccess = function(result){
-                        text_info.text = result
-                        console.debug(result)
-                    }
-                    callable.onError = function(status,errorString){
-                        console.debug(status+";"+errorString)
-                    }
-                    var param = {}
-                    param.custname = "朱子楚"
-                    param.custtel = "1234567890"
-                    param.custemail = "zhuzichu520@gmail.com"
-                    http.post("https://httpbingo.org/post",callable,param)
-                }
-            }
-            FluButton{
-                implicitWidth: parent.width
-                implicitHeight: 36
-                text: "Post Json请求"
-                onClicked: {
-                    var callable = {}
-                    callable.onStart = function(){
-                        showLoading()
-                    }
-                    callable.onFinish = function(){
-                        hideLoading()
-                    }
-                    callable.onSuccess = function(result){
-                        text_info.text = result
-                        console.debug(result)
-                    }
-                    callable.onError = function(status,errorString){
-                        console.debug(status+";"+errorString)
-                    }
-                    var param = {}
-                    param.custname = "朱子楚"
-                    param.custtel = "1234567890"
-                    param.custemail = "zhuzichu520@gmail.com"
-                    http.postJson("https://httpbingo.org/post",callable,param)
-                }
-            }
-            FluButton{
-                implicitWidth: parent.width
-                implicitHeight: 36
-                text: "Post String请求"
-                onClicked: {
-                    var callable = {}
-                    callable.onStart = function(){
-                        showLoading()
-                    }
-                    callable.onFinish = function(){
-                        hideLoading()
-                    }
-                    callable.onSuccess = function(result){
-                        text_info.text = result
-                        console.debug(result)
-                    }
-                    callable.onError = function(status,errorString){
-                        console.debug(status+";"+errorString)
-                    }
-                    var param = "我命由我不由天"
-                    http.postString("https://httpbingo.org/post",callable,param)
-                }
-            }
-            FluButton{
-                id:btn_download
-                implicitWidth: parent.width
-                implicitHeight: 36
-                text: "下载文件"
-                onClicked: {
-                    folder_dialog.open()
-                }
-            }
-            FluButton{
-                id:btn_upload
-                implicitWidth: parent.width
-                implicitHeight: 36
-                text: "文件上传"
-                onClicked: {
-                    file_dialog.open()
-                }
-            }
-        }
-    }
-
-    FileDialog {
-        id: file_dialog
-        onAccepted: {
-            var param = {}
-            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
-            }
-            console.debug(JSON.stringify(param))
-            var callable = {}
-            callable.onStart = function(){
-                btn_upload.disabled = true
-            }
-            callable.onFinish = function(){
-                btn_upload.disabled = false
-                btn_upload.text = "上传文件"
-                layout_upload_file_size.visible = false
-                text_upload_file_size.text = ""
-            }
-            callable.onSuccess = function(result){
-                text_info.text = result
-                console.debug(result)
-            }
-            callable.onError = function(status,errorString,result){
-                text_info.text = result
-                console.debug(result)
-            }
-            callable.onUploadProgress = function(sent,total){
-                var locale = Qt.locale()
-                var precent = (sent/total * 100).toFixed(0) + "%"
-                btn_upload.text = "上传中..."+precent
-                text_upload_file_size.text =  "%1/%2".arg(locale.formattedDataSize(sent)).arg(locale.formattedDataSize(total))
-                layout_upload_file_size.visible = true
-            }
-            http.upload("https://httpbingo.org/post",callable,param)
-        }
-    }
-
-    FolderDialog {
-        id: folder_dialog
-        currentFolder: StandardPaths.standardLocations(StandardPaths.DownloadLocation)[0]
-        onAccepted: {
-            var callable = {}
-            callable.onStart = function(){
-                btn_download.disabled = true
-            }
-            callable.onFinish = function(){
-                btn_download.disabled = false
-                btn_download.text = "下载文件"
-                layout_download_file_size.visible = false
-                text_download_file_size.text = ""
-            }
-            callable.onSuccess = function(result){
-                showSuccess(result)
-            }
-            callable.onError = function(status,errorString){
-                showError(errorString)
-            }
-            callable.onDownloadProgress = function(recv,total){
-                var locale = Qt.locale()
-                var precent = (recv/total * 100).toFixed(0) + "%"
-                btn_download.text = "下载中..."+precent
-                text_download_file_size.text =  "%1/%2".arg(locale.formattedDataSize(recv)).arg(locale.formattedDataSize(total))
-                layout_download_file_size.visible = true
-            }
-            var path = FluTools.toLocalPath(currentFolder)+ "/big_buck_bunny.mp4"
-            http.download("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",callable,path)
-        }
-    }
-
-    FluArea{
-        anchors{
-            top: layout_flick.top
-            bottom: layout_flick.bottom
-            left: layout_flick.right
-            right: parent.right
-            leftMargin: 8
-        }
-        Flickable{
-            clip: true
-            id:scrollview
-            boundsBehavior:Flickable.StopAtBounds
-            width: parent.width
-            height: parent.height
-            contentWidth: width
-            contentHeight: text_info.height
-            ScrollBar.vertical: FluScrollBar {}
-            FluText{
-                id:text_info
-                width: scrollview.width
-                wrapMode: Text.WrapAnywhere
-                padding: 14
-            }
-        }
-    }
-
-    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_Image.qml

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

example/qml-Qt6/page/T_InfoBar.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
@@ -12,7 +12,7 @@ FluScrollablePage{
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 240
+        height: 270
         paddings: 10
         ColumnLayout{
             spacing: 14
@@ -41,7 +41,13 @@ FluScrollablePage{
             FluButton{
                 text:"Success"
                 onClicked: {
-                    showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
+                    showSuccess("这是一个Success样式的InfoBar")
+                }
+            }
+            FluButton{
+                text:"手动关闭的InfoBar"
+                onClicked: {
+                    showInfo("这是一个Info样式的InfoBar",0,"支持手动关闭")
                 }
             }
             FluButton{

example/qml-Qt6/page/T_Menu.qml

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

example/qml-Qt6/page/T_MultiWindow.qml

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

example/qml-Qt6/page/T_Network.qml

@@ -0,0 +1,560 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import Qt.labs.platform
+import "../component"
+
+FluContentPage{
+
+    id:root
+    title:"Network"
+
+    FluNetworkCallable{
+        id:callable
+        onStart: {
+            showLoading()
+        }
+        onFinish: {
+            hideLoading()
+        }
+        onError:
+            (status,errorString,result)=>{
+                console.debug(status+";"+errorString+";"+result)
+            }
+        onCache:
+            (result)=>{
+                text_info.text = result
+            }
+        onSuccess:
+            (result)=>{
+                text_info.text = result
+            }
+    }
+
+    Flickable{
+        id:layout_flick
+        width: 200
+        clip: true
+        anchors{
+            top: parent.top
+            topMargin: 20
+            bottom: parent.bottom
+            left: parent.left
+        }
+        boundsBehavior: Flickable.StopAtBounds
+        ScrollBar.vertical: FluScrollBar {}
+        contentHeight:layout_column.height
+        Column{
+            spacing: 2
+            id:layout_column
+            width: parent.width
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Get"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.get("https://httpbingo.org/get")
+                    .addQuery("name","孙悟空")
+                    .addQuery("age",500)
+                    .addQuery("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Head"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.head("https://httpbingo.org/head")
+                    .addQuery("name","孙悟空")
+                    .addQuery("age",500)
+                    .addQuery("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Post Body"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.postBody("https://httpbingo.org/post")
+                    .setBody("花果山水帘洞美猴王齐天大圣孙悟空")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Post Form"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.postForm("https://httpbingo.org/post")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Post JSON"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.postJson("https://httpbingo.org/post")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Post JSON Array"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.postJsonArray("https://httpbingo.org/post")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Put Body"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.putBody("https://httpbingo.org/put")
+                    .setBody("花果山水帘洞美猴王齐天大圣孙悟空")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Put Form"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.putForm("https://httpbingo.org/put")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Put JSON"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.putJson("https://httpbingo.org/put")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Put JSON Array"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.putJsonArray("https://httpbingo.org/put")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Patch Body"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.patchBody("https://httpbingo.org/patch")
+                    .setBody("花果山水帘洞美猴王齐天大圣孙悟空")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Patch Form"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.patchForm("https://httpbingo.org/patch")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Patch JSON"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.patchJson("https://httpbingo.org/patch")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Patch JSON Array"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.patchJsonArray("https://httpbingo.org/patch")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Delete Body"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.deleteBody("https://httpbingo.org/delete")
+                    .setBody("花果山水帘洞美猴王齐天大圣孙悟空")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Delete Form"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.deleteForm("https://httpbingo.org/delete")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Delete JSON"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.deleteJson("https://httpbingo.org/delete")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Delete JSON Array"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.deleteJsonArray("https://httpbingo.org/delete")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Open Log"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.postJson("https://httpbingo.org/post")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .openLog(true)
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Custom Header"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.postJson("https://httpbingo.org/post")
+                    .addHeader("os","PC")
+                    .addHeader("version","1.0.0")
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "RequestFailedReadCache"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.postJson("https://httpbingo.org/post")
+                    .setCacheMode(FluNetworkType.RequestFailedReadCache)
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .add("cacheMode","RequestFailedReadCache")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "IfNoneCacheRequest"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.postJson("https://httpbingo.org/post")
+                    .setCacheMode(FluNetworkType.IfNoneCacheRequest)
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .add("cacheMode","IfNoneCacheRequest")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "FirstCacheThenRequest"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.postJson("https://httpbingo.org/post")
+                    .setCacheMode(FluNetworkType.FirstCacheThenRequest)
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .add("cacheMode","FirstCacheThenRequest")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Timeout And Retry"
+                onClicked: {
+                    text_info.text = ""
+                    FluNetwork.postJson("https://httpbingo.org/post")
+                    .setTimeout(5000)
+                    .setRetry(3)
+                    .add("name","孙悟空")
+                    .add("age",500)
+                    .add("address","花果山水帘洞")
+                    .add("timeout","5000")
+                    .add("retry","3")
+                    .bind(root)
+                    .go(callable)
+                }
+            }
+            FluProgressButton{
+                id:btn_upload
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Upload File"
+                onClicked: {
+                    file_dialog.open()
+                }
+            }
+            FluProgressButton{
+                id:btn_download
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Download File"
+                onClicked: {
+                    folder_dialog.showDialog(function(path){
+                        FluNetwork.get("http://vjs.zencdn.net/v/oceans.mp4")
+                        .toDownload(path)
+                        .bind(root)
+                        .go(callable_download_file)
+                    })
+                }
+            }
+            FluProgressButton{
+                id:btn_download_breakpoint
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Breakpoint Download File"
+                onClicked: {
+                    folder_dialog.showDialog(function(path){
+                        FluNetwork.get("http://vjs.zencdn.net/v/oceans.mp4")
+                        .toDownload(path,true)
+                        .bind(root)
+                        .go(callable_breakpoint_download_file)
+                    })
+                }
+            }
+        }
+    }
+
+    FluNetworkCallable{
+        id:callable_upload_file
+        onStart: {
+            btn_upload.disabled = true
+        }
+        onFinish: {
+            btn_upload.disabled = false
+        }
+        onError:
+            (status,errorString,result)=>{
+                btn_upload.progress = 0
+                text_info.text = result
+                console.debug(status+";"+errorString+";"+result)
+            }
+        onSuccess:
+            (result)=>{
+                text_info.text = result
+            }
+        onUploadProgress:
+            (sent,total)=>{
+                btn_upload.progress = sent/total
+            }
+    }
+
+    FluNetworkCallable{
+        id:callable_download_file
+        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
+            }
+    }
+
+    FluNetworkCallable{
+        id:callable_breakpoint_download_file
+        onStart: {
+            btn_download_breakpoint.progress = 0
+            btn_download_breakpoint.disabled = true
+        }
+        onFinish: {
+            btn_download_breakpoint.disabled = false
+        }
+        onError:
+            (status,errorString,result)=>{
+                btn_download_breakpoint.progress = 0
+                showError(errorString)
+                console.debug(status+";"+errorString+";"+result)
+            }
+        onSuccess:
+            (result)=>{
+                showSuccess(result)
+            }
+        onDownloadProgress:
+            (recv,total)=>{
+                btn_download_breakpoint.progress = recv/total
+            }
+    }
+
+    FileDialog {
+        id: file_dialog
+        onAccepted: {
+            FluNetwork.postForm("https://httpbingo.org/post")
+            .setRetry(1)//只请求一次
+            .add("accessToken","12345678")
+            .addFile("file",FluTools.toLocalPath(file_dialog.currentFile))
+            .bind(root)
+            .go(callable_upload_file)
+        }
+    }
+
+    FileDialog {
+        property var onSelectListener
+        id: folder_dialog
+        folder: StandardPaths.standardLocations(StandardPaths.DownloadLocation)[0]
+        currentFile: StandardPaths.standardLocations(StandardPaths.DownloadLocation)[0]+"/oceans.mp4"
+        fileMode: FileDialog.SaveFile
+        onAccepted: {
+            folder_dialog.onSelectListener(FluTools.toLocalPath(folder_dialog.currentFile))
+        }
+        function showDialog(listener){
+            folder_dialog.onSelectListener = listener
+            folder_dialog.open()
+        }
+    }
+
+    FluArea{
+        anchors{
+            top: layout_flick.top
+            bottom: layout_flick.bottom
+            left: layout_flick.right
+            right: parent.right
+            leftMargin: 8
+        }
+        Flickable{
+            clip: true
+            id:scrollview
+            boundsBehavior:Flickable.StopAtBounds
+            width: parent.width
+            height: parent.height
+            contentWidth: width
+            contentHeight: text_info.height
+            ScrollBar.vertical: FluScrollBar {}
+            FluText{
+                id:text_info
+                width: scrollview.width
+                wrapMode: Text.WrapAnywhere
+                padding: 14
+            }
+        }
+    }
+}

example/qml-Qt6/page/T_Pagination.qml

@@ -2,8 +2,8 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
-import "qrc:///example/qml/component"
 import FluentUI
+import "../component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_Pivot.qml

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

example/qml-Qt6/page/T_Progress.qml

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

example/qml-Qt6/page/T_QRCode.qml

@@ -3,8 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import Qt5Compat.GraphicalEffects
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
@@ -32,6 +31,7 @@ FluScrollablePage{
         FluTextBox{
             id:text_box
             text:"会磨刀的小猪"
+            Layout.preferredWidth: 240
         }
     }
 

example/qml-Qt6/page/T_RadioButton.qml

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

example/qml-Qt6/page/T_RatingControl.qml

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

example/qml-Qt6/page/T_Rectangle.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Controls
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
@@ -12,16 +12,15 @@ FluScrollablePage{
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 460
+        height: 80
         paddings: 10
 
         Column{
             spacing: 15
             anchors{
-                verticalCenter: parent.verticalCenter
                 left: parent.left
+                verticalCenter: parent.verticalCenter
             }
-
             RowLayout{
                 Layout.topMargin: 20
                 FluRectangle{
@@ -61,70 +60,6 @@ FluScrollablePage{
                     radius:[0,0,0,15]
                 }
             }
-            FluText{
-                text:"配合图片使用"
-                font: FluTextStyle.Subtitle
-                Layout.topMargin: 20
-            }
-            RowLayout{
-                spacing: 14
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    radius:[25,0,25,25]
-                    Image {
-                        asynchronous: true
-                        anchors.fill: parent
-                        source: "qrc:/example/res/svg/avatar_1.svg"
-                        sourceSize: Qt.size(width,height)
-                    }
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    radius:[10,10,10,10]
-                    Image {
-                        asynchronous: true
-                        anchors.fill: parent
-                        sourceSize: Qt.size(width,height)
-                        source: "qrc:/example/res/svg/avatar_2.svg"
-                    }
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    radius:[25,25,25,25]
-                    Image {
-                        asynchronous: true
-                        anchors.fill: parent
-                        sourceSize: Qt.size(width,height)
-                        source: "qrc:/example/res/svg/avatar_3.svg"
-                    }
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    radius:[0,25,25,25]
-                    Image {
-                        asynchronous: true
-                        anchors.fill: parent
-                        sourceSize: Qt.size(width,height)
-                        source: "qrc:/example/res/svg/avatar_4.svg"
-                    }
-                }
-            }
-            FluRectangle{
-                width: 1920/5
-                height: 1200/5
-                radius:[15,15,15,15]
-                Image {
-                    asynchronous: true
-                    source: "qrc:/example/res/image/banner_1.jpg"
-                    anchors.fill: parent
-                    sourceSize: Qt.size(2*width,2*height)
-                }
-                Layout.topMargin: 20
-            }
         }
     }
     CodeExpander{
@@ -134,14 +69,6 @@ FluScrollablePage{
     radius: [25,25,25,25]
     width: 50
     height: 50
-    Image{
-        asynchronous: true
-        anchors.fill: parent
-        source: "qrc:/example/res/svg/avatar_4.svg"
-        sourceSize: Qt.size(width,height)
-    }
 }'
     }
-
-
 }

example/qml-Qt6/page/T_RemoteLoader.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluPage{
     launchMode: FluPageType.SingleTop

example/qml-Qt6/page/T_Screenshot.qml

@@ -1,55 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"Screenshot"
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 100
-        paddings: 10
-        Layout.topMargin: 20
-
-        FluFilledButton{
-            anchors.verticalCenter: parent.verticalCenter
-            text:"Open Screenshot"
-            onClicked: {
-                screenshot.open()
-            }
-        }
-    }
-
-    Rectangle{
-        Layout.preferredHeight: 400
-        Layout.preferredWidth: 400
-        Layout.topMargin: 10
-        Layout.leftMargin: 4
-        Layout.bottomMargin: 4
-        color: FluTheme.dark ? FluColors.Black : FluColors.White
-        FluShadow{
-            radius: 0
-            color: FluTheme.primaryColor.dark
-        }
-        Image{
-            id:image
-            anchors.fill: parent
-            fillMode: Image.PreserveAspectFit
-            asynchronous: true
-        }
-    }
-
-    FluScreenshot{
-        id:screenshot
-        captrueMode: FluScreenshotType.File
-        saveFolder: FluTools.getApplicationDirPath()+"/screenshot"
-        onCaptrueCompleted:
-            (captrue)=>{
-                image.source = captrue
-            }
-    }
-}

example/qml-Qt6/page/T_Settings.qml

@@ -3,13 +3,102 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/global"
-import "qrc:///example/qml/component"
+import "../global"
+import "../component"
+import "../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:"Use System AppBar"
+            checked: FluApp.useSystemAppBar
+            anchors.verticalCenter: parent.verticalCenter
+            onClicked: {
+                FluApp.useSystemAppBar = !FluApp.useSystemAppBar
+                dialog_restart.open()
+            }
+        }
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 50
+        paddings: 10
+        FluCheckBox{
+            text:"fitsAppBarWindows"
+            checked: window.fitsAppBarWindows
+            anchors.verticalCenter: parent.verticalCenter
+            onClicked: {
+                window.fitsAppBarWindows = !window.fitsAppBarWindows
+            }
+        }
+    }
+
+    FluContentDialog{
+        id:dialog_restart
+        title:"友情提示"
+        message:"此操作需要重启才能生效，是否重新启动？"
+        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
+        negativeText: "取消"
+        positiveText:"确定"
+        onPositiveClicked:{
+            FluApp.exit(931)
+        }
+    }
+
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
@@ -23,7 +112,7 @@ FluScrollablePage{
                 left: parent.left
             }
             FluText{
-                text:lang.dark_mode
+                text:Lang.dark_mode
                 font: FluTextStyle.BodyStrong
                 Layout.bottomMargin: 4
             }
@@ -53,17 +142,17 @@ FluScrollablePage{
                 left: parent.left
             }
             FluText{
-                text:lang.navigation_view_display_mode
+                text:Lang.navigation_view_display_mode
                 font: FluTextStyle.BodyStrong
                 Layout.bottomMargin: 4
             }
             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
                     }
                 }
             }
@@ -84,7 +173,7 @@ FluScrollablePage{
             }
 
             FluText{
-                text:lang.locale
+                text:Lang.locale
                 font: FluTextStyle.BodyStrong
                 Layout.bottomMargin: 4
             }
@@ -92,17 +181,16 @@ FluScrollablePage{
             Flow{
                 spacing: 5
                 Repeater{
-                    model: ["Zh","En"]
+                    model: Lang.__localeList
                     delegate: FluRadioButton{
-                        checked: appInfo.lang.objectName === modelData
+                        checked: Lang.__locale === modelData
                         text:modelData
                         clickListener:function(){
-                            appInfo.changeLang(modelData)
+                            Lang.__locale = modelData
                         }
                     }
                 }
             }
         }
     }
-
 }

example/qml-Qt6/page/T_ShortcutPicker.qml

@@ -0,0 +1,30 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title:"ShortcutPicker"
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 100
+        paddings: 10
+        FluShortcutPicker{
+            anchors.verticalCenter: parent.verticalCenter
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluShortcutPicker{
+
+}'
+    }
+
+}
+

example/qml-Qt6/page/T_Slider.qml

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

example/qml-Qt6/page/T_SplitLayout.qml

@@ -0,0 +1,84 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluContentPage{
+
+    title:"SplitLayout"
+
+    RowLayout{
+        id:layout_dropdown
+        anchors{
+            top: parent.top
+            topMargin: 20
+        }
+        FluText{
+            text:"orientation:"
+        }
+        FluDropDownButton{
+            id:btn_orientation
+            Layout.preferredWidth: 120
+            text:"Horizontal"
+            FluMenuItem{
+                text:"Horizontal"
+                onClicked: {
+                    btn_orientation.text = text
+                    split_layout.orientation = Qt.Horizontal
+                }
+            }
+            FluMenuItem{
+                text:"Vertical"
+                onClicked: {
+                    btn_orientation.text = text
+                    split_layout.orientation = Qt.Vertical
+                }
+            }
+        }
+    }
+    FluSplitLayout {
+        id:split_layout
+        anchors{
+            top: layout_dropdown.bottom
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+            topMargin: 8
+        }
+        orientation: Qt.Horizontal
+        Item {
+            clip: true
+            implicitWidth: 200
+            implicitHeight: 200
+            SplitView.maximumWidth: 400
+            SplitView.maximumHeight: 400
+            FluText {
+                text: "Page 1"
+                anchors.centerIn: parent
+            }
+        }
+        Item {
+            clip: true
+            id: centerItem
+            SplitView.minimumWidth: 50
+            SplitView.minimumHeight: 50
+            SplitView.fillWidth: true
+            SplitView.fillHeight: true
+            FluText {
+                text: "Page 2"
+                anchors.centerIn: parent
+            }
+        }
+        Item {
+            clip: true
+            implicitWidth: 200
+            implicitHeight: 200
+            FluText {
+                text: "Page 3"
+                anchors.centerIn: parent
+            }
+        }
+    }
+}

example/qml-Qt6/page/T_StaggeredLayout.qml

@@ -0,0 +1,59 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI 1.0
+import "../component"
+
+FluContentPage{
+
+    title:"StaggeredLayout"
+
+    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 {}
+        FluStaggeredLayout{
+            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_StatusLayout.qml

@@ -3,11 +3,11 @@ import QtQuick.Layouts
 import QtQuick.Controls
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"StatusView"
+    title:"StatusLayout"
 
     FluArea{
         id:layout_actions
@@ -25,28 +25,28 @@ FluScrollablePage{
                     text:"Loading"
                     onClicked: {
                         btn_status_mode.text = text
-                        status_view.statusMode = FluStatusViewType.Loading
+                        status_view.statusMode = FluStatusLayoutType.Loading
                     }
                 }
                 FluMenuItem{
                     text:"Empty"
                     onClicked: {
                         btn_status_mode.text = text
-                        status_view.statusMode = FluStatusViewType.Empty
+                        status_view.statusMode = FluStatusLayoutType.Empty
                     }
                 }
                 FluMenuItem{
                     text:"Error"
                     onClicked: {
                         btn_status_mode.text = text
-                        status_view.statusMode = FluStatusViewType.Error
+                        status_view.statusMode = FluStatusLayoutType.Error
                     }
                 }
                 FluMenuItem{
                     text:"Success"
                     onClicked: {
                         btn_status_mode.text = text
-                        status_view.statusMode = FluStatusViewType.Success
+                        status_view.statusMode = FluStatusLayoutType.Success
                     }
                 }
             }
@@ -58,7 +58,7 @@ FluScrollablePage{
         Layout.topMargin: 10
         height: 380
         paddings: 10
-        FluStatusView{
+        FluStatusLayout{
             id:status_view
             anchors.fill: parent
             onErrorClicked:{
@@ -66,19 +66,19 @@ FluScrollablePage{
             }
             Rectangle {
                 anchors.fill: parent
-                color:FluTheme.primaryColor.dark
+                color:FluTheme.primaryColor
             }
         }
     }
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
-        code:'FluStatusView{
+        code:'FluStatusLayout{
     anchors.fill: parent
-    statusMode: FluStatusViewType.Loading
+    statusMode: FluStatusLayoutType.Loading
     Rectangle{
         anchors.fill: parent
-        color:FluTheme.primaryColor.dark
+        color:FluTheme.primaryColor
     }
 }'
     }

example/qml-Qt6/page/T_TabView.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
@@ -67,10 +67,10 @@ FluScrollablePage{
                 text:"Always"
                 Layout.preferredWidth: 120
                 FluMenuItem{
-                    text:"Nerver"
+                    text:"Never"
                     onClicked: {
                         btn_close_button_visibility.text = text
-                        tab_view.closeButtonVisibility = FluTabViewType.Nerver
+                        tab_view.closeButtonVisibility = FluTabViewType.Never
                     }
                 }
                 FluMenuItem{

example/qml-Qt6/page/T_TableView.qml

@@ -3,16 +3,85 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluContentPage{
 
+    id:root
     title:"TableView"
+    signal checkBoxChanged
+
+    property var dataSource : []
+    property int sortType: 0
 
     Component.onCompleted: {
         loadData(1,1000)
     }
 
+    onSortTypeChanged: {
+        table_view.closeEditor()
+        if(sortType === 0){
+            table_view.sort()
+        }else if(sortType === 1){
+            table_view.sort((a, b) => a.age - b.age);
+        }else if(sortType === 2){
+            table_view.sort((a, b) => b.age - a.age);
+        }
+    }
+
+    FluContentDialog{
+        id:custom_update_dialog
+        property var text
+        property var onAccpetListener
+        title:"修改列名"
+        negativeText:"取消"
+        contentDelegate: Component{
+            Item{
+                implicitWidth: parent.width
+                implicitHeight: 60
+                FluTextBox{
+                    id:textbox_text
+                    anchors.centerIn: parent
+                    onTextChanged: {
+                        custom_update_dialog.text = textbox_text.text
+                    }
+                }
+                Component.onCompleted: {
+                    textbox_text.text = custom_update_dialog.text
+                    textbox_text.forceActiveFocus()
+                }
+            }
+        }
+        positiveText:"确定"
+        onPositiveClicked:{
+            if(custom_update_dialog.onAccpetListener){
+                custom_update_dialog.onAccpetListener(custom_update_dialog.text)
+            }
+        }
+        function showDialog(text,listener){
+            custom_update_dialog.text = text
+            custom_update_dialog.onAccpetListener = listener
+            custom_update_dialog.open()
+        }
+    }
+
+    Component{
+        id:com_checbox
+        Item{
+            FluCheckBox{
+                anchors.centerIn: parent
+                checked: true === options.checked
+                enableAnimation: false
+                clickListener: function(){
+                    var obj = tableModel.getRow(row)
+                    obj.checkbox = table_view.customItem(com_checbox,{checked:!options.checked})
+                    tableModel.setRow(row,obj)
+                    checkBoxChanged()
+                }
+            }
+        }
+    }
+
     Component{
         id:com_action
         Item{
@@ -23,11 +92,15 @@ FluContentPage{
                     onClicked: {
                         table_view.closeEditor()
                         tableModel.removeRow(row)
+                        checkBoxChanged()
                     }
                 }
                 FluFilledButton{
                     text:"编辑"
                     onClicked: {
+                        var obj = tableModel.getRow(row)
+                        obj.name = "12345"
+                        tableModel.setRow(row,obj)
                         showSuccess(JSON.stringify(tableModel.getRow(row)))
                     }
                 }
@@ -35,39 +108,44 @@ FluContentPage{
         }
     }
 
-    function loadData(page,count){
-        var numbers = [100, 300, 500, 1000];
-        function getRandomAge() {
-            var randomIndex = Math.floor(Math.random() * numbers.length);
-            return numbers[randomIndex];
+
+    Component{
+        id:com_column_checbox
+        Item{
+            RowLayout{
+                anchors.centerIn: parent
+                FluText{
+                    text:"全选"
+                    Layout.alignment: Qt.AlignVCenter
+                }
+                FluCheckBox{
+                    checked: true === options.checked
+                    enableAnimation: false
+                    Layout.alignment: Qt.AlignVCenter
+                    clickListener: function(){
+                        var checked = !options.checked
+                        itemModel.display = table_view.customItem(com_column_checbox,{"checked":checked})
+                        for(var i =0;i< tableModel.rowCount ;i++){
+                            var rowData = tableModel.getRow(i)
+                            rowData.checkbox = table_view.customItem(com_checbox,{"checked":checked})
+                            tableModel.setRow(i,rowData)
+                        }
+                    }
+                }
+                Connections{
+                    target: root
+                    function onCheckBoxChanged(){
+                        for(var i =0;i< tableModel.rowCount ;i++){
+                            if(false === tableModel.getRow(i).checkbox.options.checked){
+                                itemModel.display = table_view.customItem(com_column_checbox,{"checked":false})
+                                return
+                            }
+                        }
+                        itemModel.display = table_view.customItem(com_column_checbox,{"checked":true})
+                    }
+                }
+            }
         }
-        var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"];
-        function getRandomName(){
-            var randomIndex = Math.floor(Math.random() * names.length);
-            return names[randomIndex];
-        }
-        var nicknames = ["复海大圣","混天大圣","移山大圣","通风大圣","驱神大圣","齐天大圣","平天大圣"]
-        function getRandomNickname(){
-            var randomIndex = Math.floor(Math.random() * nicknames.length);
-            return nicknames[randomIndex];
-        }
-        var addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
-        function getRandomAddresses(){
-            var randomIndex = Math.floor(Math.random() * addresses.length);
-            return addresses[randomIndex];
-        }
-        const dataSource = []
-        for(var i=0;i<count;i++){
-            dataSource.push({
-                                name: getRandomName(),
-                                age:getRandomAge(),
-                                address: getRandomAddresses(),
-                                nickname: getRandomNickname(),
-                                longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
-                                action:com_action
-                            })
-        }
-        table_view.dataSource = dataSource
     }
 
     Component{
@@ -94,6 +172,116 @@ FluContentPage{
         }
     }
 
+    Component{
+        id:com_avatar
+        Item{
+            FluClip{
+                anchors.centerIn: parent
+                width: 40
+                height: 40
+                radius: [20,20,20,20]
+                Image{
+                    anchors.fill: parent
+                    source: {
+                        if(options && options.avatar){
+                            return options.avatar
+                        }
+                        return ""
+                    }
+                    sourceSize: Qt.size(80,80)
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_column_update_title
+        Item{
+            FluText{
+                id:text_title
+                text: {
+                    if(options.title){
+                        return options.title
+                    }
+                    return ""
+                }
+                anchors.fill: parent
+                verticalAlignment: Qt.AlignVCenter
+                horizontalAlignment: Qt.AlignHCenter
+                elide: Text.ElideRight
+            }
+            MouseArea{
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    custom_update_dialog.showDialog(options.title,function(text){
+                        itemModel.display = table_view.customItem(com_column_update_title,{"title":text})
+                    })
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_column_sort_age
+        Item{
+            FluText{
+                text:"年龄"
+                anchors.centerIn: parent
+            }
+            ColumnLayout{
+                spacing: 0
+                anchors{
+                    right: parent.right
+                    verticalCenter: parent.verticalCenter
+                    rightMargin: 4
+                }
+                FluIconButton{
+                    Layout.preferredWidth: 20
+                    Layout.preferredHeight: 15
+                    iconSize: 12
+                    verticalPadding:0
+                    horizontalPadding:0
+                    iconSource: FluentIcons.ChevronUp
+                    iconColor: {
+                        if(1 === root.sortType){
+                            return FluTheme.primaryColor
+                        }
+                        return FluTheme.dark ?  Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
+                    }
+                    onClicked: {
+                        if(root.sortType === 1){
+                            root.sortType = 0
+                            return
+                        }
+                        root.sortType = 1
+                    }
+                }
+                FluIconButton{
+                    Layout.preferredWidth: 20
+                    Layout.preferredHeight: 15
+                    iconSize: 12
+                    verticalPadding:0
+                    horizontalPadding:0
+                    iconSource: FluentIcons.ChevronDown
+                    iconColor: {
+                        if(2 === root.sortType){
+                            return FluTheme.primaryColor
+                        }
+                        return FluTheme.dark ?  Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
+                    }
+                    onClicked: {
+                        if(root.sortType === 2){
+                            root.sortType = 0
+                            return
+                        }
+                        root.sortType = 2
+                    }
+                }
+            }
+        }
+    }
+
     FluTableView{
         id:table_view
         anchors{
@@ -105,12 +293,24 @@ FluContentPage{
         anchors.topMargin: 20
         columnSource:[
             {
-                title: '姓名',
-                dataIndex: 'name',
-                readOnly:true,
+                title: table_view.customItem(com_column_checbox,{checked:true}),
+                dataIndex: 'checkbox',
+                width:80,
+                minimumWidth:80,
+                maximumWidth:80
             },
             {
-                title: '年龄',
+                title: table_view.customItem(com_column_update_title,{title:'头像'}),
+                dataIndex: 'avatar',
+                width:100
+            },
+            {
+                title: '姓名',
+                dataIndex: 'name',
+                readOnly:true
+            },
+            {
+                title: table_view.customItem(com_column_sort_age,{sort:0}),
                 dataIndex: 'age',
                 editDelegate:com_combobox,
                 width:100,
@@ -166,6 +366,49 @@ FluContentPage{
             }
     }
 
+    function loadData(page,count){
+        var numbers = [100, 300, 500, 1000];
+        function getRandomAge() {
+            var randomIndex = Math.floor(Math.random() * numbers.length);
+            return numbers[randomIndex];
+        }
+        var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"];
+        function getRandomName(){
+            var randomIndex = Math.floor(Math.random() * names.length);
+            return names[randomIndex];
+        }
+        var nicknames = ["复海大圣","混天大圣","移山大圣","通风大圣","驱神大圣","齐天大圣","平天大圣"]
+        function getRandomNickname(){
+            var randomIndex = Math.floor(Math.random() * nicknames.length);
+            return nicknames[randomIndex];
+        }
+        var addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
+        function getRandomAddresses(){
+            var randomIndex = Math.floor(Math.random() * addresses.length);
+            return addresses[randomIndex];
+        }
 
+        var avatars = ["qrc:/example/res/svg/avatar_1.svg", "qrc:/example/res/svg/avatar_2.svg", "qrc:/example/res/svg/avatar_3.svg", "qrc:/example/res/svg/avatar_4.svg","qrc:/example/res/svg/avatar_5.svg","qrc:/example/res/svg/avatar_6.svg","qrc:/example/res/svg/avatar_7.svg","qrc:/example/res/svg/avatar_8.svg","qrc:/example/res/svg/avatar_9.svg","qrc:/example/res/svg/avatar_10.svg","qrc:/example/res/svg/avatar_11.svg","qrc:/example/res/svg/avatar_12.svg"];
+        function getAvatar(){
+            var randomIndex = Math.floor(Math.random() * avatars.length);
+            return avatars[randomIndex];
+        }
 
+        const dataSource = []
+        for(var i=0;i<count;i++){
+            dataSource.push({
+                                checkbox: table_view.customItem(com_checbox,{checked:true}),
+                                avatar:table_view.customItem(com_avatar,{avatar:getAvatar()}),
+                                name: getRandomName(),
+                                age:getRandomAge(),
+                                address: getRandomAddresses(),
+                                nickname: getRandomNickname(),
+                                longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
+                                action: table_view.customItem(com_action),
+                                minimumHeight:50
+                            })
+        }
+        root.dataSource = dataSource
+        table_view.dataSource = root.dataSource
+    }
 }

example/qml-Qt6/page/T_Text.qml

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

example/qml-Qt6/page/T_TextBox.qml

@@ -3,13 +3,20 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
+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 +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_Theme.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
@@ -32,7 +32,7 @@ FluScrollablePage{
                             anchors.centerIn: parent
                             iconSource: FluentIcons.AcceptMedium
                             iconSize: 15
-                            visible: modelData === FluTheme.primaryColor
+                            visible: modelData === FluTheme.themeColor
                             color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
                         }
                         MouseArea{
@@ -40,7 +40,7 @@ FluScrollablePage{
                             anchors.fill: parent
                             hoverEnabled: true
                             onClicked: {
-                                FluTheme.primaryColor = modelData
+                                FluTheme.themeColor = modelData
                             }
                         }
                     }
@@ -88,7 +88,7 @@ FluScrollablePage{
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
-        code:'FluTheme.primaryColor = FluColors.Orange
+        code:'FluTheme.themeColor = FluColors.Orange
 
 FluTheme.dark = true
 

example/qml-Qt6/page/T_TimePicker.qml

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

example/qml-Qt6/page/T_Timeline.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
@@ -84,7 +84,7 @@ FluScrollablePage{
             text:"找到一份Android外包开发岗位，开发了一个Android应用，满满成就感！前端、服务端、Flutter也都懂一丢丢，什么都会什么都不精通，钱途无望"
         }
         ListElement{
-            lable:"2020-06-01"
+            lable:"2021-06-01"
             text:"由于某个项目紧急，临时加入Qt项目组（就因为大学学了点C++），本来是想进去打个酱油，到后面竟然成开发主力，坑啊"
         }
         ListElement{
@@ -110,6 +110,7 @@ FluScrollablePage{
         FluTextBox{
             id:text_box
             text:"Technical testing 2015-09-01"
+            Layout.preferredWidth: 240
         }
         FluFilledButton{
             text:"Append"

example/qml-Qt6/page/T_ToggleSwitch.qml

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

example/qml-Qt6/page/T_Tooltip.qml

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

example/qml-Qt6/page/T_Tour.qml

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

example/qml-Qt6/page/T_TreeView.qml

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

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluContentPage{
 
@@ -29,6 +29,7 @@ FluContentPage{
                 FluTextBox{
                     id:text_box
                     text:"会磨刀的小猪"
+                    Layout.preferredWidth: 240
                 }
             }
 

example/qml-Qt6/viewmodel/SettingsViewModel.qml

@@ -0,0 +1,14 @@
+import QtQuick
+import FluentUI
+
+FluViewModel{
+
+    objectName: "SettingsViewModel"
+    scope: FluViewModelType.Application
+    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

@@ -2,14 +2,14 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
-CustomWindow {
+FluWindow {
 
     id:window
     title:"关于"
     width: 600
-    height: 600
+    height: 580
     fixSize: true
     launchMode: FluWindowType.SingleTask
 
@@ -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/CrashWindow.qml

@@ -0,0 +1,72 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI
+import Qt.labs.platform
+import "../component"
+
+FluWindow {
+
+    id:window
+    title:"友情提示"
+    width: 300
+    height: 400
+    fixSize: true
+    showMinimize: false
+    showStayTop: false
+
+    property string crashFilePath
+
+    onInitArgument:
+        (argument)=>{
+            crashFilePath = argument.crashFilePath
+        }
+
+    Image{
+        width: 540/2
+        height: 285/2
+        anchors{
+            horizontalCenter: parent.horizontalCenter
+            top: parent.top
+            topMargin: 40
+        }
+        source: "qrc:/example/res/image/ic_crash.png"
+    }
+
+    FluText{
+        id:text_info
+        anchors{
+            horizontalCenter: parent.horizontalCenter
+            top: parent.top
+            topMargin: 240
+        }
+        text:"发生意外错误\n给您带来的不便，我们深表歉意"
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    RowLayout{
+        anchors{
+            horizontalCenter: parent.horizontalCenter
+            bottom: parent.bottom
+            bottomMargin: 20
+        }
+        FluButton{
+            text:"日志上报"
+            onClicked: {
+                FluTools.showFileInFolder(crashFilePath)
+            }
+        }
+        Item{
+            width: 30
+            height: 1
+        }
+        FluFilledButton{
+            text:"重启程序"
+            onClicked: {
+                FluApp.exit(931)
+            }
+        }
+    }
+
+}

example/qml-Qt6/window/HotloadWindow.qml

@@ -3,9 +3,9 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
 import example
-import "qrc:///example/qml/component"
+import "../component"
 
-CustomWindow {
+FluWindow {
 
     id:window
     title:"热加载"
@@ -25,7 +25,7 @@ CustomWindow {
         FluRemoteLoader{
             id:loader
             anchors.fill: parent
-            statusMode: FluStatusViewType.Success
+            statusMode: FluStatusLayoutType.Success
             lazy: true
             errorItem: Item{
                 FluText{
@@ -43,7 +43,7 @@ CustomWindow {
             text:"拖入qml文件"
             font.pixelSize: 26
             anchors.centerIn: parent
-            visible: !loader.itemLodaer().item && loader.statusMode === FluStatusViewType.Success
+            visible: !loader.itemLodaer().item && loader.statusMode === FluStatusLayoutType.Success
         }
         Rectangle{
             radius: 4
@@ -60,11 +60,11 @@ CustomWindow {
                         event.accepted = false
                         return
                     }
-                    if (event.urls.length !== 1) {
+                    var url = getUrlByEvent(event)
+                    if(url === ""){
                         event.accepted = false
                         return
                     }
-                    var url = event.urls[0].toString()
                     var fileExtension = url.substring(url.lastIndexOf(".") + 1)
                     if (fileExtension !== "qml") {
                         event.accepted = false
@@ -74,12 +74,24 @@ CustomWindow {
                 }
             onDropped:
                 (event)=>{
-                    var path = event.urls[0].toString()
-                    loader.source = path
-                    watcher.path = path
-                    loader.reload()
+                    var url = getUrlByEvent(event)
+                    if(url !== ""){
+                        loader.source = url
+                        watcher.path = url
+                        loader.reload()
+                    }
                 }
         }
     }
 
+    function getUrlByEvent(event){
+        var url = ""
+        if (event.urls.length === 0) {
+            url = "file:///"+event.getDataAsString("text/plain")
+        }else{
+            url = event.urls[0].toString()
+        }
+        return url
+    }
+
 }

example/qml-Qt6/window/LoginWindow.qml

@@ -2,9 +2,9 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
-CustomWindow {
+FluWindow {
 
     id:window
     title:"登录"

example/qml-Qt6/window/MainWindow.qml

@@ -5,29 +5,60 @@ import QtQuick.Layouts
 import Qt.labs.platform
 import FluentUI
 import example
-import "qrc:///example/qml/component"
-import "qrc:///example/qml/global"
+import "../component"
+import "../global"
+import "../viewmodel"
 
-CustomWindow {
+FluWindow {
 
     id:window
     title: "FluentUI"
-    width: 1000
-    height: 640
-    closeDestory:false
+    width: 960
+    height: 600
     minimumWidth: 520
     minimumHeight: 200
-    appBarVisible: false
     launchMode: FluWindowType.SingleTask
+    fitsAppBarWindows: true
+    appBar: FluAppBar {
+        height: 30
+        darkText: Lang.dark_mode
+        showDark: true
+        darkClickListener:(button)=>handleDarkChanged(button)
+        closeClickListener: ()=>{dialog_close.open()}
+        z:7
+    }
 
-    closeFunc:function(event){
-        dialog_close.open()
-        event.accepted = false
+    SettingsViewModel{
+        id:viewmodel_settings
+    }
+
+    FluEvent{
+        id:event_checkupdate
+        name: "checkUpdate"
+        onTriggered: {
+            checkUpdate(false)
+        }
+    }
+
+    onFirstVisible: {
+        timer_tour_delay.restart()
+    }
+
+    Timer{
+        id:timer_tour_delay
+        interval: 200
+        onTriggered: {
+            tour.open()
+        }
     }
 
     Component.onCompleted: {
-        FluTools.setQuitOnLastWindowClosed(false)
-        tour.open()
+        checkUpdate(true)
+        FluEventBus.registerEvent(event_checkupdate)
+    }
+
+    Component.onDestruction: {
+        FluEventBus.unRegisterEvent(event_checkupdate)
     }
 
     SystemTrayIcon {
@@ -39,8 +70,7 @@ CustomWindow {
             MenuItem {
                 text: "退出"
                 onTriggered: {
-                    window.deleteWindow()
-                    FluApp.closeApp()
+                    FluApp.exit()
                 }
             }
         }
@@ -54,21 +84,43 @@ CustomWindow {
             }
     }
 
+    Timer{
+        id:timer_window_hide_delay
+        interval: 150
+        onTriggered: {
+            window.hide()
+        }
+    }
+
     FluContentDialog{
         id:dialog_close
         title:"退出"
         message:"确定要退出程序吗？"
         negativeText:"最小化"
         buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.NeutralButton | FluContentDialogType.PositiveButton
-        onNegativeClicked:{
-            window.hide()
+        onNegativeClicked: {
             system_tray.showMessage("友情提示","FluentUI已隐藏至托盘,点击托盘可再次激活窗口");
+            timer_window_hide_delay.restart()
         }
         positiveText:"退出"
         neutralText:"取消"
         onPositiveClicked:{
-            window.deleteWindow()
-            FluApp.closeApp()
+            FluApp.exit(0)
+        }
+    }
+
+    Component{
+        id:nav_item_right_menu
+        FluMenu{
+            id:menu
+            width: 130
+            FluMenuItem{
+                text: "在独立窗口打开"
+                visible: true
+                onClicked: {
+                    FluApp.navigate("/pageWindow",{title:modelData.title,url:modelData.url})
+                }
+            }
         }
     }
 
@@ -95,18 +147,8 @@ CustomWindow {
         back: Item{
             anchors.fill: flipable
             visible: flipable.flipAngle !== 0
-            FluAppBar {
-                anchors {
-                    top: parent.top
-                    left: parent.left
-                    right: parent.right
-                }
-                darkText: lang.dark_mode
-                showDark: true
-                z:7
-                darkClickListener:(button)=>handleDarkChanged(button)
-            }
             Row{
+                id:layout_back_buttons
                 z:8
                 anchors{
                     top: parent.top
@@ -133,31 +175,17 @@ CustomWindow {
                     }
                 }
             }
-
             FluRemoteLoader{
                 id:loader
                 lazy: true
                 anchors.fill: parent
-                //                source: "http://localhost:9000/RemoteComponent.qml"
-                source: "https://zhu-zichu.gitee.io/RemoteComponent.qml"
+                source: "https://zhu-zichu.gitee.io/Qt_168_LieflatPage.qml"
             }
         }
         front: Item{
             id:page_front
             visible: flipable.flipAngle !== 180
             anchors.fill: flipable
-            FluAppBar {
-                id:app_bar_front
-                anchors {
-                    top: parent.top
-                    left: parent.left
-                    right: parent.right
-                }
-                darkText: lang.dark_mode
-                showDark: true
-                darkClickListener:(button)=>handleDarkChanged(button)
-                z:7
-            }
             FluNavigationView{
                 property int clickCount: 0
                 id:nav_view
@@ -165,13 +193,18 @@ CustomWindow {
                 height: parent.height
                 z:999
                 //Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式
-                pageMode: FluNavigationViewType.Stack
-                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存（推荐）
-                //                pageMode: FluNavigationViewType.NoStack
+                //                pageMode: FluNavigationViewType.Stack
+                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存，可以配合FluViewModel保存页面数据（推荐）
+                pageMode: FluNavigationViewType.NoStack
                 items: ItemsOriginal
                 footerItems:ItemsFooter
-                topPadding:FluTools.isMacos() ? 20 : 0
-                displayMode:MainEvent.displayMode
+                topPadding:{
+                    if(window.useSystemAppBar){
+                        return 0
+                    }
+                    return FluTools.isMacos() ? 20 : 0
+                }
+                displayMode:viewmodel_settings.displayMode
                 logo: "qrc:/example/res/image/favicon.ico"
                 title:"FluentUI"
                 onLogoClicked:{
@@ -184,11 +217,9 @@ CustomWindow {
                     }
                 }
                 autoSuggestBox:FluAutoSuggestBox{
-                    width: 280
-                    anchors.centerIn: parent
                     iconSource: FluentIcons.Search
                     items: ItemsOriginal.getSearchData()
-                    placeholderText: lang.search
+                    placeholderText: Lang.search
                     onItemClicked:
                         (data)=>{
                             ItemsOriginal.startPageByItem(data)
@@ -196,7 +227,9 @@ CustomWindow {
                 }
                 Component.onCompleted: {
                     ItemsOriginal.navigationView = nav_view
+                    ItemsOriginal.paneItemMenu = nav_item_right_menu
                     ItemsFooter.navigationView = nav_view
+                    ItemsFooter.paneItemMenu = nav_item_right_menu
                     setCurrentIndex(0)
                 }
             }
@@ -207,7 +240,7 @@ CustomWindow {
         id:com_reveal
         CircularReveal{
             id:reveal
-            target:window.contentItem
+            target:window.layoutContainer()
             anchors.fill: parent
             onAnimationFinished:{
                 //动画结束后释放资源
@@ -219,7 +252,7 @@ CustomWindow {
         }
     }
 
-    Loader{
+    FluLoader{
         id:loader_reveal
         anchors.fill: parent
     }
@@ -229,11 +262,14 @@ CustomWindow {
     }
 
     function handleDarkChanged(button){
-        if(FluTools.isMacos() || !FluTheme.enableAnimation){
+        if(!FluTheme.enableAnimation || window.fitsAppBarWindows === false){
             changeDark()
         }else{
+            if(loader_reveal.sourceComponent){
+                return
+            }
             loader_reveal.sourceComponent = com_reveal
-            var target = window.contentItem
+            var target = window.layoutContainer()
             var pos = button.mapToItem(target,0,0)
             var mouseX = pos.x
             var mouseY = pos.y
@@ -271,10 +307,83 @@ CustomWindow {
 
     FluTour{
         id:tour
-        steps:[
-            {title:"夜间模式",description: "这里可以切换夜间模式.",target:()=>app_bar_front.darkButton()},
-            {title:"隐藏彩蛋",description: "多点几下试试！！",target:()=>nav_view.logoButton()}
-        ]
+        steps:{
+            var data = []
+            if(!window.useSystemAppBar){
+                data.push({title:"夜间模式",description: "这里可以切换夜间模式.",target:()=>appBar.darkButton()})
+            }
+            data.push({title:"隐藏彩蛋",description: "多点几下试试！！",target:()=>nav_view.logoButton()})
+            return data
+        }
+    }
+
+    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")
+        }
+    }
+
+    FluNetworkCallable{
+        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
+        FluNetwork.get("https://api.github.com/repos/zhuzichu520/FluentUI/releases/latest")
+        .go(callable)
     }
 
 }

example/qml-Qt6/window/PageWindow.qml

@@ -0,0 +1,25 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI
+import example
+import "../component"
+
+FluWindow {
+
+    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})
+        }
+    FluLoader{
+        id: loader
+        anchors.fill: parent
+    }
+}

example/qml-Qt6/window/SingleInstanceWindow.qml

@@ -2,9 +2,10 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
-import "qrc:///example/qml/component"
 
-CustomWindow {
+import "../component"
+
+FluWindow {
 
     id:window
     title:"SingleInstance"

example/qml-Qt6/window/SingleTaskWindow.qml

@@ -2,9 +2,9 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
-CustomWindow {
+FluWindow {
 
     id:window
     title:"SingleTask"

example/qml-Qt6/window/StandardWindow.qml

@@ -2,9 +2,9 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
-CustomWindow {
+FluWindow {
 
     id:window
     title:"Standard"