Merge branch '1.7.6-dev'

Make static lib available (#509)

.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/Version.h.in

@@ -1,5 +1,3 @@
-// 应用程序版本信息
-// 请勿修改此头文件，因为这个文件是自动生成的
 #ifndef VERSION_H
 #define VERSION_H
 

.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
@@ -71,7 +74,7 @@ jobs:
           # make sure Qt plugin finds QML sources so it can deploy the imported files
           export QML_SOURCES_PATHS=./
           # 拷贝依赖
-          linuxdeploy-x86_64.AppImage --plugin=qt --output=appimage --create-desktop-file --icon-file=${targetName}.svg --executable=bin/release/${targetName} --appdir bin/release/
+          linuxdeploy-x86_64.AppImage --plugin=qt --output=appimage --create-desktop-file --icon-file=${targetName}.svg --executable=bin/Release/${targetName} --appdir bin/release/
           mv ${{ env.targetName }}-*.AppImage ${{ env.targetName }}.AppImage
         
       - uses: actions/upload-artifact@v2
@@ -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: ./package/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: ./package/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: ./package/InstallerScript.iss
+          
+      - name: uploadRelease
+        if: startsWith(github.event.ref, 'refs/tags/')
+        uses: svenstaro/upload-release-action@v2
+        with:
+          repo_token: ${{ secrets.GITHUB_TOKEN }}
+          file: ./package/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: ./package/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: ./package/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

@@ -36,5 +36,8 @@ bin
 build
 cmake-build-*
 .idea
+package
+example/Version.h
+dist
 
-example/Version.h
+*.qm

.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,45 +1,36 @@
 cmake_minimum_required(VERSION 3.20)
 
-project(FluentUI VERSION 0.1 LANGUAGES CXX)
+project(FluentUI VERSION 1.0)
 
-set(FLUENTUI_DIRECTORY ${CMAKE_CURRENT_LIST_DIR})
-list(APPEND CMAKE_MODULE_PATH ${FLUENTUI_DIRECTORY}/.cmake/)
+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 ()
+
+list(APPEND CMAKE_MODULE_PATH ${CMAKE_CURRENT_LIST_DIR}/.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)
 find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Core)
 
-set(QT_SDK_DIR "${Qt${QT_VERSION_MAJOR}_DIR}")
-cmake_path(GET QT_SDK_DIR PARENT_PATH QT_SDK_DIR)
-cmake_path(GET QT_SDK_DIR PARENT_PATH QT_SDK_DIR)
-cmake_path(GET QT_SDK_DIR PARENT_PATH QT_SDK_DIR)
-
-#设置QML插件输出目录，可以通过外部设置，如果外部没有设置就默认到<QT_SDK_DIR_PATH>\qml\FluentUI目录下
-set(FLUENTUI_QML_PLUGIN_DIRECTORY "" CACHE PATH "Path to FluentUI plugin")
-if(NOT FLUENTUI_QML_PLUGIN_DIRECTORY)
-    set(FLUENTUI_QML_PLUGIN_DIRECTORY ${QT_SDK_DIR}/qml/FluentUI)
-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

@@ -34,6 +34,38 @@ providing powerful tools and support for this project.
 For more information about the Qt project,
 please visit the official Qt website (https://www.qt.io/).
 
+
+************************************************************************************
+QHotkey
+
+Copyright (c) 2016, Felix Barz
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of QHotkey nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
 ************************************************************************************
 framelesshelper
 
@@ -262,4 +294,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,169 +1,175 @@
 cmake_minimum_required(VERSION 3.20)
 
-project(example VERSION 0.1 LANGUAGES CXX)
+project(example VERSION 1.0)
 
 #配置通用编译
+set(CMAKE_CXX_STANDARD 17)
+set(CMAKE_INCLUDE_CURRENT_DIR ON)
+set(CMAKE_AUTOMOC ON)
+set(CMAKE_AUTORCC ON)
 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)
 
 #判断FluentUI库类型
-if(FLUENTUI_BUILD_STATIC_LIB)
+if (FLUENTUI_BUILD_STATIC_LIB)
     add_definitions(-DFLUENTUI_BUILD_STATIC_LIB)
-endif()
+endif ()
 
 #设置可执行文件输出目录
-if(CMAKE_BUILD_TYPE STREQUAL "Debug")
-    set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/debug)
-else()
-    set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/release)
-endif()
+set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/${CMAKE_BUILD_TYPE})
 
-#获取文件路径分隔符（解决执行命令的时候有些平台会报错）
-file(TO_CMAKE_PATH "/" PATH_SEPARATOR)
+if (APPLE)
+    set(APPLICATION_DIR_PATH ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/${PROJECT_NAME}.app/Contents/MacOS)
+else ()
+    set(APPLICATION_DIR_PATH ${CMAKE_RUNTIME_OUTPUT_DIRECTORY})
+endif ()
 
+#导入Qt相关依赖包
 find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Quick Svg Network)
 find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Quick Svg Network)
 
-if(QT_VERSION VERSION_GREATER_EQUAL "6.3")
-    qt_standard_project_setup()
-else()
-    set(CMAKE_AUTOMOC ON)
-    set(CMAKE_AUTORCC ON)
-    set(CMAKE_AUTOUIC ON)
-endif()
+#添加国际化脚本
+find_program(QT_LUPDATE NAMES lupdate lupdate-qt6)
+find_program(QT_LRELEASE NAMES lrelease lrelease-qt6)
+file(GLOB TS_FILE_PATHS ${CMAKE_CURRENT_LIST_DIR}/ *.ts)
+add_custom_target(Script-UpdateTranslations
+        COMMAND ${QT_LUPDATE} ${CMAKE_CURRENT_LIST_DIR} -ts ${PROJECT_NAME}_en_US.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
+        COMMAND ${QT_LUPDATE} ${CMAKE_CURRENT_LIST_DIR} -ts ${PROJECT_NAME}_zh_CN.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
+        COMMAND ${QT_LRELEASE} ${PROJECT_NAME}_en_US.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
+        COMMAND ${QT_LRELEASE} ${PROJECT_NAME}_zh_CN.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
+        COMMAND ${CMAKE_COMMAND} -E make_directory ${APPLICATION_DIR_PATH}/i18n
+        COMMAND ${CMAKE_COMMAND} -E copy ${PROJECT_NAME}_en_US.qm ${PROJECT_NAME}_zh_CN.qm ${APPLICATION_DIR_PATH}/i18n
+        SOURCES ${TS_FILE_PATHS}
+)
 
 ##生成版本信息头文件
-set(HEADER_FILE_VERSION_PATH ${FLUENTUI_DIRECTORY}/example/Version.h)
+set(HEADER_FILE_VERSION_PATH ${CMAKE_SOURCE_DIR}/${PROJECT_NAME}/Version.h)
 configure_file(
-    ${FLUENTUI_DIRECTORY}/.cmake/Version.h.in
-    ${HEADER_FILE_VERSION_PATH}
+        ${CMAKE_SOURCE_DIR}/.cmake/Version.h.in
+        ${HEADER_FILE_VERSION_PATH}
 )
 
 #遍历所有Cpp文件
 file(GLOB_RECURSE CPP_FILES *.cpp *.h)
-foreach(filepath ${CPP_FILES})
+foreach (filepath ${CPP_FILES})
     string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
     list(APPEND sources_files ${filename})
-endforeach(filepath)
+endforeach (filepath)
 
-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})
-            set_source_files_properties(${filename} PROPERTIES QT_RESOURCE_ALIAS ${filealias})
-            list(APPEND qml_files ${filename})
-        endif()
-    endforeach(filepath)
-
-    #遍历所有资源文件
-    file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp)
-    foreach(filepath ${RES_PATHS})
-        string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
-        list(APPEND resource_files ${filename})
-    endforeach(filepath)
-endif()
-
-#如果是Windows平台，则生成rc文件
-set(EXAMPLE_VERSION_RC_PATH "")
-if(WIN32)
-    set(EXAMPLE_VERSION_RC_PATH ${CMAKE_BINARY_DIR}/version_${PROJECT_NAME}.rc)
-    configure_file(
-        ${FLUENTUI_DIRECTORY}/.cmake/version_exe.rc.in
-        ${EXAMPLE_VERSION_RC_PATH}
-    )
-endif()
-
-#添加可执行文件
 if (WIN32)
-    add_executable(example
-        ${sources_files}
-        ${EXAMPLE_VERSION_RC_PATH}
+    list(APPEND sources_files "src/app_dmp.h")
+endif ()
+
+#如果是Windows平台，则生成rc文件，还有inno setup脚本文件
+set(EXAMPLE_VERSION_RC_PATH "")
+if (WIN32)
+    set(EXAMPLE_VERSION_RC_PATH ${CMAKE_CURRENT_BINARY_DIR}/version_${PROJECT_NAME}.rc)
+    configure_file(
+            ${CMAKE_SOURCE_DIR}/.cmake/version_exe.rc.in
+            ${EXAMPLE_VERSION_RC_PATH}
     )
-else ()
-    add_executable(example
-        ${sources_files}
+    configure_file(
+            ${CMAKE_SOURCE_DIR}/.cmake/InstallerScript.iss.in
+            ${CMAKE_SOURCE_DIR}/package/InstallerScript.iss
     )
 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)
-    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}
-        ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}
-    )
-endif()
+#加快qrc编译
+qt_add_big_resources(QRC_RESOURCES ${PROJECT_NAME}.qrc)
+list(APPEND QRC_RESOURCES ${PROJECT_NAME}.qrc)
+set_property(SOURCE ${PROJECT_NAME}.qrc PROPERTY SKIP_AUTORCC ON)
+list(APPEND sources_files ${QRC_RESOURCES})
 
-if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
-    #添加qml模块
-    qt_add_qml_module(example
-        URI "example"
-        VERSION 1.0
-        QML_FILES ${qml_files}
-        RESOURCES ${resource_files}
-        RESOURCE_PREFIX "/"
+#添加可执行文件
+if (WIN32)
+    list(APPEND sources_files ${EXAMPLE_VERSION_RC_PATH})
+endif ()
+if (${QT_VERSION_MAJOR} GREATER_EQUAL 6)
+    qt_add_executable(${PROJECT_NAME}
+            MANUAL_FINALIZATION
+            ${sources_files}
     )
-else()
-    target_include_directories(example PRIVATE
-        ${CMAKE_CURRENT_SOURCE_DIR}
+else ()
+    add_executable(${PROJECT_NAME}
+            ${sources_files}
     )
-    target_sources(example PRIVATE resource.qrc)
-endif()
+endif ()
+add_dependencies(${PROJECT_NAME} Script-UpdateTranslations)
+
+#复制程序运行所需要的动态库
+if (WIN32)
+    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 ()
+    file(COPY ${3RDPARTY_DLL_DIR} DESTINATION ${CMAKE_RUNTIME_OUTPUT_DIRECTORY})
+endif ()
+
+#复制FluentUI源码到运行目录下，用于脚手架生成
+file(MAKE_DIRECTORY ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/source/)
+file(COPY ${CMAKE_SOURCE_DIR}/src/ DESTINATION ${APPLICATION_DIR_PATH}/source/)
 
 #导入component头文件,不然通过QML_NAMED_ELEMENT生成的c++类会找不到头文件报错
-target_include_directories(example PRIVATE
-    ${CMAKE_CURRENT_SOURCE_DIR}/src/component
+target_include_directories(${PROJECT_NAME} PRIVATE
+        ${CMAKE_CURRENT_SOURCE_DIR}/src/component
 )
 
+#如果是静态库则需要手动注册插件，导入FluentUI.h头文件
+if (FLUENTUI_BUILD_STATIC_LIB)
+    target_include_directories(${PROJECT_NAME} PRIVATE
+            ${CMAKE_SOURCE_DIR}/src
+    )
+endif ()
+
 #设置属性
-set_target_properties(example PROPERTIES
-    MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com
-    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
-    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
-    MACOSX_BUNDLE TRUE
-    WIN32_EXECUTABLE TRUE
+set_target_properties(${PROJECT_NAME} PROPERTIES
+        MACOSX_BUNDLE_GUI_IDENTIFIER my.${PROJECT_NAME}.com
+        MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
+        MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
+        MACOSX_BUNDLE TRUE
+        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
+#Release也支持日志打印代码位置
+target_compile_definitions(${PROJECT_NAME}
+        PRIVATE
+        QT_MESSAGELOGCONTEXT
+)
+
+#目标文件链接库
+target_link_libraries(${PROJECT_NAME} PRIVATE
         Qt${QT_VERSION_MAJOR}::Quick
         Qt${QT_VERSION_MAJOR}::Svg
         Qt${QT_VERSION_MAJOR}::Network
         fluentuiplugin
-        FramelessHelper::Core
-        FramelessHelper::Quick
-    )
-endif()
-
-#安装
-install(TARGETS example
-    BUNDLE DESTINATION .
-    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
-    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
 )
+
+#添加部署脚本
+if (CMAKE_BUILD_TYPE MATCHES "Release")
+    if (APPLE)
+        find_program(QT_DEPLOY_QT NAMES macdeployqt)
+        add_custom_target(Script-DeployRelease
+                COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_SOURCE_DIR}/dist
+                COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} ${CMAKE_SOURCE_DIR}/dist
+                COMMAND ${QT_DEPLOY_QT} ${CMAKE_SOURCE_DIR}/dist/${PROJECT_NAME}.app -qmldir=${CMAKE_CURRENT_LIST_DIR}
+                COMMENT "MacOs Deploying Qt Dependencies After Build........."
+                SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
+                WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
+        )
+    endif ()
+    if (WIN32)
+        find_program(QT_DEPLOY_QT NAMES windeployqt)
+        add_custom_target(Script-DeployRelease
+                COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_SOURCE_DIR}/dist
+                COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} ${CMAKE_SOURCE_DIR}/dist
+                COMMAND ${QT_DEPLOY_QT} --qmldir=${CMAKE_CURRENT_LIST_DIR} --plugindir ${CMAKE_SOURCE_DIR}/dist/plugins --no-translations --compiler-runtime ${CMAKE_SOURCE_DIR}/dist/${PROJECT_NAME}.exe
+                COMMENT "Windows Deploying Qt Dependencies After Build........."
+                SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
+                WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
+        )
+    endif ()
+endif ()

example/README.md

@@ -0,0 +1,18 @@
+# FluentUI 脚手架开发说明
+
+## 代码说明
+
+文件编码格式请用utf-8不带bom，代码中最好不要含有中文（包括注释），中文可能会改变文件格式导致编译失败，还会出现乱码，显示中文请用国际化，c++中用tr函数，qml中用qsTr函数
+
+### 脚本说明
+
+1. **Script-UpdateTranslations**
+
+   用于更新ts与qm文件，当你的代码添加了tr或者qsTr函数后，执行这个脚本会更新ts文件，然后编写翻译后，再执行这个脚本，qm文件会更新生效
+
+2. **Script-DeployRelease**
+
+   执行Qt的windeployqt或macdeployqt命令，这个脚本只在windows与macos才有，linux不支持
+
+
+

example/example.qrc

@@ -123,20 +123,16 @@
         <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>
         <file>qml/page/T_Badge.qml</file>
         <file>qml/page/T_BreadcrumbBar.qml</file>
         <file>qml/page/T_Buttons.qml</file>
         <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 +141,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 +153,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>
@@ -182,9 +176,40 @@
         <file>qml/window/SingleInstanceWindow.qml</file>
         <file>qml/window/SingleTaskWindow.qml</file>
         <file>qml/window/StandardWindow.qml</file>
-        <file>res/image/bg_scenic.png</file>
         <file>res/image/image_1.jpg</file>
         <file>qml/window/PageWindow.qml</file>
-        <file>qml/page/T_StaggeredView.qml</file>
+        <file>qml/page/T_StaggeredLayout.qml</file>
+        <file>qml/page/T_Clip.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>
+        <file>res/template/CMakeLists.txt.in</file>
+        <file>res/template/src/App.qml.in</file>
+        <file>res/template/src/CMakeLists.txt.in</file>
+        <file>res/template/src/en_US.ts.in</file>
+        <file>res/template/src/logo.ico.in</file>
+        <file>res/template/src/main.cpp.in</file>
+        <file>res/template/src/main.qml.in</file>
+        <file>res/template/src/qml.qrc.in</file>
+        <file>res/template/src/zh_CN.ts.in</file>
+        <file>res/template/src/README.md.in</file>
+        <file>qml/global/GlobalModel.qml</file>
+        <file>qml/page/T_Sheet.qml</file>
+        <file>qml/page/T_GroupBox.qml</file>
+        <file>res/image/bg_scenic.jpg</file>
+        <file>qml/window/FluentInitializrWindow.qml</file>
+        <file>qml/page/T_OpenGL.qml</file>
+        <file>qml/page/T_Icons.qml</file>
+        <file>qml/window/HotkeyWindow.qml</file>
     </qresource>
+    <qresource prefix="/"/>
 </RCC>

example/qml-Qt6/App.qml

@@ -1,45 +0,0 @@
-import QtQuick
-import QtQuick.Window
-import QtQuick.Controls
-import QtQuick.Layouts
-import FluentUI
-
-Window {
-    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
-        }
-    }
-
-    Component.onCompleted: {
-        FluApp.init(app)
-        FluTheme.darkMode = FluThemeType.System
-        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",
-            "/singleTaskWindow":"qrc:/example/qml/window/SingleTaskWindow.qml",
-            "/standardWindow":"qrc:/example/qml/window/StandardWindow.qml",
-            "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml",
-            "/pageWindow":"qrc:/example/qml/window/PageWindow.qml"
-        }
-        FluApp.initialRoute = "/"
-        FluApp.httpInterceptor = interceptor
-        FluApp.run()
-    }
-}

example/qml-Qt6/component/CodeExpander.qml

