update version

CMakeLists: simplify code.

.cmake/GetGitRevisionDescription.cmake

@@ -0,0 +1,317 @@
+if(__get_git_revision_description)
+    return()
+endif()
+set(__get_git_revision_description YES)
+
+get_filename_component(_gitdescmoddir ${CMAKE_CURRENT_LIST_FILE} PATH)
+
+function(_git_find_closest_git_dir _start_dir _git_dir_var)
+    set(cur_dir "${_start_dir}")
+    set(git_dir "${_start_dir}/.git")
+    while(NOT EXISTS "${git_dir}")
+        set(git_previous_parent "${cur_dir}")
+        get_filename_component(cur_dir ${cur_dir} DIRECTORY)
+        if(cur_dir STREQUAL git_previous_parent)
+            set(${_git_dir_var}
+                ""
+                PARENT_SCOPE)
+            return()
+        endif()
+        set(git_dir "${cur_dir}/.git")
+    endwhile()
+    set(${_git_dir_var}
+        "${git_dir}"
+        PARENT_SCOPE)
+endfunction()
+
+function(get_git_head_revision _refspecvar _hashvar)
+    _git_find_closest_git_dir("${CMAKE_CURRENT_SOURCE_DIR}" GIT_DIR)
+
+    if("${ARGN}" STREQUAL "ALLOW_LOOKING_ABOVE_CMAKE_SOURCE_DIR")
+        set(ALLOW_LOOKING_ABOVE_CMAKE_SOURCE_DIR TRUE)
+    else()
+        set(ALLOW_LOOKING_ABOVE_CMAKE_SOURCE_DIR FALSE)
+    endif()
+    if(NOT "${GIT_DIR}" STREQUAL "")
+        file(RELATIVE_PATH _relative_to_source_dir "${CMAKE_SOURCE_DIR}"
+            "${GIT_DIR}")
+        if("${_relative_to_source_dir}" MATCHES "[.][.]" AND NOT ALLOW_LOOKING_ABOVE_CMAKE_SOURCE_DIR)
+            set(GIT_DIR "")
+        endif()
+    endif()
+    if("${GIT_DIR}" STREQUAL "")
+        set(${_refspecvar}
+            "GITDIR-NOTFOUND"
+            PARENT_SCOPE)
+        set(${_hashvar}
+            "GITDIR-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+
+    if(NOT IS_DIRECTORY ${GIT_DIR})
+        execute_process(
+            COMMAND "${GIT_EXECUTABLE}" rev-parse
+            --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})
+            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)
+            set(HEAD_SOURCE_FILE "${GIT_DIR}/HEAD")
+        else()
+            file(READ ${GIT_DIR} worktree_ref)
+            string(REGEX REPLACE "gitdir: (.*)$" "\\1" git_worktree_dir
+                ${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")
+        endif()
+    else()
+        set(HEAD_SOURCE_FILE "${GIT_DIR}/HEAD")
+    endif()
+    set(GIT_DATA "${CMAKE_CURRENT_BINARY_DIR}/CMakeFiles/git-data")
+    if(NOT EXISTS "${GIT_DATA}")
+        file(MAKE_DIRECTORY "${GIT_DATA}")
+    endif()
+
+    if(NOT EXISTS "${HEAD_SOURCE_FILE}")
+        return()
+    endif()
+    set(HEAD_FILE "${GIT_DATA}/HEAD")
+    configure_file("${HEAD_SOURCE_FILE}" "${HEAD_FILE}" COPYONLY)
+
+    configure_file("${_gitdescmoddir}/GetGitRevisionDescription.cmake.in"
+        "${GIT_DATA}/grabRef.cmake" @ONLY)
+    include("${GIT_DATA}/grabRef.cmake")
+
+    set(${_refspecvar}
+        "${HEAD_REF}"
+        PARENT_SCOPE)
+    set(${_hashvar}
+        "${HEAD_HASH}"
+        PARENT_SCOPE)
+endfunction()
+
+function(git_latest_tag _var)
+    if(NOT GIT_FOUND)
+        find_package(Git QUIET)
+    endif()
+    if(NOT GIT_FOUND)
+        set(${_var}
+            "GIT-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+    execute_process(
+        COMMAND "${GIT_EXECUTABLE}" describe --abbrev=0 --tag
+        WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+        RESULT_VARIABLE res
+        OUTPUT_VARIABLE out
+        ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+    if(NOT res EQUAL 0)
+        set(out "GIT-TAG-NOTFOUND")
+    endif()
+
+    set(${_var}
+        "${out}"
+        PARENT_SCOPE)
+endfunction()
+
+function(git_commit_counts _var)
+    if(NOT GIT_FOUND)
+        find_package(Git QUIET)
+    endif()
+    if(NOT GIT_FOUND)
+        set(${_var}
+            "GIT-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+    execute_process(
+        COMMAND "${GIT_EXECUTABLE}" rev-list HEAD --count
+        WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+        RESULT_VARIABLE res
+        OUTPUT_VARIABLE out
+        ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+    if(NOT res EQUAL 0)
+        set(out "GIT-TAG-NOTFOUND")
+    endif()
+
+    set(${_var}
+        "${out}"
+        PARENT_SCOPE)
+endfunction()
+
+function(git_describe _var)
+    if(NOT GIT_FOUND)
+        find_package(Git QUIET)
+    endif()
+    get_git_head_revision(refspec hash ALLOW_LOOKING_ABOVE_CMAKE_SOURCE_DIR)
+    if(NOT GIT_FOUND)
+        set(${_var}
+            "GIT-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+    if(NOT hash)
+        set(${_var}
+            "HEAD-HASH-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+
+    execute_process(
+        COMMAND "${GIT_EXECUTABLE}" describe --tags --always ${hash} ${ARGN}
+        WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+        RESULT_VARIABLE res
+        OUTPUT_VARIABLE out
+        ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+    if(NOT res EQUAL 0)
+        set(out "${out}-${res}-NOTFOUND")
+    endif()
+
+    set(${_var}
+        "${out}"
+        PARENT_SCOPE)
+endfunction()
+
+function(git_release_version _var)
+    if(NOT GIT_FOUND)
+        find_package(Git QUIET)
+    endif()
+    get_git_head_revision(refspec hash ALLOW_LOOKING_ABOVE_CMAKE_SOURCE_DIR)
+    if(NOT GIT_FOUND)
+        set(${_var}
+            "GIT-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+    if(NOT hash)
+        set(${_var}
+            "HEAD-HASH-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+
+    execute_process(
+        COMMAND "${GIT_EXECUTABLE}" symbolic-ref --short -q HEAD
+        WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+        RESULT_VARIABLE res
+        OUTPUT_VARIABLE out
+        ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+    if(NOT res EQUAL 0)
+        set(out "${out}-${res}-NOTFOUND")
+    endif()
+
+    string(FIND ${out} "release/" found})
+    if(${out} MATCHES "^release/.+$")
+        string(REPLACE "release/" "" tmp_out ${out})
+        set(${_var} "${tmp_out}" PARENT_SCOPE)
+    else()
+        set(${_var} "" PARENT_SCOPE)
+    endif()
+endfunction()
+
+function(git_describe_working_tree _var)
+    if(NOT GIT_FOUND)
+        find_package(Git QUIET)
+    endif()
+    if(NOT GIT_FOUND)
+        set(${_var}
+            "GIT-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+
+    execute_process(
+        COMMAND "${GIT_EXECUTABLE}" describe --dirty ${ARGN}
+        WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+        RESULT_VARIABLE res
+        OUTPUT_VARIABLE out
+        ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+    if(NOT res EQUAL 0)
+        set(out "${out}-${res}-NOTFOUND")
+    endif()
+
+    set(${_var}
+        "${out}"
+        PARENT_SCOPE)
+endfunction()
+
+function(git_get_exact_tag _var)
+    git_describe(out --exact-match ${ARGN})
+    set(${_var}
+        "${out}"
+        PARENT_SCOPE)
+endfunction()
+
+function(git_local_changes _var)
+    if(NOT GIT_FOUND)
+        find_package(Git QUIET)
+    endif()
+    get_git_head_revision(refspec hash)
+    if(NOT GIT_FOUND)
+        set(${_var}
+            "GIT-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+    if(NOT hash)
+        set(${_var}
+            "HEAD-HASH-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+
+    execute_process(
+        COMMAND "${GIT_EXECUTABLE}" diff-index --quiet HEAD --
+        WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+        RESULT_VARIABLE res
+        OUTPUT_VARIABLE out
+        ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+    if(res EQUAL 0)
+        set(${_var}
+            "CLEAN"
+            PARENT_SCOPE)
+    else()
+        set(${_var}
+            "DIRTY"
+            PARENT_SCOPE)
+    endif()
+endfunction()
+
+git_release_version(GIT_TAG)
+git_get_exact_tag(GIT_EXACT_TAG)
+if(GIT_TAG STREQUAL "")
+    git_latest_tag(GIT_TAG)
+endif()
+if(GIT_TAG STREQUAL "GIT-TAG-NOTFOUND")
+    set(GIT_TAG "1.0.0")
+endif ()
+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")
+else()
+    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}")
+string(REGEX MATCH "([0-9]+)\\.([0-9]+)\\.([0-9]+)" SEMVER_SPLITED "${GIT_SEMVER}")
+set(MAJOR_VERSION ${CMAKE_MATCH_1})
+set(MINOR_VERSION ${CMAKE_MATCH_2})
+set(PATCH_VERSION ${CMAKE_MATCH_3})
+MATH(EXPR VERSION_COUNTER "${MAJOR_VERSION} * 10000 + ${MINOR_VERSION} * 100 + ${PATCH_VERSION}")
+message(STATUS "Current git tag: ${GIT_TAG}, commit count: ${GIT_COMMIT_COUNT}, describe: ${GIT_DESCRIBE}")
+message(STATUS "Current semver: major: ${MAJOR_VERSION}, minor: ${MINOR_VERSION}, patch: ${PATCH_VERSION}, counter: ${VERSION_COUNTER}")

.cmake/GetGitRevisionDescription.cmake.in

@@ -0,0 +1,21 @@
+set(HEAD_HASH)
+file(READ "@HEAD_FILE@" HEAD_CONTENTS LIMIT 1024)
+string(STRIP "${HEAD_CONTENTS}" HEAD_CONTENTS)
+if(HEAD_CONTENTS MATCHES "ref")
+    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()
+    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)
+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

@@ -0,0 +1,11 @@
+#ifndef VERSION_H
+#define VERSION_H
+
+#include <QtGlobal>
+
+#define APPLICATION_FULL_VERSION "${GIT_SEMVER}.${GIT_COMMIT_COUNT}"
+#define VERSION_COUNTER ${GIT_COMMIT_COUNT}
+#define COMMIT_HASH "${GIT_DESCRIBE}"
+#define APPLICATION_VERSION "${GIT_SEMVER}"
+
+#endif  // VERSION_H

.cmake/version_exe.rc.in

@@ -0,0 +1,34 @@
+1 VERSIONINFO
+ FILEVERSION ${GIT_TAG_WITH_COMMA},${GIT_COMMIT_COUNT}
+ PRODUCTVERSION ${GIT_TAG_WITH_COMMA},${GIT_COMMIT_COUNT}
+ FILEFLAGSMASK 0x3fL
+#ifdef _DEBUG
+ FILEFLAGS 0x1L
+#else
+ FILEFLAGS 0x0L
+#endif
+ FILEOS 0x40004L
+ FILETYPE 0x2L
+ FILESUBTYPE 0x0L
+BEGIN
+    BLOCK "StringFileInfo"
+    BEGIN
+        BLOCK "080404b0"
+        BEGIN
+            VALUE "CompanyName", "ZhuZiChu"
+            VALUE "FileDescription", "${PROJECT_DESCRIPTION}"
+            VALUE "FileVersion", "${GIT_SEMVER}.${GIT_COMMIT_COUNT}"
+            VALUE "InternalName", "${PROJECT_NAME}.exe"
+            VALUE "LegalCopyright", "Copyright (C) 2023 ZhuZiChu. All rights reserved."
+            VALUE "OriginalFilename", "${PROJECT_NAME}.exe"
+            VALUE "ProductName", "${PROJECT_NAME}"
+            VALUE "ProductVersion", "${GIT_SEMVER}.0"
+        END
+    END
+    BLOCK "VarFileInfo"
+    BEGIN
+        VALUE "Translation", 0x804, 1200
+    END
+END
+
+IDI_ICON1 ICON DISCARDABLE "${CMAKE_SOURCE_DIR}/example/favicon.ico"

.github/workflows/macos.yml

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

.github/workflows/ubuntu.yml

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

.github/workflows/windows-mingw.yml

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

.github/workflows/windows-qt5.yml

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

.github/workflows/windows.yml

@@ -21,12 +21,12 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [windows-2019]
+        os: [windows-latest]
         include:
-          - qt_ver: 6.5.0        
+          - qt_ver: 6.6.2        
             qt_arch: win64_msvc2019_64
             msvc_arch: x64
-            qt_arch_install: msvc2019_64          
+            qt_arch_install: msvc2019_64  
     env:
       targetName: example.exe
       fileName: example
@@ -35,23 +35,29 @@ jobs:
         uses: actions/checkout@v3
         with:
           submodules: recursive
-             
+          
+      - name: Setup ninja
+        uses: seanmiddleditch/gha-setup-ninja@master
+        with:
+          version: 1.10.2
+          
       - name: Install Qt
         uses: jurplel/install-qt-action@v3
         with:
           version: ${{ matrix.qt_ver }}
           arch: ${{ matrix.qt_arch }}
           cache: ${{steps.cache-qt.outputs.cache-hit}}
-          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qtspeech'
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qtspeech qt3d'
           
       - name: msvc-build
         id: build
         shell: cmd
         run: |
-          call "C:\Program Files (x86)\Microsoft Visual Studio\2019\Enterprise\VC\Auxiliary\Build\vcvarsall.bat" ${{ matrix.msvc_arch }}
+          call "C:\Program Files\Microsoft Visual Studio\2022\Enterprise\VC\Auxiliary\Build\vcvarsall.bat" ${{ matrix.msvc_arch }}
+          ninja --version
           mkdir build
           cd build
-          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\6.5.0\msvc2019_64 -DCMAKE_C_COMPILER=cl -DCMAKE_CXX_COMPILER=cl -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\${{ matrix.qt_ver }}\msvc2019_64 -DCMAKE_C_COMPILER=cl -DCMAKE_CXX_COMPILER=cl -DCMAKE_BUILD_TYPE=Release -GNinja ..
           cmake --build . --target all --config Release --parallel
           echo winSdkDir=%WindowsSdkDir% >> %GITHUB_ENV%
           echo winSdkVer=%WindowsSdkVersion% >> %GITHUB_ENV%
@@ -73,14 +79,20 @@ jobs:
       - uses: actions/upload-artifact@v2
         with:
           name: ${{ steps.package.outputs.packageName }}
-          path: ${{ steps.package.outputs.packageName }}
+          path: dist
+          
+      - name: inno setup install
+        if: startsWith(github.event.ref, 'refs/tags/')
+        uses: zhuzichu520/inno-setup-action@v1.0.1
+        with:
+          filepath: ./action-cli/InstallerScript.iss
           
       - name: uploadRelease
         if: startsWith(github.event.ref, 'refs/tags/')
         uses: svenstaro/upload-release-action@v2
         with:
           repo_token: ${{ secrets.GITHUB_TOKEN }}
-          file: ${{ steps.package.outputs.packageName }}.zip
-          asset_name: ${{ env.fileName }}_${{  github.ref_name }}_${{  matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.zip
+          file: ./action-cli/installer.exe
+          asset_name: ${{ env.fileName }}_${{ github.ref_name }}_${{ matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.exe
           tag: ${{ github.ref }}
-          overwrite: true 
+          overwrite: true 

.gitignore

@@ -31,9 +31,15 @@ target_wrapper.*
 # QtCreator CMake
 CMakeLists.txt.user*
 
-src/build-preset/plugins.qmltypes
 bin
 .DS_Store
 build
 cmake-build-*
-.idea
+.idea
+
+example/Version.h
+
+action-cli
+dist
+
+*.qm

.gitmodules

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

CMakeLists.txt

@@ -1,22 +1,35 @@
 cmake_minimum_required(VERSION 3.20)
 
-project(FluentUI VERSION 0.1 LANGUAGES CXX)
+project(FluentUI VERSION 1.0)
+
+if(MSVC)
+    #让Release也生成pdb文件
+    set(CMAKE_SHARED_LINKER_FLAGS_RELEASE "${CMAKE_SHARED_LINKER_FLAGS_RELEASE} /DEBUG /OPT:REF /OPT:ICF")
+    set(CMAKE_EXE_LINKER_FLAGS_RELEASE "${CMAKE_EXE_LINKER_FLAGS_RELEASE} /DEBUG /OPT:REF /OPT:ICF")
+endif()
+
+list(APPEND CMAKE_MODULE_PATH ${CMAKE_SOURCE_DIR}/.cmake/)
+
+include(GetGitRevisionDescription)
 
 option(FLUENTUI_BUILD_EXAMPLES "Build FluentUI demo applications." ON)
-option(FLUENTUI_BUILD_FRAMELESSHEPLER "Build FramelessHelper." ON)
+
+find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core)
+find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Core)
 
 add_subdirectory(src)
 
+#Release也支持日志打印代码位置
+target_compile_definitions(fluentuiplugin
+    PRIVATE
+    QT_MESSAGELOGCONTEXT
+)
+
 if (FLUENTUI_BUILD_EXAMPLES)
     add_subdirectory(example)
 endif ()
 
-if (FLUENTUI_BUILD_FRAMELESSHEPLER)
-    add_definitions(-DFRAMELESSHELPER_CORE_NO_DEBUG_OUTPUT)
-    add_definitions(-DFRAMELESSHELPER_QUICK_NO_DEBUG_OUTPUT)
-    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

@@ -0,0 +1,315 @@
+This product use Third Party code for certain functions may include licensed under
+terms that require meeting to display the following notices:
+
+A text copy of this license is included with the download of
+this FluentUI software. You may obtain a copy of the
+source code from https://github.com/zhuzichu520/FluentUI
+
+************************************************************************************
+About Qt 6.5.0 Libraries Used in This Project:
+
+This project, "FluentUI", utilizes the Qt 6.5.0 library.
+Below is a list of the Qt modules used and their corresponding open-source licenses:
+
+Qt Core - LGPL v3 / GPL v2 / Commercial License
+Qt Quick - LGPL v3 / GPL v2 / Commercial License
+Qt Quick Controls 2 - LGPL v3 / GPL v2 / Commercial License
+Qt Gui - LGPL v3 / GPL v2 / Commercial License
+Qt Multimedia - LGPL v3 / GPL v2 / Commercial License
+Qt WebEngineQuick - LGPL v3 / GPL v3 / Commercial License
+Qt Sql - LGPL v3 / GPL v2 / Commercial License
+Qt Svg - LGPL v3 / GPL v2 / Commercial License
+Qt Core5Compat - LGPL v3 / GPL v2 / Commercial License
+
+Please note that the license information provided above is for reference only.
+For the exact licensing, refer to the official Qt documentation and source code:
+https://doc.qt.io/qt-6/licenses-used-in-qt.html
+You can choose an appropriate license based on your requirements.
+If you choose to use the LGPL or GPL licenses, please follow the relevant
+open-source license regulations, such as releasing source code,
+retaining copyright notices, etc.
+
+We would like to thank the Qt project and its contributors for
+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/).
+
+************************************************************************************
+framelesshelper
+
+MIT License
+
+Copyright (C) 2021-2023 by wangwenx190 (Yuhang Zhao)
+
+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.
+
+************************************************************************************
+zxing-cpp
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "{}"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright {yyyy} {name of copyright owner}
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   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.
+
+************************************************************************************
+ChartJs2QML
+
+MIT License
+
+Copyright (c) 2020 ChartJs2QML contributors (starting with Elypson, Michael A. Voelkel, https://github.com/Elypson)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+************************************************************************************
+qml-colorpicker
+
+MIT License
+
+Copyright (c) 2022 Ruslan Shestopalyuk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

example/CMakeLists.txt

@@ -1,12 +1,14 @@
 cmake_minimum_required(VERSION 3.20)
 
-project(example VERSION 0.1 LANGUAGES CXX)
+project(example VERSION 1.0 LANGUAGES CXX)
 
 #配置通用编译
-set(CMAKE_AUTOMOC ON)
+set(CMAKE_CXX_STANDARD 17)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
-if(APPLE)
-    set(CMAKE_OSX_ARCHITECTURES "arm64;x86_64" CACHE STRING "" FORCE)
+
+#判断FluentUI库类型
+if(FLUENTUI_BUILD_STATIC_LIB)
+    add_definitions(-DFLUENTUI_BUILD_STATIC_LIB)
 endif()
 
 #设置可执行文件输出目录
@@ -16,14 +18,45 @@ else()
     set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/release)
 endif()
 
-#获取文件路径分隔符（解决执行命令的时候有些平台会报错）
-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()
 
-#设置版本号
-add_definitions(-DVERSION=1,3,6,0)
+#导入Qt相关依赖包
+find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Quick Svg Network)
+find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Quick Svg Network)
 
-find_package(Qt6 REQUIRED COMPONENTS Quick)
-qt_standard_project_setup()
+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)
+find_program(QT_LRELEASE NAMES lrelease)
+if (NOT EXISTS ${CMAKE_CURRENT_LIST_DIR}/${PROJECT_NAME}_en_US.qm)
+    execute_process(COMMAND ${QT_LUPDATE} ${CMAKE_CURRENT_LIST_DIR} -ts ${PROJECT_NAME}_en_US.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR})
+    execute_process(COMMAND ${QT_LRELEASE} ${PROJECT_NAME}_en_US.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR})
+endif ()
+if (NOT EXISTS ${CMAKE_CURRENT_LIST_DIR}/${PROJECT_NAME}_zh_CN.qm)
+    execute_process(COMMAND ${QT_LUPDATE} ${CMAKE_CURRENT_LIST_DIR} -ts ${PROJECT_NAME}_zh_CN.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR})
+    execute_process(COMMAND ${QT_LRELEASE} ${PROJECT_NAME}_zh_CN.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR})
+endif ()
+
+file(GLOB QM_FILE_PATHS ${CMAKE_CURRENT_LIST_DIR}/ *.qm)
+file(COPY ${QM_FILE_PATHS} DESTINATION ${APPLICATION_DIR_PATH}/i18n)
+
+##生成版本信息头文件
+set(HEADER_FILE_VERSION_PATH ${CMAKE_SOURCE_DIR}/${PROJECT_NAME}/Version.h)
+configure_file(
+    ${CMAKE_SOURCE_DIR}/.cmake/Version.h.in
+    ${HEADER_FILE_VERSION_PATH}
+)
 
 #遍历所有Cpp文件
 file(GLOB_RECURSE CPP_FILES *.cpp *.h)
@@ -32,83 +65,137 @@ foreach(filepath ${CPP_FILES})
     list(APPEND sources_files ${filename})
 endforeach(filepath)
 
-#遍历所有qml文件
-file(GLOB_RECURSE QML_PATHS *.qml)
-foreach(filepath ${QML_PATHS})
-    string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
-    list(APPEND qml_files ${filename})
-endforeach(filepath)
+if(WIN32)
+    list(APPEND sources_files "src/app_dmp.h")
+endif()
 
-#遍历所有资源文件
-file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp qmldir)
-foreach(filepath ${RES_PATHS})
-    string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
-    list(APPEND resource_files ${filename})
-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 "qml-Qt6")
+            string(REPLACE "qml-Qt6" "qml" filealias ${filename})
+            set_source_files_properties(${filename} PROPERTIES QT_RESOURCE_ALIAS ${filealias})
+            if(${filename} MATCHES "qmldir")
+                list(APPEND resource_files ${filename})
+            else()
+                list(APPEND qml_files ${filename})
+            endif()
+        endif()
+    endforeach(filepath)
+
+    #遍历所有资源文件
+    file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp *.in)
+    foreach(filepath ${RES_PATHS})
+        string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
+        list(APPEND resource_files ${filename})
+    endforeach(filepath)
+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}
+    )
+configure_file(
+    ${CMAKE_SOURCE_DIR}/.cmake/InstallerScript.iss.in
+    ${CMAKE_SOURCE_DIR}/action-cli/InstallerScript.iss
+)
+endif()
 
 #添加可执行文件
-if (CMAKE_SYSTEM_NAME STREQUAL "Windows")
-    qt_add_executable(example
+if (WIN32)
+    add_executable(${PROJECT_NAME}
         ${sources_files}
-        example.rc
+        ${EXAMPLE_VERSION_RC_PATH}
     )
 else ()
-    qt_add_executable(example
+    add_executable(${PROJECT_NAME}
         ${sources_files}
     )
 endif ()
 
-#复制动态库到可执行文件同级目录下
+#复制程序运行所需要的动态库
 if(WIN32)
-    if(CMAKE_CXX_COMPILER_ID STREQUAL "MSVC")
-        set(DLLPATH ${CMAKE_SOURCE_DIR}/3rdparty/msvc/*.dll)
-    else()
-        set(DLLPATH ${CMAKE_SOURCE_DIR}/3rdparty/mingw/*.dll)
+    if(MSVC)
+        if(CMAKE_SIZEOF_VOID_P EQUAL 4)
+            file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x86/*.dll)
+        elseif(CMAKE_SIZEOF_VOID_P EQUAL 8)
+            file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x64/*.dll)
+        endif()
+    elseif(MINGW)
+        file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/mingw/*.dll)
     endif()
-    string(REPLACE "/" ${PATH_SEPARATOR} DLLPATH "${DLLPATH}")
-    file(GLOB DLL_FILES ${DLLPATH})
     add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
         COMMAND ${CMAKE_COMMAND} -E copy
-        ${DLL_FILES}
+        ${3RDPARTY_DLL_DIR}
         ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}
     )
 endif()
 
-#添加qml模块
-qt_add_qml_module(example
-    URI example
-    VERSION 1.0
-    QML_FILES ${qml_files}
-    RESOURCES ${resource_files}
+#复制FluentUI源码到运行目录下，用于脚手架生成
+file(MAKE_DIRECTORY ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/source/)
+file(COPY ${CMAKE_SOURCE_DIR}/src/ DESTINATION ${APPLICATION_DIR_PATH}/source/)
+
+if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
+    #如果是Qt6.2以上，则使用qt_add_qml_module添加资源文件
+    qt_add_qml_module(${PROJECT_NAME}
+        URI ${PROJECT_NAME}
+        VERSION 1.0
+        QML_FILES ${qml_files}
+        RESOURCES ${resource_files}
+        RESOURCE_PREFIX "/"
+    )
+else()
+    #如果是Qt6.2以下，则使用qrc添加资源文件
+    target_include_directories(${PROJECT_NAME} PRIVATE
+        ${CMAKE_CURRENT_SOURCE_DIR}
+    )
+target_sources(${PROJECT_NAME} PRIVATE ${PROJECT_NAME}.qrc)
+endif()
+
+#导入component头文件,不然通过QML_NAMED_ELEMENT生成的c++类会找不到头文件报错
+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
+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
 )
 
-#链接库
-target_link_libraries(example PRIVATE
-    Qt6::Quick
+#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
 )
 
 #安装
-install(TARGETS example
+install(TARGETS ${PROJECT_NAME}
     BUNDLE DESTINATION .
     LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
     RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
 )
-
-qt_generate_deploy_app_script(
-    TARGET example
-    OUTPUT_SCRIPT deploy_script
-    NO_UNSUPPORTED_PLATFORM_ERROR
-)
-install(SCRIPT ${deploy_script})

example/example.qrc

@@ -0,0 +1,211 @@
+<RCC>
+    <qresource prefix="/example">
+        <file>res/svg/avatar_1.svg</file>
+        <file>res/svg/avatar_2.svg</file>
+        <file>res/svg/avatar_3.svg</file>
+        <file>res/svg/avatar_4.svg</file>
+        <file>res/svg/avatar_5.svg</file>
+        <file>res/svg/avatar_6.svg</file>
+        <file>res/svg/avatar_7.svg</file>
+        <file>res/svg/avatar_8.svg</file>
+        <file>res/svg/avatar_9.svg</file>
+        <file>res/svg/avatar_10.svg</file>
+        <file>res/svg/avatar_11.svg</file>
+        <file>res/svg/avatar_12.svg</file>
+        <file>res/image/banner_1.jpg</file>
+        <file>res/image/banner_2.jpg</file>
+        <file>res/image/banner_3.jpg</file>
+        <file>res/image/logo_openai.png</file>
+        <file>res/image/favicon.ico</file>
+        <file>res/image/bg_home_header.png</file>
+        <file>res/image/ic_home_github.png</file>
+        <file>res/image/control/Acrylic.png</file>
+        <file>res/image/control/AnimatedIcon.png</file>
+        <file>res/image/control/AnimatedVisualPlayer.png</file>
+        <file>res/image/control/AnimationInterop.png</file>
+        <file>res/image/control/AppBarButton.png</file>
+        <file>res/image/control/AppBarSeparator.png</file>
+        <file>res/image/control/AppBarToggleButton.png</file>
+        <file>res/image/control/AutomationProperties.png</file>
+        <file>res/image/control/AutoSuggestBox.png</file>
+        <file>res/image/control/Border.png</file>
+        <file>res/image/control/BreadcrumbBar.png</file>
+        <file>res/image/control/Button.png</file>
+        <file>res/image/control/CalendarDatePicker.png</file>
+        <file>res/image/control/CalendarView.png</file>
+        <file>res/image/control/Canvas.png</file>
+        <file>res/image/control/Checkbox.png</file>
+        <file>res/image/control/Clipboard.png</file>
+        <file>res/image/control/ColorPaletteResources.png</file>
+        <file>res/image/control/ColorPicker.png</file>
+        <file>res/image/control/ComboBox.png</file>
+        <file>res/image/control/CommandBar.png</file>
+        <file>res/image/control/CommandBarFlyout.png</file>
+        <file>res/image/control/CompactSizing.png</file>
+        <file>res/image/control/ConnectedAnimation.png</file>
+        <file>res/image/control/ContentDialog.png</file>
+        <file>res/image/control/CreateMultipleWindows.png</file>
+        <file>res/image/control/DataGrid.png</file>
+        <file>res/image/control/DatePicker.png</file>
+        <file>res/image/control/DropDownButton.png</file>
+        <file>res/image/control/EasingFunction.png</file>
+        <file>res/image/control/Expander.png</file>
+        <file>res/image/control/FilePicker.png</file>
+        <file>res/image/control/FlipView.png</file>
+        <file>res/image/control/Flyout.png</file>
+        <file>res/image/control/Grid.png</file>
+        <file>res/image/control/GridView.png</file>
+        <file>res/image/control/HyperlinkButton.png</file>
+        <file>res/image/control/IconElement.png</file>
+        <file>res/image/control/Image.png</file>
+        <file>res/image/control/ImplicitTransition.png</file>
+        <file>res/image/control/InfoBadge.png</file>
+        <file>res/image/control/InfoBar.png</file>
+        <file>res/image/control/InkCanvas.png</file>
+        <file>res/image/control/InkToolbar.png</file>
+        <file>res/image/control/InputValidation.png</file>
+        <file>res/image/control/ItemsRepeater.png</file>
+        <file>res/image/control/Line.png</file>
+        <file>res/image/control/ListBox.png</file>
+        <file>res/image/control/ListView.png</file>
+        <file>res/image/control/MediaPlayerElement.png</file>
+        <file>res/image/control/MenuBar.png</file>
+        <file>res/image/control/MenuFlyout.png</file>
+        <file>res/image/control/NavigationView.png</file>
+        <file>res/image/control/NumberBox.png</file>
+        <file>res/image/control/PageTransition.png</file>
+        <file>res/image/control/ParallaxView.png</file>
+        <file>res/image/control/PasswordBox.png</file>
+        <file>res/image/control/PersonPicture.png</file>
+        <file>res/image/control/PipsPager.png</file>
+        <file>res/image/control/Pivot.png</file>
+        <file>res/image/control/ProgressBar.png</file>
+        <file>res/image/control/ProgressRing.png</file>
+        <file>res/image/control/PullToRefresh.png</file>
+        <file>res/image/control/RadialGradientBrush.png</file>
+        <file>res/image/control/RadioButton.png</file>
+        <file>res/image/control/RadioButtons.png</file>
+        <file>res/image/control/RatingControl.png</file>
+        <file>res/image/control/RelativePanel.png</file>
+        <file>res/image/control/RepeatButton.png</file>
+        <file>res/image/control/RevealFocus.png</file>
+        <file>res/image/control/RichEditBox.png</file>
+        <file>res/image/control/RichTextBlock.png</file>
+        <file>res/image/control/ScrollViewer.png</file>
+        <file>res/image/control/SemanticZoom.png</file>
+        <file>res/image/control/Shape.png</file>
+        <file>res/image/control/Slider.png</file>
+        <file>res/image/control/Sound.png</file>
+        <file>res/image/control/SplitButton.png</file>
+        <file>res/image/control/SplitView.png</file>
+        <file>res/image/control/StackPanel.png</file>
+        <file>res/image/control/StandardUICommand.png</file>
+        <file>res/image/control/SwipeControl.png</file>
+        <file>res/image/control/TabView.png</file>
+        <file>res/image/control/TeachingTip.png</file>
+        <file>res/image/control/TextBlock.png</file>
+        <file>res/image/control/TextBox.png</file>
+        <file>res/image/control/ThemeTransition.png</file>
+        <file>res/image/control/TimePicker.png</file>
+        <file>res/image/control/TitleBar.png</file>
+        <file>res/image/control/ToggleButton.png</file>
+        <file>res/image/control/ToggleSplitButton.png</file>
+        <file>res/image/control/ToggleSwitch.png</file>
+        <file>res/image/control/ToolTip.png</file>
+        <file>res/image/control/TreeView.png</file>
+        <file>res/image/control/VariableSizedWrapGrid.png</file>
+        <file>res/image/control/Viewbox.png</file>
+        <file>res/image/control/WebView.png</file>
+        <file>res/image/control/XamlUICommand.png</file>
+        <file>res/svg/home.svg</file>
+        <file>res/svg/home_dark.svg</file>
+        <file>res/image/qrcode_wx.jpg</file>
+        <file>res/image/qrcode_zfb.jpg</file>
+        <file>qml/App.qml</file>
+        <file>qml/component/CodeExpander.qml</file>
+        <file>qml/global/ItemsFooter.qml</file>
+        <file>qml/global/ItemsOriginal.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_CheckBox.qml</file>
+        <file>qml/page/T_ColorPicker.qml</file>
+        <file>qml/page/T_ComboBox.qml</file>
+        <file>qml/page/T_DatePicker.qml</file>
+        <file>qml/page/T_Dialog.qml</file>
+        <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_Image.qml</file>
+        <file>qml/page/T_InfoBar.qml</file>
+        <file>qml/page/T_Menu.qml</file>
+        <file>qml/page/T_MultiWindow.qml</file>
+        <file>qml/page/T_Pagination.qml</file>
+        <file>qml/page/T_Pivot.qml</file>
+        <file>qml/page/T_Progress.qml</file>
+        <file>qml/page/T_QRCode.qml</file>
+        <file>qml/page/T_RadioButton.qml</file>
+        <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_Settings.qml</file>
+        <file>qml/page/T_Slider.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>
+        <file>qml/page/T_TextBox.qml</file>
+        <file>qml/page/T_Theme.qml</file>
+        <file>qml/page/T_Timeline.qml</file>
+        <file>qml/page/T_TimePicker.qml</file>
+        <file>qml/page/T_ToggleSwitch.qml</file>
+        <file>qml/page/T_Tooltip.qml</file>
+        <file>qml/page/T_Tour.qml</file>
+        <file>qml/page/T_TreeView.qml</file>
+        <file>qml/page/T_Typography.qml</file>
+        <file>qml/page/T_Watermark.qml</file>
+        <file>qml/window/AboutWindow.qml</file>
+        <file>qml/window/HotloadWindow.qml</file>
+        <file>qml/window/LoginWindow.qml</file>
+        <file>qml/window/MainWindow.qml</file>
+        <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_StaggeredLayout.qml</file>
+        <file>qml/viewmodel/SettingsViewModel.qml</file>
+        <file>qml/viewmodel/TextBoxViewModel.qml</file>
+        <file>qml/page/T_Clip.qml</file>
+        <file>qml/page/T_3D.qml</file>
+        <file>qml/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>qml/window/FluentInitalizrWindow.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>
+    </qresource>
+</RCC>

example/example.rc

@@ -1,42 +0,0 @@
-#include <windows.h>
-
-IDI_ICON1 ICON "favicon.ico"
-
-#define STR(x) #x
-#define VER_JOIN(a,b,c,d) STR(a.b.c.d)
-#define VER_JOIN_(x) VER_JOIN x
-#define VER_STR VER_JOIN_((VERSION))
-
-VS_VERSION_INFO VERSIONINFO
-FILEVERSION     VERSION
-PRODUCTVERSION  VERSION
-FILEFLAGSMASK   0x3fL
-#ifdef _DEBUG
-FILEFLAGS       VS_FF_DEBUG
-#else
-FILEFLAGS       0x0L
-#endif
-FILEOS          VOS_NT_WINDOWS32
-FILETYPE        VFT_APP
-FILESUBTYPE     VFT2_UNKNOWN
-BEGIN
-    BLOCK "StringFileInfo"
-    BEGIN
-        BLOCK "040904b0"
-        BEGIN
-            VALUE "Comments",         "Built by the FluentUI."
-            VALUE "CompanyName",      "zhuzichu"
-            VALUE "FileDescription",  "example"
-            VALUE "FileVersion",      VER_STR
-            VALUE "InternalName",     ""
-            VALUE "LegalCopyright",   "Copyright (C) 2023"
-            VALUE "OriginalFilename", ""
-            VALUE "ProductName",      "example"
-            VALUE "ProductVersion",   VER_STR
-        END
-    END
-    BLOCK "VarFileInfo"
-    BEGIN
-        VALUE "Translation", 0x409, 1200
-    END
-END

example/qml-Qt6/App.qml

@@ -0,0 +1,60 @@
+import QtQuick
+import QtQuick.Window
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI
+
+Item {
+    id: app
+
+    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: {
+        FluNetwork.openLog = false
+        FluNetwork.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.enableAnimation = true
+        FluApp.routes = {
+            "/":"qrc:/example/qml/window/MainWindow.qml",
+            "/about":"qrc:/example/qml/window/AboutWindow.qml",
+            "/login":"qrc:/example/qml/window/LoginWindow.qml",
+            "/hotload":"qrc:/example/qml/window/HotloadWindow.qml",
+            "/crash":"qrc:/example/qml/window/CrashWindow.qml",
+            "/fluentInitalizr":"qrc:/example/qml/window/FluentInitalizrWindow.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"
+        }
+        var args = Qt.application.arguments
+        if(args.length>=2 && args[1].startsWith("-crashed=")){
+            FluApp.navigate("/crash",{crashFilePath:args[1].replace("-crashed=","")})
+        }else{
+            FluApp.navigate("/")
+        }
+    }
+}

example/qml-Qt6/chart/T_BarChart.qml

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

example/qml-Qt6/chart/T_BubbleChart.qml

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

example/qml-Qt6/chart/T_LineChart.qml

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

example/qml-Qt6/chart/T_PieChart.qml

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

example/qml-Qt6/chart/T_PolarAreaChart.qml

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

example/qml-Qt6/chart/T_RadarChart.qml

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

example/qml-Qt6/chart/T_ScatterChart.qml

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

example/qml-Qt6/component/CodeExpander.qml

@@ -0,0 +1,144 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+
+FluExpander{
+
+    id:control
+    property string code: ""
+    headerText: qsTr("Source")
+    contentHeight:content.height
+    focus: false
+
+    FluCopyableText{
+        id:content
+        width:parent.width
+        text:highlightQmlCode(code)
+        textFormat: FluMultilineTextBox.RichText
+        padding: 10
+        topPadding: 10
+        leftPadding: 10
+        rightPadding: 10
+        bottomPadding: 10
+    }
+
+    FluIconButton{
+        iconSource:FluentIcons.Copy
+        anchors{
+            right: parent.right
+            top: parent.top
+            rightMargin: 5
+            topMargin: 5
+        }
+        onClicked:{
+            FluTools.clipText(FluTools.html2PlantText(content.text))
+            showSuccess(qsTr("The Copy is Successful"))
+        }
+    }
+
+    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) {
+        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",
+                    "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",
+                    "FluStatusLayout",
+                    "FluRatingControl",
+                    "FluPasswordBox",
+                    "FluBreadcrumbBar",
+                    "FluCopyableText",
+                    "FluAcrylic",
+                    "FluRemoteLoader",
+                    "FluMenuBar",
+                    "FluPagination",
+                    "FluRadioButtons",
+                    "FluImage",
+                    "FluSpinBox",
+                    "FluWatermark",
+                    "FluTour",
+                    "FluQRCode",
+                    "FluTimeline",
+                    "FluChart",
+                    "FluRangeSlider",
+                    "FluStaggeredLayout",
+                    "FluProgressButton",
+                    "FluLoadingButton",
+                    "FluClip",
+                    "FluNetwork",
+                    "FluShortcutPicker"
+                ];
+        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/global/ItemsFooter.qml

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

example/qml-Qt6/global/ItemsOriginal.qml

@@ -0,0 +1,532 @@
+pragma Singleton
+
+import QtQuick
+import FluentUI
+
+FluObject{
+
+    property var navigationView
+    property var paneItemMenu
+
+    function rename(item, newName){
+        if(newName && newName.trim().length>0){
+            item.title = newName;
+        }
+    }
+
+    FluPaneItem{
+        id:item_home
+        count: 9
+        title: qsTr("Home")
+        menuDelegate: paneItemMenu
+        infoBadge: FluBadge{
+            count: item_home.count
+        }
+        icon: FluentIcons.Home
+        url: "qrc:/example/qml/page/T_Home.qml"
+        onTap: {
+            if(navigationView.getCurrentUrl()){
+                item_home.count = 0
+            }
+            navigationView.push(url)
+        }
+    }
+
+    FluPaneItemExpander{
+        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
+            count: 99
+            infoBadge: FluBadge{
+                count: item_buttons.count
+            }
+            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: qsTr("Text")
+            menuDelegate: paneItemMenu
+            count: 5
+            infoBadge: FluBadge{
+                count: item_text.count
+                color: Qt.rgba(82/255,196/255,26/255,1)
+            }
+            url: "qrc:/example/qml/page/T_Text.qml"
+            onTap: {
+                item_text.count = 0
+                navigationView.push(url)
+            }
+        }
+        FluPaneItem{
+            title: qsTr("Image")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Image.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            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: 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: qsTr("RadioButton")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_RadioButton.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("ToggleSwitch")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_ToggleSwitch.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("PaneItem Disabled")
+            disabled: true
+            icon: FluentIcons.Error
+        }
+    }
+
+    FluPaneItemExpander{
+        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: qsTr("TimePicker")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_TimePicker.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("DatePicker")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_DatePicker.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("CalendarPicker")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_CalendarPicker.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            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: qsTr("Surface")
+        icon: FluentIcons.SurfaceHub
+        FluPaneItem{
+            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: qsTr("Progress")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Progress.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("RatingControl")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_RatingControl.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Badge")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Badge.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Rectangle")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Rectangle.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Clip")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Clip.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Carousel")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Carousel.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Expander")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Expander.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Watermark")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Watermark.qml"
+            onTap: { navigationView.push(url) }
+        }
+    }
+
+    FluPaneItemExpander{
+        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{
+            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"
+            onTap: {
+                item_combobox.count = 0
+                navigationView.push("qrc:/example/qml/page/T_ComboBox.qml")
+            }
+        }
+        FluPaneItem{
+            title: qsTr("Tooltip")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Tooltip.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Menu")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Menu.qml"
+            onTap: { navigationView.push(url) }
+        }
+    }
+
+    FluPaneItemExpander{
+        title: qsTr("Navigation")
+        icon: FluentIcons.AllApps
+        FluPaneItem{
+            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: qsTr("BreadcrumbBar")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_BreadcrumbBar.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            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: qsTr("TreeView")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_TreeView.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            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: qsTr("Pagination")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Pagination.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("MultiWindow")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_MultiWindow.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            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: qsTr("Theming")
+        icon:FluentIcons.Brightness
+        FluPaneItem{
+            title: qsTr("Acrylic")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Acrylic.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Theme")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Theme.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Typography")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Typography.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Awesome")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Awesome.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) }
+        }
+    }
+
+    FluPaneItemSeparator{
+        spacing:10
+        size:1
+    }
+
+    FluPaneItemExpander{
+        title: qsTr("Other")
+        icon: FluentIcons.Shop
+        FluPaneItem{
+            title: qsTr("QRCode")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_QRCode.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Tour")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Tour.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Timeline")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Timeline.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Captcha")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Captcha.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Network")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Network.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            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"
+            onTap: {
+                item_other.count = 0
+                navigationView.push("qrc:/example/qml/page/T_RemoteLoader.qml")
+            }
+        }
+        FluPaneItem{
+            title: qsTr("Hot Loader")
+            onTapListener: function(){
+                FluApp.navigate("/hotload")
+            }
+        }
+        FluPaneItem{
+            title: qsTr("3D")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_3D.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Test Crash")
+            visible: FluTools.isWin()
+            onTapListener: function(){
+                AppInfo.testCrash()
+            }
+        }
+    }
+
+    function getRecentlyAddedData(){
+        var arr = []
+        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)
+            }
+        }
+        arr.sort(function(o1,o2){ return o2.extra.order-o1.extra.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.extra && item.extra.recentlyUpdated){
+                arr.push(item)
+            }
+        }
+        return arr
+    }
+
+    function getSearchData(){
+        if(!navigationView){
+            return
+        }
+        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/qmldir

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

example/qml-Qt6/page/T_3D.qml

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

example/qml-Qt6/page/T_Acrylic.qml

@@ -0,0 +1,115 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("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
+        FluClip{
+            width: 1920/4
+            height: 1200/4
+            radius:[8,8,8,8]
+            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.current
+                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
+                    preventStealing: true
+                    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

@@ -0,0 +1,71 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+
+FluContentPage {
+
+    title: qsTr("Awesome")
+
+    FluTextBox{
+        id:text_box
+        placeholderText: qsTr("Please enter a keyword")
+        anchors{
+            topMargin: 20
+            top:parent.top
+        }
+    }
+
+    FluFilledButton{
+        text: qsTr("Search")
+        anchors{
+            left: text_box.right
+            verticalCenter: text_box.verticalCenter
+            leftMargin: 14
+        }
+        onClicked: {
+            grid_view.model = FluTheme.awesomeList(text_box.text)
+        }
+    }
+    GridView{
+        id:grid_view
+        cellWidth: 80
+        cellHeight: 80
+        clip: true
+        boundsBehavior: GridView.StopAtBounds
+        model:FluTheme.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(qsTr("You Copied ")+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

@@ -0,0 +1,131 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Badge")
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 120
+        paddings: 10
+
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+                right: parent.right
+            }
+            FluText{
+                wrapMode: Text.WrapAnywhere
+                width: parent.width
+                text: qsTr("It usually appears in the upper right corner of the notification icon or avatar to display the number of messages that need to be processed")
+            }
+            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

@@ -0,0 +1,93 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("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: qsTr("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)=>{
+                        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

@@ -0,0 +1,438 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Buttons")
+
+    FluText{
+        Layout.topMargin: 20
+        text: qsTr("Support the Tab key to switch focus, and the Space key to perform click events")
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
+        Layout.topMargin: 20
+
+        FluTextButton{
+            disabled: text_button_switch.checked
+            text: qsTr("Text Button")
+            onClicked: {
+                showInfo("点击Text Button")
+            }
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+        FluToggleSwitch{
+            id: text_button_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("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: qsTr("Standard Button")
+            onClicked: {
+                showInfo(qsTr("Click StandardButton"))
+            }
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+        FluToggleSwitch{
+            id: button_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("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: qsTr("Filled Button")
+            onClicked: {
+                showWarning(qsTr("Click FilledButton"))
+            }
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+        FluToggleSwitch{
+            id: filled_button_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("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: qsTr("Toggle Button")
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+        FluToggleSwitch{
+            id: toggle_button_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluToggleButton{
+    text:"Toggle Button"
+    onClicked: {
+        checked = !checked
+    }
+}'
+    }
+
+    Timer{
+        id: timer_progress
+        interval: 200
+        onTriggered: {
+            btn_progress.progress = (btn_progress.progress + 0.1).toFixed(1)
+            if(btn_progress.progress==1){
+                timer_progress.stop()
+            }else{
+                timer_progress.start()
+            }
+        }
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        Layout.topMargin: 20
+        paddings: 10
+
+        FluProgressButton{
+            id: btn_progress
+            disabled: progress_button_switch.checked
+            text: qsTr("Progress Button")
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            onClicked: {
+                btn_progress.progress = 0
+                timer_progress.restart()
+            }
+        }
+        FluToggleSwitch{
+            id: progress_button_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluProgressButton{
+    text:"Progress Button"
+    onClicked: {
+
+    }
+}'
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        Layout.topMargin: 20
+        paddings: 10
+
+        FluLoadingButton{
+            id: btn_loading
+            loading: loading_button_switch.checked
+            text: qsTr("Loading Button")
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            onClicked: {
+
+            }
+        }
+        FluToggleSwitch{
+            id: loading_button_switch
+            checked: true
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Loading")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluLoadingButton{
+    text:"Loading Button"
+    onClicked: {
+
+    }
+}'
+    }
+
+
+    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(qsTr("Click IconButton"))
+                }
+            }
+            FluIconButton{
+                iconSource: FluentIcons.ChromeCloseContrast
+                disabled: icon_button_switch.checked
+                iconSize: 15
+                text: qsTr("IconOnly")
+                display: Button.IconOnly
+                onClicked:{
+                    showSuccess(qsTr("Button.IconOnly"))
+                }
+            }
+            FluIconButton{
+                iconSource: FluentIcons.ChromeCloseContrast
+                disabled: icon_button_switch.checked
+                iconSize: 15
+                text: qsTr("TextOnly")
+                display: Button.TextOnly
+                onClicked:{
+                    showSuccess(qsTr("Button.TextOnly"))
+                }
+            }
+            FluIconButton{
+                iconSource: FluentIcons.ChromeCloseContrast
+                disabled: icon_button_switch.checked
+                iconSize: 15
+                text: qsTr("TextBesideIcon")
+                display: Button.TextBesideIcon
+                onClicked:{
+                    showSuccess(qsTr("Button.TextBesideIcon"))
+                }
+            }
+            FluIconButton{
+                iconSource: FluentIcons.ChromeCloseContrast
+                disabled: icon_button_switch.checked
+                iconSize: 15
+                text: qsTr("TextUnderIcon")
+                display: Button.TextUnderIcon
+                onClicked:{
+                    showSuccess(qsTr("Button.TextUnderIcon"))
+                }
+            }
+        }
+        FluToggleSwitch{
+            id: icon_button_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("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: qsTr("DropDownButton")
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluMenuItem{
+                text: qsTr("Menu_1")
+            }
+            FluMenuItem{
+                text: qsTr("Menu_2")
+            }
+            FluMenuItem{
+                text: qsTr("Menu_3")
+            }
+            FluMenuItem{
+                text: qsTr("Menu_4")
+                onClicked: {
+
+                }
+            }
+        }
+        FluToggleSwitch{
+            id: drop_down_button_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("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: qsTr("Radio Button_1")
+            }
+            FluRadioButton{
+                disabled:radio_button_switch.checked
+                text: qsTr("Radio Button_2")
+            }
+            FluRadioButton{
+                disabled:radio_button_switch.checked
+                text: qsTr("Radio Button_3")
+            }
+        }
+        FluToggleSwitch{
+            id: radio_button_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluRadioButton{
+    checked:true
+    text:"Text Button"
+    onClicked: {
+
+    }
+}'
+    }
+
+}

example/qml-Qt6/page/T_CalendarPicker.qml

@@ -0,0 +1,54 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("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:new Date()
+                onAccepted:{
+                    showSuccess(current.toLocaleString())
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluCalendarPicker{
+
+}'
+    }
+
+}

example/qml-Qt6/page/T_Captcha.qml

@@ -0,0 +1,60 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Captcha")
+
+    FluCaptcha{
+        id: captcha
+        Layout.topMargin: 20
+        ignoreCase:switch_case.checked
+        MouseArea{
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            onClicked: {
+                captcha.refresh()
+            }
+        }
+    }
+
+    FluButton{
+        text: qsTr("Refresh")
+        Layout.topMargin: 20
+        onClicked: {
+            captcha.refresh()
+        }
+    }
+
+    FluToggleSwitch{
+        id: switch_case
+        text: qsTr("Ignore Case")
+        checked: true
+        Layout.topMargin: 10
+    }
+
+    RowLayout{
+        spacing: 10
+        Layout.topMargin: 10
+        FluTextBox{
+            id:text_box
+            placeholderText: qsTr("Please enter a verification code")
+            Layout.preferredWidth: 240
+        }
+        FluButton{
+            text:"verify"
+            onClicked: {
+                var success =  captcha.verify(text_box.text)
+                if(success){
+                    showSuccess(qsTr("The verification code is correct"))
+                }else{
+                    showError(qsTr("Error validation, please re-enter"))
+                }
+            }
+        }
+    }
+}

example/qml-Qt6/page/T_Carousel.qml

@@ -0,0 +1,147 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("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: qsTr("Carousel map, support infinite carousel, infinite swipe, and components implemented with ListView")
+            }
+            Item{
+                width: 400
+                height: 300
+                FluShadow{
+                    radius: 8
+                }
+                FluCarousel{
+                    anchors.fill: parent
+                    delegate: Component{
+                        Image {
+                            anchors.fill: parent
+                            source: model.url
+                            asynchronous: true
+                            fillMode:Image.PreserveAspectCrop
+                        }
+                    }
+                    Layout.topMargin: 20
+                    Layout.leftMargin: 5
+                    Component.onCompleted: {
+                        model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
+                    }
+                }
+            }
+        }
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 340
+        paddings: 10
+        Layout.topMargin: 10
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left:parent.left
+            }
+            Item{
+                width: 400
+                height: 300
+                FluShadow{
+                    radius: 8
+                }
+                FluCarousel{
+                    anchors.fill: parent
+                    loopTime:1500
+                    indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
+                    indicatorMarginTop:15
+                    delegate: Component{
+                        Item{
+                            anchors.fill: parent
+                            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_CheckBox.qml

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

example/qml-Qt6/page/T_Clip.qml

@@ -0,0 +1,106 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtQuick.Window
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Clip")
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 380
+        paddings: 10
+
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text: qsTr("Use with images (this component will have no effect under software rendering)")
+                Layout.topMargin: 20
+            }
+            RowLayout{
+                spacing: 14
+                FluClip{
+                    width: 50
+                    height: 50
+                    radius: [25,0,25,25]
+                    Image {
+                        asynchronous: true
+                        anchors.fill: parent
+                        source: "qrc:/example/res/svg/avatar_1.svg"
+                        sourceSize: Qt.size(width,height)
+                    }
+                }
+                FluClip{
+                    width: 50
+                    height: 50
+                    radius: [10,10,10,10]
+                    Image {
+                        asynchronous: true
+                        anchors.fill: parent
+                        sourceSize: Qt.size(width,height)
+                        source: "qrc:/example/res/svg/avatar_2.svg"
+                    }
+                }
+                FluClip{
+                    width: 50
+                    height: 50
+                    radius: [25,25,25,25]
+                    Image {
+                        asynchronous: true
+                        anchors.fill: parent
+                        sourceSize: Qt.size(width,height)
+                        source: "qrc:/example/res/svg/avatar_3.svg"
+                    }
+                }
+                FluClip{
+                    width: 50
+                    height: 50
+                    radius: [0,25,25,25]
+                    Image {
+                        asynchronous: true
+                        anchors.fill: parent
+                        sourceSize: Qt.size(width,height)
+                        source: "qrc:/example/res/svg/avatar_4.svg"
+                    }
+                }
+            }
+            FluClip{
+                width: 1920/5
+                height: 1200/5
+                radius: [8,8,8,8]
+                Image {
+                    asynchronous: true
+                    source: "qrc:/example/res/image/banner_1.jpg"
+                    anchors.fill: parent
+                    sourceSize: Qt.size(2*width,2*height)
+                }
+                Layout.topMargin: 20
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluClip{
+    radius: [25,25,25,25]
+    width: 50
+    height: 50
+    Image{
+        asynchronous: true
+        anchors.fill: parent
+        source: "qrc:/example/res/svg/avatar_4.svg"
+        sourceSize: Qt.size(width,height)
+    }
+}'
+    }
+
+
+}

example/qml-Qt6/page/T_ColorPicker.qml

@@ -0,0 +1,43 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("ColorPicker")
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 60
+        paddings: 10
+        RowLayout{
+            FluText{
+                text: qsTr("Click to Select a Color - >")
+                Layout.alignment: Qt.AlignVCenter
+            }
+            FluColorPicker{
+                cancelText: qsTr("Cancel")
+                okText: qsTr("OK")
+                titleText: qsTr("Color Picker")
+                editText: qsTr("Edit Color")
+                redText: qsTr("Red")
+                greenText: qsTr("Green")
+                blueText: qsTr("Blue")
+                opacityText: qsTr("Opacity")
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluColorPicker{
+
+}'
+    }
+
+}
+

example/qml-Qt6/page/T_ComboBox.qml

@@ -0,0 +1,104 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("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: 5
+        Layout.topMargin: 20
+        Column{
+            spacing: 5
+            anchors.verticalCenter: parent.verticalCenter
+            FluText{
+                text: "disabled=true"
+                x:10
+            }
+            FluComboBox {
+                disabled: true
+                model: ListModel {
+                    id: model_2
+                    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
+                model: ListModel {
+                    id: model_3
+                    ListElement { text: "Banana" }
+                    ListElement { text: "Apple" }
+                    ListElement { text: "Coconut" }
+                }
+                onAccepted: {
+                    if (find(editText) === -1)
+                        model_3.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

@@ -0,0 +1,75 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("TimePicker")
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 80
+        paddings: 10
+        ColumnLayout{
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text: qsTr("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: qsTr("showYear=false")
+            }
+            FluDatePicker{
+                showYear: false
+                yearText: qsTr("Year")
+                monthText: qsTr("Month")
+                dayText: qsTr("Day")
+                cancelText: qsTr("Cancel")
+                okText: qsTr("OK")
+                onAccepted: {
+                    showSuccess(current.toLocaleDateString())
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluDatePicker{
+    showYear:false
+}'
+    }
+
+}

example/qml-Qt6/page/T_Dialog.qml

@@ -0,0 +1,232 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Dialog")
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
+        Layout.topMargin: 20
+        FluButton{
+            anchors.verticalCenter: parent.verticalCenter
+            text: qsTr("Show Double Button Dialog")
+            onClicked: {
+                double_btn_dialog.open()
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluContentDialog{
+    id:dialog
+    title: qsTr("Friendly Reminder")
+    message: qsTr("Are you sure you want to opt out?")
+    negativeText: qsTr("Cancel")
+    buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
+    onNegativeClicked:{
+        showSuccess(qsTr("Click the Cancel Button"))
+    }
+    positiveText: qsTr("OK")
+    onPositiveClicked:{
+        showSuccess(qsTr("Click the OK Button"))
+        }
+    }
+    dialog.open()'
+    }
+
+    FluContentDialog{
+        id:double_btn_dialog
+        title: qsTr("Friendly Reminder")
+        message: qsTr("Are you sure you want to opt out?")
+        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
+        negativeText: qsTr("Cancel")
+        onNegativeClicked: {
+            showSuccess(qsTr("Click the Cancel Button"))
+        }
+        positiveText: qsTr("OK")
+        onPositiveClicked:{
+            showSuccess(qsTr("Click the OK Button"))
+        }
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
+        Layout.topMargin: 20
+        FluButton{
+            anchors.verticalCenter: parent.verticalCenter
+            text: qsTr("Show Triple Button Dialog")
+            onClicked: {
+                triple_btn_dialog.open()
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluContentDialog{
+    id: dialog
+    title: qsTr("Friendly Reminder")
+    message: qsTr("Are you sure you want to opt out?")
+    negativeText: qsTr("Cancel")
+    buttonFlags: FluContentDialogType.NeutralButton | FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
+    negativeText: qsTr("Cancel")
+    onNegativeClicked: {
+        showSuccess(qsTr("Click the Cancel Button"))
+    }
+    positiveText: qsTr("OK")
+    onPositiveClicked: {
+        showSuccess(qsTr("Click the OK Button"))
+    }
+    neutralText: qsTr("Minimize")
+    onNeutralClicked: {
+        showSuccess(qsTr("Click Minimize"))
+        }
+    }
+    dialog.open()'
+    }
+
+    FluContentDialog{
+        id: triple_btn_dialog
+        title: qsTr("Friendly Reminder")
+        message: qsTr("Are you sure you want to opt out?")
+        buttonFlags: FluContentDialogType.NeutralButton | FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
+        negativeText: qsTr("Cancel")
+        onNegativeClicked: {
+            showSuccess(qsTr("Click the Cancel Button"))
+        }
+        positiveText: qsTr("OK")
+        onPositiveClicked: {
+            showSuccess(qsTr("Click the OK Button"))
+        }
+        neutralText: qsTr("Minimize")
+        onNeutralClicked: {
+            showSuccess(qsTr("Click Minimize"))
+        }
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 100
+        paddings: 10
+        Layout.topMargin: 20
+        FluButton{
+            anchors.top: parent.top
+            anchors.topMargin: 5
+            text: qsTr("Custom Content Dialog")
+            onClicked: {
+                custom_btn_dialog.open()
+            }
+        }
+        FluButton{
+            anchors.top: parent.top
+            anchors.topMargin: 48
+            text: qsTr("Custom Content Dialog2")
+            onClicked: {
+                custom_btn_dialog2.open()
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluContentDialog{
+    id: dialog
+    title: qsTr("Friendly Reminder")
+    message: qsTr("Data is loading, please wait...")
+    negativeText: qsTr("Unload")
+    contentDelegate: Component{
+        Item{
+            width: parent.width
+            height: 80
+            FluProgressRing{
+                anchors.centerIn: parent
+            }
+        }
+    }
+    onNegativeClicked: {
+        showSuccess(qsTr("Click the Cancel Button"))
+    }
+    positiveText :qsTr("OK")
+    onPositiveClicked: {
+        showSuccess(qsTr("Click the OK Button"))
+        }
+    }
+    dialog.open()'
+    }
+
+    FluContentDialog{
+        id: custom_btn_dialog
+        title: qsTr("Friendly Reminder")
+        message: qsTr("Data is loading, please wait...")
+        negativeText: qsTr("Unload")
+        contentDelegate: Component{
+            Item{
+                implicitWidth: parent.width
+                implicitHeight: 80
+                FluProgressRing{
+                    anchors.centerIn: parent
+                }
+            }
+        }
+        onNegativeClicked: {
+            showSuccess(qsTr("Click the Cancel Button"))
+        }
+        positiveText: qsTr("OK")
+        onPositiveClickListener: function(){
+            showError(qsTr("Test the InfoBar level on top of the Popup"))
+        }
+    }
+
+    FluContentDialog{
+        id:custom_btn_dialog2
+        title: qsTr("Line Chart")
+        contentDelegate: Component{
+            Item{
+                implicitWidth: parent.width
+                implicitHeight: 300
+                FluChart{
+                    anchors.fill: parent
+                    chartType: 'line'
+                    chartData: { return {
+                            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                            datasets: [{
+                                    label: 'My First Dataset',
+                                    data: [65, 59, 80, 81, 56, 55, 40],
+                                    fill: false,
+                                    borderColor: 'rgb(75, 192, 192)',
+                                    tension: 0.1
+                                }]
+                        }
+                    }
+                    chartOptions: { return {
+                            maintainAspectRatio: false,
+                            title: {
+                                display: true,
+                                text: 'Chart.js Line Chart - Stacked'
+                            },
+                            tooltips: {
+                                mode: 'index',
+                                intersect: false
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        buttonFlags: FluContentDialogType.PositiveButton
+        positiveText: qsTr("OK")
+        onPositiveClicked: {
+            showSuccess(qsTr("Click the OK Button"))
+        }
+    }
+}

example/qml-Qt6/page/T_Expander.qml

@@ -0,0 +1,110 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("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: qsTr("Open a radio box")
+                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: qsTr("Open a sliding text box")
+                Item{
+                    anchors.fill: parent
+                    Flickable{
+                        id:scrollview
+                        width: parent.width
+                        height: parent.height
+                        contentWidth: width
+                        boundsBehavior: Flickable.StopAtBounds
+                        contentHeight: text_info.height
+                        ScrollBar.vertical: FluScrollBar {}
+                        FluText{
+                            id:text_info
+                            width: scrollview.width
+                            wrapMode: Text.WrapAnywhere
+                            padding: 14
+                            text: qsTr("Permit me to observe: the late emperor was taken from us before he could finish his life`s work, the restoration of Han. Today, the empire is still divided in three, and our very survival is threatened. Yet still the officials at court and the soldiers throughout the realm remain loyal to you, your majesty. Because they remember the late emperor, all of them, and they wish to repay his kindness in service to you. This is the moment to extend your divine influence, to honour the memory of the late Emperor and strengthen the morale of your officers. It is not time to listen to bad advice, or close your ears to the suggestions of loyal men.
+The court and the administration are as one. Both must be judged by one standard. Those who are loyal and good must get what they deserve, but so must the evil-doers who break the law. This will demonstrate the justice of your rule. There cannot be one law for the court and another for the administration.
+Counselors and attendants like Guo Youzhi, Fei Yi, and Dong Yun are all reliable men, loyal of purpose and pure in motive. The late Emperor selected them for office so that they would serve you after his death.These are the men who should be consulted on all palace affairs. Xiang Chong has proved himself a fine general in battle, and the late Emperor believed in him. That is why the assembly has recommended him for overall command. It will keep the troops happy if he is consulted on all military matters.
+Xiang Chong has proved himself a fine general in battle, and the late Emperor believed in him. That is why the assembly has recommended him for overall command. It will keep the troops happy if he is consulted on all military matters.
+The emperors of the Western Han chose their courtiers wisely, and their dynasty flourished. The emperors of the Eastern Han chose poorly, and they doomed the empire to ruin. Whenever the late Emperor discussed this problem with me, he lamented the failings of Emperors Huan and Ling. Advisors like Guo Youzhi, Fei Yi, Chen Zhen, Zhang Yi, and Jiang Wan – these are all men of great integrity and devotion. I encourage you to trust them, your majesty, if the house of Han is to rise again.
+I begin as a common man, farming in my fields in Nanyang, doing what I could to survive in an age of chaos. I never had any interest in making a name for myself as a noble. The late Emperor was not ashamed to visit my cottage and seek my advice. Grateful for his regard, I responded to his appeal and threw myself into his service. Now twenty-one years has passed, the late Emperor always appreciated my caution and, in his final days, entrusted me with his cause.
+Since that moment, I have been tormented day and night by the fear that I might let him down. That is why I crossed the Lu river at the height of summer, and entered the wastelands beyond. Now the south has been subdued, and our forces are fully armed.I should lead our soldiers to conquer the northern heartland and attempt to remove the hateful traitors, restore the house of Han, and return it to the former capital.This the way I mean to honor my debt to the late Emperor and fulfill my duty to you. Guo Youzhi, Fei Yi, and Dong Yun are the ones who should be making policy decisions and recommendations.
+My only desire is to be permitted to drive out the traitors and restore the Han. If I should let you down, punish my offense and report it to the spirit of the late Emperor. If those three advisors should fail in their duties, then they should be punished for their negligence.Your Majesty, consider your course of action carefully. Seek out good advice, and never forget the late Emperor. I depart now on a long expedition, and I will be forever grateful if you heed my advice. Blinded by my own tears, I know not what I write.")
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluExpander{
+    headerText: qsTr("Open a radio box")
+    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: qsTr("Permit me to observe: the late emperor was taken from us before he could finish his life`s work...")
+            }
+        }
+    }
+}'
+    }
+
+
+}

example/qml-Qt6/page/T_FlipView.qml

@@ -0,0 +1,117 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("FlipView")
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 340
+        paddings: 10
+        Layout.topMargin: 20
+        ColumnLayout{
+            anchors.verticalCenter: parent.verticalCenter
+            FluText{
+                text: qsTr("Horizontal 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: qsTr("Vertical 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

@@ -0,0 +1,289 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../global"
+
+FluScrollablePage{
+
+    launchMode: FluPageType.SingleTask
+    animDisabled: true
+
+    ListModel{
+        id: model_header
+        ListElement{
+            icon: "qrc:/example/res/image/ic_home_github.png"
+            title: qsTr("FluentUI GitHub")
+            desc: qsTr("The latest FluentUI controls and styles for your applications.")
+            url: "https://github.com/zhuzichu520/FluentUI"
+            clicked: function(model){
+                Qt.openUrlExternally(model.url)
+            }
+        }
+        ListElement{
+            icon: "qrc:/example/res/image/favicon.ico"
+            title: qsTr("FluentUI Initalizr")
+            desc: qsTr("FluentUI Initializr is a Tool that helps you create and customize Fluent UI projects with various options.")
+            url: "https://github.com/zhuzichu520/FluentUI"
+            clicked: function(model){
+                FluApp.navigate("/fluentInitalizr")
+            }
+        }
+    }
+
+    Item{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 320
+        Image {
+            id: bg
+            fillMode:Image.PreserveAspectCrop
+            anchors.fill: parent
+            verticalAlignment: Qt.AlignTop
+            sourceSize: Qt.size(960,640)
+            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
+            }
+        }
+
+        Component{
+            id:com_grallery
+            Item{
+                id: control
+                width: 220
+                height: 240
+                FluShadow{
+                    radius:5
+                    anchors.fill: item_content
+                }
+                FluClip{
+                    id:item_content
+                    radius: [5,5,5,5]
+                    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: 5
+                        color:FluTheme.itemHoverColor
+                        visible: item_mouse.containsMouse
+                    }
+                    Rectangle{
+                        anchors.fill: parent
+                        radius: 5
+                        color:Qt.rgba(0,0,0,0.0)
+                        visible: !item_mouse.containsMouse
+                    }
+                    ColumnLayout{
+                        Image {
+                            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: {
+                            model.clicked(model)
+                        }
+                    }
+                }
+            }
+        }
+
+        ListView{
+            id: list
+            anchors{
+                left: parent.left
+                right: parent.right
+                bottom: parent.bottom
+            }
+            orientation: ListView.Horizontal
+            height: 240
+            model: model_header
+            header: Item{height: 10;width: 10}
+            footer: Item{height: 10;width: 10}
+            ScrollBar.horizontal: FluScrollBar{
+                id: scrollbar_header
+            }
+            clip: false
+            delegate: com_grallery
+        }
+    }
+
+    Component{
+        id:com_item
+        Item{
+            property string desc: modelData.extra.desc
+            width: 320
+            height: 120
+            FluArea{
+                radius: 8
+                width: 300
+                height: 100
+                anchors.centerIn: parent
+                Rectangle{
+                    anchors.fill: parent
+                    radius: 8
+                    color:{
+                        if(item_mouse.containsMouse){
+                            return FluTheme.itemHoverColor
+                        }
+                        return FluTheme.itemNormalColor
+                    }
+                }
+                Image{
+                    id:item_icon
+                    height: 40
+                    width: 40
+                    source: modelData.extra.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: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
+                    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_Image.qml

@@ -0,0 +1,48 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("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(qsTr("The image failed to load, please reload"))
+                    }
+                }
+                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

@@ -0,0 +1,72 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("InfoBar")
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 270
+        paddings: 10
+        ColumnLayout{
+            spacing: 14
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluButton{
+                text: qsTr("Info")
+                onClicked: {
+                    showInfo(qsTr("This is an InfoBar in the Info Style"))
+                }
+            }
+            FluButton{
+                text: qsTr("Warning")
+                onClicked: {
+                    showWarning(qsTr("This is an InfoBar in the Warning Style"))
+                }
+            }
+            FluButton{
+                text:"Error"
+                onClicked: {
+                    showError(qsTr("This is an InfoBar in the Error Style"))
+                }
+            }
+            FluButton{
+                text:"Success"
+                onClicked: {
+                    showSuccess(qsTr("This is an InfoBar in the Success Style"))
+                }
+            }
+            FluButton{
+                text: qsTr("InfoBar that needs to be turned off manually")
+                onClicked: {
+                    showInfo("This is an InfoBar in the Info Style",0,"Manual shutdown is supported")
+                }
+            }
+            FluButton{
+                text:"Loading"
+                onClicked: {
+                    showLoading()
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'showInfo(qsTr("This is an InfoBar in the Info Style"))
+
+showWarning(qsTr("This is an InfoBar in the Warning Style"))
+
+showError(qsTr("This is an InfoBar in the Error Style"))
+
+showSuccess(qsTr("This is an InfoBar in the Success Style"))'
+    }
+}

example/qml-Qt6/page/T_Menu.qml

@@ -0,0 +1,171 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("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(qsTr("Search"))
+            }
+        }
+        Action {
+            text: qsTr("Disable")
+            enabled:false
+            onTriggered: {
+                showError(qsTr("Disable"))
+            }
+        }
+        FluMenuSeparator { }
+        Action { text: qsTr("Check");checkable: true;checked: true}
+        FluMenu{
+            title: qsTr("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: qsTr("Menu")
+            }
+
+            FluButton{
+                text: qsTr("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: qsTr("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: qsTr("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

@@ -0,0 +1,186 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    property string password: ""
+    property var loginPageRegister: registerForWindowResult("/login")
+
+    title: qsTr("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: qsTr("<font color='red'>Standard</font> mode window，a new window is created every time")
+            }
+            FluButton{
+                text: qsTr("Create Window")
+                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: qsTr("<font color='red'>SingleTask</font> mode window，If a window exists, this activates the window")
+                textFormat: Text.RichText
+            }
+            FluButton{
+                text: qsTr("Create Window")
+                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: qsTr("<font color='red'>SingleInstance</font> mode window，If the window exists, destroy the window and create a new window")
+            }
+            FluButton{
+                text: qsTr("Create Window")
+                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: qsTr("Create the window without carrying any parameters")
+            }
+            FluButton{
+                text: qsTr("Create Window")
+                onClicked: {
+                    FluApp.navigate("/about")
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluButton{
+    text: qsTr("Create Window")
+    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: qsTr("Create a window with the parameter username: zhuzichu")
+            }
+            FluButton{
+                text: qsTr("Create Window")
+                onClicked: {
+                    loginPageRegister.launch({username:"zhuzichu"})
+                }
+            }
+            FluText{
+                text:qsTr("Login Window Returned Password - >")+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: qsTr("Create Window")
+    onClicked: {
+        loginPageRegister.launch({username:"zhuzichu"})
+    }
+}
+'
+    }
+
+}

example/qml-Qt6/page/T_Network.qml

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

example/qml-Qt6/page/T_Pagination.qml

@@ -0,0 +1,49 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("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

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

example/qml-Qt6/page/T_Progress.qml

@@ -0,0 +1,103 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("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

@@ -0,0 +1,102 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("QRCode")
+
+    FluQRCode{
+        id:qrcode
+        Layout.topMargin: 20
+        size:slider_size.value
+        text:text_box.text
+        color:color_picker.current
+        bgColor: bgcolor_picker.current
+        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:"会磨刀的小猪"
+            Layout.preferredWidth: 240
+        }
+    }
+
+    RowLayout{
+        spacing: 10
+        Layout.topMargin: 10
+        FluText{
+            text:"color:"
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluColorPicker{
+            id:color_picker
+            current: Qt.rgba(0,0,0,1)
+        }
+    }
+
+    RowLayout{
+        spacing: 10
+        Layout.topMargin: 10
+        FluText{
+            text:"bgColor:"
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluColorPicker{
+            id:bgcolor_picker
+            current: 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

@@ -0,0 +1,101 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("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: qsTr("Right")
+            }
+            FluRadioButton{
+                disabled: radio_button_switch.checked
+                text: qsTr("Left")
+                textRight: false
+            }
+        }
+        FluToggleSwitch{
+            id: radio_button_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("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: qsTr("Radio Button_1")
+            }
+            FluRadioButton{
+                disabled: radio_button_switch2.checked
+                text: qsTr("Radio Button_2")
+            }
+            FluRadioButton{
+                disabled: radio_button_switch2.checked
+                text: qsTr("Radio Button_3")
+            }
+        }
+        FluToggleSwitch{
+            id: radio_button_switch2
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("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

@@ -0,0 +1,35 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage {
+
+    title: qsTr("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_Rectangle.qml

@@ -0,0 +1,74 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtQuick.Window
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Rectangle")
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 80
+        paddings: 10
+
+        Column{
+            spacing: 15
+            anchors{
+                left: parent.left
+                verticalCenter: parent.verticalCenter
+            }
+            RowLayout{
+                Layout.topMargin: 20
+                FluRectangle{
+                    width: 50
+                    height: 50
+                    color:"#0078d4"
+                    radius:[0,0,0,0]
+                }
+                FluRectangle{
+                    width: 50
+                    height: 50
+                    color:"#744da9"
+                    radius:[15,15,15,15]
+                }
+                FluRectangle{
+                    width: 50
+                    height: 50
+                    color:"#ffeb3b"
+                    radius:[15,0,0,0]
+                }
+                FluRectangle{
+                    width: 50
+                    height: 50
+                    color:"#f7630c"
+                    radius:[0,15,0,0]
+                }
+                FluRectangle{
+                    width: 50
+                    height: 50
+                    color:"#e71123"
+                    radius:[0,0,15,0]
+                }
+                FluRectangle{
+                    width: 50
+                    height: 50
+                    color:"#b4009e"
+                    radius:[0,0,0,15]
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluRectangle{
+    radius: [25,25,25,25]
+    width: 50
+    height: 50
+}'
+    }
+}

example/qml-Qt6/page/T_RemoteLoader.qml

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

example/qml-Qt6/page/T_Settings.qml

@@ -0,0 +1,205 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../global"
+import "../component"
+import "../viewmodel"
+
+FluScrollablePage{
+
+    title: qsTr("Settings")
+
+    SettingsViewModel{
+        id:viewmodel_settings
+    }
+
+    FluEvent{
+        id:event_checkupdate_finish
+        name: "checkUpdateFinish"
+        onTriggered: {
+            btn_checkupdate.loading = false
+        }
+    }
+
+    Component.onCompleted: {
+        FluEventBus.registerEvent(event_checkupdate_finish)
+    }
+
+    Component.onDestruction: {
+        FluEventBus.unRegisterEvent(event_checkupdate_finish)
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 60
+        paddings: 10
+        Row{
+            spacing: 20
+            anchors.verticalCenter: parent.verticalCenter
+            FluText{
+                text: "%1 v%2".arg(qsTr("Current Version")).arg(AppInfo.version)
+                font: FluTextStyle.Body
+                anchors.verticalCenter: parent.verticalCenter
+            }
+            FluLoadingButton{
+                id: btn_checkupdate
+                text: qsTr("Check for Updates")
+                anchors.verticalCenter: parent.verticalCenter
+                onClicked: {
+                    loading = true
+                    FluEventBus.post("checkUpdate")
+                }
+            }
+        }
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 50
+        paddings: 10
+        FluCheckBox{
+            text: qsTr("Use System AppBar")
+            checked: FluApp.useSystemAppBar
+            anchors.verticalCenter: parent.verticalCenter
+            onClicked: {
+                FluApp.useSystemAppBar = !FluApp.useSystemAppBar
+                dialog_restart.open()
+            }
+        }
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 50
+        paddings: 10
+        FluCheckBox{
+            text:qsTr("Fits AppBar Windows")
+            checked: window.fitsAppBarWindows
+            anchors.verticalCenter: parent.verticalCenter
+            onClicked: {
+                window.fitsAppBarWindows = !window.fitsAppBarWindows
+            }
+        }
+    }
+
+    FluContentDialog{
+        id: dialog_restart
+        title: qsTr("Friendly Reminder")
+        message: qsTr("This action requires a restart of the program to take effect, is it restarted?")
+        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
+        negativeText: qsTr("Cancel")
+        positiveText: qsTr("OK")
+        onPositiveClicked: {
+            FluApp.exit(931)
+        }
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 128
+        paddings: 10
+
+        ColumnLayout{
+            spacing: 5
+            anchors{
+                top: parent.top
+                left: parent.left
+            }
+            FluText{
+                text: qsTr("Dark Mode")
+                font: FluTextStyle.BodyStrong
+                Layout.bottomMargin: 4
+            }
+            Repeater{
+                model: [{title:qsTr("System"),mode:FluThemeType.System},{title:qsTr("Light"),mode:FluThemeType.Light},{title:qsTr("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:qsTr("Navigation View Display Mode")
+                font: FluTextStyle.BodyStrong
+                Layout.bottomMargin: 4
+            }
+            Repeater{
+                model: [{title:qsTr("Open"),mode:FluNavigationViewType.Open},{title:qsTr("Compact"),mode:FluNavigationViewType.Compact},{title:qsTr("Minimal"),mode:FluNavigationViewType.Minimal},{title:qsTr("Auto"),mode:FluNavigationViewType.Auto}]
+                delegate: FluRadioButton{
+                    checked : viewmodel_settings.displayMode===modelData.mode
+                    text:modelData.title
+                    clickListener:function(){
+                        viewmodel_settings.displayMode = modelData.mode
+                    }
+                }
+            }
+        }
+    }
+
+    ListModel{
+        id:model_language
+        ListElement{
+            name:"en"
+        }
+        ListElement{
+            name:"zh"
+        }
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 80
+        paddings: 10
+
+        ColumnLayout{
+            spacing: 10
+            anchors{
+                top: parent.top
+                left: parent.left
+            }
+            FluText{
+                text:qsTr("Language")
+                font: FluTextStyle.BodyStrong
+                Layout.bottomMargin: 4
+            }
+            Flow{
+                spacing: 5
+                Repeater{
+                    model: TranslateHelper.languages
+                    delegate: FluRadioButton{
+                        checked: TranslateHelper.current === modelData
+                        text:modelData
+                        clickListener:function(){
+                            TranslateHelper.current = modelData
+                            dialog_restart.open()
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

example/qml-Qt6/page/T_ShortcutPicker.qml

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

example/qml-Qt6/page/T_Slider.qml

@@ -0,0 +1,59 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("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_SplitLayout.qml

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

example/qml-Qt6/page/T_StaggeredLayout.qml

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

example/qml-Qt6/page/T_StatusLayout.qml

@@ -3,11 +3,11 @@ import QtQuick.Layouts
 import QtQuick.Controls
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"StatusView"
+    title: qsTr("StatusLayout")
 
     FluArea{
         id:layout_actions
@@ -25,28 +25,28 @@ FluScrollablePage{
                     text:"Loading"
                     onClicked: {
                         btn_status_mode.text = text
-                        status_view.statusMode = FluStatusView.Loading
+                        status_view.statusMode = FluStatusLayoutType.Loading
                     }
                 }
                 FluMenuItem{
                     text:"Empty"
                     onClicked: {
                         btn_status_mode.text = text
-                        status_view.statusMode = FluStatusView.Empty
+                        status_view.statusMode = FluStatusLayoutType.Empty
                     }
                 }
                 FluMenuItem{
                     text:"Error"
                     onClicked: {
                         btn_status_mode.text = text
-                        status_view.statusMode = FluStatusView.Error
+                        status_view.statusMode = FluStatusLayoutType.Error
                     }
                 }
                 FluMenuItem{
                     text:"Success"
                     onClicked: {
                         btn_status_mode.text = text
-                        status_view.statusMode = FluStatusView.Success
+                        status_view.statusMode = FluStatusLayoutType.Success
                     }
                 }
             }
@@ -58,27 +58,31 @@ FluScrollablePage{
         Layout.topMargin: 10
         height: 380
         paddings: 10
-        FluStatusView{
+        FluStatusLayout{
             id:status_view
             anchors.fill: parent
+            loadingText: qsTr("Loading...")
+            emptyText: qsTr("Empty")
+            errorText: qsTr("The page went wrong...")
+            errorButtonText: qsTr("Reload")
             onErrorClicked:{
-                showError("点击重新加载")
+                showError("Click Reload")
             }
             Rectangle {
                 anchors.fill: parent
-                color:FluTheme.primaryColor.dark
+                color:FluTheme.primaryColor
             }
         }
     }
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
-        code:'FluStatusView{
+        code:'FluStatusLayout{
     anchors.fill: parent
-    statusMode: FluStatusView.Loading
+    statusMode: FluStatusLayoutType.Loading
     Rectangle{
         anchors.fill: parent
-        color:FluTheme.primaryColor.dark
+        color:FluTheme.primaryColor
     }
 }'
     }

example/qml-Qt6/page/T_TabView.qml

@@ -0,0 +1,129 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
+
+    title: qsTr("TabView")
+
+    Component{
+        id:com_page
+        Rectangle{
+            anchors.fill: parent
+            color: argument.normal
+        }
+    }
+
+    function newTab(){
+        tab_view.appendTab("qrc:/example/res/image/favicon.ico",qsTr("Document ")+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)])
+    }
+
+    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:"Never"
+                    onClicked: {
+                        btn_close_button_visibility.text = text
+                        tab_view.closeButtonVisibility = FluTabViewType.Never
+                    }
+                }
+                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

@@ -0,0 +1,589 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "../component"
+
+FluContentPage{
+
+    id:root
+    title: qsTr("TableView")
+    signal checkBoxChanged
+
+    property var dataSource : []
+    property int sortType: 0
+    property bool seletedAll: true
+    property string nameKeyword: ""
+
+    onNameKeywordChanged: {
+        table_view.filter(function(item){
+            if(item.name.includes(nameKeyword)){
+                return true
+            }
+            return false
+        })
+    }
+
+    Component.onCompleted: {
+        loadData(1,1000)
+    }
+
+    onCheckBoxChanged: {
+        for(var i =0;i< table_view.rows ;i++){
+            if(false === table_view.getRow(i).checkbox.options.checked){
+                root.seletedAll = false
+                return
+            }
+        }
+        root.seletedAll = true
+    }
+
+    onSortTypeChanged: {
+        table_view.closeEditor()
+        if(sortType === 0){
+            table_view.sort()
+        }else if(sortType === 1){
+            table_view.sort(
+                        (l, r) =>{
+                            var lage = Number(l.age)
+                            var rage = Number(r.age)
+                            if(lage === rage){
+                                return l._key>r._key
+                            }
+                            return lage>rage
+                        });
+        }else if(sortType === 2){
+            table_view.sort(
+                        (l, r) => {
+                            var lage = Number(l.age)
+                            var rage = Number(r.age)
+                            if(lage === rage){
+                                return l._key>r._key
+                            }
+                            return lage<rage
+                        });
+        }
+    }
+
+    FluContentDialog{
+        id:custom_update_dialog
+        property var text
+        property var onAccpetListener
+        title: qsTr("Modify the column name")
+        negativeText: qsTr("Cancel")
+        contentDelegate: Component{
+            Item{
+                implicitWidth: parent.width
+                implicitHeight: 60
+                FluTextBox{
+                    id:textbox_text
+                    anchors.centerIn: parent
+                    onTextChanged: {
+                        custom_update_dialog.text = textbox_text.text
+                    }
+                }
+                Component.onCompleted: {
+                    textbox_text.text = custom_update_dialog.text
+                    textbox_text.forceActiveFocus()
+                }
+            }
+        }
+        positiveText: qsTr("OK")
+        onPositiveClicked:{
+            if(custom_update_dialog.onAccpetListener){
+                custom_update_dialog.onAccpetListener(custom_update_dialog.text)
+            }
+        }
+        function showDialog(text,listener){
+            custom_update_dialog.text = text
+            custom_update_dialog.onAccpetListener = listener
+            custom_update_dialog.open()
+        }
+    }
+
+    FluMenu{
+        id:pop_filter
+        width: 200
+        height: 89
+
+        contentItem: Item{
+
+            onVisibleChanged: {
+                if(visible){
+                    name_filter_text.text = root.nameKeyword
+                    name_filter_text.cursorPosition = name_filter_text.text.length
+                    name_filter_text.forceActiveFocus()
+                }
+            }
+
+            FluTextBox{
+                id:name_filter_text
+                anchors{
+                    left: parent.left
+                    right: parent.right
+                    top: parent.top
+                    leftMargin: 10
+                    rightMargin: 10
+                    topMargin: 10
+                }
+                iconSource: FluentIcons.Search
+            }
+
+            FluButton{
+                text: qsTr("Search")
+                anchors{
+                    bottom: parent.bottom
+                    right: parent.right
+                    bottomMargin: 10
+                    rightMargin: 10
+                }
+                onClicked: {
+                    root.nameKeyword = name_filter_text.text
+                    pop_filter.close()
+                }
+            }
+
+        }
+
+        function showPopup(){
+            table_view.closeEditor()
+            pop_filter.popup()
+        }
+
+    }
+
+    Component{
+        id:com_checbox
+        Item{
+            FluCheckBox{
+                anchors.centerIn: parent
+                checked: true === options.checked
+                enableAnimation: false
+                clickListener: function(){
+                    var obj = table_view.getRow(row)
+                    obj.checkbox = table_view.customItem(com_checbox,{checked:!options.checked})
+                    table_view.setRow(row,obj)
+                    checkBoxChanged()
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_column_filter_name
+        Item{
+            FluText{
+                text: qsTr("Name")
+                anchors.centerIn: parent
+            }
+            FluIconButton{
+                width: 20
+                height: 20
+                iconSize: 12
+                verticalPadding:0
+                horizontalPadding:0
+                iconSource: FluentIcons.Filter
+                iconColor: {
+                    if("" !== root.nameKeyword){
+                        return FluTheme.primaryColor
+                    }
+                    return FluTheme.dark ?  Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
+                }
+                anchors{
+                    right: parent.right
+                    rightMargin: 3
+                    verticalCenter: parent.verticalCenter
+                }
+                onClicked: {
+                    pop_filter.showPopup()
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_action
+        Item{
+            RowLayout{
+                anchors.centerIn: parent
+                FluButton{
+                    text: qsTr("Delete")
+                    onClicked: {
+                        table_view.closeEditor()
+                        table_view.removeRow(row)
+                    }
+                }
+                FluFilledButton{
+                    text: qsTr("Edit")
+                    onClicked: {
+                        var obj = table_view.getRow(row)
+                        obj.name = "12345"
+                        table_view.setRow(row,obj)
+                        showSuccess(JSON.stringify(obj))
+                    }
+                }
+            }
+        }
+    }
+
+
+    Component{
+        id:com_column_checbox
+        Item{
+            RowLayout{
+                anchors.centerIn: parent
+                FluText{
+                    text: qsTr("Select All")
+                    Layout.alignment: Qt.AlignVCenter
+                }
+                FluCheckBox{
+                    checked: true === root.seletedAll
+                    enableAnimation: false
+                    Layout.alignment: Qt.AlignVCenter
+                    clickListener: function(){
+                        root.seletedAll = !root.seletedAll
+                        var checked = root.seletedAll
+                        itemModel.display = table_view.customItem(com_column_checbox,{"checked":checked})
+                        for(var i =0;i< table_view.rows ;i++){
+                            var rowData = table_view.getRow(i)
+                            rowData.checkbox = table_view.customItem(com_checbox,{"checked":checked})
+                            table_view.setRow(i,rowData)
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_combobox
+        FluComboBox {
+            anchors.fill: parent
+            focus: true
+            editText: 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 === display)
+                selectAll()
+            }
+            onCommit: {
+                editTextChaged(editText)
+                tableView.closeEditor()
+            }
+        }
+    }
+
+    Component{
+        id:com_avatar
+        Item{
+            FluClip{
+                anchors.centerIn: parent
+                width: 40
+                height: 40
+                radius: [20,20,20,20]
+                Image{
+                    anchors.fill: parent
+                    source: {
+                        if(options && options.avatar){
+                            return options.avatar
+                        }
+                        return ""
+                    }
+                    sourceSize: Qt.size(80,80)
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_column_update_title
+        Item{
+            FluText{
+                id:text_title
+                text: {
+                    if(options.title){
+                        return options.title
+                    }
+                    return ""
+                }
+                anchors.fill: parent
+                verticalAlignment: Qt.AlignVCenter
+                horizontalAlignment: Qt.AlignHCenter
+                elide: Text.ElideRight
+            }
+            MouseArea{
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    custom_update_dialog.showDialog(options.title,function(text){
+                        itemModel.display = table_view.customItem(com_column_update_title,{"title":text})
+                    })
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_column_sort_age
+        Item{
+            FluText{
+                text: qsTr("Age")
+                anchors.centerIn: parent
+            }
+            ColumnLayout{
+                spacing: 0
+                anchors{
+                    right: parent.right
+                    verticalCenter: parent.verticalCenter
+                    rightMargin: 4
+                }
+                FluIconButton{
+                    Layout.preferredWidth: 20
+                    Layout.preferredHeight: 15
+                    iconSize: 12
+                    verticalPadding:0
+                    horizontalPadding:0
+                    iconSource: FluentIcons.ChevronUp
+                    iconColor: {
+                        if(1 === root.sortType){
+                            return FluTheme.primaryColor
+                        }
+                        return FluTheme.dark ?  Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
+                    }
+                    onClicked: {
+                        if(root.sortType === 1){
+                            root.sortType = 0
+                            return
+                        }
+                        root.sortType = 1
+                    }
+                }
+                FluIconButton{
+                    Layout.preferredWidth: 20
+                    Layout.preferredHeight: 15
+                    iconSize: 12
+                    verticalPadding:0
+                    horizontalPadding:0
+                    iconSource: FluentIcons.ChevronDown
+                    iconColor: {
+                        if(2 === root.sortType){
+                            return FluTheme.primaryColor
+                        }
+                        return FluTheme.dark ?  Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
+                    }
+                    onClicked: {
+                        if(root.sortType === 2){
+                            root.sortType = 0
+                            return
+                        }
+                        root.sortType = 2
+                    }
+                }
+            }
+        }
+    }
+
+    FluArea{
+        id:layout_controls
+        anchors{
+            left: parent.left
+            right: parent.right
+            top: parent.top
+            topMargin: 20
+        }
+        height: 60
+
+        Row{
+            spacing: 5
+            anchors{
+                left: parent.left
+                leftMargin: 10
+                verticalCenter: parent.verticalCenter
+            }
+
+            FluButton{
+                text: qsTr("Clear All")
+                onClicked: {
+                    table_view.dataSource = []
+                }
+            }
+
+            FluButton{
+                text: qsTr("Delete Selection")
+                onClicked: {
+                    var data = []
+                    var rows = []
+                    for (var i = 0; i < table_view.rows; i++) {
+                        var item = table_view.getRow(i);
+                        rows.push(item)
+                        if (!item.checkbox.options.checked) {
+                            data.push(item);
+                        }
+                    }
+                    var sourceModel = table_view.sourceModel;
+                    for (i = 0; i < sourceModel.rowCount; i++) {
+                        var sourceItem = sourceModel.getRow(i);
+                        const foundItem = rows.find(item=> item._key === sourceItem._key)
+                        if (!foundItem) {
+                            data.push(sourceItem);
+                        }
+                    }
+                    table_view.dataSource = data
+                }
+            }
+
+            FluButton{
+                text: qsTr("Add a row of Data")
+                onClicked: {
+                    table_view.appendRow(genTestObject())
+                }
+            }
+
+        }
+    }
+
+    FluTableView{
+        id:table_view
+        anchors{
+            left: parent.left
+            right: parent.right
+            top: layout_controls.bottom
+            bottom: gagination.top
+        }
+        anchors.topMargin: 5
+        onRowsChanged: {
+            root.checkBoxChanged()
+        }
+        columnSource:[
+            {
+                title: table_view.customItem(com_column_checbox,{checked:true}),
+                dataIndex: 'checkbox',
+                width:100,
+                minimumWidth:100,
+                maximumWidth:100
+            },
+            {
+                title: table_view.customItem(com_column_update_title,{title:qsTr("Avatar")}),
+                dataIndex: 'avatar',
+                width:100
+            },
+            {
+                title: table_view.customItem(com_column_filter_name,{title:qsTr("Name")}),
+                dataIndex: 'name',
+                readOnly:true
+            },
+            {
+                title: table_view.customItem(com_column_sort_age,{sort:0}),
+                dataIndex: 'age',
+                editDelegate:com_combobox,
+                width:100,
+                minimumWidth:100,
+                maximumWidth:100
+            },
+            {
+                title: qsTr("Address"),
+                dataIndex: 'address',
+                width:200,
+                minimumWidth:100,
+                maximumWidth:250
+            },
+            {
+                title: qsTr("Nickname"),
+                dataIndex: 'nickname',
+                width:100,
+                minimumWidth:80,
+                maximumWidth:200
+            },
+            {
+                title: qsTr("Long String"),
+                dataIndex: 'longstring',
+                width:200,
+                minimumWidth:100,
+                maximumWidth:300
+            },
+            {
+                title: qsTr("Options"),
+                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
+        previousText: qsTr("<Previous")
+        nextText: qsTr("Next>")
+        onRequestPage:
+            (page,count)=> {
+                table_view.closeEditor()
+                loadData(page,count)
+                table_view.resetPosition()
+            }
+    }
+
+    function genTestObject(){
+        var ages = ["100", "300", "500", "1000"];
+        function getRandomAge() {
+            var randomIndex = Math.floor(Math.random() * ages.length);
+            return ages[randomIndex];
+        }
+        var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"];
+        function getRandomName(){
+            var randomIndex = Math.floor(Math.random() * names.length);
+            return names[randomIndex];
+        }
+        var nicknames = ["复海大圣","混天大圣","移山大圣","通风大圣","驱神大圣","齐天大圣","平天大圣"]
+        function getRandomNickname(){
+            var randomIndex = Math.floor(Math.random() * nicknames.length);
+            return nicknames[randomIndex];
+        }
+        var addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
+        function getRandomAddresses(){
+            var randomIndex = Math.floor(Math.random() * addresses.length);
+            return addresses[randomIndex];
+        }
+        var avatars = ["qrc:/example/res/svg/avatar_1.svg", "qrc:/example/res/svg/avatar_2.svg", "qrc:/example/res/svg/avatar_3.svg", "qrc:/example/res/svg/avatar_4.svg","qrc:/example/res/svg/avatar_5.svg","qrc:/example/res/svg/avatar_6.svg","qrc:/example/res/svg/avatar_7.svg","qrc:/example/res/svg/avatar_8.svg","qrc:/example/res/svg/avatar_9.svg","qrc:/example/res/svg/avatar_10.svg","qrc:/example/res/svg/avatar_11.svg","qrc:/example/res/svg/avatar_12.svg"];
+        function getAvatar(){
+            var randomIndex = Math.floor(Math.random() * avatars.length);
+            return avatars[randomIndex];
+        }
+        return {
+            checkbox: table_view.customItem(com_checbox,{checked:root.seletedAll}),
+            avatar:table_view.customItem(com_avatar,{avatar:getAvatar()}),
+            name: getRandomName(),
+            age:getRandomAge(),
+            address: getRandomAddresses(),
+            nickname: getRandomNickname(),
+            longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
+            action: table_view.customItem(com_action),
+            _minimumHeight:50,
+            _key:FluTools.uuid()
+        }
+    }
+    function loadData(page,count){
+        root.seletedAll = true
+        const dataSource = []
+        for(var i=0;i<count;i++){
+            dataSource.push(genTestObject())
+        }
+        root.dataSource = dataSource
+        table_view.dataSource = root.dataSource
+    }
+}

example/qml-Qt6/page/T_Text.qml

@@ -0,0 +1,32 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Text")
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 60
+        paddings: 10
+
+        FluCopyableText{
+            text: qsTr("This is a text that can be copied")
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluCopyableText{
+    text: qsTr("This is a text that can be copied")
+}'
+    }
+
+}

example/qml-Qt6/page/T_TextBox.qml

@@ -0,0 +1,203 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "../component"
+import "../viewmodel"
+
+FluScrollablePage{
+
+    title: qsTr("TextBox")
+
+    TextBoxViewModel{
+        id:viewModel
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
+        Layout.topMargin: 20
+
+        FluTextBox{
+            placeholderText: qsTr("Single-line Input Box")
+            disabled: text_box_switch.checked
+            cleanEnabled: true
+            text: viewModel.text1
+            onTextChanged: {
+                viewModel.text1 = text
+            }
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+
+        FluToggleSwitch{
+            id: text_box_switch
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluTextBox{
+    placeholderText: qsTr("Single-line Input Box")
+}'
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
+        Layout.topMargin: 20
+
+        FluPasswordBox{
+            placeholderText: qsTr("Please enter your password")
+            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: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluPasswordBox{
+    placeholderText: qsTr("Please enter your password")
+}'
+    }
+
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 36+multiine_textbox.height
+        paddings: 10
+        Layout.topMargin: 20
+
+        FluMultilineTextBox{
+            id: multiine_textbox
+            placeholderText: qsTr("Multi-line Input Box")
+            text:viewModel.text2
+            onTextChanged: {
+                viewModel.text2 = text
+            }
+            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: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluMultilineTextBox{
+    placeholderText: qsTr("Multi-line Input Box")
+}'
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
+        Layout.topMargin: 20
+        FluAutoSuggestBox{
+            placeholderText: qsTr("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: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluAutoSuggestBox{
+    placeholderText: qsTr("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: qsTr("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

@@ -0,0 +1,136 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    property var colorData: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
+    id: root
+    title: qsTr("Theme")
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        Layout.preferredHeight: 340
+        paddings: 10
+
+        ColumnLayout{
+            spacing:0
+            anchors{
+                left: parent.left
+            }
+            FluText{
+                text: qsTr("Theme colors")
+                Layout.topMargin: 10
+            }
+            RowLayout{
+                Layout.topMargin: 5
+                Repeater{
+                    model: root.colorData
+                    delegate:  Rectangle{
+                        width: 42
+                        height: 42
+                        radius: 4
+                        color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
+                        border.color: modelData.darker
+                        FluIcon {
+                            anchors.centerIn: parent
+                            iconSource: FluentIcons.AcceptMedium
+                            iconSize: 15
+                            visible: modelData === FluTheme.accentColor
+                            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.accentColor = modelData
+                            }
+                        }
+                    }
+                }
+            }
+            Row{
+                Layout.topMargin: 10
+                spacing: 10
+                FluText{
+                    text: qsTr("Customize the Theme Color")
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+                FluColorPicker{
+                    id:color_picker
+                    current: FluTheme.accentColor.normal
+                    onAccepted: {
+                       FluTheme.accentColor = FluColors.createAccentColor(current)
+                    }
+                    FluIcon {
+                        anchors.centerIn: parent
+                        iconSource: FluentIcons.AcceptMedium
+                        iconSize: 15
+                        visible: {
+                            for(var i =0 ;i< root.colorData.length; i++){
+                                if(root.colorData[i] === FluTheme.accentColor){
+                                    return false
+                                }
+                            }
+                            return true
+                        }
+                        color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+                    }
+                }
+            }
+            FluText{
+                text: qsTr("Dark Mode")
+                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: qsTr("Native Text")
+                Layout.topMargin: 20
+            }
+            FluToggleSwitch{
+                Layout.topMargin: 5
+                checked: FluTheme.nativeText
+                onClicked: {
+                    FluTheme.nativeText = !FluTheme.nativeText
+                }
+            }
+            FluText{
+                text: qsTr("Open Animation")
+                Layout.topMargin: 20
+            }
+            FluToggleSwitch{
+                Layout.topMargin: 5
+                checked: FluTheme.enableAnimation
+                onClicked: {
+                    FluTheme.enableAnimation = !FluTheme.enableAnimation
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluTheme.accentColor = FluColors.Orange
+
+FluTheme.dark = true
+
+FluTheme.nativeText = true'
+    }
+
+
+}

example/qml-Qt6/page/T_TimePicker.qml

@@ -0,0 +1,92 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("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: qsTr("hourFormat=FluTimePickerType.H")
+            }
+
+            FluTimePicker{
+                current: new Date()
+                amText: qsTr("AM")
+                pmText: qsTr("PM")
+                hourText: qsTr("Hour")
+                minuteText: qsTr("Minute")
+                cancelText: qsTr("Cancel")
+                okText: qsTr("OK")
+                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: qsTr("hourFormat=FluTimePickerType.HH")
+            }
+
+            FluTimePicker{
+                hourFormat:FluTimePickerType.HH
+                amText: qsTr("AM")
+                pmText: qsTr("PM")
+                hourText: qsTr("Hour")
+                minuteText: qsTr("Minute")
+                cancelText: qsTr("Cancel")
+                okText: qsTr("OK")
+                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

@@ -0,0 +1,171 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("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:"2021-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"
+            Layout.preferredWidth: 240
+        }
+        FluFilledButton{
+            text: qsTr("Append")
+            onClicked: {
+                list_model.append({text:text_box.text})
+            }
+        }
+        FluFilledButton{
+            text: qsTr("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

@@ -0,0 +1,51 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("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: qsTr("Right")
+            }
+            FluToggleSwitch{
+                disabled: toggle_switch.checked
+                text: qsTr("Left")
+                textRight: false
+            }
+        }
+        FluToggleSwitch{
+            id: toggle_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluToggleSwitch{
+    text:"Text"
+}'
+    }
+
+
+}

example/qml-Qt6/page/T_Tooltip.qml

@@ -0,0 +1,103 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Tooltip")
+
+    FluText{
+        Layout.topMargin: 20
+        text: qsTr("Hover over Tultip and it pops up")
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 68
+        paddings: 10
+
+        Column{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text: qsTr("Text properties of FluIconButton support the Tooltip pop-up window by default")
+            }
+            FluIconButton{
+                iconSource:FluentIcons.ChromeCloseContrast
+                iconSize: 15
+                text: qsTr("Delete")
+                onClicked:{
+                    showSuccess(qsTr("Click IconButton"))
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluIconButton{
+    iconSource:FluentIcons.ChromeCloseContrast
+    iconSize: 15
+    text: qsTr("Delete")
+    onClicked:{
+        showSuccess(qsTr("Click IconButton"))
+    }
+}
+'
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 68
+        paddings: 10
+
+        Column{
+            spacing: 5
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text: qsTr("Add a Tooltip pop-up to a Button")
+            }
+            FluButton{
+                id:button_1
+                text: qsTr("Delete")
+                onClicked:{
+                    showSuccess(qsTr("Click 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: qsTr("Delete")
+    FluTooltip{
+        visible: button_1.hovered
+        text:button_1.text
+        delay: 1000
+    }
+    onClicked:{
+        showSuccess(qsTr("Click Button"))
+    }
+}'
+    }
+
+
+}

example/qml-Qt6/page/T_Tour.qml

@@ -0,0 +1,80 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Tour")
+
+    FluTour{
+        id:tour
+        steps:[
+            {title:qsTr("Upload File"),description: qsTr("Put your files here."),target:()=>btn_upload},
+            {title:qsTr("Save"),description: qsTr("Save your changes."),target:()=>btn_save},
+            {title:qsTr("Other Actions"),description: qsTr("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: qsTr("Begin Tour")
+            onClicked: {
+                tour.open()
+            }
+        }
+
+        Row{
+            spacing: 20
+            anchors{
+                top: parent.top
+                topMargin: 60
+            }
+            FluButton{
+                id: btn_upload
+                text: qsTr("Upload")
+                onClicked: {
+                    showInfo(qsTr("Upload"))
+                }
+            }
+            FluFilledButton{
+                id: btn_save
+                text: qsTr("Save")
+                onClicked: {
+                    showInfo(qsTr("Save"))
+                }
+            }
+            FluIconButton{
+                id: btn_more
+                iconSource: FluentIcons.More
+                onClicked: {
+                    showInfo(qsTr("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

@@ -0,0 +1,131 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluContentPage {
+
+    title: qsTr("TreeView")
+
+    function treeData(){
+        const dig = (path = '0', level = 4) => {
+            const list = [];
+            for (let i = 0; i < 6; i += 1) {
+                const key = `${path}-${i}`;
+                const treeNode = {
+                    title: key,
+                    key,
+                };
+                if (level > 0) {
+                    treeNode.children = dig(key, level - 1);
+                }
+                list.push(treeNode);
+            }
+            return list;
+        };
+        return dig();
+    }
+
+    Column{
+        id: layout_column
+        spacing: 12
+        width: 300
+        anchors{
+            topMargin: 20
+            top:parent.top
+            left: parent.left
+            leftMargin: 10
+            bottom:parent.bottom
+            bottomMargin: 20
+        }
+
+        FluText{
+            text: qsTr("Total %1 data, %2 data currently displayed").arg(tree_view.count()).arg(tree_view.visibleCount())
+        }
+
+        FluText{
+            text: qsTr("A total of %1 data items are selected").arg(tree_view.selectionModel().length)
+        }
+
+        RowLayout{
+            spacing: 10
+            FluText{
+                text: "cellHeight:"
+                Layout.alignment: Qt.AlignVCenter
+            }
+            FluSlider{
+                id: slider_cell_height
+                value: 30
+                from: 30
+                to:100
+            }
+        }
+        RowLayout{
+            spacing: 10
+            FluText{
+                text: "depthPadding:"
+                Layout.alignment: Qt.AlignVCenter
+            }
+            FluSlider{
+                id: slider_depth_padding
+                value: 30
+                from: 30
+                to:100
+            }
+        }
+        FluToggleSwitch{
+            id: switch_showline
+            text:"showLine"
+            checked: false
+        }
+        FluToggleSwitch{
+            id: switch_draggable
+            text:"draggable"
+            checked: false
+        }
+        FluToggleSwitch{
+            id: switch_checkable
+            text:"checkable"
+            checked: false
+        }
+        FluButton{
+            text: "all expand"
+            onClicked: {
+                tree_view.allExpand()
+            }
+        }
+        FluButton{
+            text: "all collapse"
+            onClicked: {
+                tree_view.allCollapse()
+            }
+        }
+    }
+    FluArea{
+        anchors{
+            left: layout_column.right
+            top: parent.top
+            bottom: parent.bottom
+            right: parent.right
+            rightMargin: 5
+            topMargin: 5
+            bottomMargin: 5
+        }
+        FluShadow{}
+        FluTreeView{
+            id:tree_view
+            anchors.fill: parent
+            cellHeight: slider_cell_height.value
+            draggable:switch_draggable.checked
+            showLine: switch_showline.checked
+            checkable:switch_checkable.checked
+            depthPadding: slider_depth_padding.value
+            Component.onCompleted: {
+                var data = treeData()
+                dataSource = data
+            }
+        }
+    }
+}

example/qml-Qt6/page/T_Typography.qml

@@ -0,0 +1,84 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import FluentUI
+
+FluContentPage {
+
+    property real textScale: 1
+
+    title: qsTr("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

@@ -0,0 +1,131 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Window
+import FluentUI
+import "../component"
+
+FluContentPage{
+
+    title: qsTr("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: "会磨刀的小猪"
+                    Layout.preferredWidth: 240
+                }
+            }
+
+            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
+                    current: Qt.rgba(0,0,0,0.1)
+                }
+            }
+        }
+
+        FluWatermark{
+            id: water_mark
+            anchors.fill: parent
+            text:text_box.text
+            textColor: color_picker.current
+            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/viewmodel/SettingsViewModel.qml

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

example/qml-Qt6/viewmodel/TextBoxViewModel.qml

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

example/qml-Qt6/window/AboutWindow.qml

@@ -0,0 +1,165 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI
+import "../component"
+
+FluWindow {
+
+    id:window
+    title:"关于"
+    width: 600
+    height: 580
+    fixSize: true
+    launchMode: FluWindowType.SingleTask
+
+    ColumnLayout{
+        anchors{
+            top: parent.top
+            left: parent.left
+            right: parent.right
+        }
+        spacing: 5
+
+        RowLayout{
+            Layout.topMargin: 15
+            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.leftMargin: 15
+            FluText{
+                text:"作者："
+            }
+            FluText{
+                text:"朱子楚"
+                Layout.alignment: Qt.AlignBottom
+            }
+        }
+
+        RowLayout{
+            spacing: 14
+            Layout.leftMargin: 15
+            FluText{
+                text:"微信号："
+            }
+            FluText{
+                text:"FluentUI"
+                Layout.alignment: Qt.AlignBottom
+            }
+            FluText{
+                text:"(有啥问题可能不会马上回，但发了红包必须立马回......)"
+            }
+        }
+
+        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/CrashWindow.qml

@@ -0,0 +1,79 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI
+import Qt.labs.platform
+import "../component"
+
+FluWindow {
+
+    id:window
+    title: qsTr("Friendly Reminder")
+    width: 300
+    height: 400
+    fixSize: true
+    showMinimize: false
+
+    property string crashFilePath
+
+    Component.onCompleted: {
+        window.stayTop = true
+    }
+
+    onInitArgument:
+        (argument)=>{
+            crashFilePath = argument.crashFilePath
+        }
+
+    Image{
+        width: 540/2
+        height: 285/2
+        anchors{
+            horizontalCenter: parent.horizontalCenter
+            top: parent.top
+            topMargin: 40
+        }
+        source: "qrc:/example/res/image/ic_crash.png"
+    }
+
+    FluText{
+        id:text_info
+        anchors{
+            top: parent.top
+            topMargin: 240
+            left: parent.left
+            right: parent.right
+            leftMargin: 10
+            rightMargin: 10
+        }
+        wrapMode: Text.WrapAnywhere
+        text: qsTr("We apologize for the inconvenience caused by an unexpected error")
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    RowLayout{
+        anchors{
+            horizontalCenter: parent.horizontalCenter
+            bottom: parent.bottom
+            bottomMargin: 20
+        }
+        FluButton{
+            text: qsTr("Report Logs")
+            onClicked: {
+                FluTools.showFileInFolder(crashFilePath)
+            }
+        }
+        Item{
+            width: 30
+            height: 1
+        }
+        FluFilledButton{
+            text: qsTr("Restart Program")
+            onClicked: {
+                FluApp.exit(931)
+            }
+        }
+    }
+
+}

example/qml-Qt6/window/FluentInitalizrWindow.qml

@@ -0,0 +1,112 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI
+import Qt.labs.platform
+import "../component"
+
+FluWindow {
+
+    id:window
+    title:qsTr("FluentUI Initalizr")
+    width: 600
+    height: 400
+    fixSize: true
+    modality: Qt.ApplicationModal
+    launchMode: FluWindowType.SingleTask
+    showStayTop: false
+
+    Connections{
+        target: InitalizrHelper
+        function onError(message){
+            showError(message)
+        }
+        function onSuccess(path){
+            FluTools.showFileInFolder(path+"/CMakeLists.txt")
+            window.close()
+        }
+    }
+
+    FluText{
+        id:text_title
+        text:qsTr("FluentUI Initalizr")
+        font: FluTextStyle.Title
+        anchors{
+            left: parent.left
+            top: parent.top
+            leftMargin: 20
+            topMargin: 20
+        }
+    }
+
+    Column{
+        spacing: 14
+        anchors{
+            left: parent.left
+            top: text_title.bottom
+            leftMargin: 20
+            topMargin: 20
+        }
+        FluTextBox{
+            id:text_box_name
+            width: 180
+            placeholderText: qsTr("Name")
+            focus: true
+        }
+        Row{
+            spacing: 8
+            FluTextBox{
+                id:text_box_path
+                width: 300
+                placeholderText: qsTr("Create In")
+                anchors.verticalCenter: parent.verticalCenter
+            }
+            FluButton{
+                text:qsTr("Browse")
+                anchors.verticalCenter: parent.verticalCenter
+                onClicked: {
+                    folder_dialog.open()
+                }
+            }
+        }
+    }
+
+    FolderDialog{
+        id:folder_dialog
+        onAccepted: {
+            text_box_path.text = FluTools.toLocalPath(currentFolder)
+        }
+    }
+
+    Rectangle{
+        id:layout_actions
+        width: parent.width
+        height: 60
+        anchors.bottom: parent.bottom
+        color: FluTheme.backgroundColor
+        Row{
+            height: parent.height
+            spacing: 20
+            anchors{
+                right: parent.right
+                rightMargin: 20
+            }
+            FluButton{
+                text:qsTr("Cancel")
+                width: 120
+                anchors.verticalCenter: parent.verticalCenter
+                onClicked: {
+                    window.close()
+                }
+            }
+            FluFilledButton{
+                text:qsTr("Create")
+                width: 120
+                anchors.verticalCenter: parent.verticalCenter
+                onClicked: {
+                    InitalizrHelper.generate(text_box_name.text,text_box_path.text)
+                }
+            }
+        }
+    }
+}

example/qml-Qt6/window/HotloadWindow.qml

@@ -0,0 +1,97 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI
+import example
+import "../component"
+
+FluWindow {
+
+    id:window
+    title: qsTr("Hot Loader")
+    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: FluStatusLayoutType.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: qsTr("Drag in a qml file")
+            font.pixelSize: 26
+            anchors.centerIn: parent
+            visible: !loader.itemLodaer().item && loader.statusMode === FluStatusLayoutType.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
+                    }
+                    var url = getUrlByEvent(event)
+                    if(url === ""){
+                        event.accepted = false
+                        return
+                    }
+                    var fileExtension = url.substring(url.lastIndexOf(".") + 1)
+                    if (fileExtension !== "qml") {
+                        event.accepted = false
+                        return
+                    }
+                    return true
+                }
+            onDropped:
+                (event)=>{
+                    var url = getUrlByEvent(event)
+                    if(url !== ""){
+                        loader.source = url
+                        watcher.path = url
+                        loader.reload()
+                    }
+                }
+        }
+    }
+
+    function getUrlByEvent(event){
+        var url = ""
+        if (event.urls.length === 0) {
+            url = "file:///"+event.getDataAsString("text/plain")
+        }else{
+            url = event.urls[0].toString()
+        }
+        return url
+    }
+
+}

example/qml-Qt6/window/LoginWindow.qml

@@ -0,0 +1,59 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import FluentUI
+import "../component"
+
+FluWindow {
+
+    id: window
+    title: qsTr("Login")
+    width: 400
+    height: 400
+    fixSize: true
+    modality: Qt.ApplicationModal
+    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: qsTr("Please enter the account")
+            Layout.preferredWidth: 260
+            Layout.alignment: Qt.AlignHCenter
+        }
+
+        FluTextBox{
+            id: textbox_password
+            Layout.topMargin: 20
+            Layout.preferredWidth: 260
+            placeholderText: qsTr("Please enter your password")
+            echoMode:TextInput.Password
+            Layout.alignment: Qt.AlignHCenter
+        }
+
+        FluFilledButton{
+            text: qsTr("Login")
+            Layout.alignment: Qt.AlignHCenter
+            Layout.topMargin: 20
+            onClicked:{
+                if(textbox_password.text === ""){
+                    showError(qsTr("Please feel free to enter a password"))
+                    return
+                }
+                onResult({password:textbox_password.text})
+                window.close()
+            }
+        }
+    }
+}

example/qml-Qt6/window/MainWindow.qml

@@ -0,0 +1,395 @@
+import QtQuick
+import QtQuick.Window
+import QtQuick.Controls
+import QtQuick.Layouts
+import Qt.labs.platform
+import FluentUI
+import example
+import "../component"
+import "../global"
+import "../viewmodel"
+
+FluWindow {
+
+    id:window
+    title: "FluentUI"
+    width: 1000
+    height: 680
+    minimumWidth: 520
+    minimumHeight: 200
+    launchMode: FluWindowType.SingleTask
+    fitsAppBarWindows: true
+    appBar: FluAppBar {
+        height: 30
+        showDark: true
+        darkClickListener:(button)=>handleDarkChanged(button)
+        closeClickListener: ()=>{dialog_close.open()}
+        z:7
+    }
+
+    SettingsViewModel{
+        id:viewmodel_settings
+    }
+
+    FluEvent{
+        id:event_checkupdate
+        name: "checkUpdate"
+        onTriggered: {
+            checkUpdate(false)
+        }
+    }
+
+    onFirstVisible: {
+        timer_tour_delay.restart()
+    }
+
+    Timer{
+        id:timer_tour_delay
+        interval: 200
+        onTriggered: {
+            tour.open()
+        }
+    }
+
+    Component.onCompleted: {
+        checkUpdate(true)
+        FluEventBus.registerEvent(event_checkupdate)
+    }
+
+    Component.onDestruction: {
+        FluEventBus.unRegisterEvent(event_checkupdate)
+    }
+
+    SystemTrayIcon {
+        id:system_tray
+        visible: true
+        icon.source: "qrc:/example/res/image/favicon.ico"
+        tooltip: "FluentUI"
+        menu: Menu {
+            MenuItem {
+                text: "退出"
+                onTriggered: {
+                    FluApp.exit()
+                }
+            }
+        }
+        onActivated:
+            (reason)=>{
+                if(reason === SystemTrayIcon.Trigger){
+                    window.show()
+                    window.raise()
+                    window.requestActivate()
+                }
+            }
+    }
+
+    Timer{
+        id: timer_window_hide_delay
+        interval: 150
+        onTriggered: {
+            window.hide()
+        }
+    }
+
+    FluContentDialog{
+        id: dialog_close
+        title: qsTr("Quit")
+        message: qsTr("Are you sure you want to exit the program?")
+        negativeText: qsTr("Minimize")
+        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.NeutralButton | FluContentDialogType.PositiveButton
+        onNegativeClicked: {
+            system_tray.showMessage(qsTr("Friendly Reminder"),qsTr("FluentUI is hidden from the tray, click on the tray to activate the window again"));
+            timer_window_hide_delay.restart()
+        }
+        positiveText: qsTr("Quit")
+        neutralText: qsTr("Cancel")
+        onPositiveClicked:{
+            FluApp.exit(0)
+        }
+    }
+
+    Component{
+        id: nav_item_right_menu
+        FluMenu{
+            width: 186
+            FluMenuItem{
+                text: qsTr("Open in Separate Window")
+                font.pixelSize: 12
+                onClicked: {
+                    FluApp.navigate("/pageWindow",{title:modelData.title,url:modelData.url})
+                }
+            }
+        }
+    }
+
+    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
+            Row{
+                id:layout_back_buttons
+                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()
+                    }
+                }
+                Component.onCompleted: {
+                    appBar.setHitTestVisible(layout_back_buttons)
+                }
+            }
+            FluRemoteLoader{
+                id:loader
+                lazy: true
+                anchors.fill: parent
+                source: "https://zhu-zichu.gitee.io/Qt_168_LieflatPage.qml"
+            }
+        }
+        front: Item{
+            id:page_front
+            visible: flipable.flipAngle !== 180
+            anchors.fill: flipable
+            FluNavigationView{
+                property int clickCount: 0
+                id:nav_view
+                width: parent.width
+                height: parent.height
+                z:999
+                //Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式
+                //                pageMode: FluNavigationViewType.Stack
+                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存，可以配合FluViewModel保存页面数据（推荐）
+                pageMode: FluNavigationViewType.NoStack
+                items: ItemsOriginal
+                footerItems:ItemsFooter
+                topPadding:{
+                    if(window.useSystemAppBar){
+                        return 0
+                    }
+                    return FluTools.isMacos() ? 20 : 0
+                }
+                displayMode:viewmodel_settings.displayMode
+                logo: "qrc:/example/res/image/favicon.ico"
+                title:"FluentUI"
+                onLogoClicked:{
+                    clickCount += 1
+                    showSuccess("%1:%2".arg(qsTr("Click Time")).arg(clickCount))
+                    if(clickCount === 5){
+                        loader.reload()
+                        flipable.flipped = true
+                        clickCount = 0
+                    }
+                }
+                autoSuggestBox:FluAutoSuggestBox{
+                    iconSource: FluentIcons.Search
+                    items: ItemsOriginal.getSearchData()
+                    placeholderText: qsTr("Search")
+                    onItemClicked:
+                        (data)=>{
+                            ItemsOriginal.startPageByItem(data)
+                        }
+                }
+                Component.onCompleted: {
+                    ItemsOriginal.navigationView = nav_view
+                    ItemsOriginal.paneItemMenu = nav_item_right_menu
+                    ItemsFooter.navigationView = nav_view
+                    ItemsFooter.paneItemMenu = nav_item_right_menu
+                    appBar.setHitTestVisible(nav_view.buttonMenu)
+                    appBar.setHitTestVisible(nav_view.buttonBack)
+                    appBar.setHitTestVisible(nav_view.imageLogo)
+                    setCurrentIndex(0)
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_reveal
+        CircularReveal{
+            id:reveal
+            target:window.contentItem
+            anchors.fill: parent
+            onAnimationFinished:{
+                //动画结束后释放资源
+                loader_reveal.sourceComponent = undefined
+            }
+            onImageChanged: {
+                changeDark()
+            }
+        }
+    }
+
+    FluLoader{
+        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(!FluTheme.enableAnimation || window.fitsAppBarWindows === false){
+            changeDark()
+        }else{
+            if(loader_reveal.sourceComponent){
+                return
+            }
+            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
+        finishText: qsTr("Finish")
+        nextText: qsTr("Next")
+        previousText: qsTr("Previous")
+        steps:{
+            var data = []
+            if(!window.useSystemAppBar){
+                data.push({title:qsTr("Dark Mode"),description: qsTr("Here you can switch to night mode."),target:()=>appBar.buttonDark})
+            }
+            data.push({title:qsTr("Hide Easter eggs"),description: qsTr("Try a few more clicks!!"),target:()=>nav_view.imageLogo})
+            return data
+        }
+    }
+
+    FpsItem{
+        id:fps_item
+    }
+
+    FluText{
+        text: "fps %1".arg(fps_item.fps)
+        opacity: 0.3
+        anchors{
+            bottom: parent.bottom
+            right: parent.right
+            bottomMargin: 5
+            rightMargin: 5
+        }
+    }
+
+    FluContentDialog{
+        property string newVerson
+        property string body
+        id: dialog_update
+        title: qsTr("Upgrade Tips")
+        message:qsTr("FluentUI is currently up to date ")+ newVerson +qsTr(" -- The current app version") +AppInfo.version+qsTr(" \nNow go and download the new version？\n\nUpdated content: \n")+body
+        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
+        negativeText: qsTr("Cancel")
+        positiveText: qsTr("OK")
+        onPositiveClicked:{
+            Qt.openUrlExternally("https://github.com/zhuzichu520/FluentUI/releases/latest")
+        }
+    }
+
+    FluNetworkCallable{
+        id:callable
+        property bool silent: true
+        onStart: {
+            console.debug("satrt check update...")
+        }
+        onFinish: {
+            console.debug("check update finish")
+            FluEventBus.post("checkUpdateFinish");
+        }
+        onSuccess:
+            (result)=>{
+                var data = JSON.parse(result)
+                console.debug("current version "+AppInfo.version)
+                console.debug("new version "+data.tag_name)
+                if(data.tag_name !== AppInfo.version){
+                    dialog_update.newVerson =  data.tag_name
+                    dialog_update.body = data.body
+                    dialog_update.open()
+                }else{
+                    if(!silent){
+                        showInfo(qsTr("The current version is already the latest"))
+                    }
+                }
+            }
+        onError:
+            (status,errorString)=>{
+                if(!silent){
+                    showError(qsTr("The network is abnormal"))
+                }
+                console.debug(status+";"+errorString)
+            }
+    }
+
+    function checkUpdate(silent){
+        callable.silent = silent
+        FluNetwork.get("https://api.github.com/repos/zhuzichu520/FluentUI/releases/latest")
+        .go(callable)
+    }
+}

example/qml-Qt6/window/PageWindow.qml

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

example/qml-Qt6/window/SingleInstanceWindow.qml

@@ -0,0 +1,35 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI
+import "../component"
+
+FluWindow {
+
+    id: window
+    title: qsTr("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: qsTr("I'm a SingleInstance window, and if I exist, I'll destroy the previous window and create a new one")
+    }
+}

example/qml-Qt6/window/SingleTaskWindow.qml

@@ -0,0 +1,21 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI
+import "../component"
+
+FluWindow {
+
+    id: window
+    title: qsTr("SingleTask")
+    width: 500
+    height: 600
+    fixSize: true
+    launchMode: FluWindowType.SingleTask
+
+    FluText{
+        anchors.centerIn: parent
+        text: qsTr("I'm a SingleTask mode window, and if I exist, I activate the window")
+    }
+
+}

example/qml-Qt6/window/StandardWindow.qml

@@ -0,0 +1,43 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI
+import "../component"
+
+FluWindow {
+
+    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: qsTr("I'm a Standard mode window, and every time I create a new window")
+    }
+
+}

example/qml/App.qml

@@ -1,23 +1,60 @@
-import QtQuick
-import QtQuick.Window
-import QtQuick.Controls
-import QtQuick.Layouts
-import FluentUI
+import QtQuick 2.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import FluentUI 1.0
+
+Item {
+    id: app
+
+    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)
+        }
+    }
 
-Window {
-    id:app
     Component.onCompleted: {
-        FluApp.init(app)
-        FluTheme.darkMode = FluDarkMode.System
+        FluNetwork.openLog = false
+        FluNetwork.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.enableAnimation = true
         FluApp.routes = {
             "/":"qrc:/example/qml/window/MainWindow.qml",
             "/about":"qrc:/example/qml/window/AboutWindow.qml",
             "/login":"qrc:/example/qml/window/LoginWindow.qml",
+            "/hotload":"qrc:/example/qml/window/HotloadWindow.qml",
+            "/crash":"qrc:/example/qml/window/CrashWindow.qml",
+            "/fluentInitalizr":"qrc:/example/qml/window/FluentInitalizrWindow.qml",
             "/singleTaskWindow":"qrc:/example/qml/window/SingleTaskWindow.qml",
             "/standardWindow":"qrc:/example/qml/window/StandardWindow.qml",
-            "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml"
+            "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml",
+            "/pageWindow":"qrc:/example/qml/window/PageWindow.qml"
+        }
+        var args = Qt.application.arguments
+        if(args.length>=2 && args[1].startsWith("-crashed=")){
+            FluApp.navigate("/crash",{crashFilePath:args[1].replace("-crashed=","")})
+        }else{
+            FluApp.navigate("/")
         }
-        FluApp.initialRoute = "/"
-        FluApp.run()
     }
 }

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