@@ -1,147 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-
-FluExpander{
-
-    id:control
-    property string code: ""
-    headerText: "Source"
-    contentHeight:content.height
-    focus: false
-
-    FluMultilineTextBox{
-        id:content
-        width:parent.width
-        activeFocusOnTab: false
-        activeFocusOnPress: false
-        readOnly: true
-        text:highlightQmlCode(code)
-        textFormat: FluMultilineTextBox.RichText
-        KeyNavigation.priority: KeyNavigation.BeforeItem
-        background:Rectangle{
-            radius: 4
-            color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
-            border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
-            border.width: 1
-        }
-    }
-
-    FluIconButton{
-        iconSource:FluentIcons.Copy
-        anchors{
-            right: parent.right
-            top: parent.top
-            rightMargin: 5
-            topMargin: 5
-        }
-        onClicked:{
-            FluTools.clipText(FluTools.html2PlantText(content.text))
-            showSuccess("复制成功")
-        }
-    }
-
-    function htmlEncode(e){
-        var i,s;
-        for(i in s={
-                "&":/&/g,//""//":/"/g,"'":/'/g,
-                "<":/</g,">":/>/g,"<br/>":/\n/g,
-                " ":/ /g,"  ":/\t/g
-            })e=e.replace(s[i],i);
-        return e;
-    }
-
-    function highlightQmlCode(code) {
-        // 定义 QML 关键字列表
-        var qmlKeywords = [
-                    "FluTextButton",
-                    "FluAppBar",
-                    "FluAutoSuggestBox",
-                    "FluBadge",
-                    "FluButton",
-                    "FluCalendarPicker",
-                    "FluCalendarView",
-                    "FluCarousel",
-                    "FluCheckBox",
-                    "FluColorPicker",
-                    "FluColorView",
-                    "FluComboBox",
-                    "FluContentDialog",
-                    "FluContentPage",
-                    "FluDatePicker",
-                    "FluDivider",
-                    "FluDropDownButton",
-                    "FluExpander",
-                    "FluFilledButton",
-                    "FluFlipView",
-                    "FluFocusRectangle",
-                    "FluIcon",
-                    "FluIconButton",
-                    "FluInfoBar",
-                    "FluItem",
-                    "FluMediaPlayer",
-                    "FluMenu",
-                    "FluMenuItem",
-                    "FluMultilineTextBox",
-                    "FluNavigationView",
-                    "FluObject",
-                    "FluPaneItem",
-                    "FluPaneItemExpander",
-                    "FluPaneItemHeader",
-                    "FluPaneItemSeparator",
-                    "FluPivot",
-                    "FluPivotItem",
-                    "FluProgressBar",
-                    "FluProgressRing",
-                    "FluRadioButton",
-                    "FluRectangle",
-                    "FluScrollablePage",
-                    "FluScrollBar",
-                    "FluShadow",
-                    "FluSlider",
-                    "FluTabView",
-                    "FluText",
-                    "FluTextArea",
-                    "FluTextBox",
-                    "FluTextBoxBackground",
-                    "FluTextBoxMenu",
-                    "FluTextButton",
-                    "FluTextFiled",
-                    "FluTimePicker",
-                    "FluToggleSwitch",
-                    "FluTooltip",
-                    "FluTreeView",
-                    "FluWindow",
-                    "FluWindowResize",
-                    "FluToggleButton",
-                    "FluTableView",
-                    "FluColors",
-                    "FluTheme",
-                    "FluStatusView",
-                    "FluRatingControl",
-                    "FluPasswordBox",
-                    "FluBreadcrumbBar",
-                    "FluCopyableText",
-                    "FluAcrylic",
-                    "FluRemoteLoader",
-                    "FluMenuBar",
-                    "FluPagination",
-                    "FluRadioButtons",
-                    "FluImage",
-                    "FluSpinBox",
-                    "FluHttp",
-                    "FluWatermark",
-                    "FluTour",
-                    "FluQRCode",
-                    "FluTimeline",
-                    "FluChart",
-                    "FluRangeSlider",
-                    "FluStaggeredView"
-                ];
-        code = code.replace(/\n/g, "<br>");
-        code = code.replace(/ /g, "&nbsp;");
-        return code.replace(RegExp("\\b(" + qmlKeywords.join("|") + ")\\b", "g"), "<span style='color: #c23a80'>$1</span>");
-    }
-}

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

@@ -1,33 +0,0 @@
-pragma Singleton
-
-import QtQuick
-import FluentUI
-
-FluObject{
-
-    property var navigationView
-
-    id:footer_items
-
-    FluPaneItemSeparator{}
-
-    FluPaneItem{
-        title:lang.about
-        icon:FluentIcons.Contact
-        onDropped: { FluApp.navigate("/about") }
-        onTapListener:function(){
-            FluApp.navigate("/about")
-        }
-    }
-
-    FluPaneItem{
-        title:lang.settings
-        icon:FluentIcons.Settings
-        url:"qrc:/example/qml/page/T_Settings.qml"
-        onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-        onTap:{
-            navigationView.push(url)
-        }
-    }
-
-}

example/qml-Qt6/global/ItemsOriginal.qml

@@ -1,497 +0,0 @@
-pragma Singleton
-
-import QtQuick
-import FluentUI
-
-FluObject{
-
-    property var navigationView
-
-    function rename(item, newName){
-        if(newName && newName.trim().length>0){
-            item.title = newName;
-        }
-    }
-
-    FluPaneItem{
-        id:item_home
-        count: 9
-        title:lang.home
-        infoBadge:FluBadge{
-            count: item_home.count
-        }
-        icon:FluentIcons.Home
-        url:"qrc:/example/qml/page/T_Home.qml"
-        onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-        onTap:{
-            if(navigationView.getCurrentUrl()){
-                item_home.count = 0
-            }
-            navigationView.push(url)
-        }
-        editDelegate: FluTextBox{
-            text:item_home.title
-        }
-        menuDelegate: FluMenu{
-            id:nav_item_right_menu
-            width: 120
-            FluMenuItem{
-                text: "重命名"
-                visible: true
-                onClicked: {
-                    item_home.showEdit = true
-                }
-            }
-        }
-    }
-
-    FluPaneItemExpander{
-        id:item_expander_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
-            infoBadge:FluBadge{
-                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."
-            url:"qrc:/example/qml/page/T_Buttons.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{
-                item_buttons.count = 0
-                navigationView.push(url)
-            }
-        }
-        FluPaneItem{
-            id:item_text
-            title:"Text"
-            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"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"Image"
-            url:"qrc:/example/qml/page/T_Image.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"Slider"
-            image:"qrc:/example/res/image/control/Slider.png"
-            recentlyUpdated:true
-            desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
-            url:"qrc:/example/qml/page/T_Slider.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"CheckBox"
-            image:"qrc:/example/res/image/control/Checkbox.png"
-            recentlyUpdated:true
-            desc:"A control that a user can select or clear."
-            url:"qrc:/example/qml/page/T_CheckBox.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"RadioButton"
-            url:"qrc:/example/qml/page/T_RadioButton.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"ToggleSwitch"
-            url:"qrc:/example/qml/page/T_ToggleSwitch.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-    }
-
-    FluPaneItemExpander{
-        title:lang.form
-        icon:FluentIcons.GridView
-        FluPaneItem{
-            title:"TextBox"
-            url:"qrc:/example/qml/page/T_TextBox.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"TimePicker"
-            url:"qrc:/example/qml/page/T_TimePicker.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"DatePicker"
-            url:"qrc:/example/qml/page/T_DatePicker.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"CalendarPicker"
-            url:"qrc:/example/qml/page/T_CalendarPicker.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"ColorPicker"
-            url:"qrc:/example/qml/page/T_ColorPicker.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-    }
-
-    FluPaneItemExpander{
-        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."
-            url:"qrc:/example/qml/page/T_InfoBar.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"Progress"
-            url:"qrc:/example/qml/page/T_Progress.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"RatingControl"
-            url:"qrc:/example/qml/page/T_RatingControl.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"Badge"
-            url:"qrc:/example/qml/page/T_Badge.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"Rectangle"
-            url:"qrc:/example/qml/page/T_Rectangle.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"StatusView"
-            url:"qrc:/example/qml/page/T_StatusView.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"Carousel"
-            url:"qrc:/example/qml/page/T_Carousel.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"Expander"
-            url:"qrc:/example/qml/page/T_Expander.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"StaggeredView"
-            url:"qrc:/example/qml/page/T_StaggeredView.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"Watermark"
-            url:"qrc:/example/qml/page/T_Watermark.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-    }
-
-    FluPaneItemExpander{
-        title:lang.popus
-        icon:FluentIcons.ButtonMenu
-        FluPaneItem{
-            title:"Dialog"
-            url:"qrc:/example/qml/page/T_Dialog.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            id:item_combobox
-            title:"ComboBox"
-            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"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{
-                item_combobox.count = 0
-                navigationView.push("qrc:/example/qml/page/T_ComboBox.qml")
-            }
-        }
-        FluPaneItem{
-            title:"Tooltip"
-            url:"qrc:/example/qml/page/T_Tooltip.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"Menu"
-            url:"qrc:/example/qml/page/T_Menu.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-    }
-
-    FluPaneItemExpander{
-        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."
-            url:"qrc:/example/qml/page/T_Pivot.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"BreadcrumbBar"
-            url:"qrc:/example/qml/page/T_BreadcrumbBar.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            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."
-            url:"qrc:/example/qml/page/T_TabView.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"TreeView"
-            url:"qrc:/example/qml/page/T_TreeView.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            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"
-            url:"qrc:/example/qml/page/T_TableView.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"Pagination"
-            url:"qrc:/example/qml/page/T_Pagination.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"MultiWindow"
-            url:"qrc:/example/qml/page/T_MultiWindow.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            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."
-            url:"qrc:/example/qml/page/T_FlipView.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-    }
-
-    FluPaneItemExpander{
-        title:lang.theming
-        icon:FluentIcons.Brightness
-        FluPaneItem{
-            title:"Acrylic"
-            url:"qrc:/example/qml/page/T_Acrylic.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"Theme"
-            url:"qrc:/example/qml/page/T_Theme.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"Typography"
-            url:"qrc:/example/qml/page/T_Typography.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"Awesome"
-            url:"qrc:/example/qml/page/T_Awesome.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-    }
-
-    FluPaneItemSeparator{
-        spacing:10
-        size:1
-    }
-
-    FluPaneItemExpander{
-        title:lang.other
-        icon:FluentIcons.Shop
-        FluPaneItem{
-            title:"QRCode"
-            url:"qrc:/example/qml/page/T_QRCode.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"Tour"
-            url:"qrc:/example/qml/page/T_Tour.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"Timeline"
-            url:"qrc:/example/qml/page/T_Timeline.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"Screenshot"
-            url:"qrc:/example/qml/page/T_Screenshot.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"Captcha"
-            url:"qrc:/example/qml/page/T_Captcha.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"Chart"
-            url:"qrc:/example/qml/page/T_Chart.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"Http"
-            url:"qrc:/example/qml/page/T_Http.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            id:item_other
-            title:"RemoteLoader"
-            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"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{
-                item_other.count = 0
-                navigationView.push("qrc:/example/qml/page/T_RemoteLoader.qml")
-            }
-        }
-        FluPaneItem{
-            title:"HotLoader"
-            onTapListener:function(){
-                FluApp.navigate("/hotload")
-            }
-            onDropped:{ FluApp.navigate("/hotload") }
-        }
-    }
-
-    function getRecentlyAddedData(){
-        var arr = []
-        for(var i=0;i<children.length;i++){
-            var item = children[i]
-            if(item instanceof FluPaneItem && item.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 })
-        return arr
-    }
-
-    function getRecentlyUpdatedData(){
-        var arr = []
-        var items = navigationView.getItems();
-        for(var i=0;i<items.length;i++){
-            var item = items[i]
-            if(item instanceof FluPaneItem && item.recentlyUpdated){
-                arr.push(item)
-            }
-        }
-        return arr
-    }
-
-    function getSearchData(){
-        var arr = []
-        var items = navigationView.getItems();
-        for(var i=0;i<items.length;i++){
-            var item = items[i]
-            if(item instanceof FluPaneItem){
-                if (item.parent instanceof FluPaneItemExpander)
-                {
-                    arr.push({title:`${item.parent.title} -> ${item.title}`,key:item.key})
-                }
-                else
-                    arr.push({title:item.title,key:item.key})
-            }
-        }
-        return arr
-    }
-
-    function startPageByItem(data){
-        navigationView.startPageByItem(data)
-    }
-
-}

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

example/qml-Qt6/page/T_Acrylic.qml

@@ -1,114 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"Acrylic"
-
-    RowLayout{
-        spacing: 10
-        Layout.topMargin: 20
-        FluText{
-            text:"tintColor:"
-            Layout.alignment: Qt.AlignVCenter
-        }
-        FluColorPicker{
-            id:color_picker
-        }
-    }
-    RowLayout{
-        spacing: 10
-        FluText{
-            text:"tintOpacity:"
-            Layout.alignment: Qt.AlignVCenter
-        }
-        FluSlider{
-            id:slider_tint_opacity
-            value: 65
-        }
-    }
-    RowLayout{
-        spacing: 10
-        FluText{
-            text:"blurRadius:"
-            Layout.alignment: Qt.AlignVCenter
-        }
-        FluSlider{
-            id:slider_blur_radius
-            value: 32
-        }
-    }
-    FluArea{
-        Layout.fillWidth: true
-        height: 1200/4+20
-        paddings: 10
-        Layout.topMargin: 10
-        FluRectangle{
-            width: 1920/4
-            height: 1200/4
-            radius:[15,15,15,15]
-            Image {
-                id:image
-                asynchronous: true
-                source: "qrc:/example/res/image/bg_scenic.png"
-                anchors.fill: parent
-                sourceSize: Qt.size(2*width,2*height)
-            }
-            FluAcrylic {
-                id:acrylic
-                target: image
-                width: 200
-                height: 200
-                tintOpacity: slider_tint_opacity.value/100
-                tintColor: color_picker.colorValue
-                blurRadius: slider_blur_radius.value
-                x:(image.width-width)/2
-                y:(image.height-height)/2
-                FluText {
-                    anchors.centerIn: parent
-                    text: "Acrylic"
-                    color: "#FFFFFF"
-                    font.bold: true
-                }
-                MouseArea {
-                    property point clickPos: Qt.point(0,0)
-                    id:drag_area
-                    anchors.fill: parent
-                    onPressed: (mouse)=>{
-                                   clickPos = Qt.point(mouse.x, mouse.y)
-                               }
-                    onPositionChanged: (mouse)=>{
-                                           var delta = Qt.point(mouse.x - clickPos.x,mouse.y - clickPos.y)
-                                           acrylic.x = acrylic.x + delta.x
-                                           acrylic.y = acrylic.y + delta.y
-                                       }
-                }
-            }
-            Layout.topMargin: 20
-        }
-
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'Image{
-    id:image
-    width: 800
-    height: 600
-    source: "qrc:/example/res/image/image_huoyin.webp"
-    radius: 8
-    }
-    FluAcrylic{
-        target:image
-        width: 100
-        height: 100
-        anchors.centerIn: parent
-    }
-}'
-    }
-
-}

example/qml-Qt6/page/T_Awesome.qml

@@ -1,71 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-
-FluContentPage {
-
-    title:"Awesome"
-
-    FluTextBox{
-        id:text_box
-        placeholderText: "请输入关键字"
-        anchors{
-            topMargin: 20
-            top:parent.top
-        }
-    }
-
-    FluFilledButton{
-        text:"搜索"
-        anchors{
-            left: text_box.right
-            verticalCenter: text_box.verticalCenter
-            leftMargin: 14
-        }
-        onClicked: {
-            grid_view.model = FluApp.awesomelist(text_box.text)
-        }
-    }
-    GridView{
-        id:grid_view
-        cellWidth: 80
-        cellHeight: 80
-        clip: true
-        boundsBehavior: GridView.StopAtBounds
-        model:FluApp.awesomelist()
-        ScrollBar.vertical: FluScrollBar {}
-        anchors{
-            topMargin: 10
-            top:text_box.bottom
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-        }
-        delegate: Item {
-            width: 68
-            height: 80
-            FluIconButton{
-                id:item_icon
-                iconSource:modelData.icon
-                anchors.horizontalCenter: parent.horizontalCenter
-                onClicked: {
-                    var text  ="FluentIcons."+modelData.name;
-                    FluTools.clipText(text)
-                    showSuccess("您复制了 "+text)
-                }
-            }
-            FluText {
-                id:item_name
-                font.pixelSize: 10
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.top: item_icon.bottom
-                width:parent.width
-                wrapMode: Text.WrapAnywhere
-                text: modelData.name
-                horizontalAlignment: Text.AlignHCenter
-            }
-        }
-    }
-}

example/qml-Qt6/page/T_Badge.qml

@@ -1,129 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"Badge"
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 106
-        paddings: 10
-
-        Column{
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluText{
-                text:"一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数"
-            }
-
-            Row{
-                spacing: 20
-                Rectangle{
-                    width: 40
-                    height: 40
-                    radius:  8
-                    color: Qt.rgba(191/255,191/255,191/255,1)
-                    FluBadge{
-                        topRight: true
-                        showZero: true
-                        count:0
-                    }
-                }
-
-                Rectangle{
-                    width: 40
-                    height: 40
-                    radius:  8
-                    color: Qt.rgba(191/255,191/255,191/255,1)
-                    FluBadge{
-                        topRight: true
-                        showZero: true
-                        count:5
-                    }
-                }
-                Rectangle{
-                    width: 40
-                    height: 40
-                    radius:  8
-                    color: Qt.rgba(191/255,191/255,191/255,1)
-                    FluBadge{
-                        topRight: true
-                        showZero: true
-                        count:50
-                    }
-                }
-                Rectangle{
-                    width: 40
-                    height: 40
-                    radius:  8
-                    color: Qt.rgba(191/255,191/255,191/255,1)
-                    FluBadge{
-                        topRight: true
-                        showZero: true
-                        count:100
-                    }
-                }
-                Rectangle{
-                    width: 40
-                    height: 40
-                    radius:  8
-                    color: Qt.rgba(191/255,191/255,191/255,1)
-                    FluBadge{
-                        topRight: true
-                        showZero: true
-                        isDot:true
-                    }
-                }
-                Rectangle{
-                    width: 40
-                    height: 40
-                    radius:  8
-                    color: Qt.rgba(191/255,191/255,191/255,1)
-                    FluBadge{
-                        topRight: true
-                        showZero: true
-                        count:99
-                        color: Qt.rgba(250/255,173/255,20/255,1)
-                    }
-                }
-                Rectangle{
-                    width: 40
-                    height: 40
-                    radius:  8
-                    color: Qt.rgba(191/255,191/255,191/255,1)
-                    FluBadge{
-                        topRight: true
-                        showZero: true
-                        count:99
-                        color: Qt.rgba(82/255,196/255,26/255,1)
-                    }
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'Rectangle{
-    width: 40
-    height: 40
-    radius: 8
-    color: Qt.rgba(191/255,191/255,191/255,1)
-    FluBadge{
-        count: 100
-        isDot: false
-        color: Qt.rgba(82/255,196/255,26/255,1)
-    }
-}'
-    }
-
-}

example/qml-Qt6/page/T_BreadcrumbBar.qml

@@ -1,94 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"BreadcurmbBar"
-
-    Component.onCompleted: {
-        var items = []
-        for(var i=0;i<10;i++){
-            items.push({title:"Item_"+(i+1)})
-        }
-        breadcrumb_1.items = items
-        breadcrumb_2.items = items
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-
-        FluBreadcrumbBar{
-            id:breadcrumb_1
-            width:parent.width
-            anchors.verticalCenter: parent.verticalCenter
-            onClickItem:
-                (model)=>{
-                    showSuccess(model.title)
-                }
-        }
-    }
-
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 100
-        paddings: 10
-        Layout.topMargin: 20
-
-        ColumnLayout{
-            anchors.verticalCenter: parent.verticalCenter
-            width:parent.width
-            spacing: 10
-
-            FluFilledButton{
-                text:"Reset sample"
-                onClicked:{
-                    var items = []
-                    for(var i=0;i<10;i++){
-                        items.push({title:"Item_"+(i+1)})
-                    }
-                     breadcrumb_2.items = items
-                }
-            }
-
-            FluBreadcrumbBar{
-                id:breadcrumb_2
-                separator:">"
-                spacing:8
-                textSize:18
-                Layout.fillWidth: true
-                onClickItem:
-                    (model)=>{
-                        //不是点击最后一个item元素
-                        if(model.index+1!==count()){
-                            breadcrumb_2.remove(model.index+1,count()-model.index-1)
-                        }
-                        showSuccess(model.title)
-                    }
-            }
-        }
-    }
-
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluBreadcrumbBar{
-    width:parent.width
-    separator:">"
-    spacing:8
-    textSize:18
-    onClickItem: (model)=>{
-
-    }
-}'
-    }
-
-
-}

example/qml-Qt6/page/T_Buttons.qml

@@ -1,348 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import QtQuick.Controls.Basic
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"Buttons"
-
-    FluText{
-        Layout.topMargin: 20
-        text:"支持Tab键切换焦点，空格键执行点击事件"
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-
-        FluTextButton{
-            disabled:text_button_switch.checked
-            text:"Text Button"
-            contentDescription: "文本按钮"
-            onClicked: {
-                showInfo("点击Text Button")
-            }
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-        FluToggleSwitch{
-            id:text_button_switch
-            anchors{
-                right: parent.right
-                verticalCenter: parent.verticalCenter
-            }
-            text:"Disabled"
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluTextButton{
-    text:"Text Button"
-    onClicked: {
-
-    }
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-
-        FluButton{
-            disabled:button_switch.checked
-            text:"Standard Button"
-            onClicked: {
-                showInfo("点击StandardButton")
-            }
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-        FluToggleSwitch{
-            id:button_switch
-            anchors{
-                right: parent.right
-                verticalCenter: parent.verticalCenter
-            }
-            text:"Disabled"
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluButton{
-    text:"Standard Button"
-    onClicked: {
-
-    }
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        Layout.topMargin: 20
-        paddings: 10
-
-        FluFilledButton{
-            disabled:filled_button_switch.checked
-            text:"Filled Button"
-            onClicked: {
-                showWarning("点击FilledButton"+height)
-            }
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-        FluToggleSwitch{
-            id:filled_button_switch
-            anchors{
-                right: parent.right
-                verticalCenter: parent.verticalCenter
-            }
-            text:"Disabled"
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluFilledButton{
-    text:"Filled Button"
-    onClicked: {
-
-    }
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        Layout.topMargin: 20
-        paddings: 10
-
-        FluToggleButton{
-            disabled:toggle_button_switch.checked
-            text:"Toggle Button"
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-        FluToggleSwitch{
-            id:toggle_button_switch
-            anchors{
-                right: parent.right
-                verticalCenter: parent.verticalCenter
-            }
-            text:"Disabled"
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluToggleButton{
-    text:"Toggle Button"
-    onClicked: {
-        checked = !checked
-    }
-}'
-    }
-
-
-    FluArea{
-        Layout.fillWidth: true
-        height: layout_icon_button.height + 30
-        paddings: 10
-        Layout.topMargin: 20
-        Flow{
-            id:layout_icon_button
-            spacing: 10
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-                right: icon_button_switch.left
-            }
-            FluIconButton{
-                disabled:icon_button_switch.checked
-                iconDelegate: Image{ sourceSize: Qt.size(40,40) ; width: 20; height: 20; source: "qrc:/example/res/image/ic_home_github.png" }
-                onClicked:{
-                    showSuccess("点击IconButton")
-                }
-            }
-            FluIconButton{
-                iconSource:FluentIcons.ChromeCloseContrast
-                disabled:icon_button_switch.checked
-                iconSize: 15
-                text:"IconOnly"
-                display: Button.IconOnly
-                onClicked:{
-                    showSuccess("Button.IconOnly")
-                }
-            }
-            FluIconButton{
-                iconSource:FluentIcons.ChromeCloseContrast
-                disabled:icon_button_switch.checked
-                iconSize: 15
-                text:"TextOnly"
-                display: Button.TextOnly
-                onClicked:{
-                    showSuccess("Button.TextOnly")
-                }
-            }
-            FluIconButton{
-                iconSource:FluentIcons.ChromeCloseContrast
-                disabled:icon_button_switch.checked
-                iconSize: 15
-                text:"TextBesideIcon"
-                display: Button.TextBesideIcon
-                onClicked:{
-                    showSuccess("Button.TextBesideIcon")
-                }
-            }
-            FluIconButton{
-                iconSource:FluentIcons.ChromeCloseContrast
-                disabled:icon_button_switch.checked
-                iconSize: 15
-                text:"TextUnderIcon"
-                display: Button.TextUnderIcon
-                onClicked:{
-                    showSuccess("Button.TextUnderIcon")
-                }
-            }
-        }
-        FluToggleSwitch{
-            id:icon_button_switch
-            anchors{
-                right: parent.right
-                verticalCenter: parent.verticalCenter
-            }
-            text:"Disabled"
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluIconButton{
-    iconSource:FluentIcons.ChromeCloseContrast
-    onClicked: {
-
-    }
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-        FluDropDownButton{
-            disabled:drop_down_button_switch.checked
-            text:"DropDownButton"
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluMenuItem{
-                text:"Menu_1"
-            }
-            FluMenuItem{
-                text:"Menu_2"
-            }
-            FluMenuItem{
-                text:"Menu_3"
-            }
-            FluMenuItem{
-                text:"Menu_4"
-                onClicked: {
-
-                }
-            }
-        }
-        FluToggleSwitch{
-            id:drop_down_button_switch
-            anchors{
-                right: parent.right
-                verticalCenter: parent.verticalCenter
-            }
-            text:"Disabled"
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluDropDownButton{
-    text:"DropDownButton"
-    FluMenuItem{
-        text:"Menu_1"
-    },
-    FluMenuItem{
-        text:"Menu_2"
-    },
-    FluMenuItem{
-        text:"Menu_3"
-    },
-    FluMenuItem{
-        text:"Menu_4"
-    }
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 100
-        paddings: 10
-        Layout.topMargin: 20
-        FluRadioButtons{
-            spacing: 8
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluRadioButton{
-                disabled:radio_button_switch.checked
-                text:"Radio Button_1"
-            }
-            FluRadioButton{
-                disabled:radio_button_switch.checked
-                text:"Radio Button_2"
-            }
-            FluRadioButton{
-                disabled:radio_button_switch.checked
-                text:"Radio Button_3"
-            }
-        }
-        FluToggleSwitch{
-            id:radio_button_switch
-            anchors{
-                right: parent.right
-                verticalCenter: parent.verticalCenter
-            }
-            text:"Disabled"
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluRadioButton{
-    checked:true
-    text:"Text Button"
-    onClicked: {
-
-    }
-}'
-    }
-
-}

example/qml-Qt6/page/T_CalendarPicker.qml

@@ -1,54 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"CalendarPicker"
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 350
-        paddings: 10
-        FluCalendarView{
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluCalendarView{
-
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
-        ColumnLayout{
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluCalendarPicker{
-                current:Date.fromLocaleString("2013年7月11日 21:17:42")
-                onAccepted:{
-                    showSuccess(current.toLocaleString())
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluCalendarPicker{
-
-}'
-    }
-
-}

example/qml-Qt6/page/T_Captcha.qml

@@ -1,54 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"Captcha"
-
-
-    FluCaptcha{
-        id:captcha
-        Layout.topMargin: 20
-        MouseArea{
-            anchors.fill: parent
-            cursorShape: Qt.PointingHandCursor
-            onClicked: {
-                captcha.refresh()
-            }
-        }
-    }
-
-    FluButton{
-        text:"Refresh"
-        Layout.topMargin: 20
-        onClicked: {
-            captcha.refresh()
-        }
-    }
-
-    RowLayout{
-        spacing: 10
-        Layout.topMargin: 10
-        FluTextBox{
-            id:text_box
-            placeholderText: "请输入验证码"
-        }
-        FluButton{
-            text:"verify"
-            onClicked: {
-                var success =  captcha.verify(text_box.text)
-                if(success){
-                    showSuccess("验证码正确")
-                }else{
-                    showError("错误验证，请重新输入")
-                }
-            }
-        }
-    }
-
-
-}

example/qml-Qt6/page/T_Carousel.qml

@@ -1,132 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"Carousel"
-
-    ListModel{
-        id:data_model
-        ListElement{
-            url:"qrc:/example/res/image/banner_1.jpg"
-        }
-        ListElement{
-            url:"qrc:/example/res/image/banner_2.jpg"
-        }
-        ListElement{
-            url:"qrc:/example/res/image/banner_3.jpg"
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 370
-        paddings: 10
-        Layout.topMargin: 20
-        Column{
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left:parent.left
-            }
-            FluText{
-                text:"轮播图，支持无限轮播，无限滑动，用ListView实现的组件"
-            }
-            FluCarousel{
-                radius:[5,5,5,5]
-                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"}]
-                }
-            }
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 340
-        paddings: 10
-        Layout.topMargin: 10
-        Column{
-            spacing: 15
-            anchors{
-                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 {
-                            anchors.fill: parent
-                            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
-                }
-            }
-        }
-    }
-
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluCarousel{
-    id:carousel
-    width: 400
-    height: 300
-    delegate: Component{
-        Image {
-            anchors.fill: parent
-            source: model.url
-            asynchronous: true
-            fillMode:Image.PreserveAspectCrop
-        }
-    }
-    Component.onCompleted: {
-        carousel.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"}]
-    }
-}'
-    }
-}

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

@@ -1,50 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"CheckBox"
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-        Row{
-            spacing: 30
-            anchors.verticalCenter: parent.verticalCenter
-            FluCheckBox{
-                disabled: check_box_switch.checked
-            }
-            FluCheckBox{
-                disabled: check_box_switch.checked
-                text:"Right"
-            }
-            FluCheckBox{
-                disabled: check_box_switch.checked
-                text:"Left"
-                textRight: false
-            }
-        }
-        FluToggleSwitch{
-            id:check_box_switch
-            anchors{
-                right: parent.right
-                verticalCenter: parent.verticalCenter
-            }
-            text:"Disabled"
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluCheckBox{
-    text:"Text"
-}'
-    }
-
-}

example/qml-Qt6/page/T_ColorPicker.qml

@@ -1,69 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"ColorPicker"
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 280
-        Layout.topMargin: 20
-        paddings: 10
-        ColumnLayout{
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left:parent.left
-            }
-            FluText{
-                text:"此颜色组件是Github上的开源项目"
-            }
-            FluTextButton{
-                text:"https://github.com/rshest/qml-colorpicker"
-                onClicked: {
-                    Qt.openUrlExternally(text)
-                }
-            }
-            FluColorView{
-
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluColorView{
-
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 60
-        paddings: 10
-
-        RowLayout{
-            FluText{
-                text:"点击选择颜色->"
-                Layout.alignment: Qt.AlignVCenter
-            }
-            FluColorPicker{
-
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluColorPicker{
-
-}'
-    }
-
-}
-

example/qml-Qt6/page/T_ComboBox.qml

@@ -1,81 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"ComboBox"
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 80
-        paddings: 5
-        Layout.topMargin: 20
-        Column{
-            spacing: 5
-            anchors.verticalCenter: parent.verticalCenter
-            FluText{
-                text: "editable=false"
-                x:10
-            }
-            FluComboBox {
-                model: ListModel {
-                    id: model_1
-                    ListElement { text: "Banana" }
-                    ListElement { text: "Apple" }
-                    ListElement { text: "Coconut" }
-                }
-            }
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 80
-        paddings: 10
-        Layout.topMargin: 20
-        Column{
-            spacing: 5
-            anchors.verticalCenter: parent.verticalCenter
-            FluText{
-                text: "editable=true"
-                x:5
-            }
-            FluComboBox {
-                editable: true
-                font:FluTextStyle.BodyStrong
-                model: ListModel {
-                    id: model_2
-                    ListElement { text: "Banana" }
-                    ListElement { text: "Apple" }
-                    ListElement { text: "Coconut" }
-                }
-                onAccepted: {
-                    if (find(editText) === -1)
-                        model_2.append({text: editText})
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluComboBox{
-    editable: true
-    model: ListModel {
-        id: model
-        ListElement { text: "Banana" }
-        ListElement { text: "Apple" }
-        ListElement { text: "Coconut" }
-    }
-    onAccepted: {
-        if (find(editText) === -1)
-            model.append({text: editText})
-    }
-}'
-    }
-
-}

example/qml-Qt6/page/T_DatePicker.qml

@@ -1,70 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"TimePicker"
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
-        ColumnLayout{
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluText{
-                text:"showYear=true"
-            }
-            FluDatePicker{
-                current: new Date()
-                onAccepted: {
-                    showSuccess(current.toLocaleDateString())
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluDatePicker{
-
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
-        ColumnLayout{
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluText{
-                text:"showYear=false"
-            }
-            FluDatePicker{
-                showYear:false
-                onAccepted: {
-                    showSuccess(current.toLocaleDateString())
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluDatePicker{
-    showYear:false
-}'
-    }
-
-}

example/qml-Qt6/page/T_Dialog.qml

@@ -1,118 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"Dialog"
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-        FluButton{
-            anchors.verticalCenter: parent.verticalCenter
-            Layout.topMargin: 20
-            text:"Show Double Button Dialog"
-            onClicked: {
-                double_btn_dialog.open()
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluContentDialog{
-    id:dialog
-    title:"友情提示"
-    message:"确定要退出程序么？"
-    negativeText:"取消"
-    buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
-    onNegativeClicked:{
-        showSuccess("点击取消按钮")
-    }
-    positiveText:"确定"
-    onPositiveClicked:{
-        showSuccess("点击确定按钮")
-    }
-    }
-    dialog.open()'
-    }
-
-    FluContentDialog{
-        id:double_btn_dialog
-        title:"友情提示"
-        message:"确定要退出程序么？"
-        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
-        negativeText:"取消"
-        onNegativeClicked:{
-            showSuccess("点击取消按钮")
-        }
-        positiveText:"确定"
-        onPositiveClicked:{
-            showSuccess("点击确定按钮")
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-        FluButton{
-            anchors.verticalCenter: parent.verticalCenter
-            Layout.topMargin: 20
-            text:"Show Triple Button Dialog"
-            onClicked: {
-                triple_btn_dialog.open()
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluContentDialog{
-    id:dialog
-    title:"友情提示"
-    message:"确定要退出程序么？"
-    negativeText:"取消"
-    buttonFlags: FluContentDialogType.NeutralButton | FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
-    negativeText:"取消"
-    onNegativeClicked:{
-        showSuccess("点击取消按钮")
-    }
-    positiveText:"确定"
-    onPositiveClicked:{
-        showSuccess("点击确定按钮")
-    }
-    neutralText:"最小化"
-    onNeutralClicked:{
-        showSuccess("点击最小化按钮")
-        }
-    }
-    dialog.open()'
-    }
-
-    FluContentDialog{
-        id:triple_btn_dialog
-        title:"友情提示"
-        message:"确定要退出程序么？"
-        buttonFlags: FluContentDialogType.NeutralButton | FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
-        negativeText:"取消"
-        onNegativeClicked:{
-            showSuccess("点击取消按钮")
-        }
-        positiveText:"确定"
-        onPositiveClicked:{
-            showSuccess("点击确定按钮")
-        }
-        neutralText:"最小化"
-        onNeutralClicked:{
-            showSuccess("点击最小化按钮")
-        }
-    }
-}

example/qml-Qt6/page/T_Expander.qml

@@ -1,102 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"Expander"
-
-    FluArea{
-        Layout.fillWidth: true
-        height: layout_column.height+20
-        paddings: 10
-        Layout.topMargin: 20
-        Column{
-            id:layout_column
-            spacing: 15
-            anchors{
-                top:parent.top
-                left:parent.left
-            }
-
-            FluExpander{
-                headerText:"打开一个单选框"
-                Layout.topMargin: 20
-                Item{
-                    anchors.fill: parent
-                    FluRadioButtons{
-                        spacing: 8
-                        anchors{
-                            top: parent.top
-                            left: parent.left
-                            topMargin: 15
-                            leftMargin: 15
-                        }
-                        FluRadioButton{
-                            text:"Radio Button_1"
-                        }
-                        FluRadioButton{
-                            text:"Radio Button_2"
-                        }
-                        FluRadioButton{
-                            text:"Radio Button_3"
-                        }
-                    }
-                }
-            }
-
-            FluExpander{
-                Layout.topMargin: 20
-                headerText:"打开一个滑动文本框"
-                Item{
-                    anchors.fill: parent
-                    Flickable{
-                        id:scrollview
-                        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
-                            text:"先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激。今当远离，临表涕零，不知所言。"
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluExpander{
-    headerText:"打开一个单选框"
-    Item{
-        anchors.fill: parent
-        Flickable{
-            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
-                text:"先帝创业未半而中道崩殂，今天下三分......""
-            }
-        }
-    }
-}'
-    }
-
-
-}

example/qml-Qt6/page/T_FlipView.qml

@@ -1,117 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"FlipView"
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 340
-        paddings: 10
-        Layout.topMargin: 20
-        ColumnLayout{
-            anchors.verticalCenter: parent.verticalCenter
-            FluText{
-                text:"水平方向的FlipView"
-            }
-            FluFlipView{
-                Image{
-                    source: "qrc:/example/res/image/banner_1.jpg"
-                    asynchronous: true
-                    fillMode:Image.PreserveAspectCrop
-                }
-                Image{
-                    source: "qrc:/example/res/image/banner_2.jpg"
-                    asynchronous: true
-                    fillMode:Image.PreserveAspectCrop
-                }
-                Image{
-                    source: "qrc:/example/res/image/banner_3.jpg"
-                    asynchronous: true
-                    fillMode:Image.PreserveAspectCrop
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluFlipView{
-    Image{
-        source: "qrc:/example/res/image/banner_1.jpg"
-        asynchronous: true
-        fillMode:Image.PreserveAspectCrop
-    }
-    Image{
-        source: "qrc:/example/res/image/banner_1.jpg"
-        asynchronous: true
-        fillMode:Image.PreserveAspectCrop
-    }
-    Image{
-        source: "qrc:/example/res/image/banner_1.jpg"
-        asynchronous: true
-        fillMode:Image.PreserveAspectCrop
-    }
-}
-'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 340
-        paddings: 10
-        Layout.topMargin: 20
-        ColumnLayout{
-            anchors.verticalCenter: parent.verticalCenter
-            FluText{
-                text:"垂直方向的FlipView"
-            }
-            FluFlipView{
-                vertical:true
-                Image{
-                    source: "qrc:/example/res/image/banner_1.jpg"
-                    asynchronous: true
-                    fillMode:Image.PreserveAspectCrop
-                }
-                Image{
-                    source: "qrc:/example/res/image/banner_2.jpg"
-                    asynchronous: true
-                    fillMode:Image.PreserveAspectCrop
-                }
-                Image{
-                    source: "qrc:/example/res/image/banner_3.jpg"
-                    asynchronous: true
-                    fillMode:Image.PreserveAspectCrop
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluFlipView{
-    vertical:true
-    Image{
-        source: "qrc:/example/res/image/banner_1.jpg"
-        asynchronous: true
-        fillMode:Image.PreserveAspectCrop
-    }
-    Image{
-        source: "qrc:/example/res/image/banner_1.jpg"
-        asynchronous: true
-        fillMode:Image.PreserveAspectCrop
-    }
-    Image{
-        source: "qrc:/example/res/image/banner_1.jpg"
-        asynchronous: true
-        fillMode:Image.PreserveAspectCrop
-    }
-}
-'
-    }
-}

example/qml-Qt6/page/T_Home.qml

@@ -1,284 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import "qrc:///example/qml/global"
-import FluentUI
-
-FluScrollablePage{
-
-    launchMode: FluPageType.SingleTask
-    animDisabled: true
-
-    ListModel{
-        id:model_header
-        ListElement{
-            icon:"qrc:/example/res/image/ic_home_github.png"
-            title:"FluentUI GitHub"
-            desc:"The latest FluentUI controls and styles for your applications."
-            url:"https://github.com/zhuzichu520/FluentUI"
-        }
-    }
-
-    Item{
-        Layout.fillWidth: true
-        Layout.preferredHeight: 320
-        Image {
-            id: bg
-            fillMode:Image.PreserveAspectCrop
-            anchors.fill: parent
-            verticalAlignment: Qt.AlignTop
-            source: "qrc:/example/res/image/bg_home_header.png"
-        }
-        Rectangle{
-            anchors.fill: parent
-            gradient: Gradient{
-                GradientStop { position: 0.8; color: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(1,1,1,0) }
-                GradientStop { position: 1.0; color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) }
-            }
-        }
-        FluText{
-            text:"FluentUI Gallery"
-            font: FluTextStyle.TitleLarge
-            anchors{
-                top: parent.top
-                left: parent.left
-                topMargin: 20
-                leftMargin: 20
-            }
-        }
-
-        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{
-                id: control
-                width: 220
-                height: 240
-                FluShadow{
-                    radius:8
-                    anchors.fill: item_content
-                }
-                FluItem{
-                    id:item_content
-                    radius: [8,8,8,8]
-                    width: 200
-                    height: 220
-                    anchors.centerIn: parent
-                    FluAcrylic{
-                        anchors.fill: parent
-                        tintColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
-                        target: bg
-                        tintOpacity: FluTheme.dark ? 0.8 : 0.9
-                        blurRadius : 40
-                        targetRect: Qt.rect(list.x-list.contentX+10+(control.width)*index,list.y+10,width,height)
-                    }
-                    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)
-                            }
-                        }
-                    }
-                    ColumnLayout{
-                        Image {
-                            Layout.topMargin: 20
-                            Layout.leftMargin: 20
-                            Layout.preferredWidth: 50
-                            Layout.preferredHeight: 50
-                            source: model.icon
-                        }
-                        FluText{
-                            text: model.title
-                            font: FluTextStyle.Body
-                            Layout.topMargin: 20
-                            Layout.leftMargin: 20
-                        }
-                        FluText{
-                            text: model.desc
-                            Layout.topMargin: 5
-                            Layout.preferredWidth: 160
-                            Layout.leftMargin: 20
-                            color: FluColors.Grey120
-                            font.pixelSize: 12
-                            wrapMode: Text.WrapAnywhere
-                        }
-                    }
-                    FluIcon{
-                        iconSource: FluentIcons.OpenInNewWindow
-                        iconSize: 15
-                        anchors{
-                            bottom: parent.bottom
-                            right: parent.right
-                            rightMargin: 10
-                            bottomMargin: 10
-                        }
-                    }
-                    MouseArea{
-                        id:item_mouse
-                        anchors.fill: parent
-                        hoverEnabled: true
-                        onWheel:
-                            (wheel)=>{
-                                if (wheel.angleDelta.y > 0) scrollbar_header.decrease()
-                                else scrollbar_header.increase()
-                            }
-                        onClicked: {
-                            Qt.openUrlExternally(model.url)
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    Component{
-        id:com_item
-        Item{
-            width: 320
-            height: 120
-            FluArea{
-                radius: 8
-                width: 300
-                height: 100
-                anchors.centerIn: parent
-                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)
-                        }else{
-                            if(item_mouse.containsMouse){
-                                return Qt.rgba(0,0,0,0.03)
-                            }
-                            return Qt.rgba(0,0,0,0)
-                        }
-                    }
-                }
-                Image{
-                    id:item_icon
-                    height: 40
-                    width: 40
-                    source: modelData.image
-                    anchors{
-                        left: parent.left
-                        leftMargin: 20
-                        verticalCenter: parent.verticalCenter
-                    }
-                }
-
-                FluText{
-                    id:item_title
-                    text:modelData.title
-                    font: FluTextStyle.BodyStrong
-                    anchors{
-                        left: item_icon.right
-                        leftMargin: 20
-                        top: item_icon.top
-                    }
-                }
-
-                FluText{
-                    id:item_desc
-                    text:modelData.desc
-                    color:FluColors.Grey120
-                    wrapMode: Text.WrapAnywhere
-                    elide: Text.ElideRight
-                    font: FluTextStyle.Caption
-                    maximumLineCount: 2
-                    anchors{
-                        left: item_title.left
-                        right: parent.right
-                        rightMargin: 20
-                        top: item_title.bottom
-                        topMargin: 5
-                    }
-                }
-
-                Rectangle{
-                    height: 12
-                    width: 12
-                    radius:  6
-                    color: FluTheme.primaryColor.dark
-                    anchors{
-                        right: parent.right
-                        top: parent.top
-                        rightMargin: 14
-                        topMargin: 14
-                    }
-                }
-
-                MouseArea{
-                    id:item_mouse
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    onClicked: {
-                        ItemsOriginal.startPageByItem(modelData)
-                    }
-                }
-            }
-        }
-    }
-
-    FluText{
-        text: "Recently added samples"
-        font: FluTextStyle.Title
-        Layout.topMargin: 20
-        Layout.leftMargin: 20
-    }
-
-    GridView{
-        Layout.fillWidth: true
-        Layout.preferredHeight: contentHeight
-        cellHeight: 120
-        cellWidth: 320
-        model:ItemsOriginal.getRecentlyAddedData()
-        interactive: false
-        delegate: com_item
-    }
-
-    FluText{
-        text: "Recently updated samples"
-        font: FluTextStyle.Title
-        Layout.topMargin: 20
-        Layout.leftMargin: 20
-    }
-
-    GridView{
-        Layout.fillWidth: true
-        Layout.preferredHeight: contentHeight
-        cellHeight: 120
-        cellWidth: 320
-        interactive: false
-        model: ItemsOriginal.getRecentlyUpdatedData()
-        delegate: com_item
-    }
-
-}

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

@@ -1,48 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"Image"
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 260
-        paddings: 10
-        Layout.topMargin: 20
-        Column{
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left:parent.left
-            }
-            FluImage{
-                width: 384
-                height: 240
-                source: "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_4.jpg"
-                onStatusChanged:{
-                    if(status === Image.Error){
-                        showError("图片加载失败，请重新加载")
-                    }
-                }
-                clickErrorListener: function(){
-                    source = "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_1.jpg"
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluImage{
-    width: 400
-    height: 300
-    source: "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_1.jpg"
-}'
-    }
-
-}

example/qml-Qt6/page/T_InfoBar.qml

@@ -1,66 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"InfoBar"
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 240
-        paddings: 10
-        ColumnLayout{
-            spacing: 14
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluButton{
-                text:"Info"
-                onClicked: {
-                    showInfo("这是一个Info样式的InfoBar")
-                }
-            }
-            FluButton{
-                text:"Warning"
-                onClicked: {
-                    showWarning("这是一个Warning样式的InfoBar")
-                }
-            }
-            FluButton{
-                text:"Error"
-                onClicked: {
-                    showError("这是一个Error样式的InfoBar")
-                }
-            }
-            FluButton{
-                text:"Success"
-                onClicked: {
-                    showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
-                }
-            }
-            FluButton{
-                text:"Loading"
-                onClicked: {
-                    showLoading()
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'showInfo("这是一个Info样式的InfoBar")
-
-showWarning("这是一个Warning样式的InfoBar")
-
-showError("这是一个Error样式的InfoBar")
-
-showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")'
-    }
-}

example/qml-Qt6/page/T_Menu.qml

@@ -1,175 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"Menu"
-
-    FluMenu {
-        id:menu
-        title: qsTr("File")
-        Action { text: qsTr("New...")}
-        Action { text: qsTr("Open...") }
-        Action { text: qsTr("Save") }
-        FluMenuSeparator { }
-        FluMenuItem{
-            text: qsTr("Quit")
-            onTriggered: {
-                showError("Quit")
-            }
-        }
-        FluMenuItem{
-            text: qsTr("Search")
-            iconSource: FluentIcons.Zoom
-            iconSpacing: 3
-            onTriggered: {
-                showError("Search")
-            }
-        }
-        Action {
-            text: qsTr("Disable")
-            enabled:false
-            onTriggered: {
-                showError("Disable")
-            }
-        }
-        FluMenuSeparator { }
-        Action { text: qsTr("Check");checkable: true;checked: true}
-        FluMenu{
-            title: "Save As..."
-            Action { text: qsTr("Doc") }
-            Action { text: qsTr("PDF") }
-        }
-    }
-
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 100
-        paddings: 10
-        Layout.topMargin: 20
-        Column{
-            id:layout_column
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left:parent.left
-            }
-
-            FluText{
-                text:"Menu"
-            }
-
-            FluButton{
-                text:"Show Menu Popup"
-                Layout.topMargin: 20
-                onClicked:{
-                    menu.popup()
-                }
-            }
-
-
-        }
-    }
-
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluMenu{
-    id:menu
-    FluMenuItem:{
-        text:"删除"
-        onClicked: {
-            showError("删除")
-        }
-    }
-    FluMenuItem:{
-        text:"修改"
-        onClicked: {
-            showInfo("修改")
-        }
-    }
-}
-menu.popup()
-'
-    }
-
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 100
-        paddings: 10
-        Layout.topMargin: 20
-        Column{
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left:parent.left
-            }
-
-            FluText{
-                text:"MenuBar"
-            }
-
-            FluMenuBar {
-                id:menu_bar
-                FluMenu {
-                    title: qsTr("File")
-                    Action { text: qsTr("New...") }
-                    Action { text: qsTr("Open...") }
-                    Action { text: qsTr("Save") }
-                    FluMenuSeparator { }
-                    Action { text: qsTr("Quit") }
-                    Action {
-                        text: qsTr("Disable")
-                        enabled:false
-                    }
-                    FluMenu{
-                        title: "Save As..."
-                        Action { text: qsTr("Doc") }
-                        Action { text: qsTr("PDF") }
-                    }
-                }
-                FluMenu {
-                    title: qsTr("Edit")
-                    Action { text: qsTr("Cut") }
-                    Action { text: qsTr("Copy") }
-                    Action { text: qsTr("Paste") }
-                }
-                FluMenu {
-                    title: qsTr("Help")
-                    Action { text: qsTr("About") }
-                }
-            }
-
-        }
-    }
-
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluMenuBar{
-    id:menu
-    FluMenu:{
-        title:"File"
-        Action { text: qsTr("New...") }
-    }
-    FluMenu:{
-        title:"Edit"
-        Action { text: qsTr("Cut") }
-        Action { text: qsTr("Copy") }
-        Action { text: qsTr("Paste") }
-    }
-}
-menu.popup()
-'
-    }
-
-
-
-
-}

example/qml-Qt6/page/T_MultiWindow.qml

@@ -1,186 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    property string password: ""
-    property var loginPageRegister: registerForWindowResult("/login")
-
-    title:"MultiWindow"
-
-    Connections{
-        target: loginPageRegister
-        function onResult(data)
-        {
-            password = data.password
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 86
-        paddings: 10
-        Layout.topMargin: 20
-        Column{
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluText{
-                text:"<font color='red'>Standard</font>模式窗口，每次都会创建新窗口"
-            }
-            FluButton{
-                text:"点击创建窗口"
-                onClicked: {
-                    FluApp.navigate("/standardWindow")
-                }
-            }
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 86
-        paddings: 10
-        Layout.topMargin: 10
-        Column{
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluText{
-                text:"<font color='red'>SingleTask</font>模式窗口，如果窗口存在，这激活该窗口"
-                textFormat: Text.RichText
-            }
-            FluButton{
-                text:"点击创建窗口"
-                onClicked: {
-                    FluApp.navigate("/singleTaskWindow")
-                }
-            }
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 86
-        paddings: 10
-        Layout.topMargin: 10
-        Column{
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluText{
-                text:"<font color='red'>SingleInstance</font>模式窗口，如果窗口存在，则销毁窗口，然后新建窗口"
-            }
-            FluButton{
-                text:"点击创建窗口"
-                onClicked: {
-                    FluApp.navigate("/singleInstanceWindow")
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluWindow{
-  //launchMode: FluWindowType.Standard
-  //launchMode: FluWindowType.SingleTask
-     launchMode: FluWindowType.SingleInstance
-}
-'
-    }
-
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 100
-        paddings: 10
-        Layout.topMargin: 20
-        Column{
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluText{
-                text:"页面跳转，不携带任何参数"
-            }
-            FluButton{
-                text:"点击跳转"
-                onClicked: {
-                    FluApp.navigate("/about")
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluButton{
-    text:"点击跳转"
-    onClicked: {
-        FluApp.navigate("/about")
-    }
-}
-'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 130
-        paddings: 10
-        Layout.topMargin: 20
-
-        Column{
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluText{
-                text:"页面跳转，并携带参数用户名：zhuzichu"
-            }
-            FluButton{
-                text:"点击跳转到登录"
-                onClicked: {
-                    loginPageRegister.launch({username:"zhuzichu"})
-                }
-            }
-            FluText{
-                text:"登录窗口返回过来的密码->"+password
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'property var loginPageRegister: registerForWindowResult("/login")
-
-Connections{
-    target: loginPageRegister
-    function onResult(data)
-    {
-        password = data.password
-    }
-}
-
-FluButton{
-    text:"点击跳转"
-    onClicked: {
-        loginPageRegister.launch({username:"zhuzichu"})
-    }
-}
-'
-    }
-
-}

example/qml-Qt6/page/T_Pagination.qml

@@ -1,49 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import "qrc:///example/qml/component"
-import FluentUI
-
-FluScrollablePage{
-
-    title:"Pagination"
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 200
-        paddings: 10
-        Layout.topMargin: 20
-        ColumnLayout{
-            spacing: 20
-            anchors.verticalCenter: parent.verticalCenter
-            FluPagination{
-                pageCurrent: 1
-                pageButtonCount: 5
-                itemCount: 5000
-            }
-            FluPagination{
-                pageCurrent: 2
-                itemCount: 5000
-                pageButtonCount: 7
-            }
-            FluPagination{
-                pageCurrent: 3
-                itemCount: 5000
-                pageButtonCount: 9
-            }
-        }
-
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluPagination{
-    pageCurrent: 1
-    itemCount: 1000
-    pageButtonCount: 9
-}'
-    }
-
-
-}

example/qml-Qt6/page/T_Pivot.qml

@@ -1,79 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"Pivot"
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 400
-        paddings: 10
-
-        FluPivot{
-            anchors.fill: parent
-            currentIndex: 2
-            FluPivotItem{
-                title:"All"
-                contentItem:FluText{
-                    text:"All emails go here."
-                }
-            }
-            FluPivotItem{
-                title:"Unread"
-                contentItem:FluText{
-                    text:"Unread emails go here."
-                }
-            }
-            FluPivotItem{
-                title:"Flagged"
-                contentItem:FluText{
-                    text:"Flagged emails go here."
-                }
-            }
-            FluPivotItem{
-                title:"Urgent"
-                contentItem:FluText{
-                    text:"Urgent emails go here."
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluPivot{
-    anchors.fill: parent
-    FluPivotItem:{
-        text:"All"
-        contentItem: FluText{
-            text:"All emails go here."
-        }
-    }
-    FluPivotItem:{
-        text:"Unread"
-        contentItem: FluText{
-            text:"Unread emails go here."
-        }
-    }
-    FluPivotItem:{
-        text:"Flagged"
-        contentItem: FluText{
-            text:"Flagged emails go here."
-        }
-    }
-    FluPivotItem:{
-        text:"Urgent"
-        contentItem: FluText{
-            text:"Urgent emails go here."
-        }
-    }
-}
-'
-    }
-}

example/qml-Qt6/page/T_Progress.qml

@@ -1,103 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"Progress"
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 130
-        paddings: 10
-
-        ColumnLayout{
-            spacing: 10
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluText{
-                text: "indeterminate = true"
-            }
-            FluProgressBar{
-            }
-            FluProgressRing{
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluProgressBar{
-
-}
-FluProgressRing{
-
-}
-'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 286
-        paddings: 10
-
-        ColumnLayout{
-            spacing: 10
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluText{
-                text: "indeterminate = false"
-            }
-            FluProgressBar{
-                indeterminate: false
-                value:slider.value/100
-                Layout.topMargin: 10
-            }
-            FluProgressBar{
-                indeterminate: false
-                value:slider.value/100
-                progressVisible: true
-                Layout.topMargin: 10
-            }
-            FluProgressRing{
-                indeterminate: false
-                value: slider.value/100
-                Layout.topMargin: 10
-            }
-            FluProgressRing{
-                progressVisible: true
-                indeterminate: false
-                value: slider.value/100
-            }
-            FluSlider{
-                id:slider
-                Component.onCompleted: {
-                    value = 50
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluProgressBar{
-    indeterminate: false
-}
-FluProgressRing{
-    indeterminate: false
-    progressVisible: true
-}
-'
-    }
-
-
-}

example/qml-Qt6/page/T_QRCode.qml

@@ -1,106 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import Qt5Compat.GraphicalEffects
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"QRCode"
-
-    FluQRCode{
-        id:qrcode
-        Layout.topMargin: 20
-        size:slider_size.value
-        text:text_box.text
-        color:color_picker.colorValue
-        bgColor: bgcolor_picker.colorValue
-        margins:slider_margins.value
-        Layout.preferredWidth: size
-        Layout.preferredHeight: size
-    }
-
-    RowLayout{
-        spacing: 10
-        Layout.topMargin: 20
-        FluText{
-            text:"text:"
-            Layout.alignment: Qt.AlignVCenter
-        }
-        FluTextBox{
-            id:text_box
-            text:"会磨刀的小猪"
-        }
-    }
-
-    RowLayout{
-        spacing: 10
-        Layout.topMargin: 10
-        FluText{
-            text:"color:"
-            Layout.alignment: Qt.AlignVCenter
-        }
-        FluColorPicker{
-            id:color_picker
-            Component.onCompleted: {
-                setColor(Qt.rgba(0,0,0,1))
-            }
-        }
-    }
-
-    RowLayout{
-        spacing: 10
-        Layout.topMargin: 10
-        FluText{
-            text:"bgColor:"
-            Layout.alignment: Qt.AlignVCenter
-        }
-        FluColorPicker{
-            id:bgcolor_picker
-            Component.onCompleted: {
-                setColor(Qt.rgba(1,1,1,1))
-            }
-        }
-    }
-
-    RowLayout{
-        spacing: 10
-        FluText{
-            text:"margins:"
-            Layout.alignment: Qt.AlignVCenter
-        }
-        FluSlider{
-            id:slider_margins
-            from:0
-            to:80
-            value: 0
-        }
-    }
-
-    RowLayout{
-        spacing: 10
-        FluText{
-            text:"size:"
-            Layout.alignment: Qt.AlignVCenter
-        }
-        FluSlider{
-            id:slider_size
-            from:120
-            to:260
-            value: 120
-        }
-    }
-
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        code:'FluQRCode{
-    color:"red"
-    text:"会磨刀的小猪"
-    size:100
-}'
-    }
-
-}

example/qml-Qt6/page/T_RadioButton.qml

@@ -1,101 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"RadioButton"
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-        Row{
-            spacing: 30
-            anchors.verticalCenter: parent.verticalCenter
-            FluRadioButton{
-                disabled: radio_button_switch.checked
-            }
-            FluRadioButton{
-                disabled: radio_button_switch.checked
-                text:"Right"
-            }
-            FluRadioButton{
-                disabled: radio_button_switch.checked
-                text:"Left"
-                textRight: false
-            }
-        }
-        FluToggleSwitch{
-            id:radio_button_switch
-            anchors{
-                right: parent.right
-                verticalCenter: parent.verticalCenter
-            }
-            text:"Disabled"
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluRadioButton{
-    text:"Text"
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 100
-        paddings: 10
-        Layout.topMargin: 20
-        FluRadioButtons{
-            spacing: 8
-            anchors.verticalCenter: parent.verticalCenter
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluRadioButton{
-                disabled: radio_button_switch2.checked
-                text:"Radio Button_1"
-            }
-            FluRadioButton{
-                disabled: radio_button_switch2.checked
-                text:"Radio Button_2"
-            }
-            FluRadioButton{
-                disabled: radio_button_switch2.checked
-                text:"Radio Button_3"
-            }
-        }
-        FluToggleSwitch{
-            id:radio_button_switch2
-            anchors{
-                right: parent.right
-                verticalCenter: parent.verticalCenter
-            }
-            text:"Disabled"
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluRadioButtons{
-    spacing: 8
-    FluRadioButton{
-        text:"Radio Button_1"
-    }
-    FluRadioButton{
-        text:"Radio Button_2"
-    }
-    FluRadioButton{
-        text:"Radio Button_3"
-    }
-}'
-    }
-
-}

example/qml-Qt6/page/T_RatingControl.qml

@@ -1,35 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage {
-
-    title: "RatingControl"
-
-    FluArea {
-        Layout.fillWidth: true
-        height: 100
-        paddings: 10
-        Layout.topMargin: 20
-
-        Column {
-            spacing: 10
-            anchors.verticalCenter: parent.verticalCenter
-            FluRatingControl {}
-            FluRatingControl {
-                number: 10
-            }
-        }
-    }
-
-    CodeExpander {
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code: 'FluRatingControl{
-
-}'
-    }
-}

example/qml-Qt6/page/T_RemoteLoader.qml

@@ -1,14 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluPage{
-    launchMode: FluPageType.SingleTop
-    FluRemoteLoader{
-        anchors.fill: parent
-        source: "https://zhu-zichu.gitee.io/T_RemoteLoader.qml"
-    }
-}

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

@@ -1,108 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/global"
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"Settings"
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 128
-        paddings: 10
-
-        ColumnLayout{
-            spacing: 5
-            anchors{
-                top: parent.top
-                left: parent.left
-            }
-            FluText{
-                text:lang.dark_mode
-                font: FluTextStyle.BodyStrong
-                Layout.bottomMargin: 4
-            }
-            Repeater{
-                model: [{title:"System",mode:FluThemeType.System},{title:"Light",mode:FluThemeType.Light},{title:"Dark",mode:FluThemeType.Dark}]
-                delegate:  FluRadioButton{
-                    checked : FluTheme.darkMode === modelData.mode
-                    text:modelData.title
-                    clickListener:function(){
-                        FluTheme.darkMode = modelData.mode
-                    }
-                }
-            }
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 160
-        paddings: 10
-
-        ColumnLayout{
-            spacing: 5
-            anchors{
-                top: parent.top
-                left: parent.left
-            }
-            FluText{
-                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
-                    text:modelData.title
-                    clickListener:function(){
-                        MainEvent.displayMode = modelData.mode
-                    }
-                }
-            }
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
-
-        ColumnLayout{
-            spacing: 10
-            anchors{
-                top: parent.top
-                left: parent.left
-            }
-
-            FluText{
-                text:lang.locale
-                font: FluTextStyle.BodyStrong
-                Layout.bottomMargin: 4
-            }
-
-            Flow{
-                spacing: 5
-                Repeater{
-                    model: ["Zh","En"]
-                    delegate: FluRadioButton{
-                        checked: appInfo.lang.objectName === modelData
-                        text:modelData
-                        clickListener:function(){
-                            appInfo.changeLang(modelData)
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-}

example/qml-Qt6/page/T_Slider.qml

@@ -1,59 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import "qrc:///example/qml/component"
-import FluentUI
-
-FluScrollablePage{
-
-    title:"Slider"
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.preferredHeight: 200
-        Layout.topMargin: 20
-        paddings: 10
-
-        Row{
-            spacing: 30
-            FluSlider{
-            }
-            FluSlider{
-                orientation: Qt.Vertical
-                anchors.verticalCenter: parent.verticalCenter
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluSlider{
-    value:50
-}'
-    }
-
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.preferredHeight: 200
-        Layout.topMargin: 20
-        paddings: 10
-        Row{
-            spacing: 30
-            FluRangeSlider{
-            }
-            FluRangeSlider{
-                orientation: Qt.Vertical
-                anchors.verticalCenter: parent.verticalCenter
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluRangeSlider{
-    orientation: Qt.Vertical
-}'
-    }
-}

example/qml-Qt6/page/T_StaggeredView.qml

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

example/qml-Qt6/page/T_StatusView.qml

@@ -1,86 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Controls
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"StatusView"
-
-    FluArea{
-        id:layout_actions
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 50
-        paddings: 10
-        RowLayout{
-            spacing: 14
-            FluDropDownButton{
-                id:btn_status_mode
-                Layout.preferredWidth: 140
-                text:"Loading"
-                FluMenuItem{
-                    text:"Loading"
-                    onClicked: {
-                        btn_status_mode.text = text
-                        status_view.statusMode = FluStatusViewType.Loading
-                    }
-                }
-                FluMenuItem{
-                    text:"Empty"
-                    onClicked: {
-                        btn_status_mode.text = text
-                        status_view.statusMode = FluStatusViewType.Empty
-                    }
-                }
-                FluMenuItem{
-                    text:"Error"
-                    onClicked: {
-                        btn_status_mode.text = text
-                        status_view.statusMode = FluStatusViewType.Error
-                    }
-                }
-                FluMenuItem{
-                    text:"Success"
-                    onClicked: {
-                        btn_status_mode.text = text
-                        status_view.statusMode = FluStatusViewType.Success
-                    }
-                }
-            }
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 10
-        height: 380
-        paddings: 10
-        FluStatusView{
-            id:status_view
-            anchors.fill: parent
-            onErrorClicked:{
-                showError("点击重新加载")
-            }
-            Rectangle {
-                anchors.fill: parent
-                color:FluTheme.primaryColor.dark
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluStatusView{
-    anchors.fill: parent
-    statusMode: FluStatusViewType.Loading
-    Rectangle{
-        anchors.fill: parent
-        color:FluTheme.primaryColor.dark
-    }
-}'
-    }
-
-}

example/qml-Qt6/page/T_TabView.qml

@@ -1,130 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
-
-    title:"TabView"
-
-    Component{
-        id:com_page
-        Rectangle{
-            anchors.fill: parent
-            color: argument
-        }
-    }
-
-    function newTab(){
-        tab_view.appendTab("qrc:/example/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)].dark)
-    }
-
-    Component.onCompleted: {
-        newTab()
-        newTab()
-        newTab()
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 50
-        paddings: 10
-        RowLayout{
-            spacing: 14
-            FluDropDownButton{
-                id:btn_tab_width_behavior
-                Layout.preferredWidth: 140
-                text:"Equal"
-                FluMenuItem{
-                    text:"Equal"
-                    onClicked: {
-                        btn_tab_width_behavior.text = text
-                        tab_view.tabWidthBehavior = FluTabViewType.Equal
-                    }
-                }
-                FluMenuItem{
-                    text:"SizeToContent"
-                    onClicked: {
-                        btn_tab_width_behavior.text = text
-                        tab_view.tabWidthBehavior = FluTabViewType.SizeToContent
-                    }
-                }
-                FluMenuItem{
-                    text:"Compact"
-                    onClicked: {
-                        btn_tab_width_behavior.text = text
-                        tab_view.tabWidthBehavior = FluTabViewType.Compact
-                    }
-                }
-            }
-            FluDropDownButton{
-                id:btn_close_button_visibility
-                text:"Always"
-                Layout.preferredWidth: 120
-                FluMenuItem{
-                    text:"Nerver"
-                    onClicked: {
-                        btn_close_button_visibility.text = text
-                        tab_view.closeButtonVisibility = FluTabViewType.Nerver
-                    }
-                }
-                FluMenuItem{
-                    text:"Always"
-                    onClicked: {
-                        btn_close_button_visibility.text = text
-                        tab_view.closeButtonVisibility = FluTabViewType.Always
-                    }
-                }
-                FluMenuItem{
-                    text:"OnHover"
-                    onClicked: {
-                        btn_close_button_visibility.text = text
-                        tab_view.closeButtonVisibility = FluTabViewType.OnHover
-                    }
-                }
-            }
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 15
-        height: 400
-        paddings: 10
-        FluTabView{
-            id:tab_view
-            onNewPressed:{
-                newTab()
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluTabView{
-    anchors.fill: parent
-    Component.onCompleted: {
-        newTab()
-        newTab()
-        newTab()
-    }
-    Component{
-        id:com_page
-        Rectangle{
-            anchors.fill: parent
-            color: argument
-        }
-    }
-    function newTab(){
-        tab_view.appendTab("qrc:/example/res/image/favicon.ico","Document 1",com_page,argument)
-    }
-}
-'
-    }
-
-}

example/qml-Qt6/page/T_TableView.qml

@@ -1,171 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluContentPage{
-
-    title:"TableView"
-
-    Component.onCompleted: {
-        loadData(1,1000)
-    }
-
-    Component{
-        id:com_action
-        Item{
-            RowLayout{
-                anchors.centerIn: parent
-                FluButton{
-                    text:"删除"
-                    onClicked: {
-                        table_view.closeEditor()
-                        tableModel.removeRow(row)
-                    }
-                }
-                FluFilledButton{
-                    text:"编辑"
-                    onClicked: {
-                        showSuccess(JSON.stringify(tableModel.getRow(row)))
-                    }
-                }
-            }
-        }
-    }
-
-    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];
-        }
-        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{
-        id:com_combobox
-        FluComboBox {
-            anchors.fill: parent
-            focus: true
-            currentIndex: display
-            editable: true
-            model: ListModel {
-                ListElement { text: 100 }
-                ListElement { text: 300 }
-                ListElement { text: 500 }
-                ListElement { text: 1000 }
-            }
-            Component.onCompleted: {
-                currentIndex=[100,300,500,1000].findIndex((element) => element === Number(display))
-                selectAll()
-            }
-            onCommit: {
-                display = editText
-                tableView.closeEditor()
-            }
-        }
-    }
-
-    FluTableView{
-        id:table_view
-        anchors{
-            left: parent.left
-            right: parent.right
-            top: parent.top
-            bottom: gagination.top
-        }
-        anchors.topMargin: 20
-        columnSource:[
-            {
-                title: '姓名',
-                dataIndex: 'name',
-                readOnly:true,
-            },
-            {
-                title: '年龄',
-                dataIndex: 'age',
-                editDelegate:com_combobox,
-                width:100,
-                minimumWidth:100,
-                maximumWidth:100
-            },
-            {
-                title: '住址',
-                dataIndex: 'address',
-                width:200,
-                minimumWidth:100,
-                maximumWidth:250
-            },
-            {
-                title: '别名',
-                dataIndex: 'nickname',
-                width:100,
-                minimumWidth:80,
-                maximumWidth:200
-            },
-            {
-                title: '长字符串',
-                dataIndex: 'longstring',
-                width:200,
-                minimumWidth:100,
-                maximumWidth:300
-            },
-            {
-                title: '操作',
-                dataIndex: 'action',
-                width:160,
-                minimumWidth:160,
-                maximumWidth:160
-            }
-        ]
-    }
-
-    FluPagination{
-        id:gagination
-        anchors{
-            bottom: parent.bottom
-            left: parent.left
-        }
-        pageCurrent: 1
-        itemCount: 100000
-        pageButtonCount: 7
-        __itemPerPage: 1000
-        onRequestPage:
-            (page,count)=> {
-                table_view.closeEditor()
-                loadData(page,count)
-                table_view.resetPosition()
-            }
-    }
-
-
-
-}

example/qml-Qt6/page/T_Text.qml

@@ -1,32 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"Text"
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 60
-        paddings: 10
-
-        FluCopyableText{
-            text: "这是一个可以支持复制的Text"
-            anchors.verticalCenter: parent.verticalCenter
-        }
-
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluCopyableText{
-    text:"这是一个可以支持复制的Text"
-}'
-    }
-
-}

example/qml-Qt6/page/T_TextBox.qml

@@ -1,191 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    launchMode: FluPageType.SingleInstance
-
-    title:"TextBox"
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-
-        FluTextBox{
-            placeholderText: "单行输入框"
-            disabled:text_box_switch.checked
-            cleanEnabled: true
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-
-        FluToggleSwitch{
-            id:text_box_switch
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
-            text:"Disabled"
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluTextBox{
-    placeholderText:"单行输入框"
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-
-        FluPasswordBox{
-            placeholderText: "请输入密码"
-            disabled:password_box_switch.checked
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-        FluToggleSwitch{
-            id:password_box_switch
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
-            text:"Disabled"
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluPasswordBox{
-    placeholderText:"请输入密码"
-}'
-    }
-
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 36+multiine_textbox.height
-        paddings: 10
-        Layout.topMargin: 20
-
-        FluMultilineTextBox{
-            id:multiine_textbox
-            placeholderText: "多行输入框"
-            disabled:text_box_multi_switch.checked
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-
-        FluToggleSwitch{
-            id:text_box_multi_switch
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
-            text:"Disabled"
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluMultilineTextBox{
-    placeholderText:"多行输入框"
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-        FluAutoSuggestBox{
-            placeholderText: "AutoSuggestBox"
-            items:generateRandomNames(100)
-            disabled:text_box_suggest_switch.checked
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-        FluToggleSwitch{
-            id:text_box_suggest_switch
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
-            text:"Disabled"
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluAutoSuggestBox{
-    placeholderText:"AutoSuggestBox"
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-        FluSpinBox{
-            disabled: spin_box_switch.checked
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-        FluToggleSwitch{
-            id:spin_box_switch
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
-            text:"Disabled"
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluSpinBox{
-
-}'
-    }
-
-    function generateRandomNames(numNames) {
-        const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-        const names = [];
-        function generateRandomName() {
-            const nameLength = Math.floor(Math.random() * 5) + 4;
-            let name = '';
-            for (let i = 0; i < nameLength; i++) {
-                const letterIndex = Math.floor(Math.random() * 26);
-                name += alphabet.charAt(letterIndex);
-            }
-            return name;
-        }
-        for (let i = 0; i < numNames; i++) {
-            const name = generateRandomName();
-            names.push({title:name});
-        }
-        return names;
-    }
-
-
-}

example/qml-Qt6/page/T_Theme.qml

@@ -1,99 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"Theme"
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 270
-        paddings: 10
-        ColumnLayout{
-            spacing:0
-            anchors{
-                left: parent.left
-            }
-            RowLayout{
-                Layout.topMargin: 10
-                Repeater{
-                    model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
-                    delegate:  FluRectangle{
-                        width: 42
-                        height: 42
-                        radius: [4,4,4,4]
-                        color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
-                        FluIcon {
-                            anchors.centerIn: parent
-                            iconSource: FluentIcons.AcceptMedium
-                            iconSize: 15
-                            visible: modelData === FluTheme.primaryColor
-                            color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
-                        }
-                        MouseArea{
-                            id:mouse_item
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            onClicked: {
-                                FluTheme.primaryColor = modelData
-                            }
-                        }
-                    }
-                }
-            }
-            FluText{
-                text:"夜间模式"
-                Layout.topMargin: 20
-            }
-            FluToggleSwitch{
-                Layout.topMargin: 5
-                checked: FluTheme.dark
-                onClicked: {
-                    if(FluTheme.dark){
-                        FluTheme.darkMode = FluThemeType.Light
-                    }else{
-                        FluTheme.darkMode = FluThemeType.Dark
-                    }
-                }
-            }
-            FluText{
-                text:"native文本渲染"
-                Layout.topMargin: 20
-            }
-            FluToggleSwitch{
-                Layout.topMargin: 5
-                checked: FluTheme.nativeText
-                onClicked: {
-                    FluTheme.nativeText = !FluTheme.nativeText
-                }
-            }
-            FluText{
-                text:"开启动画效果"
-                Layout.topMargin: 20
-            }
-            FluToggleSwitch{
-                Layout.topMargin: 5
-                checked: FluTheme.enableAnimation
-                onClicked: {
-                    FluTheme.enableAnimation = !FluTheme.enableAnimation
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluTheme.primaryColor = FluColors.Orange
-
-FluTheme.dark = true
-
-FluTheme.nativeText = true'
-    }
-
-
-}

example/qml-Qt6/page/T_TimePicker.qml

@@ -1,80 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"TimePicker"
-    launchMode: FluPageType.SingleInstance
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
-
-        ColumnLayout{
-
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-
-            FluText{
-                text:"hourFormat=FluTimePickerType.H"
-            }
-
-            FluTimePicker{
-                current: new Date()
-                onAccepted: {
-                    showSuccess(current.toLocaleTimeString(Qt.locale("de_DE")))
-                }
-            }
-
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluTimePicker{
-
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
-
-        ColumnLayout{
-
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-
-            FluText{
-                text:"hourFormat=FluTimePickerType.HH"
-            }
-
-            FluTimePicker{
-                hourFormat:FluTimePickerType.HH
-                onAccepted: {
-                    showSuccess(current.toLocaleTimeString(Qt.locale("de_DE")))
-                }
-            }
-
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluTimePicker{
-    hourFormat:FluTimePickerType.HH
-}'
-    }
-
-}

example/qml-Qt6/page/T_Timeline.qml

@@ -1,170 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"Timeline"
-
-    Component{
-        id:com_dot
-        Rectangle{
-            width: 16
-            height: 16
-            radius: 8
-            border.width: 4
-            border.color: FluTheme.dark ? FluColors.Teal.lighter : FluColors.Teal.dark
-        }
-    }
-
-    Component{
-        id:com_lable
-        FluText{
-            wrapMode: Text.WrapAnywhere
-            font.bold: true
-            horizontalAlignment: isRight ? Qt.AlignRight : Qt.AlignLeft
-            text: modelData.lable
-            color: FluTheme.dark ? FluColors.Teal.lighter : FluColors.Teal.dark
-            MouseArea{
-                anchors.fill: parent
-                cursorShape: Qt.PointingHandCursor
-                onClicked: {
-                    showSuccess(modelData.lable)
-                }
-            }
-        }
-    }
-
-    Component{
-        id:com_text
-        FluText{
-            wrapMode: Text.WrapAnywhere
-            horizontalAlignment: isRight ? Qt.AlignRight : Qt.AlignLeft
-            text: modelData.text
-            font.bold: true
-            linkColor: FluTheme.dark ? FluColors.Teal.lighter : FluColors.Teal.dark
-            onLinkActivated:
-                (link)=> {
-                    Qt.openUrlExternally(link)
-                }
-            onLinkHovered:
-                (link)=> {
-                    if(link === ""){
-                        FluTools.restoreOverrideCursor()
-                    }else{
-                        FluTools.setOverrideCursor(Qt.PointingHandCursor)
-                    }
-                }
-        }
-    }
-
-    ListModel{
-        id:list_model
-        ListElement{
-            lable:"2013-09-01"
-            text:'&nbsp;<img src="qrc:/example/res/image/image_1.jpg" align="top" width="144" height="102.4">&nbsp;考上中国皮城大学，杰斯武器工坊专业'
-        }
-        ListElement{
-            lable:"2017-07-01"
-            text:"大学毕业，在寝室打了4年LOL，没想到毕业还要找工作，瞬间蒙蔽，害"
-        }
-        ListElement{
-            lable:"2017-09-01"
-            text:"开始找工作，毕业即失业！回农村老家躺平，继承三亩良田"
-        }
-        ListElement{
-            lable:"2018-02-01"
-            text:"玩了一年没钱，惨，出去找工作上班"
-        }
-        ListElement{
-            lable:"2018-03-01"
-            text:"找到一份Android外包开发岗位，开发了一个Android应用，满满成就感！前端、服务端、Flutter也都懂一丢丢，什么都会什么都不精通，钱途无望"
-        }
-        ListElement{
-            lable:"2020-06-01"
-            text:"由于某个项目紧急，临时加入Qt项目组（就因为大学学了点C++），本来是想进去打个酱油，到后面竟然成开发主力，坑啊"
-        }
-        ListElement{
-            lable:"2022-08-01"
-            text:"额，被老板卖到甲方公司，走时老板还问我想不想去，我说：'哪里工资高就去哪里'，老板：'无语'"
-        }
-        ListElement{
-            lable:"2023-02-28"
-            text:"开发FluentUI组件库"
-        }
-        ListElement{
-            lable:"2023-03-28"
-            text:'将FluentUI源码开源到<a href="https://github.com/zhuzichu520/FluentUI">github</a>，并发布视频到<a href="https://www.bilibili.com/video/BV1mg4y1M71w">B站</a>'
-            lableDelegate:()=>com_lable
-            textDelegate:()=>com_text
-            dot:()=>com_dot
-        }
-    }
-
-    RowLayout{
-        spacing: 20
-        Layout.topMargin: 20
-        FluTextBox{
-            id:text_box
-            text:"Technical testing 2015-09-01"
-        }
-        FluFilledButton{
-            text:"Append"
-            onClicked: {
-                list_model.append({text:text_box.text})
-            }
-        }
-        FluFilledButton{
-            text:"clear"
-            onClicked: {
-                list_model.clear()
-            }
-        }
-    }
-
-    RowLayout{
-        Layout.topMargin: 10
-        FluText{
-            text:"mode:"
-        }
-        FluDropDownButton{
-            id:btn_mode
-            Layout.preferredWidth: 100
-            text:"Alternate"
-            FluMenuItem{
-                text:"Left"
-                onClicked: {
-                    btn_mode.text = text
-                    time_line.mode = FluTimelineType.Left
-                }
-            }
-            FluMenuItem{
-                text:"Right"
-                onClicked: {
-                    btn_mode.text = text
-                    time_line.mode = FluTimelineType.Right
-                }
-            }
-            FluMenuItem{
-                text:"Alternate"
-                onClicked: {
-                    btn_mode.text = text
-                    time_line.mode = FluTimelineType.Alternate
-                }
-            }
-        }
-    }
-
-    FluTimeline{
-        id:time_line
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        Layout.bottomMargin: 20
-        mode: FluTimelineType.Alternate
-        model:list_model
-    }
-
-}

example/qml-Qt6/page/T_ToggleSwitch.qml

@@ -1,51 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"ToggleSwitch"
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-        Row{
-            spacing: 30
-            anchors.verticalCenter: parent.verticalCenter
-            FluToggleSwitch{
-                disabled: toggle_switch.checked
-            }
-            FluToggleSwitch{
-                disabled: toggle_switch.checked
-                text:"Right"
-            }
-            FluToggleSwitch{
-                disabled: toggle_switch.checked
-                text:"Left"
-                textRight: false
-            }
-        }
-        FluToggleSwitch{
-            id:toggle_switch
-            anchors{
-                right: parent.right
-                verticalCenter: parent.verticalCenter
-            }
-            text:"Disabled"
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluToggleSwitch{
-    text:"Text"
-}'
-    }
-
-
-}

example/qml-Qt6/page/T_Tooltip.qml

@@ -1,103 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"Tooltip"
-
-    FluText{
-        Layout.topMargin: 20
-        text:"鼠标悬停不动，弹出Tooltip"
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 68
-        paddings: 10
-
-        Column{
-            spacing: 5
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluText{
-                text:"FluIconButton的text属性自带Tooltip效果"
-            }
-            FluIconButton{
-                iconSource:FluentIcons.ChromeCloseContrast
-                iconSize: 15
-                text:"删除"
-                onClicked:{
-                    showSuccess("点击IconButton")
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluIconButton{
-    iconSource:FluentIcons.ChromeCloseContrast
-    iconSize: 15
-    text:"删除"
-    onClicked:{
-        showSuccess("点击IconButton")
-    }
-}
-'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 68
-        paddings: 10
-
-        Column{
-            spacing: 5
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluText{
-                text:"给一个Button添加Tooltip效果"
-            }
-            FluButton{
-                id:button_1
-                text:"删除"
-                onClicked:{
-                    showSuccess("点击一个Button")
-                }
-                FluTooltip{
-                    visible: button_1.hovered
-                    text:button_1.text
-                    delay: 1000
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluButton{
-    id:button_1
-    text:"删除"
-    FluTooltip{
-        visible: button_1.hovered
-        text:button_1.text
-        delay: 1000
-    }
-    onClicked:{
-        showSuccess("点击一个Button")
-    }
-}'
-    }
-
-
-}

example/qml-Qt6/page/T_Tour.qml

@@ -1,80 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"Tour"
-
-    FluTour{
-        id:tour
-        steps:[
-            {title:"Upload File",description: "Put your files here.",target:()=>btn_upload},
-            {title:"Save",description: "Save your changes.",target:()=>btn_save},
-            {title:"Other Actions",description: "Click to see other actions.",target:()=>btn_more}
-        ]
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 130
-        paddings: 10
-        Layout.topMargin: 20
-
-        FluFilledButton{
-            anchors{
-                top: parent.top
-                topMargin: 14
-            }
-            text:"Begin Tour"
-            onClicked: {
-                tour.open()
-            }
-        }
-
-        Row{
-            spacing: 20
-            anchors{
-                top: parent.top
-                topMargin: 60
-            }
-            FluButton{
-                id:btn_upload
-                text:"Upload"
-                onClicked: {
-                    showInfo("Upload")
-                }
-            }
-            FluFilledButton{
-                id:btn_save
-                text:"Save"
-                onClicked: {
-                    showInfo("Save")
-                }
-            }
-            FluIconButton{
-                id:btn_more
-                iconSource: FluentIcons.More
-                onClicked: {
-                    showInfo("More")
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluTour{
-    id:tour
-    steps:[
-        {title:"Upload File",description: "Put your files here.",target:()=>btn_upload},
-        {title:"Save",description: "Save your changes.",target:()=>btn_save},
-        {title:"Other Actions",description: "Click to see other actions.",target:()=>btn_more}
-    ]
-}'
-    }
-
-}

example/qml-Qt6/page/T_TreeView.qml

@@ -1,156 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage {
-
-    title:"TreeView"
-
-    function randomName() {
-        var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]
-        return names[Math.floor(Math.random() * names.length)]
-    }
-
-    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())
-        }
-        return tree_view.createItem(randomDepartment(), true, employees)
-    }
-
-    function createOrg(numLevels, numSubtrees, numEmployees) {
-        if (numLevels === 0) {
-            return []
-        }
-        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
-                    }
-                }
-            }
-            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(","))
-                    }
-                }
-            }
-        }
-    }
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 10
-        paddings: 10
-        height: 400
-        FluTreeView{
-            id:tree_view
-            width:240
-            anchors{
-                top:parent.top
-                left:parent.left
-                bottom:parent.bottom
-            }
-            onItemClicked:
-                (model)=>{
-                    showSuccess(model.text)
-                }
-
-            Component.onCompleted: {
-                var org = createOrg(3, 3, 3)
-                createItem()
-                updateData(org)
-            }
-        }
-    }
-
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluTreeView{
-    id:tree_view
-    width:240
-    height:600
-    Component.onCompleted: {
-        var datas = []
-        datas.push(createItem("Node1",false))
-        datas.push(createItem("Node2",false))
-        datas.push(createItem("Node2",true,[createItem("Node2-1",false),createItem("Node2-2",false)]))
-        updateData(datas)
-    }
-}
-'
-    }
-
-
-}

example/qml-Qt6/page/T_Typography.qml

@@ -1,84 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Controls
-import FluentUI
-
-FluContentPage {
-
-    property real textScale: 1
-
-    title: "Typography"
-    rightPadding: 10
-
-    FluArea{
-        anchors{
-            top:parent.top
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-            topMargin: 20
-        }
-        paddings: 10
-        ColumnLayout{
-            spacing: 0
-            scale: textScale
-            transformOrigin: Item.TopLeft
-            FluText{
-                id:text_Display
-                text:"Display"
-                padding: 0
-                font: FluTextStyle.Display
-            }
-            FluText{
-                id:text_TitleLarge
-                text:"Title Large"
-                padding: 0
-                font: FluTextStyle.TitleLarge
-            }
-            FluText{
-                id:text_Title
-                text:"Title"
-                padding: 0
-                font: FluTextStyle.Title
-            }
-            FluText{
-                id:text_Subtitle
-                text:"Subtitle"
-                padding: 0
-                font: FluTextStyle.Subtitle
-            }
-            FluText{
-                id:text_BodyStrong
-                text:"Body Strong"
-                padding: 0
-                font: FluTextStyle.BodyStrong
-            }
-            FluText{
-                id:text_Body
-                text:"Body"
-                padding: 0
-                font: FluTextStyle.Body
-            }
-            FluText{
-                id:text_Caption
-                text:"Caption"
-                padding: 0
-                font: FluTextStyle.Caption
-            }
-        }
-
-        FluSlider{
-            id:slider
-            orientation: Qt.Vertical
-            anchors{
-                right: parent.right
-                rightMargin: 45
-                top: parent.top
-                topMargin: 30
-            }
-            onValueChanged:{
-                textScale = 1+value/100
-            }
-        }
-    }
-}

example/qml-Qt6/page/T_Watermark.qml

@@ -1,132 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluContentPage{
-
-    title:"Watermark"
-
-    FluArea{
-        anchors.fill: parent
-        anchors.topMargin: 20
-
-        ColumnLayout{
-            anchors{
-                left: parent.left
-                leftMargin: 14
-            }
-
-            RowLayout{
-                spacing: 10
-                Layout.topMargin: 14
-                FluText{
-                    text:"text:"
-                    Layout.alignment: Qt.AlignVCenter
-                }
-                FluTextBox{
-                    id:text_box
-                    text:"会磨刀的小猪"
-                }
-            }
-
-            RowLayout{
-                spacing: 10
-                FluText{
-                    text:"textSize:"
-                    Layout.alignment: Qt.AlignVCenter
-                }
-                FluSlider{
-                    id:slider_text_size
-                    value: 20
-                    from: 13
-                    to:50
-                }
-            }
-            RowLayout{
-                spacing: 10
-                FluText{
-                    text:"gapX:"
-                    Layout.alignment: Qt.AlignVCenter
-                }
-                FluSlider{
-                    id:slider_gap_x
-                    value: 100
-                }
-            }
-            RowLayout{
-                spacing: 10
-                FluText{
-                    text:"gapY:"
-                    Layout.alignment: Qt.AlignVCenter
-                }
-                FluSlider{
-                    id:slider_gap_y
-                    value: 100
-                }
-            }
-            RowLayout{
-                spacing: 10
-                FluText{
-                    text:"offsetX:"
-                    Layout.alignment: Qt.AlignVCenter
-                }
-                FluSlider{
-                    id:slider_offset_x
-                    value: 50
-                }
-            }
-            RowLayout{
-                spacing: 10
-                FluText{
-                    text:"offsetY:"
-                    Layout.alignment: Qt.AlignVCenter
-                }
-                FluSlider{
-                    id:slider_offset_y
-                    value: 50
-                }
-            }
-            RowLayout{
-                spacing: 10
-                FluText{
-                    text:"rotate:"
-                    Layout.alignment: Qt.AlignVCenter
-                }
-                FluSlider{
-                    id:slider_rotate
-                    value: 22
-                    from: 0
-                    to:360
-                }
-            }
-            RowLayout{
-                spacing: 10
-                FluText{
-                    text:"textColor:"
-                    Layout.alignment: Qt.AlignVCenter
-                }
-                FluColorPicker{
-                    id:color_picker
-                    Component.onCompleted: {
-                        setColor(Qt.rgba(0,0,0,0.1))
-                    }
-                }
-            }
-        }
-
-        FluWatermark{
-            id:water_mark
-            anchors.fill: parent
-            text:text_box.text
-            textColor: color_picker.colorValue
-            textSize: slider_text_size.value
-            rotate: slider_rotate.value
-            gap:Qt.point(slider_gap_x.value,slider_gap_y.value)
-            offset: Qt.point(slider_offset_x.value,slider_offset_y.value)
-        }
-    }
-
-}

example/qml-Qt6/window/AboutWindow.qml

@@ -1,150 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import FluentUI
-import "qrc:///example/qml/component"
-
-CustomWindow {
-
-    id:window
-    title:"关于"
-    width: 600
-    height: 600
-    fixSize: true
-    launchMode: FluWindowType.SingleTask
-
-    ColumnLayout{
-        anchors{
-            top: parent.top
-            left: parent.left
-            right: parent.right
-        }
-
-        RowLayout{
-            Layout.topMargin: 20
-            Layout.leftMargin: 15
-            spacing: 14
-            FluText{
-                text:"FluentUI"
-                font: FluTextStyle.Title
-                MouseArea{
-                    anchors.fill: parent
-                    onClicked: {
-                        FluApp.navigate("/")
-                    }
-                }
-            }
-            FluText{
-                text:"v%1".arg(appInfo.version)
-                font: FluTextStyle.Body
-                Layout.alignment: Qt.AlignBottom
-            }
-        }
-
-        RowLayout{
-            spacing: 14
-            Layout.topMargin: 20
-            Layout.leftMargin: 15
-            FluText{
-                text:"作者："
-            }
-            FluText{
-                text:"朱子楚"
-                Layout.alignment: Qt.AlignBottom
-            }
-        }
-
-        RowLayout{
-            spacing: 14
-            Layout.leftMargin: 15
-            FluText{
-                text:"GitHub："
-            }
-            FluTextButton{
-                id:text_hublink
-                topPadding:0
-                bottomPadding:0
-                text:"https://github.com/zhuzichu520/FluentUI"
-                Layout.alignment: Qt.AlignBottom
-                onClicked: {
-                    Qt.openUrlExternally(text_hublink.text)
-                }
-            }
-        }
-
-        RowLayout{
-            spacing: 14
-            Layout.leftMargin: 15
-            FluText{
-                text:"B站："
-            }
-            FluTextButton{
-                topPadding:0
-                bottomPadding:0
-                text:"https://www.bilibili.com/video/BV1mg4y1M71w/"
-                Layout.alignment: Qt.AlignBottom
-                onClicked: {
-                    Qt.openUrlExternally(text)
-                }
-            }
-        }
-
-        RowLayout{
-            spacing: 14
-            Layout.leftMargin: 15
-            FluText{
-                id:text_info
-                text:"如果该项目对你有作用，就请点击上方链接给一个免费的star，或者一键三连，谢谢！"
-                ColorAnimation {
-                    id: animation
-                    target: text_info
-                    property: "color"
-                    from: "red"
-                    to: "blue"
-                    duration: 1000
-                    running: true
-                    loops: Animation.Infinite
-                    easing.type: Easing.InOutQuad
-                }
-            }
-        }
-
-        RowLayout{
-            spacing: 14
-            Layout.topMargin: 20
-            Layout.leftMargin: 15
-            FluText{
-                text:"捐赠："
-            }
-        }
-
-        Item{
-            Layout.preferredWidth: parent.width
-            Layout.preferredHeight: 252
-            Row{
-                anchors.horizontalCenter: parent.horizontalCenter
-                spacing: 30
-                Image{
-                    width: 250
-                    height: 250
-                    source: "qrc:/example/res/image/qrcode_wx.jpg"
-                }
-                Image{
-                    width: 250
-                    height: 250
-                    source: "qrc:/example/res/image/qrcode_zfb.jpg"
-                }
-            }
-        }
-
-        RowLayout{
-            spacing: 14
-            Layout.leftMargin: 15
-            Layout.topMargin: 20
-            FluText{
-                id:text_desc
-                text:"个人开发，维护不易，你们的捐赠就是我继续更新的动力！\n有什么问题提Issues，只要时间充足我就会解决的！！"
-            }
-        }
-    }
-}

example/qml-Qt6/window/HotloadWindow.qml

@@ -1,85 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import FluentUI
-import example
-import "qrc:///example/qml/component"
-
-CustomWindow {
-
-    id:window
-    title:"热加载"
-    width: 800
-    height: 600
-    minimumWidth: 520
-    minimumHeight: 200
-    launchMode: FluWindowType.SingleTask
-    FileWatcher{
-        id:watcher
-        onFileChanged: {
-            loader.reload()
-        }
-    }
-    FluArea{
-        anchors.fill: parent
-        FluRemoteLoader{
-            id:loader
-            anchors.fill: parent
-            statusMode: FluStatusViewType.Success
-            lazy: true
-            errorItem: Item{
-                FluText{
-                    text:loader.itemLodaer().sourceComponent.errorString()
-                    color:"red"
-                    anchors.fill: parent
-                    wrapMode: Text.WrapAnywhere
-                    padding: 20
-                    verticalAlignment: Qt.AlignVCenter
-                    horizontalAlignment: Qt.AlignHCenter
-                }
-            }
-        }
-        FluText{
-            text:"拖入qml文件"
-            font.pixelSize: 26
-            anchors.centerIn: parent
-            visible: !loader.itemLodaer().item && loader.statusMode === FluStatusViewType.Success
-        }
-        Rectangle{
-            radius: 4
-            anchors.fill: parent
-            color: "#33333333"
-            visible: drop_area.containsDrag
-        }
-        DropArea{
-            id:drop_area
-            anchors.fill: parent
-            onEntered:
-                (event)=>{
-                    if(!event.hasUrls){
-                        event.accepted = false
-                        return
-                    }
-                    if (event.urls.length !== 1) {
-                        event.accepted = false
-                        return
-                    }
-                    var url = event.urls[0].toString()
-                    var fileExtension = url.substring(url.lastIndexOf(".") + 1)
-                    if (fileExtension !== "qml") {
-                        event.accepted = false
-                        return
-                    }
-                    return true
-                }
-            onDropped:
-                (event)=>{
-                    var path = event.urls[0].toString()
-                    loader.source = path
-                    watcher.path = path
-                    loader.reload()
-                }
-        }
-    }
-
-}

example/qml-Qt6/window/LoginWindow.qml

@@ -1,63 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
-
-CustomWindow {
-
-    id:window
-    title:"登录"
-    width: 400
-    height: 400
-    fixSize: true
-
-    onInitArgument:
-        (argument)=>{
-            textbox_uesrname.updateText(argument.username)
-            textbox_password.focus =  true
-        }
-
-    ColumnLayout{
-        anchors{
-            left: parent.left
-            right: parent.right
-            verticalCenter: parent.verticalCenter
-        }
-
-        FluAutoSuggestBox{
-            id:textbox_uesrname
-            items:[{title:"Admin"},{title:"User"}]
-            placeholderText: "请输入账号"
-            Layout.preferredWidth: 260
-            Layout.alignment: Qt.AlignHCenter
-        }
-
-        FluTextBox{
-            id:textbox_password
-            Layout.topMargin: 20
-            Layout.preferredWidth: 260
-            placeholderText: "请输入密码"
-            echoMode:TextInput.Password
-            Layout.alignment: Qt.AlignHCenter
-        }
-
-        FluFilledButton{
-            text:"登录"
-            Layout.alignment: Qt.AlignHCenter
-            Layout.topMargin: 20
-            onClicked:{
-                if(textbox_password.text === ""){
-                    showError("请随便输入一个密码")
-                    return
-                }
-                onResult({password:textbox_password.text})
-                window.close()
-            }
-        }
-
-    }
-
-
-
-}

example/qml-Qt6/window/MainWindow.qml

@@ -1,336 +0,0 @@
-import QtQuick
-import QtQuick.Window
-import QtQuick.Controls
-import QtQuick.Layouts
-import Qt.labs.platform
-import FluentUI
-import example
-import "qrc:///example/qml/component"
-import "qrc:///example/qml/global"
-
-CustomWindow {
-
-    id:window
-    title: "FluentUI"
-    width: 1000
-    height: 640
-    closeDestory:false
-    minimumWidth: 520
-    minimumHeight: 200
-    appBarVisible: false
-    launchMode: FluWindowType.SingleTask
-
-    closeFunc:function(event){
-        dialog_close.open()
-        event.accepted = false
-    }
-
-    Component.onCompleted: {
-        FluTools.setQuitOnLastWindowClosed(false)
-        tour.open()
-        checkUpdate()
-    }
-
-    SystemTrayIcon {
-        id:system_tray
-        visible: true
-        icon.source: "qrc:/example/res/image/favicon.ico"
-        tooltip: "FluentUI"
-        menu: Menu {
-            MenuItem {
-                text: "退出"
-                onTriggered: {
-                    window.deleteWindow()
-                    FluApp.closeApp()
-                }
-            }
-        }
-        onActivated:
-            (reason)=>{
-                if(reason === SystemTrayIcon.Trigger){
-                    window.show()
-                    window.raise()
-                    window.requestActivate()
-                }
-            }
-    }
-
-    FluContentDialog{
-        id:dialog_close
-        title:"退出"
-        message:"确定要退出程序吗？"
-        negativeText:"最小化"
-        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.NeutralButton | FluContentDialogType.PositiveButton
-        onNegativeClicked:{
-            window.hide()
-            system_tray.showMessage("友情提示","FluentUI已隐藏至托盘,点击托盘可再次激活窗口");
-        }
-        positiveText:"退出"
-        neutralText:"取消"
-        onPositiveClicked:{
-            window.deleteWindow()
-            FluApp.closeApp()
-        }
-    }
-
-    Flipable{
-        id:flipable
-        anchors.fill: parent
-        property bool flipped: false
-        property real flipAngle: 0
-        transform: Rotation {
-            id: rotation
-            origin.x: flipable.width/2
-            origin.y: flipable.height/2
-            axis { x: 0; y: 1; z: 0 }
-            angle: flipable.flipAngle
-
-        }
-        states: State {
-            PropertyChanges { target: flipable; flipAngle: 180 }
-            when: flipable.flipped
-        }
-        transitions: Transition {
-            NumberAnimation { target: flipable; property: "flipAngle"; duration: 1000 ; easing.type: Easing.OutCubic}
-        }
-        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{
-                z:8
-                anchors{
-                    top: parent.top
-                    left: parent.left
-                    topMargin: FluTools.isMacos() ? 20 : 5
-                    leftMargin: 5
-                }
-                FluIconButton{
-                    iconSource: FluentIcons.ChromeBack
-                    width: 30
-                    height: 30
-                    iconSize: 13
-                    onClicked: {
-                        flipable.flipped = false
-                    }
-                }
-                FluIconButton{
-                    iconSource: FluentIcons.Sync
-                    width: 30
-                    height: 30
-                    iconSize: 13
-                    onClicked: {
-                        loader.reload()
-                    }
-                }
-            }
-            FluRemoteLoader{
-                id:loader
-                lazy: true
-                anchors.fill: parent
-                source: "https://zhu-zichu.gitee.io/Qt6_155_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
-                width: parent.width
-                height: parent.height
-                z:999
-                //Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式
-                pageMode: FluNavigationViewType.Stack
-                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存（推荐）
-                //                pageMode: FluNavigationViewType.NoStack
-                items: ItemsOriginal
-                footerItems:ItemsFooter
-                topPadding:FluTools.isMacos() ? 20 : 0
-                displayMode:MainEvent.displayMode
-                logo: "qrc:/example/res/image/favicon.ico"
-                title:"FluentUI"
-                onLogoClicked:{
-                    clickCount += 1
-                    showSuccess("点击%1次".arg(clickCount))
-                    if(clickCount === 5){
-                        loader.reload()
-                        flipable.flipped = true
-                        clickCount = 0
-                    }
-                }
-                autoSuggestBox:FluAutoSuggestBox{
-                    width: 280
-                    anchors.centerIn: parent
-                    iconSource: FluentIcons.Search
-                    items: ItemsOriginal.getSearchData()
-                    placeholderText: lang.search
-                    onItemClicked:
-                        (data)=>{
-                            ItemsOriginal.startPageByItem(data)
-                        }
-                }
-                Component.onCompleted: {
-                    ItemsOriginal.navigationView = nav_view
-                    ItemsFooter.navigationView = nav_view
-                    setCurrentIndex(0)
-                }
-            }
-        }
-    }
-
-    Component{
-        id:com_reveal
-        CircularReveal{
-            id:reveal
-            target:window.contentItem
-            anchors.fill: parent
-            onAnimationFinished:{
-                //动画结束后释放资源
-                loader_reveal.sourceComponent = undefined
-            }
-            onImageChanged: {
-                changeDark()
-            }
-        }
-    }
-
-    Loader{
-        id:loader_reveal
-        anchors.fill: parent
-    }
-
-    function distance(x1,y1,x2,y2){
-        return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2))
-    }
-
-    function handleDarkChanged(button){
-        if(FluTools.isMacos() || !FluTheme.enableAnimation){
-            changeDark()
-        }else{
-            loader_reveal.sourceComponent = com_reveal
-            var target = window.contentItem
-            var pos = button.mapToItem(target,0,0)
-            var mouseX = pos.x
-            var mouseY = pos.y
-            var radius = Math.max(distance(mouseX,mouseY,0,0),distance(mouseX,mouseY,target.width,0),distance(mouseX,mouseY,0,target.height),distance(mouseX,mouseY,target.width,target.height))
-            var reveal = loader_reveal.item
-            reveal.start(reveal.width*Screen.devicePixelRatio,reveal.height*Screen.devicePixelRatio,Qt.point(mouseX,mouseY),radius)
-        }
-    }
-
-    function changeDark(){
-        if(FluTheme.dark){
-            FluTheme.darkMode = FluThemeType.Light
-        }else{
-            FluTheme.darkMode = FluThemeType.Dark
-        }
-    }
-
-    Shortcut {
-        sequence: "F5"
-        context: Qt.WindowShortcut
-        onActivated: {
-            if(flipable.flipped){
-                loader.reload()
-            }
-        }
-    }
-
-    Shortcut {
-        sequence: "F6"
-        context: Qt.WindowShortcut
-        onActivated: {
-            tour.open()
-        }
-    }
-
-    FluTour{
-        id:tour
-        steps:[
-            {title:"夜间模式",description: "这里可以切换夜间模式.",target:()=>app_bar_front.darkButton()},
-            {title:"隐藏彩蛋",description: "多点几下试试！！",target:()=>nav_view.logoButton()}
-        ]
-    }
-
-    FluHttp{
-        id:http
-    }
-
-    FpsItem{
-        id:fps_item
-    }
-
-    FluText{
-        text:"fps %1".arg(fps_item.fps)
-        opacity: 0.3
-        anchors{
-            bottom: parent.bottom
-            right: parent.right
-            bottomMargin: 5
-            rightMargin: 5
-        }
-    }
-
-    FluContentDialog{
-        property string newVerson
-        property string body
-        id:dialog_update
-        title:"升级提示"
-        message:"FluentUI目前最新版本 "+ newVerson +" -- 当前应用版本 "+appInfo.version+" \n现在是否去下载新版本？\n\n更新内容：\n"+body
-        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
-        negativeText: "取消"
-        positiveText:"确定"
-        onPositiveClicked:{
-            Qt.openUrlExternally("https://github.com/zhuzichu520/FluentUI/releases/latest")
-        }
-    }
-
-    function checkUpdate(){
-        var callable = {}
-        callable.onStart = function(){
-            console.debug("satrt check update...")
-        }
-        callable.onFinish = function(){
-            console.debug("check update finish")
-        }
-        callable.onSuccess = function(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()
-            }
-        }
-        callable.onError = function(status,errorString){
-            console.debug(status+";"+errorString)
-        }
-        http.get("https://api.github.com/repos/zhuzichu520/FluentUI/releases/latest",callable)
-    }
-
-}

example/qml-Qt6/window/PageWindow.qml

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

example/qml-Qt6/window/SingleInstanceWindow.qml

@@ -1,35 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import FluentUI
-import "qrc:///example/qml/component"
-
-CustomWindow {
-
-    id:window
-    title:"SingleInstance"
-    width: 500
-    height: 600
-    fixSize: true
-    launchMode: FluWindowType.SingleInstance
-
-    FluTextBox{
-        anchors{
-            top:parent.top
-            topMargin:60
-            horizontalCenter: parent.horizontalCenter
-        }
-    }
-
-    FluText{
-        wrapMode: Text.WrapAnywhere
-        anchors{
-            left: parent.left
-            right: parent.right
-            leftMargin: 20
-            rightMargin: 20
-            verticalCenter: parent.verticalCenter
-        }
-        text:"我是一个SingleInstance模式的窗口，如果我存在，我会销毁之前的窗口，并创建一个新窗口"
-    }
-}

example/qml-Qt6/window/SingleTaskWindow.qml

@@ -1,21 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import FluentUI
-import "qrc:///example/qml/component"
-
-CustomWindow {
-
-    id:window
-    title:"SingleTask"
-    width: 500
-    height: 600
-    fixSize: true
-    launchMode: FluWindowType.SingleTask
-
-    FluText{
-        anchors.centerIn: parent
-        text:"我是一个SingleTask模式的窗口，如果我存在，我就激活窗口"
-    }
-
-}

example/qml-Qt6/window/StandardWindow.qml

@@ -1,43 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import FluentUI
-import "qrc:///example/qml/component"
-
-CustomWindow {
-
-    id:window
-    title:"Standard"
-    width: 500
-    height: 600
-    fixSize: true
-    launchMode: FluWindowType.Standard
-
-    FluMenuBar {
-        FluMenu {
-            title: qsTr("File")
-            Action { text: qsTr("New...") }
-            Action { text: qsTr("Open...") }
-            Action { text: qsTr("Save") }
-            Action { text: qsTr("Save As...") }
-            FluMenuSeparator { }
-            Action { text: qsTr("Quit") }
-        }
-        FluMenu {
-            title: qsTr("Edit")
-            Action { text: qsTr("Cut") }
-            Action { text: qsTr("Copy") }
-            Action { text: qsTr("Paste") }
-        }
-        FluMenu {
-            title: qsTr("Help")
-            Action { text: qsTr("About") }
-        }
-    }
-
-    FluText{
-        anchors.centerIn: parent
-        text:"我是一个Standard模式的窗口，每次我都会创建一个新的窗口"
-    }
-
-}

example/qml/App.qml

@@ -4,42 +4,122 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import FluentUI 1.0
 
-Window {
+FluLauncher {
     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)
+        }
+    }
+    Connections{
+        target: TranslateHelper
+        function onCurrentChanged(){
+            SettingsHelper.saveLanguage(TranslateHelper.current)
         }
     }
-
     Component.onCompleted: {
-        FluApp.init(app)
-        FluTheme.darkMode = FluThemeType.System
-        FluTheme.enableAnimation = true
-        FluApp.routes = {
+        Network.openLog = false
+        Network.setInterceptor(function(param){
+            param.addHeader("Token","000000000000000000000")
+        })
+        FluApp.init(app,Qt.locale(TranslateHelper.current))
+        FluApp.windowIcon = "qrc:/example/res/image/favicon.ico"
+        FluApp.useSystemAppBar = SettingsHelper.getUseSystemAppBar()
+        FluTheme.darkMode = SettingsHelper.getDarkMode()
+        FluTheme.animationEnabled = true
+        FluRouter.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",
-            "/pageWindow":"qrc:/example/qml/window/PageWindow.qml"
+            "/pageWindow":"qrc:/example/qml/window/PageWindow.qml",
+            "/hotkey":"qrc:/example/qml/window/HotkeyWindow.qml"
+        }
+        var args = Qt.application.arguments
+        if(args.length>=2 && args[1].startsWith("-crashed=")){
+            FluRouter.navigate("/crash",{crashFilePath:args[1].replace("-crashed=","")})
+        }else{
+            FluRouter.navigate("/")
         }
-        FluApp.initialRoute = "/"
-        FluApp.httpInterceptor = interceptor
-        FluApp.run()
     }
+
+    property alias hotkeys: object_hotkey
+    FluObject{
+        id: object_hotkey
+        FluHotkey{
+            name: qsTr("Quit")
+            sequence: "Ctrl+Alt+Q"
+            onActivated: {
+                FluRouter.exit()
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test1")
+            sequence: "Alt+A"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test2")
+            sequence: "Alt+B"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test3")
+            sequence: "Alt+C"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test4")
+            sequence: "Alt+D"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test5")
+            sequence: "Alt+E"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test6")
+            sequence: "Alt+F"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test7")
+            sequence: "Alt+G"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test8")
+            sequence: "Alt+H"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+    }
+
 }

example/qml/chart/T_BarChart.qml

@@ -0,0 +1,132 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Bar Chart")
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 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
+                            }]
+                    }
+                }
+            }
+        }
+    }
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 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/chart/T_BubbleChart.qml

@@ -0,0 +1,74 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Bubble Chart")
+
+    function randomScalingFactor() {
+        return Math.random().toFixed(1);
+    }
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 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/chart/T_LineChart.qml

@@ -0,0 +1,63 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    id: root
+    title: qsTr("Line Chart")
+    property var data : []
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
+        Layout.topMargin: 20
+        FluChart{
+            id: chart
+            anchors.fill: parent
+            chartType: 'line'
+            chartData: { return {
+                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                    datasets: [{
+                            label: 'My First Dataset',
+                            data: root.data,
+                            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
+                    }
+                }
+            }
+        }
+        Timer{
+            id: timer
+            interval: 300
+            repeat: true
+            onTriggered: {
+                root.data.push(Math.random()*100)
+                if(root.data.length>7){
+                    root.data.shift()
+                }
+                chart.animateToNewData()
+            }
+        }
+        Component.onCompleted: {
+            timer.restart()
+        }
+    }
+}

example/qml/chart/T_PieChart.qml

@@ -0,0 +1,93 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Pie Chart")
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 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
+                    }
+                }
+            }
+        }
+    }
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 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/chart/T_PolarAreaChart.qml

@@ -0,0 +1,57 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Polar Area Chart")
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 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/chart/T_RadarChart.qml

@@ -0,0 +1,74 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Radar Chart")
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 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/chart/T_ScatterChart.qml

@@ -0,0 +1,122 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Scatter Chart")
+
+    function randomScalingFactor() {
+        return Math.random().toFixed(1);
+    }
+
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 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/component/CodeExpander.qml

@@ -8,25 +8,20 @@ FluExpander{
 
     id:control
     property string code: ""
-    headerText: "Source"
+    headerText: qsTr("Source")
     contentHeight:content.height
     focus: false
 
-    FluMultilineTextBox{
+    FluCopyableText{
         id:content
         width:parent.width
-        activeFocusOnTab: false
-        activeFocusOnPress: false
-        readOnly: true
         text:highlightQmlCode(code)
         textFormat: FluMultilineTextBox.RichText
-        KeyNavigation.priority: KeyNavigation.BeforeItem
-        background:Rectangle{
-            radius: 4
-            color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
-            border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
-            border.width: 1
-        }
+        padding: 10
+        topPadding: 10
+        leftPadding: 10
+        rightPadding: 10
+        bottomPadding: 10
     }
 
     FluIconButton{
@@ -39,7 +34,7 @@ FluExpander{
         }
         onClicked:{
             FluTools.clipText(FluTools.html2PlantText(content.text))
-            showSuccess("复制成功")
+            showSuccess(qsTr("The Copy is Successful"))
         }
     }
 
@@ -54,7 +49,6 @@ FluExpander{
     }
 
     function highlightQmlCode(code) {
-        // 定义 QML 关键字列表
         var qmlKeywords = [
                     "FluTextButton",
                     "FluAppBar",
@@ -80,7 +74,6 @@ FluExpander{
                     "FluIcon",
                     "FluIconButton",
                     "FluInfoBar",
-                    "FluItem",
                     "FluMediaPlayer",
                     "FluMenu",
                     "FluMenuItem",
@@ -119,7 +112,7 @@ FluExpander{
                     "FluTableView",
                     "FluColors",
                     "FluTheme",
-                    "FluStatusView",
+                    "FluStatusLayout",
                     "FluRatingControl",
                     "FluPasswordBox",
                     "FluBreadcrumbBar",
@@ -131,14 +124,22 @@ FluExpander{
                     "FluRadioButtons",
                     "FluImage",
                     "FluSpinBox",
-                    "FluHttp",
                     "FluWatermark",
                     "FluTour",
                     "FluQRCode",
                     "FluTimeline",
                     "FluChart",
                     "FluRangeSlider",
-                    "FluStaggeredView"
+                    "FluStaggeredLayout",
+                    "FluProgressButton",
+                    "FluLoadingButton",
+                    "FluClip",
+                    "FluNetwork",
+                    "FluShortcutPicker",
+                    "FluWindowResultLauncher",
+                    "FluRouter",
+                    "FluGroupBox",
+                    "FluSheet",
                 ];
         code = code.replace(/\n/g, "<br>");
         code = code.replace(/ /g, "&nbsp;");

example/qml/component/CustomWindow.qml

@@ -1,64 +0,0 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import FluentUI 1.0
-import org.wangwenx190.FramelessHelper 1.0
-
-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/global/GlobalModel.qml

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

example/qml/global/ItemsFooter.qml

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

example/qml/global/ItemsOriginal.qml

@@ -6,6 +6,7 @@ import FluentUI 1.0
 FluObject{
 
     property var navigationView
+    property var paneItemMenu
 
     function rename(item, newName){
         if(newName && newName.trim().length>0){
@@ -16,354 +17,404 @@ FluObject{
     FluPaneItem{
         id:item_home
         count: 9
-        title:lang.home
-        infoBadge:FluBadge{
+        title: qsTr("Home")
+        menuDelegate: paneItemMenu
+        infoBadge: FluBadge{
             count: item_home.count
         }
-        icon:FluentIcons.Home
-        url:"qrc:/example/qml/page/T_Home.qml"
-        onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-        onTap:{
+        icon: FluentIcons.Home
+        url: "qrc:/example/qml/page/T_Home.qml"
+        onTap: {
             if(navigationView.getCurrentUrl()){
                 item_home.count = 0
             }
             navigationView.push(url)
         }
-        editDelegate: FluTextBox{
-            text:item_home.title
-        }
-        menuDelegate: FluMenu{
-            id:nav_item_right_menu
-            width: 120
-            FluMenuItem{
-                text: "重命名"
-                visible: true
-                onClicked: {
-                    item_home.showEdit = true
-                }
-            }
-        }
     }
 
     FluPaneItemExpander{
-        id:item_expander_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
-                }
-            }
-        }
+        title: qsTr("PaneItemExpander Disabled")
+        iconVisible: false
+        disabled: true
+    }
+
+    FluPaneItemExpander{
+        id: item_expander_basic_input
+        title: qsTr("Basic Input")
+        icon: FluentIcons.CheckboxComposite
         FluPaneItem{
-            id:item_buttons
+            id: item_buttons
             count: 99
-            infoBadge:FluBadge{
+            infoBadge: FluBadge{
                 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."
-            url:"qrc:/example/qml/page/T_Buttons.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{
+            title: qsTr("Buttons")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/Button.png",recentlyUpdated:true,desc:qsTr("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(url)
             }
         }
         FluPaneItem{
-            id:item_text
-            title:"Text"
+            id: item_text
+            title: qsTr("Text")
+            menuDelegate: paneItemMenu
             count: 5
-            infoBadge:FluBadge{
+            infoBadge: FluBadge{
                 count: item_text.count
                 color: Qt.rgba(82/255,196/255,26/255,1)
             }
-            url:"qrc:/example/qml/page/T_Text.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Text.qml"
+            onTap: {
+                item_text.count = 0
+                navigationView.push(url)
+            }
         }
         FluPaneItem{
-            title:"Image"
-            url:"qrc:/example/qml/page/T_Image.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("Image")
+            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."
-            url:"qrc:/example/qml/page/T_Slider.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("Slider")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/Slider.png",recentlyUpdated:true,desc:qsTr("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."
-            url:"qrc:/example/qml/page/T_CheckBox.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("CheckBox")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/Checkbox.png",recentlyUpdated:true,desc:qsTr("A control that a user can select or clear.")})
+            url: "qrc:/example/qml/page/T_CheckBox.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"RadioButton"
-            url:"qrc:/example/qml/page/T_RadioButton.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("RadioButton")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_RadioButton.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"ToggleSwitch"
-            url:"qrc:/example/qml/page/T_ToggleSwitch.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("ToggleSwitch")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_ToggleSwitch.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("GroupBox")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_GroupBox.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("PaneItem Disabled")
+            disabled: true
+            icon: FluentIcons.Error
         }
     }
 
     FluPaneItemExpander{
-        title:lang.form
-        icon:FluentIcons.GridView
-        FluPaneItem{
-            title:"TextBox"
-            url:"qrc:/example/qml/page/T_TextBox.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+        title: qsTr("Form")
+        icon: FluentIcons.GridView
+        FluPaneItem {
+            title: qsTr("TextBox")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_TextBox.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"TimePicker"
-            url:"qrc:/example/qml/page/T_TimePicker.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("TimePicker")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_TimePicker.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"DatePicker"
-            url:"qrc:/example/qml/page/T_DatePicker.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("DatePicker")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_DatePicker.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"CalendarPicker"
-            url:"qrc:/example/qml/page/T_CalendarPicker.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("CalendarPicker")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_CalendarPicker.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"ColorPicker"
-            url:"qrc:/example/qml/page/T_ColorPicker.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("ColorPicker")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_ColorPicker.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("ShortcutPicker")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_ShortcutPicker.qml"
+            onTap: { navigationView.push(url) }
         }
     }
 
     FluPaneItemExpander{
-        title:lang.surface
-        icon:FluentIcons.SurfaceHub
+        title: qsTr("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."
-            url:"qrc:/example/qml/page/T_InfoBar.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("InfoBar")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/InfoBar.png",recentlyUpdated:true,desc:qsTr("An inline message to display app-wide statuschange information.")})
+            url: "qrc:/example/qml/page/T_InfoBar.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Progress"
-            url:"qrc:/example/qml/page/T_Progress.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("Progress")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Progress.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"RatingControl"
-            url:"qrc:/example/qml/page/T_RatingControl.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("RatingControl")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_RatingControl.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Badge"
-            url:"qrc:/example/qml/page/T_Badge.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("Badge")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Badge.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Rectangle"
-            url:"qrc:/example/qml/page/T_Rectangle.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("Rectangle")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Rectangle.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"StatusView"
-            url:"qrc:/example/qml/page/T_StatusView.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("Clip")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Clip.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Carousel"
-            url:"qrc:/example/qml/page/T_Carousel.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("Carousel")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Carousel.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Expander"
-            url:"qrc:/example/qml/page/T_Expander.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("Expander")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Expander.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"StaggeredView"
-            url:"qrc:/example/qml/page/T_StaggeredView.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"Watermark"
-            url:"qrc:/example/qml/page/T_Watermark.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("Watermark")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Watermark.qml"
+            onTap: { navigationView.push(url) }
         }
     }
 
     FluPaneItemExpander{
-        title:lang.popus
-        icon:FluentIcons.ButtonMenu
-        FluPaneItem{
-            title:"Dialog"
-            url:"qrc:/example/qml/page/T_Dialog.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+        title: qsTr("Layout")
+        icon: FluentIcons.DockLeft
+        FluPaneItem {
+            title: qsTr("StaggeredLayout")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_StaggeredLayout.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            id:item_combobox
-            title:"ComboBox"
+            title: qsTr("SplitLayout")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_SplitLayout.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("StatusLayout")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_StatusLayout.qml"
+            onTap: { navigationView.push(url) }
+        }
+    }
+
+    FluPaneItemExpander{
+        title: qsTr("Popus")
+        icon: FluentIcons.ButtonMenu
+        FluPaneItem{
+            title: qsTr("Dialog")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Dialog.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            id: item_combobox
+            title: qsTr("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"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{
+            url: "qrc:/example/qml/page/T_ComboBox.qml"
+            onTap: {
                 item_combobox.count = 0
                 navigationView.push("qrc:/example/qml/page/T_ComboBox.qml")
             }
         }
         FluPaneItem{
-            title:"Tooltip"
-            url:"qrc:/example/qml/page/T_Tooltip.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("Tooltip")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Tooltip.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Menu"
-            url:"qrc:/example/qml/page/T_Menu.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("Menu")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Menu.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Sheet")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Sheet.qml"
+            onTap: { navigationView.push(url) }
         }
     }
 
     FluPaneItemExpander{
-        title:lang.navigation
-        icon:FluentIcons.AllApps
+        title: qsTr("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."
-            url:"qrc:/example/qml/page/T_Pivot.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("Pivot")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/Pivot.png",order:3,recentlyAdded:true,desc:qsTr("Presents information from different sources in a tabbed view.")})
+            url: "qrc:/example/qml/page/T_Pivot.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"BreadcrumbBar"
-            url:"qrc:/example/qml/page/T_BreadcrumbBar.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("BreadcrumbBar")
+            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."
-            url:"qrc:/example/qml/page/T_TabView.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("TabView")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/TabView.png",order:1,recentlyAdded:true,desc:qsTr("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"
-            url:"qrc:/example/qml/page/T_TreeView.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("TreeView")
+            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"
-            url:"qrc:/example/qml/page/T_TableView.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("TableView")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/DataGrid.png",order:4,recentlyAdded:true,desc:qsTr("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"
-            url:"qrc:/example/qml/page/T_Pagination.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("Pagination")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Pagination.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"MultiWindow"
-            url:"qrc:/example/qml/page/T_MultiWindow.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("MultiWindow")
+            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."
-            url:"qrc:/example/qml/page/T_FlipView.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("FlipView")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/FlipView.png",order:2,recentlyAdded:true,desc:qsTr("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: qsTr("Theming")
         icon:FluentIcons.Brightness
         FluPaneItem{
-            title:"Acrylic"
-            url:"qrc:/example/qml/page/T_Acrylic.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("Acrylic")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Acrylic.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Theme"
-            url:"qrc:/example/qml/page/T_Theme.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("Theme")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Theme.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Typography"
-            url:"qrc:/example/qml/page/T_Typography.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("Typography")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Typography.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Awesome"
-            url:"qrc:/example/qml/page/T_Awesome.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("Icons")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Icons.qml"
+            onTap: { navigationView.push(url) }
+        }
+    }
+
+    FluPaneItemExpander{
+        title: qsTr("Chart")
+        icon: FluentIcons.AreaChart
+        FluPaneItem{
+            title: qsTr("Bar Chart")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/chart/T_BarChart.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Line Chart")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/chart/T_LineChart.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Pie Chart")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/chart/T_PieChart.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Polar Area Chart")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/chart/T_PolarAreaChart.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Bubble Chart")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/chart/T_BubbleChart.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Scatter Chart")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/chart/T_ScatterChart.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Radar Chart")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/chart/T_RadarChart.qml"
+            onTap: { navigationView.push(url) }
         }
     }
 
@@ -373,91 +424,86 @@ FluObject{
     }
 
     FluPaneItemExpander{
-        title:lang.other
-        icon:FluentIcons.Shop
+        title: qsTr("Other")
+        icon: FluentIcons.Shop
         FluPaneItem{
-            title:"QRCode"
-            url:"qrc:/example/qml/page/T_QRCode.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("OpenGL")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_OpenGL.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Tour"
-            url:"qrc:/example/qml/page/T_Tour.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("QRCode")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_QRCode.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Timeline"
-            url:"qrc:/example/qml/page/T_Timeline.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("Tour")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Tour.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Screenshot"
-            url:"qrc:/example/qml/page/T_Screenshot.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("Timeline")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Timeline.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Captcha"
-            url:"qrc:/example/qml/page/T_Captcha.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("Captcha")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Captcha.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Chart"
-            url:"qrc:/example/qml/page/T_Chart.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
+            title: qsTr("Network")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Network.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Http"
-            url:"qrc:/example/qml/page/T_Http.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            id:item_other
-            title:"RemoteLoader"
+            id: item_other
+            title: qsTr("Remote Loader")
+            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"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
-            onTap:{
+            url: "qrc:/example/qml/page/T_RemoteLoader.qml"
+            onTap: {
                 item_other.count = 0
                 navigationView.push("qrc:/example/qml/page/T_RemoteLoader.qml")
             }
         }
         FluPaneItem{
-            title:"HotLoader"
-            onTapListener:function(){
-                FluApp.navigate("/hotload")
+            title: qsTr("Hot Loader")
+            onTapListener: function(){
+                FluRouter.navigate("/hotload")
+            }
+        }
+        FluPaneItem{
+            title: qsTr("Test Crash")
+            onTapListener: function(){
+                AppInfo.testCrash()
+            }
+            Component.onCompleted: {
+                visible = FluTools.isWin()
             }
-            onDropped:{ FluApp.navigate("/hotload") }
         }
     }
 
     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
     }
 
@@ -466,7 +512,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)
             }
         }
@@ -474,6 +520,9 @@ FluObject{
     }
 
     function getSearchData(){
+        if(!navigationView){
+            return
+        }
         var arr = []
         var items = navigationView.getItems();
         for(var i=0;i<items.length;i++){

example/qml/global/MainEvent.qml

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

example/qml/global/qmldir

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