update

CMakeLists: simplify code.

.cmake/GetGitRevisionDescription.cmake

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

.cmake/GetGitRevisionDescription.cmake.in

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

.cmake/InstallerScript.iss.in

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

.cmake/Version.h.in

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

.github/workflows/macos.yml

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

.github/workflows/ubuntu.yml

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

.github/workflows/windows-mingw.yml

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

.github/workflows/windows-qt5.yml

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

.github/workflows/windows.yml

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

.gitignore

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

.gitmodules

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

CMakeLists.txt

@@ -1,45 +1,35 @@
 cmake_minimum_required(VERSION 3.20)
 
-project(FluentUI VERSION 0.1 LANGUAGES CXX)
+project(FluentUI VERSION 1.0)
 
-set(FLUENTUI_DIRECTORY ${CMAKE_CURRENT_LIST_DIR})
-list(APPEND CMAKE_MODULE_PATH ${FLUENTUI_DIRECTORY}/.cmake/)
+if(MSVC)
+    #让Release也生成pdb文件
+    set(CMAKE_SHARED_LINKER_FLAGS_RELEASE "${CMAKE_SHARED_LINKER_FLAGS_RELEASE} /DEBUG /OPT:REF /OPT:ICF")
+    set(CMAKE_EXE_LINKER_FLAGS_RELEASE "${CMAKE_EXE_LINKER_FLAGS_RELEASE} /DEBUG /OPT:REF /OPT:ICF")
+endif()
+
+list(APPEND CMAKE_MODULE_PATH ${CMAKE_SOURCE_DIR}/.cmake/)
 
 include(GetGitRevisionDescription)
 
 option(FLUENTUI_BUILD_EXAMPLES "Build FluentUI demo applications." ON)
-option(FLUENTUI_BUILD_FRAMELESSHEPLER "Build FramelessHelper." ON)
-option(FLUENTUI_BUILD_STATIC_LIB "Build static library." OFF)
 
 find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core)
 find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Core)
 
-set(QT_SDK_DIR "${Qt${QT_VERSION_MAJOR}_DIR}")
-cmake_path(GET QT_SDK_DIR PARENT_PATH QT_SDK_DIR)
-cmake_path(GET QT_SDK_DIR PARENT_PATH QT_SDK_DIR)
-cmake_path(GET QT_SDK_DIR PARENT_PATH QT_SDK_DIR)
-
-#设置QML插件输出目录，可以通过外部设置，如果外部没有设置就默认到<QT_SDK_DIR_PATH>\qml\FluentUI目录下
-set(FLUENTUI_QML_PLUGIN_DIRECTORY "" CACHE PATH "Path to FluentUI plugin")
-if(NOT FLUENTUI_QML_PLUGIN_DIRECTORY)
-    set(FLUENTUI_QML_PLUGIN_DIRECTORY ${QT_SDK_DIR}/qml/FluentUI)
-endif()
-
 add_subdirectory(src)
-add_subdirectory(zxing-cpp)
+
+#Release也支持日志打印代码位置
+target_compile_definitions(fluentuiplugin
+    PRIVATE
+    QT_MESSAGELOGCONTEXT
+)
 
 if (FLUENTUI_BUILD_EXAMPLES)
     add_subdirectory(example)
 endif ()
 
-if (FLUENTUI_BUILD_FRAMELESSHEPLER)
-    set(FRAMELESSHELPER_BUILD_STATIC ON)
-    set(FRAMELESSHELPER_NO_DEBUG_OUTPUT ON)
-    add_subdirectory(framelesshelper)
-endif ()
-
 message("------------------------ FluentUI ------------------------")
 message("Build FluentUI demo applications.: ${FLUENTUI_BUILD_EXAMPLES}")
-message("Build FramelessHelper.: ${FLUENTUI_BUILD_FRAMELESSHEPLER}")
 message("Build static library.: ${FLUENTUI_BUILD_STATIC_LIB}")
 message("Path to FluentUI plugin.: ${FLUENTUI_QML_PLUGIN_DIRECTORY}")

README.md

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

THIRD_PARTY_COPYRIGHT.txt

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

example/CMakeLists.txt

@@ -1,15 +1,10 @@
 cmake_minimum_required(VERSION 3.20)
 
-project(example VERSION 0.1 LANGUAGES CXX)
+project(example VERSION 1.0 LANGUAGES CXX)
 
 #配置通用编译
+set(CMAKE_CXX_STANDARD 17)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
-if(APPLE)
-    set(CMAKE_OSX_ARCHITECTURES "arm64;x86_64" CACHE STRING "" FORCE)
-endif()
-
-#导入exmaple的QML位置，不然import example有时候会爆红
-set(QML_IMPORT_PATH ${CMAKE_BINARY_DIR}/example CACHE STRING "Qt Creator extra QML import paths" FORCE)
 
 #判断FluentUI库类型
 if(FLUENTUI_BUILD_STATIC_LIB)
@@ -23,9 +18,13 @@ 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()
 
+#导入Qt相关依赖包
 find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Quick Svg Network)
 find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Quick Svg Network)
 
@@ -37,10 +36,25 @@ else()
     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 ${FLUENTUI_DIRECTORY}/example/Version.h)
+set(HEADER_FILE_VERSION_PATH ${CMAKE_SOURCE_DIR}/${PROJECT_NAME}/Version.h)
 configure_file(
-    ${FLUENTUI_DIRECTORY}/.cmake/Version.h.in
+    ${CMAKE_SOURCE_DIR}/.cmake/Version.h.in
     ${HEADER_FILE_VERSION_PATH}
 )
 
@@ -51,118 +65,136 @@ foreach(filepath ${CPP_FILES})
     list(APPEND sources_files ${filename})
 endforeach(filepath)
 
+if(WIN32)
+    list(APPEND sources_files "src/app_dmp.h")
+endif()
+
 if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
     #遍历所有qml文件
     file(GLOB_RECURSE QML_PATHS *.qml qmldir)
     foreach(filepath ${QML_PATHS})
         string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
-        if(${filepath} MATCHES "Qt${QT_VERSION_MAJOR}/")
-            string(REPLACE "qml-Qt${QT_VERSION_MAJOR}" "qml" filealias ${filename})
+        if(${filepath} MATCHES "qml-Qt6")
+            string(REPLACE "qml-Qt6" "qml" filealias ${filename})
             set_source_files_properties(${filename} PROPERTIES QT_RESOURCE_ALIAS ${filealias})
-            list(APPEND qml_files ${filename})
+            if(${filename} MATCHES "qmldir")
+                list(APPEND resource_files ${filename})
+            else()
+                list(APPEND qml_files ${filename})
+            endif()
         endif()
     endforeach(filepath)
 
     #遍历所有资源文件
-    file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp)
+    file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp *.in)
     foreach(filepath ${RES_PATHS})
         string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
         list(APPEND resource_files ${filename})
     endforeach(filepath)
 endif()
 
-#如果是Windows平台，则生成rc文件
+#如果是Windows平台，则生成rc文件，还有inno setup脚本文件
 set(EXAMPLE_VERSION_RC_PATH "")
 if(WIN32)
-    set(EXAMPLE_VERSION_RC_PATH ${CMAKE_BINARY_DIR}/version_${PROJECT_NAME}.rc)
+    set(EXAMPLE_VERSION_RC_PATH ${CMAKE_CURRENT_BINARY_DIR}/version_${PROJECT_NAME}.rc)
     configure_file(
-        ${FLUENTUI_DIRECTORY}/.cmake/version_exe.rc.in
+        ${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 (WIN32)
-    add_executable(example
+    add_executable(${PROJECT_NAME}
         ${sources_files}
         ${EXAMPLE_VERSION_RC_PATH}
     )
 else ()
-    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()
 
+#复制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")
-    #添加qml模块
-    qt_add_qml_module(example
-        URI "example"
+    #如果是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()
-    target_include_directories(example PRIVATE
+    #如果是Qt6.2以下，则使用qrc添加资源文件
+    target_include_directories(${PROJECT_NAME} PRIVATE
         ${CMAKE_CURRENT_SOURCE_DIR}
     )
-    target_sources(example PRIVATE resource.qrc)
+target_sources(${PROJECT_NAME} PRIVATE ${PROJECT_NAME}.qrc)
 endif()
 
 #导入component头文件,不然通过QML_NAMED_ELEMENT生成的c++类会找不到头文件报错
-target_include_directories(example PRIVATE
+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
 )
 
-#链接库
-if (FLUENTUI_BUILD_STATIC_LIB)
-    target_link_libraries(example PRIVATE
-        Qt${QT_VERSION_MAJOR}::Quick
-        Qt${QT_VERSION_MAJOR}::Svg
-        Qt${QT_VERSION_MAJOR}::Network
-        fluentui
-        fluentuiplugin
-        FramelessHelper::Core
-        FramelessHelper::Quick
-    )
-else()
-    target_link_libraries(example PRIVATE
-        Qt${QT_VERSION_MAJOR}::Quick
-        Qt${QT_VERSION_MAJOR}::Svg
-        Qt${QT_VERSION_MAJOR}::Network
-        fluentuiplugin
-        FramelessHelper::Core
-        FramelessHelper::Quick
-    )
-endif()
+#Release也支持日志打印代码位置
+target_compile_definitions(${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
+)
 
 #安装
-install(TARGETS example
+install(TARGETS ${PROJECT_NAME}
     BUNDLE DESTINATION .
     LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
     RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}

example/example.qrc

@@ -123,10 +123,8 @@
         <file>res/image/qrcode_zfb.jpg</file>
         <file>qml/App.qml</file>
         <file>qml/component/CodeExpander.qml</file>
-        <file>qml/component/CustomWindow.qml</file>
         <file>qml/global/ItemsFooter.qml</file>
         <file>qml/global/ItemsOriginal.qml</file>
-        <file>qml/global/MainEvent.qml</file>
         <file>qml/global/qmldir</file>
         <file>qml/page/T_Acrylic.qml</file>
         <file>qml/page/T_Awesome.qml</file>
@@ -136,7 +134,6 @@
         <file>qml/page/T_CalendarPicker.qml</file>
         <file>qml/page/T_Captcha.qml</file>
         <file>qml/page/T_Carousel.qml</file>
-        <file>qml/page/T_Chart.qml</file>
         <file>qml/page/T_CheckBox.qml</file>
         <file>qml/page/T_ColorPicker.qml</file>
         <file>qml/page/T_ComboBox.qml</file>
@@ -145,7 +142,6 @@
         <file>qml/page/T_Expander.qml</file>
         <file>qml/page/T_FlipView.qml</file>
         <file>qml/page/T_Home.qml</file>
-        <file>qml/page/T_Http.qml</file>
         <file>qml/page/T_Image.qml</file>
         <file>qml/page/T_InfoBar.qml</file>
         <file>qml/page/T_Menu.qml</file>
@@ -158,10 +154,9 @@
         <file>qml/page/T_RatingControl.qml</file>
         <file>qml/page/T_Rectangle.qml</file>
         <file>qml/page/T_RemoteLoader.qml</file>
-        <file>qml/page/T_Screenshot.qml</file>
         <file>qml/page/T_Settings.qml</file>
         <file>qml/page/T_Slider.qml</file>
-        <file>qml/page/T_StatusView.qml</file>
+        <file>qml/page/T_StatusLayout.qml</file>
         <file>qml/page/T_TableView.qml</file>
         <file>qml/page/T_TabView.qml</file>
         <file>qml/page/T_Text.qml</file>
@@ -185,6 +180,32 @@
         <file>res/image/bg_scenic.png</file>
         <file>res/image/image_1.jpg</file>
         <file>qml/window/PageWindow.qml</file>
-        <file>qml/page/T_StaggeredView.qml</file>
+        <file>qml/page/T_StaggeredLayout.qml</file>
+        <file>qml/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/qml-Qt6/App.qml

@@ -4,42 +4,56 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
 
-Window {
+Item {
     id: app
-    flags: Qt.SplashScreen
 
-    FluHttpInterceptor{
-        id:interceptor
-        function onIntercept(request){
-            if(request.method === "get"){
-                request.params["method"] = "get"
-            }
-            if(request.method === "post"){
-                request.params["method"] = "post"
-            }
-            request.headers["token"] ="yyds"
-            request.headers["os"] ="pc"
-            console.debug(JSON.stringify(request))
-            return request
+    Connections{
+        target: FluTheme
+        function onDarkModeChanged(){
+            SettingsHelper.saveDarkMode(FluTheme.darkMode)
+        }
+    }
+
+    Connections{
+        target: FluApp
+        function onUseSystemAppBarChanged(){
+            SettingsHelper.saveUseSystemAppBar(FluApp.useSystemAppBar)
+        }
+    }
+
+    Connections{
+        target: TranslateHelper
+        function onCurrentChanged(){
+            SettingsHelper.saveLanguage(TranslateHelper.current)
         }
     }
 
     Component.onCompleted: {
-        FluApp.init(app)
-        FluTheme.darkMode = FluThemeType.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",
             "/singleTaskWindow":"qrc:/example/qml/window/SingleTaskWindow.qml",
             "/standardWindow":"qrc:/example/qml/window/StandardWindow.qml",
             "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml",
             "/pageWindow":"qrc:/example/qml/window/PageWindow.qml"
         }
-        FluApp.initialRoute = "/"
-        FluApp.httpInterceptor = interceptor
-        FluApp.run()
+        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

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

example/qml-Qt6/component/CustomWindow.qml

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

example/qml-Qt6/global/ItemsFooter.qml

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

example/qml-Qt6/global/ItemsOriginal.qml

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

example/qml-Qt6/global/MainEvent.qml

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

example/qml-Qt6/global/qmldir

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

example/qml-Qt6/page/T_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

@@ -3,11 +3,11 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"Acrylic"
+    title: qsTr("Acrylic")
 
     RowLayout{
         spacing: 10
@@ -47,10 +47,10 @@ FluScrollablePage{
         height: 1200/4+20
         paddings: 10
         Layout.topMargin: 10
-        FluRectangle{
+        FluClip{
             width: 1920/4
             height: 1200/4
-            radius:[15,15,15,15]
+            radius:[8,8,8,8]
             Image {
                 id:image
                 asynchronous: true
@@ -64,7 +64,7 @@ FluScrollablePage{
                 width: 200
                 height: 200
                 tintOpacity: slider_tint_opacity.value/100
-                tintColor: color_picker.colorValue
+                tintColor: color_picker.current
                 blurRadius: slider_blur_radius.value
                 x:(image.width-width)/2
                 y:(image.height-height)/2
@@ -77,6 +77,7 @@ FluScrollablePage{
                 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)

example/qml-Qt6/page/T_Awesome.qml

@@ -6,11 +6,11 @@ import FluentUI
 
 FluContentPage {
 
-    title:"Awesome"
+    title: qsTr("Awesome")
 
     FluTextBox{
         id:text_box
-        placeholderText: "请输入关键字"
+        placeholderText: qsTr("Please enter a keyword")
         anchors{
             topMargin: 20
             top:parent.top
@@ -18,14 +18,14 @@ FluContentPage {
     }
 
     FluFilledButton{
-        text:"搜索"
+        text: qsTr("Search")
         anchors{
             left: text_box.right
             verticalCenter: text_box.verticalCenter
             leftMargin: 14
         }
         onClicked: {
-            grid_view.model = FluApp.awesomelist(text_box.text)
+            grid_view.model = FluTheme.awesomeList(text_box.text)
         }
     }
     GridView{
@@ -34,7 +34,7 @@ FluContentPage {
         cellHeight: 80
         clip: true
         boundsBehavior: GridView.StopAtBounds
-        model:FluApp.awesomelist()
+        model:FluTheme.awesomeList()
         ScrollBar.vertical: FluScrollBar {}
         anchors{
             topMargin: 10
@@ -53,7 +53,7 @@ FluContentPage {
                 onClicked: {
                     var text  ="FluentIcons."+modelData.name;
                     FluTools.clipText(text)
-                    showSuccess("您复制了 "+text)
+                    showSuccess(qsTr("You Copied ")+text)
                 }
             }
             FluText {

example/qml-Qt6/page/T_Badge.qml

@@ -3,16 +3,16 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"Badge"
+    title: qsTr("Badge")
 
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 106
+        height: 120
         paddings: 10
 
         Column{
@@ -20,11 +20,13 @@ FluScrollablePage{
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
+                right: parent.right
             }
             FluText{
-                text:"一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数"
+                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{

example/qml-Qt6/page/T_BreadcrumbBar.qml

@@ -3,11 +3,11 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"BreadcurmbBar"
+    title: qsTr("BreadcurmbBar")
 
     Component.onCompleted: {
         var items = []
@@ -48,7 +48,7 @@ FluScrollablePage{
             spacing: 10
 
             FluFilledButton{
-                text:"Reset sample"
+                text: qsTr("Reset sample")
                 onClicked:{
                     var items = []
                     for(var i=0;i<10;i++){
@@ -66,7 +66,6 @@ FluScrollablePage{
                 Layout.fillWidth: true
                 onClickItem:
                     (model)=>{
-                        //不是点击最后一个item元素
                         if(model.index+1!==count()){
                             breadcrumb_2.remove(model.index+1,count()-model.index-1)
                         }

example/qml-Qt6/page/T_Buttons.qml

@@ -4,15 +4,15 @@ import QtQuick.Window
 import QtQuick.Controls
 import QtQuick.Controls.Basic
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"Buttons"
+    title: qsTr("Buttons")
 
     FluText{
         Layout.topMargin: 20
-        text:"支持Tab键切换焦点，空格键执行点击事件"
+        text: qsTr("Support the Tab key to switch focus, and the Space key to perform click events")
     }
 
     FluArea{
@@ -22,9 +22,8 @@ FluScrollablePage{
         Layout.topMargin: 20
 
         FluTextButton{
-            disabled:text_button_switch.checked
-            text:"Text Button"
-            contentDescription: "文本按钮"
+            disabled: text_button_switch.checked
+            text: qsTr("Text Button")
             onClicked: {
                 showInfo("点击Text Button")
             }
@@ -34,12 +33,12 @@ FluScrollablePage{
             }
         }
         FluToggleSwitch{
-            id:text_button_switch
+            id: text_button_switch
             anchors{
                 right: parent.right
                 verticalCenter: parent.verticalCenter
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
@@ -60,10 +59,10 @@ FluScrollablePage{
         Layout.topMargin: 20
 
         FluButton{
-            disabled:button_switch.checked
-            text:"Standard Button"
+            disabled: button_switch.checked
+            text: qsTr("Standard Button")
             onClicked: {
-                showInfo("点击StandardButton")
+                showInfo(qsTr("Click StandardButton"))
             }
             anchors{
                 verticalCenter: parent.verticalCenter
@@ -71,12 +70,12 @@ FluScrollablePage{
             }
         }
         FluToggleSwitch{
-            id:button_switch
+            id: button_switch
             anchors{
                 right: parent.right
                 verticalCenter: parent.verticalCenter
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
@@ -97,10 +96,10 @@ FluScrollablePage{
         paddings: 10
 
         FluFilledButton{
-            disabled:filled_button_switch.checked
-            text:"Filled Button"
+            disabled: filled_button_switch.checked
+            text: qsTr("Filled Button")
             onClicked: {
-                showWarning("点击FilledButton"+height)
+                showWarning(qsTr("Click FilledButton"))
             }
             anchors{
                 verticalCenter: parent.verticalCenter
@@ -108,12 +107,12 @@ FluScrollablePage{
             }
         }
         FluToggleSwitch{
-            id:filled_button_switch
+            id: filled_button_switch
             anchors{
                 right: parent.right
                 verticalCenter: parent.verticalCenter
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
@@ -135,19 +134,19 @@ FluScrollablePage{
 
         FluToggleButton{
             disabled:toggle_button_switch.checked
-            text:"Toggle Button"
+            text: qsTr("Toggle Button")
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
         }
         FluToggleSwitch{
-            id:toggle_button_switch
+            id: toggle_button_switch
             anchors{
                 right: parent.right
                 verticalCenter: parent.verticalCenter
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
@@ -161,6 +160,97 @@ FluScrollablePage{
 }'
     }
 
+    Timer{
+        id: timer_progress
+        interval: 200
+        onTriggered: {
+            btn_progress.progress = (btn_progress.progress + 0.1).toFixed(1)
+            if(btn_progress.progress==1){
+                timer_progress.stop()
+            }else{
+                timer_progress.start()
+            }
+        }
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        Layout.topMargin: 20
+        paddings: 10
+
+        FluProgressButton{
+            id: btn_progress
+            disabled: progress_button_switch.checked
+            text: 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
@@ -168,7 +258,7 @@ FluScrollablePage{
         paddings: 10
         Layout.topMargin: 20
         Flow{
-            id:layout_icon_button
+            id: layout_icon_button
             spacing: 10
             anchors{
                 verticalCenter: parent.verticalCenter
@@ -176,60 +266,60 @@ FluScrollablePage{
                 right: icon_button_switch.left
             }
             FluIconButton{
-                disabled:icon_button_switch.checked
+                disabled: icon_button_switch.checked
                 iconDelegate: Image{ sourceSize: Qt.size(40,40) ; width: 20; height: 20; source: "qrc:/example/res/image/ic_home_github.png" }
                 onClicked:{
-                    showSuccess("点击IconButton")
+                    showSuccess(qsTr("Click IconButton"))
                 }
             }
             FluIconButton{
-                iconSource:FluentIcons.ChromeCloseContrast
-                disabled:icon_button_switch.checked
+                iconSource: FluentIcons.ChromeCloseContrast
+                disabled: icon_button_switch.checked
                 iconSize: 15
-                text:"IconOnly"
+                text: qsTr("IconOnly")
                 display: Button.IconOnly
                 onClicked:{
-                    showSuccess("Button.IconOnly")
+                    showSuccess(qsTr("Button.IconOnly"))
                 }
             }
             FluIconButton{
-                iconSource:FluentIcons.ChromeCloseContrast
-                disabled:icon_button_switch.checked
+                iconSource: FluentIcons.ChromeCloseContrast
+                disabled: icon_button_switch.checked
                 iconSize: 15
-                text:"TextOnly"
+                text: qsTr("TextOnly")
                 display: Button.TextOnly
                 onClicked:{
-                    showSuccess("Button.TextOnly")
+                    showSuccess(qsTr("Button.TextOnly"))
                 }
             }
             FluIconButton{
-                iconSource:FluentIcons.ChromeCloseContrast
-                disabled:icon_button_switch.checked
+                iconSource: FluentIcons.ChromeCloseContrast
+                disabled: icon_button_switch.checked
                 iconSize: 15
-                text:"TextBesideIcon"
+                text: qsTr("TextBesideIcon")
                 display: Button.TextBesideIcon
                 onClicked:{
-                    showSuccess("Button.TextBesideIcon")
+                    showSuccess(qsTr("Button.TextBesideIcon"))
                 }
             }
             FluIconButton{
-                iconSource:FluentIcons.ChromeCloseContrast
-                disabled:icon_button_switch.checked
+                iconSource: FluentIcons.ChromeCloseContrast
+                disabled: icon_button_switch.checked
                 iconSize: 15
-                text:"TextUnderIcon"
+                text: qsTr("TextUnderIcon")
                 display: Button.TextUnderIcon
                 onClicked:{
-                    showSuccess("Button.TextUnderIcon")
+                    showSuccess(qsTr("Button.TextUnderIcon"))
                 }
             }
         }
         FluToggleSwitch{
-            id:icon_button_switch
+            id: icon_button_switch
             anchors{
                 right: parent.right
                 verticalCenter: parent.verticalCenter
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
@@ -249,35 +339,35 @@ FluScrollablePage{
         paddings: 10
         Layout.topMargin: 20
         FluDropDownButton{
-            disabled:drop_down_button_switch.checked
-            text:"DropDownButton"
+            disabled: drop_down_button_switch.checked
+            text: qsTr("DropDownButton")
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
             FluMenuItem{
-                text:"Menu_1"
+                text: qsTr("Menu_1")
             }
             FluMenuItem{
-                text:"Menu_2"
+                text: qsTr("Menu_2")
             }
             FluMenuItem{
-                text:"Menu_3"
+                text: qsTr("Menu_3")
             }
             FluMenuItem{
-                text:"Menu_4"
+                text: qsTr("Menu_4")
                 onClicked: {
 
                 }
             }
         }
         FluToggleSwitch{
-            id:drop_down_button_switch
+            id: drop_down_button_switch
             anchors{
                 right: parent.right
                 verticalCenter: parent.verticalCenter
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
@@ -313,24 +403,24 @@ FluScrollablePage{
             }
             FluRadioButton{
                 disabled:radio_button_switch.checked
-                text:"Radio Button_1"
+                text: qsTr("Radio Button_1")
             }
             FluRadioButton{
                 disabled:radio_button_switch.checked
-                text:"Radio Button_2"
+                text: qsTr("Radio Button_2")
             }
             FluRadioButton{
                 disabled:radio_button_switch.checked
-                text:"Radio Button_3"
+                text: qsTr("Radio Button_3")
             }
         }
         FluToggleSwitch{
-            id:radio_button_switch
+            id: radio_button_switch
             anchors{
                 right: parent.right
                 verticalCenter: parent.verticalCenter
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{

example/qml-Qt6/page/T_CalendarPicker.qml

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

example/qml-Qt6/page/T_Captcha.qml

@@ -3,16 +3,16 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"Captcha"
-
+    title: qsTr("Captcha")
 
     FluCaptcha{
-        id:captcha
+        id: captcha
         Layout.topMargin: 20
+        ignoreCase:switch_case.checked
         MouseArea{
             anchors.fill: parent
             cursorShape: Qt.PointingHandCursor
@@ -23,32 +23,38 @@ FluScrollablePage{
     }
 
     FluButton{
-        text:"Refresh"
+        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: "请输入验证码"
+            placeholderText: qsTr("Please enter a verification code")
+            Layout.preferredWidth: 240
         }
         FluButton{
             text:"verify"
             onClicked: {
                 var success =  captcha.verify(text_box.text)
                 if(success){
-                    showSuccess("验证码正确")
+                    showSuccess(qsTr("The verification code is correct"))
                 }else{
-                    showError("错误验证，请重新输入")
+                    showError(qsTr("Error validation, please re-enter"))
                 }
             }
         }
     }
-
-
 }

example/qml-Qt6/page/T_Carousel.qml

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

example/qml-Qt6/page/T_Chart.qml

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

example/qml-Qt6/page/T_CheckBox.qml

@@ -3,40 +3,48 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"CheckBox"
+    title: qsTr("CheckBox")
 
     FluArea{
         Layout.fillWidth: true
-        height: 68
+        height: 72
         paddings: 10
         Layout.topMargin: 20
+
+        FluText{
+            text: qsTr("A 2-state CheckBox")
+        }
+
         Row{
             spacing: 30
-            anchors.verticalCenter: parent.verticalCenter
-            FluCheckBox{
-                disabled: check_box_switch.checked
+            anchors{
+                top: parent.top
+                topMargin: 30
             }
             FluCheckBox{
-                disabled: check_box_switch.checked
-                text:"Right"
+                disabled: check_box_switch_two.checked
             }
             FluCheckBox{
-                disabled: check_box_switch.checked
-                text:"Left"
+                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
+            id:check_box_switch_two
             anchors{
                 right: parent.right
                 verticalCenter: parent.verticalCenter
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
@@ -47,4 +55,60 @@ FluScrollablePage{
 }'
     }
 
+    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

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

example/qml-Qt6/page/T_ComboBox.qml

@@ -3,11 +3,11 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"ComboBox"
+    title: qsTr("ComboBox")
 
     FluArea{
         Layout.fillWidth: true
@@ -32,6 +32,30 @@ FluScrollablePage{
         }
     }
 
+    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
@@ -46,16 +70,15 @@ FluScrollablePage{
             }
             FluComboBox {
                 editable: true
-                font:FluTextStyle.BodyStrong
                 model: ListModel {
-                    id: model_2
+                    id: model_3
                     ListElement { text: "Banana" }
                     ListElement { text: "Apple" }
                     ListElement { text: "Coconut" }
                 }
                 onAccepted: {
                     if (find(editText) === -1)
-                        model_2.append({text: editText})
+                        model_3.append({text: editText})
                 }
             }
         }

example/qml-Qt6/page/T_DatePicker.qml

@@ -3,11 +3,11 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"TimePicker"
+    title: qsTr("TimePicker")
 
     FluArea{
         Layout.fillWidth: true
@@ -20,7 +20,7 @@ FluScrollablePage{
                 left: parent.left
             }
             FluText{
-                text:"showYear=true"
+                text: qsTr("showYear=true")
             }
             FluDatePicker{
                 current: new Date()
@@ -49,10 +49,15 @@ FluScrollablePage{
                 left: parent.left
             }
             FluText{
-                text:"showYear=false"
+                text: qsTr("showYear=false")
             }
             FluDatePicker{
-                showYear:false
+                showYear: false
+                yearText: qsTr("Year")
+                monthText: qsTr("Month")
+                dayText: qsTr("Day")
+                cancelText: qsTr("Cancel")
+                okText: qsTr("OK")
                 onAccepted: {
                     showSuccess(current.toLocaleDateString())
                 }

example/qml-Qt6/page/T_Dialog.qml

@@ -3,11 +3,11 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"Dialog"
+    title: qsTr("Dialog")
 
     FluArea{
         Layout.fillWidth: true
@@ -16,8 +16,7 @@ FluScrollablePage{
         Layout.topMargin: 20
         FluButton{
             anchors.verticalCenter: parent.verticalCenter
-            Layout.topMargin: 20
-            text:"Show Double Button Dialog"
+            text: qsTr("Show Double Button Dialog")
             onClicked: {
                 double_btn_dialog.open()
             }
@@ -28,33 +27,33 @@ FluScrollablePage{
         Layout.topMargin: -1
         code:'FluContentDialog{
     id:dialog
-    title:"友情提示"
-    message:"确定要退出程序么？"
-    negativeText:"取消"
+    title: qsTr("Friendly Reminder")
+    message: qsTr("Are you sure you want to opt out?")
+    negativeText: qsTr("Cancel")
     buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
     onNegativeClicked:{
-        showSuccess("点击取消按钮")
+        showSuccess(qsTr("Click the Cancel Button"))
     }
-    positiveText:"确定"
+    positiveText: qsTr("OK")
     onPositiveClicked:{
-        showSuccess("点击确定按钮")
-    }
+        showSuccess(qsTr("Click the OK Button"))
+        }
     }
     dialog.open()'
     }
 
     FluContentDialog{
         id:double_btn_dialog
-        title:"友情提示"
-        message:"确定要退出程序么？"
+        title: qsTr("Friendly Reminder")
+        message: qsTr("Are you sure you want to opt out?")
         buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
-        negativeText:"取消"
-        onNegativeClicked:{
-            showSuccess("点击取消按钮")
+        negativeText: qsTr("Cancel")
+        onNegativeClicked: {
+            showSuccess(qsTr("Click the Cancel Button"))
         }
-        positiveText:"确定"
+        positiveText: qsTr("OK")
         onPositiveClicked:{
-            showSuccess("点击确定按钮")
+            showSuccess(qsTr("Click the OK Button"))
         }
     }
 
@@ -65,8 +64,7 @@ FluScrollablePage{
         Layout.topMargin: 20
         FluButton{
             anchors.verticalCenter: parent.verticalCenter
-            Layout.topMargin: 20
-            text:"Show Triple Button Dialog"
+            text: qsTr("Show Triple Button Dialog")
             onClicked: {
                 triple_btn_dialog.open()
             }
@@ -76,43 +74,159 @@ FluScrollablePage{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluContentDialog{
-    id:dialog
-    title:"友情提示"
-    message:"确定要退出程序么？"
-    negativeText:"取消"
+    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:"取消"
-    onNegativeClicked:{
-        showSuccess("点击取消按钮")
+    negativeText: qsTr("Cancel")
+    onNegativeClicked: {
+        showSuccess(qsTr("Click the Cancel Button"))
     }
-    positiveText:"确定"
-    onPositiveClicked:{
-        showSuccess("点击确定按钮")
+    positiveText: qsTr("OK")
+    onPositiveClicked: {
+        showSuccess(qsTr("Click the OK Button"))
     }
-    neutralText:"最小化"
-    onNeutralClicked:{
-        showSuccess("点击最小化按钮")
+    neutralText: qsTr("Minimize")
+    onNeutralClicked: {
+        showSuccess(qsTr("Click Minimize"))
         }
     }
     dialog.open()'
     }
 
     FluContentDialog{
-        id:triple_btn_dialog
-        title:"友情提示"
-        message:"确定要退出程序么？"
+        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:"取消"
-        onNegativeClicked:{
-            showSuccess("点击取消按钮")
+        negativeText: qsTr("Cancel")
+        onNegativeClicked: {
+            showSuccess(qsTr("Click the Cancel Button"))
         }
-        positiveText:"确定"
-        onPositiveClicked:{
-            showSuccess("点击确定按钮")
+        positiveText: qsTr("OK")
+        onPositiveClicked: {
+            showSuccess(qsTr("Click the OK Button"))
         }
-        neutralText:"最小化"
-        onNeutralClicked:{
-            showSuccess("点击最小化按钮")
+        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

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

@@ -3,11 +3,11 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"FlipView"
+    title: qsTr("FlipView")
 
     FluArea{
         Layout.fillWidth: true
@@ -17,7 +17,7 @@ FluScrollablePage{
         ColumnLayout{
             anchors.verticalCenter: parent.verticalCenter
             FluText{
-                text:"水平方向的FlipView"
+                text: qsTr("Horizontal FlipView")
             }
             FluFlipView{
                 Image{
@@ -69,7 +69,7 @@ FluScrollablePage{
         ColumnLayout{
             anchors.verticalCenter: parent.verticalCenter
             FluText{
-                text:"垂直方向的FlipView"
+                text: qsTr("Vertical FlipView")
             }
             FluFlipView{
                 vertical:true

example/qml-Qt6/page/T_Home.qml

@@ -2,24 +2,41 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
-import "qrc:///example/qml/global"
 import FluentUI
+import "../global"
+import "../window"
+
 
 FluScrollablePage{
 
     launchMode: FluPageType.SingleTask
     animDisabled: true
 
-    ListModel{
-        id:model_header
-        ListElement{
-            icon:"qrc:/example/res/image/ic_home_github.png"
-            title:"FluentUI GitHub"
-            desc:"The latest FluentUI controls and styles for your applications."
-            url:"https://github.com/zhuzichu520/FluentUI"
-        }
+    FluentInitalizrWindow{
+        id:fluent_initalizr
     }
 
+    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){
+                fluent_initalizr.showDialog()
+            }
+        }
+    }
     Item{
         Layout.fillWidth: true
         Layout.preferredHeight: 320
@@ -28,6 +45,7 @@ FluScrollablePage{
             fillMode:Image.PreserveAspectCrop
             anchors.fill: parent
             verticalAlignment: Qt.AlignTop
+            sourceSize: Qt.size(960,640)
             source: "qrc:/example/res/image/bg_home_header.png"
         }
         Rectangle{
@@ -47,34 +65,19 @@ FluScrollablePage{
                 leftMargin: 20
             }
         }
-
-        ListView{
-            id: list
-            anchors{
-                left: parent.left
-                right: parent.right
-                bottom: parent.bottom
-            }
-            orientation: ListView.Horizontal
-            height: 240
-            model: model_header
-            header: Item{height: 10;width: 10}
-            footer: Item{height: 10;width: 10}
-            ScrollBar.horizontal: FluScrollBar{
-                id: scrollbar_header
-            }
-            clip: false
-            delegate:Item{
+        Component{
+            id:com_grallery
+            Item{
                 id: control
                 width: 220
                 height: 240
                 FluShadow{
-                    radius:8
+                    radius:5
                     anchors.fill: item_content
                 }
-                FluItem{
+                FluClip{
                     id:item_content
-                    radius: [8,8,8,8]
+                    radius: [5,5,5,5]
                     width: 200
                     height: 220
                     anchors.centerIn: parent
@@ -88,20 +91,15 @@ FluScrollablePage{
                     }
                     Rectangle{
                         anchors.fill: parent
-                        radius: 8
-                        color:{
-                            if(FluTheme.dark){
-                                if(item_mouse.containsMouse){
-                                    return Qt.rgba(1,1,1,0.03)
-                                }
-                                return Qt.rgba(0,0,0,0.0)
-                            }else{
-                                if(item_mouse.containsMouse){
-                                    return Qt.rgba(0,0,0,0.03)
-                                }
-                                return Qt.rgba(0,0,0,0.0)
-                            }
-                        }
+                        radius: 5
+                        color:FluTheme.itemHoverColor
+                        visible: item_mouse.containsMouse
+                    }
+                    Rectangle{
+                        anchors.fill: parent
+                        radius: 5
+                        color:Qt.rgba(0,0,0,0.0)
+                        visible: !item_mouse.containsMouse
                     }
                     ColumnLayout{
                         Image {
@@ -147,17 +145,37 @@ FluScrollablePage{
                                 else scrollbar_header.increase()
                             }
                         onClicked: {
-                            Qt.openUrlExternally(model.url)
+                            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{
@@ -169,31 +187,23 @@ FluScrollablePage{
                     anchors.fill: parent
                     radius: 8
                     color:{
-                        if(FluTheme.dark){
-                            if(item_mouse.containsMouse){
-                                return Qt.rgba(1,1,1,0.03)
-                            }
-                            return Qt.rgba(0,0,0,0)
-                        }else{
-                            if(item_mouse.containsMouse){
-                                return Qt.rgba(0,0,0,0.03)
-                            }
-                            return Qt.rgba(0,0,0,0)
+                        if(item_mouse.containsMouse){
+                            return FluTheme.itemHoverColor
                         }
+                        return FluTheme.itemNormalColor
                     }
                 }
                 Image{
                     id:item_icon
                     height: 40
                     width: 40
-                    source: modelData.image
+                    source: modelData.extra.image
                     anchors{
                         left: parent.left
                         leftMargin: 20
                         verticalCenter: parent.verticalCenter
                     }
                 }
-
                 FluText{
                     id:item_title
                     text:modelData.title
@@ -204,10 +214,9 @@ FluScrollablePage{
                         top: item_icon.top
                     }
                 }
-
                 FluText{
                     id:item_desc
-                    text:modelData.desc
+                    text:desc
                     color:FluColors.Grey120
                     wrapMode: Text.WrapAnywhere
                     elide: Text.ElideRight
@@ -226,7 +235,7 @@ FluScrollablePage{
                     height: 12
                     width: 12
                     radius:  6
-                    color: FluTheme.primaryColor.dark
+                    color: FluTheme.primaryColor
                     anchors{
                         right: parent.right
                         top: parent.top
@@ -282,3 +291,4 @@ FluScrollablePage{
     }
 
 }
+

example/qml-Qt6/page/T_Http.qml

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

example/qml-Qt6/page/T_Image.qml

@@ -3,11 +3,11 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"Image"
+    title: qsTr("Image")
 
     FluArea{
         Layout.fillWidth: true
@@ -26,7 +26,7 @@ FluScrollablePage{
                 source: "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_4.jpg"
                 onStatusChanged:{
                     if(status === Image.Error){
-                        showError("图片加载失败，请重新加载")
+                        showError(qsTr("The image failed to load, please reload"))
                     }
                 }
                 clickErrorListener: function(){

example/qml-Qt6/page/T_InfoBar.qml

@@ -3,16 +3,16 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"InfoBar"
+    title: qsTr("InfoBar")
 
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 240
+        height: 270
         paddings: 10
         ColumnLayout{
             spacing: 14
@@ -21,27 +21,33 @@ FluScrollablePage{
                 left: parent.left
             }
             FluButton{
-                text:"Info"
+                text: qsTr("Info")
                 onClicked: {
-                    showInfo("这是一个Info样式的InfoBar")
+                    showInfo(qsTr("This is an InfoBar in the Info Style"))
                 }
             }
             FluButton{
-                text:"Warning"
+                text: qsTr("Warning")
                 onClicked: {
-                    showWarning("这是一个Warning样式的InfoBar")
+                    showWarning(qsTr("This is an InfoBar in the Warning Style"))
                 }
             }
             FluButton{
                 text:"Error"
                 onClicked: {
-                    showError("这是一个Error样式的InfoBar")
+                    showError(qsTr("This is an InfoBar in the Error Style"))
                 }
             }
             FluButton{
                 text:"Success"
                 onClicked: {
-                    showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
+                    showSuccess(qsTr("This is an InfoBar in the Success Style"))
+                }
+            }
+            FluButton{
+                text: qsTr("InfoBar that needs to be turned off manually")
+                onClicked: {
+                    showInfo(qsTr("This is an InfoBar in the Info Style"),0,qsTr("Manual shutdown is supported"))
                 }
             }
             FluButton{
@@ -55,12 +61,12 @@ FluScrollablePage{
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
-        code:'showInfo("这是一个Info样式的InfoBar")
+        code:'showInfo(qsTr("This is an InfoBar in the Info Style"))
 
-showWarning("这是一个Warning样式的InfoBar")
+showWarning(qsTr("This is an InfoBar in the Warning Style"))
 
-showError("这是一个Error样式的InfoBar")
+showError(qsTr("This is an InfoBar in the Error Style"))
 
-showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")'
+showSuccess(qsTr("This is an InfoBar in the Success Style"))'
     }
 }

example/qml-Qt6/page/T_Menu.qml

@@ -3,11 +3,11 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"Menu"
+    title: qsTr("Menu")
 
     FluMenu {
         id:menu
@@ -27,20 +27,20 @@ FluScrollablePage{
             iconSource: FluentIcons.Zoom
             iconSpacing: 3
             onTriggered: {
-                showError("Search")
+                showError(qsTr("Search"))
             }
         }
         Action {
             text: qsTr("Disable")
             enabled:false
             onTriggered: {
-                showError("Disable")
+                showError(qsTr("Disable"))
             }
         }
         FluMenuSeparator { }
         Action { text: qsTr("Check");checkable: true;checked: true}
         FluMenu{
-            title: "Save As..."
+            title: qsTr("Save As...")
             Action { text: qsTr("Doc") }
             Action { text: qsTr("PDF") }
         }
@@ -53,7 +53,7 @@ FluScrollablePage{
         paddings: 10
         Layout.topMargin: 20
         Column{
-            id:layout_column
+            id: layout_column
             spacing: 15
             anchors{
                 verticalCenter: parent.verticalCenter
@@ -61,11 +61,11 @@ FluScrollablePage{
             }
 
             FluText{
-                text:"Menu"
+                text: qsTr("Menu")
             }
 
             FluButton{
-                text:"Show Menu Popup"
+                text: qsTr("Show Menu Popup")
                 Layout.topMargin: 20
                 onClicked:{
                     menu.popup()
@@ -112,7 +112,7 @@ menu.popup()
             }
 
             FluText{
-                text:"MenuBar"
+                text: qsTr("MenuBar")
             }
 
             FluMenuBar {
@@ -129,7 +129,7 @@ menu.popup()
                         enabled:false
                     }
                     FluMenu{
-                        title: "Save As..."
+                        title: qsTr("Save As...")
                         Action { text: qsTr("Doc") }
                         Action { text: qsTr("PDF") }
                     }
@@ -168,8 +168,4 @@ menu.popup()
 menu.popup()
 '
     }
-
-
-
-
 }

example/qml-Qt6/page/T_MultiWindow.qml

@@ -3,14 +3,14 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
     property string password: ""
     property var loginPageRegister: registerForWindowResult("/login")
 
-    title:"MultiWindow"
+    title: qsTr("MultiWindow")
 
     Connections{
         target: loginPageRegister
@@ -32,10 +32,10 @@ FluScrollablePage{
                 left: parent.left
             }
             FluText{
-                text:"<font color='red'>Standard</font>模式窗口，每次都会创建新窗口"
+                text: qsTr("<font color='red'>Standard</font> mode window，a new window is created every time")
             }
             FluButton{
-                text:"点击创建窗口"
+                text: qsTr("Create Window")
                 onClicked: {
                     FluApp.navigate("/standardWindow")
                 }
@@ -55,11 +55,11 @@ FluScrollablePage{
                 left: parent.left
             }
             FluText{
-                text:"<font color='red'>SingleTask</font>模式窗口，如果窗口存在，这激活该窗口"
+                text: qsTr("<font color='red'>SingleTask</font> mode window，If a window exists, this activates the window")
                 textFormat: Text.RichText
             }
             FluButton{
-                text:"点击创建窗口"
+                text: qsTr("Create Window")
                 onClicked: {
                     FluApp.navigate("/singleTaskWindow")
                 }
@@ -79,10 +79,10 @@ FluScrollablePage{
                 left: parent.left
             }
             FluText{
-                text:"<font color='red'>SingleInstance</font>模式窗口，如果窗口存在，则销毁窗口，然后新建窗口"
+                text: qsTr("<font color='red'>SingleInstance</font> mode window，If the window exists, destroy the window and create a new window")
             }
             FluButton{
-                text:"点击创建窗口"
+                text: qsTr("Create Window")
                 onClicked: {
                     FluApp.navigate("/singleInstanceWindow")
                 }
@@ -113,10 +113,10 @@ FluScrollablePage{
                 left: parent.left
             }
             FluText{
-                text:"页面跳转，不携带任何参数"
+                text: qsTr("Create the window without carrying any parameters")
             }
             FluButton{
-                text:"点击跳转"
+                text: qsTr("Create Window")
                 onClicked: {
                     FluApp.navigate("/about")
                 }
@@ -127,7 +127,7 @@ FluScrollablePage{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluButton{
-    text:"点击跳转"
+    text: qsTr("Create Window")
     onClicked: {
         FluApp.navigate("/about")
     }
@@ -148,16 +148,16 @@ FluScrollablePage{
                 left: parent.left
             }
             FluText{
-                text:"页面跳转，并携带参数用户名：zhuzichu"
+                text: qsTr("Create a window with the parameter username: zhuzichu")
             }
             FluButton{
-                text:"点击跳转到登录"
+                text: qsTr("Create Window")
                 onClicked: {
                     loginPageRegister.launch({username:"zhuzichu"})
                 }
             }
             FluText{
-                text:"登录窗口返回过来的密码->"+password
+                text:qsTr("Login Window Returned Password - >")+password
             }
         }
     }
@@ -175,7 +175,7 @@ Connections{
 }
 
 FluButton{
-    text:"点击跳转"
+    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

@@ -2,12 +2,12 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
-import "qrc:///example/qml/component"
 import FluentUI
+import "../component"
 
 FluScrollablePage{
 
-    title:"Pagination"
+    title: qsTr("Pagination")
 
     FluArea{
         Layout.fillWidth: true

example/qml-Qt6/page/T_Pivot.qml

@@ -3,11 +3,11 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"Pivot"
+    title: qsTr("Pivot")
 
     FluArea{
         Layout.fillWidth: true
@@ -15,31 +15,34 @@ FluScrollablePage{
         height: 400
         paddings: 10
 
+
+
         FluPivot{
             anchors.fill: parent
             currentIndex: 2
+
             FluPivotItem{
-                title:"All"
+                title: qsTr("All")
                 contentItem:FluText{
-                    text:"All emails go here."
+                    text: qsTr("All emails go here.")
                 }
             }
             FluPivotItem{
-                title:"Unread"
-                contentItem:FluText{
-                    text:"Unread emails go here."
+                title: qsTr("Unread")
+                contentItem: FluText{
+                    text: qsTr("Unread emails go here.")
                 }
             }
             FluPivotItem{
-                title:"Flagged"
-                contentItem:FluText{
-                    text:"Flagged emails go here."
+                title: qsTr("Flagged")
+                contentItem: FluText{
+                    text: qsTr("Flagged emails go here.")
                 }
             }
             FluPivotItem{
-                title:"Urgent"
-                contentItem:FluText{
-                    text:"Urgent emails go here."
+                title: qsTr("Urgent")
+                contentItem: FluText{
+                    text: qsTr("Urgent emails go here.")
                 }
             }
         }
@@ -50,27 +53,27 @@ FluScrollablePage{
         code:'FluPivot{
     anchors.fill: parent
     FluPivotItem:{
-        text:"All"
+        text: qsTr("All")
         contentItem: FluText{
-            text:"All emails go here."
+            text: qsTr("All emails go here.")
         }
     }
     FluPivotItem:{
-        text:"Unread"
+        text: qsTr("Unread")
         contentItem: FluText{
-            text:"Unread emails go here."
+            text: qsTr("Unread emails go here.")
         }
     }
     FluPivotItem:{
-        text:"Flagged"
+        text: qsTr("Flagged")
         contentItem: FluText{
-            text:"Flagged emails go here."
+            text: qsTr("Flagged emails go here.")
         }
     }
     FluPivotItem:{
-        text:"Urgent"
+        text: qsTr("Urgent")
         contentItem: FluText{
-            text:"Urgent emails go here."
+            text: qsTr("Urgent emails go here.")
         }
     }
 }

example/qml-Qt6/page/T_Progress.qml

@@ -3,11 +3,11 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"Progress"
+    title: qsTr("Progress")
 
     FluArea{
         Layout.fillWidth: true

example/qml-Qt6/page/T_QRCode.qml

@@ -3,20 +3,19 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import Qt5Compat.GraphicalEffects
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"QRCode"
+    title: qsTr("QRCode")
 
     FluQRCode{
         id:qrcode
         Layout.topMargin: 20
         size:slider_size.value
         text:text_box.text
-        color:color_picker.colorValue
-        bgColor: bgcolor_picker.colorValue
+        color:color_picker.current
+        bgColor: bgcolor_picker.current
         margins:slider_margins.value
         Layout.preferredWidth: size
         Layout.preferredHeight: size
@@ -32,6 +31,7 @@ FluScrollablePage{
         FluTextBox{
             id:text_box
             text:"会磨刀的小猪"
+            Layout.preferredWidth: 240
         }
     }
 
@@ -44,9 +44,7 @@ FluScrollablePage{
         }
         FluColorPicker{
             id:color_picker
-            Component.onCompleted: {
-                setColor(Qt.rgba(0,0,0,1))
-            }
+            current: Qt.rgba(0,0,0,1)
         }
     }
 
@@ -59,9 +57,7 @@ FluScrollablePage{
         }
         FluColorPicker{
             id:bgcolor_picker
-            Component.onCompleted: {
-                setColor(Qt.rgba(1,1,1,1))
-            }
+            current: Qt.rgba(1,1,1,1)
         }
     }
 

example/qml-Qt6/page/T_RadioButton.qml

@@ -3,11 +3,11 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"RadioButton"
+    title: qsTr("RadioButton")
 
     FluArea{
         Layout.fillWidth: true
@@ -22,21 +22,21 @@ FluScrollablePage{
             }
             FluRadioButton{
                 disabled: radio_button_switch.checked
-                text:"Right"
+                text: qsTr("Right")
             }
             FluRadioButton{
                 disabled: radio_button_switch.checked
-                text:"Left"
+                text: qsTr("Left")
                 textRight: false
             }
         }
         FluToggleSwitch{
-            id:radio_button_switch
+            id: radio_button_switch
             anchors{
                 right: parent.right
                 verticalCenter: parent.verticalCenter
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
@@ -61,24 +61,24 @@ FluScrollablePage{
             }
             FluRadioButton{
                 disabled: radio_button_switch2.checked
-                text:"Radio Button_1"
+                text: qsTr("Radio Button_1")
             }
             FluRadioButton{
                 disabled: radio_button_switch2.checked
-                text:"Radio Button_2"
+                text: qsTr("Radio Button_2")
             }
             FluRadioButton{
                 disabled: radio_button_switch2.checked
-                text:"Radio Button_3"
+                text: qsTr("Radio Button_3")
             }
         }
         FluToggleSwitch{
-            id:radio_button_switch2
+            id: radio_button_switch2
             anchors{
                 right: parent.right
                 verticalCenter: parent.verticalCenter
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{

example/qml-Qt6/page/T_RatingControl.qml

@@ -3,11 +3,11 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage {
 
-    title: "RatingControl"
+    title: qsTr("RatingControl")
 
     FluArea {
         Layout.fillWidth: true

example/qml-Qt6/page/T_Rectangle.qml

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

example/qml-Qt6/page/T_RemoteLoader.qml

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

example/qml-Qt6/page/T_Screenshot.qml

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

example/qml-Qt6/page/T_Settings.qml

@@ -3,12 +3,101 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/global"
-import "qrc:///example/qml/component"
+import "../global"
+import "../component"
+import "../viewmodel"
 
 FluScrollablePage{
 
-    title:"Settings"
+    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
@@ -23,13 +112,13 @@ FluScrollablePage{
                 left: parent.left
             }
             FluText{
-                text:lang.dark_mode
+                text: qsTr("Dark Mode")
                 font: FluTextStyle.BodyStrong
                 Layout.bottomMargin: 4
             }
             Repeater{
-                model: [{title:"System",mode:FluThemeType.System},{title:"Light",mode:FluThemeType.Light},{title:"Dark",mode:FluThemeType.Dark}]
-                delegate:  FluRadioButton{
+                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(){
@@ -53,23 +142,33 @@ FluScrollablePage{
                 left: parent.left
             }
             FluText{
-                text:lang.navigation_view_display_mode
+                text:qsTr("Navigation View Display Mode")
                 font: FluTextStyle.BodyStrong
                 Layout.bottomMargin: 4
             }
             Repeater{
-                model: [{title:"Open",mode:FluNavigationViewType.Open},{title:"Compact",mode:FluNavigationViewType.Compact},{title:"Minimal",mode:FluNavigationViewType.Minimal},{title:"Auto",mode:FluNavigationViewType.Auto}]
+                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 : MainEvent.displayMode===modelData.mode
+                    checked : viewmodel_settings.displayMode===modelData.mode
                     text:modelData.title
                     clickListener:function(){
-                        MainEvent.displayMode = modelData.mode
+                        viewmodel_settings.displayMode = modelData.mode
                     }
                 }
             }
         }
     }
 
+    ListModel{
+        id:model_language
+        ListElement{
+            name:"en"
+        }
+        ListElement{
+            name:"zh"
+        }
+    }
+
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
@@ -82,27 +181,25 @@ FluScrollablePage{
                 top: parent.top
                 left: parent.left
             }
-
             FluText{
-                text:lang.locale
+                text:qsTr("Language")
                 font: FluTextStyle.BodyStrong
                 Layout.bottomMargin: 4
             }
-
             Flow{
                 spacing: 5
                 Repeater{
-                    model: ["Zh","En"]
+                    model: TranslateHelper.languages
                     delegate: FluRadioButton{
-                        checked: appInfo.lang.objectName === modelData
+                        checked: TranslateHelper.current === modelData
                         text:modelData
                         clickListener:function(){
-                            appInfo.changeLang(modelData)
+                            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

@@ -2,12 +2,12 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
-import "qrc:///example/qml/component"
 import FluentUI
+import "../component"
 
 FluScrollablePage{
 
-    title:"Slider"
+    title: qsTr("Slider")
 
     FluArea{
         Layout.fillWidth: true

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

@@ -2,12 +2,12 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
-import "qrc:///example/qml/component"
 import FluentUI 1.0
+import "../component"
 
 FluContentPage{
 
-    title:"StaggeredView"
+    title: qsTr("StaggeredLayout")
 
     property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
 
@@ -16,7 +16,7 @@ FluContentPage{
         Component.onCompleted: {
             for(var i=0;i<=100;i++){
                 var item = {}
-                item.color = colors[rand(0,7)].dark
+                item.color = colors[rand(0,7)]
                 item.height = rand(100,300)
                 append(item)
             }
@@ -32,14 +32,14 @@ FluContentPage{
         contentHeight: staggered_view.implicitHeight
         clip: true
         ScrollBar.vertical: FluScrollBar {}
-        FluStaggeredView{
+        FluStaggeredLayout{
             id:staggered_view
             width: parent.width
             itemWidth: 160
             model:list_model
             delegate: Rectangle{
                 height: model.height
-                color:model.color
+                color:model.color.normal
                 FluText{
                     color:"#FFFFFF"
                     text:model.index
@@ -56,4 +56,3 @@ FluContentPage{
     }
 
 }
-

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 = FluStatusViewType.Loading
+                        status_view.statusMode = FluStatusLayoutType.Loading
                     }
                 }
                 FluMenuItem{
                     text:"Empty"
                     onClicked: {
                         btn_status_mode.text = text
-                        status_view.statusMode = FluStatusViewType.Empty
+                        status_view.statusMode = FluStatusLayoutType.Empty
                     }
                 }
                 FluMenuItem{
                     text:"Error"
                     onClicked: {
                         btn_status_mode.text = text
-                        status_view.statusMode = FluStatusViewType.Error
+                        status_view.statusMode = FluStatusLayoutType.Error
                     }
                 }
                 FluMenuItem{
                     text:"Success"
                     onClicked: {
                         btn_status_mode.text = text
-                        status_view.statusMode = FluStatusViewType.Success
+                        status_view.statusMode = FluStatusLayoutType.Success
                     }
                 }
             }
@@ -58,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: FluStatusViewType.Loading
+    statusMode: FluStatusLayoutType.Loading
     Rectangle{
         anchors.fill: parent
-        color:FluTheme.primaryColor.dark
+        color:FluTheme.primaryColor
     }
 }'
     }

example/qml-Qt6/page/T_TabView.qml

@@ -3,24 +3,24 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
     property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
 
-    title:"TabView"
+    title: qsTr("TabView")
 
     Component{
         id:com_page
         Rectangle{
             anchors.fill: parent
-            color: argument
+            color: argument.normal
         }
     }
 
     function newTab(){
-        tab_view.appendTab("qrc:/example/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)].dark)
+        tab_view.appendTab("qrc:/example/res/image/favicon.ico",qsTr("Document ")+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)])
     }
 
     Component.onCompleted: {
@@ -67,10 +67,10 @@ FluScrollablePage{
                 text:"Always"
                 Layout.preferredWidth: 120
                 FluMenuItem{
-                    text:"Nerver"
+                    text:"Never"
                     onClicked: {
                         btn_close_button_visibility.text = text
-                        tab_view.closeButtonVisibility = FluTabViewType.Nerver
+                        tab_view.closeButtonVisibility = FluTabViewType.Never
                     }
                 }
                 FluMenuItem{
@@ -126,5 +126,4 @@ FluScrollablePage{
 }
 '
     }
-
 }

example/qml-Qt6/page/T_TableView.qml

@@ -3,71 +3,257 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluContentPage{
 
-    title:"TableView"
+    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:"删除"
+                    text: qsTr("Delete")
                     onClicked: {
                         table_view.closeEditor()
-                        tableModel.removeRow(row)
+                        table_view.removeRow(row)
                     }
                 }
                 FluFilledButton{
-                    text:"编辑"
+                    text: qsTr("Edit")
                     onClicked: {
-                        showSuccess(JSON.stringify(tableModel.getRow(row)))
+                        var obj = table_view.getRow(row)
+                        obj.name = "12345"
+                        table_view.setRow(row,obj)
+                        showSuccess(JSON.stringify(obj))
                     }
                 }
             }
         }
     }
 
-    function loadData(page,count){
-        var numbers = [100, 300, 500, 1000];
-        function getRandomAge() {
-            var randomIndex = Math.floor(Math.random() * numbers.length);
-            return numbers[randomIndex];
+
+    Component{
+        id:com_column_checbox
+        Item{
+            RowLayout{
+                anchors.centerIn: parent
+                FluText{
+                    text: 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)
+                        }
+                    }
+                }
+            }
         }
-        var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"];
-        function getRandomName(){
-            var randomIndex = Math.floor(Math.random() * names.length);
-            return names[randomIndex];
-        }
-        var nicknames = ["复海大圣","混天大圣","移山大圣","通风大圣","驱神大圣","齐天大圣","平天大圣"]
-        function getRandomNickname(){
-            var randomIndex = Math.floor(Math.random() * nicknames.length);
-            return nicknames[randomIndex];
-        }
-        var addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
-        function getRandomAddresses(){
-            var randomIndex = Math.floor(Math.random() * addresses.length);
-            return addresses[randomIndex];
-        }
-        const dataSource = []
-        for(var i=0;i<count;i++){
-            dataSource.push({
-                                name: getRandomName(),
-                                age:getRandomAge(),
-                                address: getRandomAddresses(),
-                                nickname: getRandomNickname(),
-                                longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
-                                action:com_action
-                            })
-        }
-        table_view.dataSource = dataSource
     }
 
     Component{
@@ -75,42 +261,226 @@ FluContentPage{
         FluComboBox {
             anchors.fill: parent
             focus: true
-            currentIndex: display
+            editText: display
             editable: true
             model: ListModel {
-                ListElement { text: 100 }
-                ListElement { text: 300 }
-                ListElement { text: 500 }
-                ListElement { text: 1000 }
+                ListElement { text: "100" }
+                ListElement { text: "300" }
+                ListElement { text: "500" }
+                ListElement { text: "1000" }
             }
             Component.onCompleted: {
-                currentIndex=[100,300,500,1000].findIndex((element) => element === Number(display))
+                currentIndex=["100","300","500","1000"].findIndex((element) => element === display)
                 selectAll()
             }
             onCommit: {
-                display = editText
+                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: parent.top
+            top: layout_controls.bottom
             bottom: gagination.top
         }
-        anchors.topMargin: 20
+        anchors.topMargin: 5
+        onRowsChanged: {
+            root.checkBoxChanged()
+        }
         columnSource:[
             {
-                title: '姓名',
-                dataIndex: 'name',
-                readOnly:true,
+                title: table_view.customItem(com_column_checbox,{checked:true}),
+                dataIndex: 'checkbox',
+                width:100,
+                minimumWidth:100,
+                maximumWidth:100
             },
             {
-                title: '年龄',
+                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,
@@ -118,28 +488,28 @@ FluContentPage{
                 maximumWidth:100
             },
             {
-                title: '住址',
+                title: qsTr("Address"),
                 dataIndex: 'address',
                 width:200,
                 minimumWidth:100,
                 maximumWidth:250
             },
             {
-                title: '别名',
+                title: qsTr("Nickname"),
                 dataIndex: 'nickname',
                 width:100,
                 minimumWidth:80,
                 maximumWidth:200
             },
             {
-                title: '长字符串',
+                title: qsTr("Long String"),
                 dataIndex: 'longstring',
                 width:200,
                 minimumWidth:100,
                 maximumWidth:300
             },
             {
-                title: '操作',
+                title: qsTr("Options"),
                 dataIndex: 'action',
                 width:160,
                 minimumWidth:160,
@@ -158,6 +528,8 @@ FluContentPage{
         itemCount: 100000
         pageButtonCount: 7
         __itemPerPage: 1000
+        previousText: qsTr("<Previous")
+        nextText: qsTr("Next>")
         onRequestPage:
             (page,count)=> {
                 table_view.closeEditor()
@@ -166,6 +538,52 @@ FluContentPage{
             }
     }
 
-
-
+    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

@@ -3,11 +3,11 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"Text"
+    title: qsTr("Text")
 
     FluArea{
         Layout.fillWidth: true
@@ -16,7 +16,7 @@ FluScrollablePage{
         paddings: 10
 
         FluCopyableText{
-            text: "这是一个可以支持复制的Text"
+            text: qsTr("This is a text that can be copied")
             anchors.verticalCenter: parent.verticalCenter
         }
 
@@ -25,7 +25,7 @@ FluScrollablePage{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluCopyableText{
-    text:"这是一个可以支持复制的Text"
+    text: qsTr("This is a text that can be copied")
 }'
     }
 

example/qml-Qt6/page/T_TextBox.qml

@@ -3,13 +3,17 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
+import "../viewmodel"
 
 FluScrollablePage{
 
-    launchMode: FluPageType.SingleInstance
+    title: qsTr("TextBox")
+
+    TextBoxViewModel{
+        id:viewModel
+    }
 
-    title:"TextBox"
     FluArea{
         Layout.fillWidth: true
         height: 68
@@ -17,9 +21,13 @@ FluScrollablePage{
         Layout.topMargin: 20
 
         FluTextBox{
-            placeholderText: "单行输入框"
-            disabled:text_box_switch.checked
+            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
@@ -27,19 +35,19 @@ FluScrollablePage{
         }
 
         FluToggleSwitch{
-            id:text_box_switch
+            id: text_box_switch
             anchors{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluTextBox{
-    placeholderText:"单行输入框"
+    placeholderText: qsTr("Single-line Input Box")
 }'
     }
 
@@ -50,7 +58,7 @@ FluScrollablePage{
         Layout.topMargin: 20
 
         FluPasswordBox{
-            placeholderText: "请输入密码"
+            placeholderText: qsTr("Please enter your password")
             disabled:password_box_switch.checked
             anchors{
                 verticalCenter: parent.verticalCenter
@@ -63,14 +71,14 @@ FluScrollablePage{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluPasswordBox{
-    placeholderText:"请输入密码"
+    placeholderText: qsTr("Please enter your password")
 }'
     }
 
@@ -82,9 +90,13 @@ FluScrollablePage{
         Layout.topMargin: 20
 
         FluMultilineTextBox{
-            id:multiine_textbox
-            placeholderText: "多行输入框"
-            disabled:text_box_multi_switch.checked
+            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
@@ -97,14 +109,14 @@ FluScrollablePage{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluMultilineTextBox{
-    placeholderText:"多行输入框"
+    placeholderText: qsTr("Multi-line Input Box")
 }'
     }
 
@@ -114,9 +126,9 @@ FluScrollablePage{
         paddings: 10
         Layout.topMargin: 20
         FluAutoSuggestBox{
-            placeholderText: "AutoSuggestBox"
-            items:generateRandomNames(100)
-            disabled:text_box_suggest_switch.checked
+            placeholderText: qsTr("AutoSuggestBox")
+            items: generateRandomNames(100)
+            disabled: text_box_suggest_switch.checked
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
@@ -128,14 +140,14 @@ FluScrollablePage{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluAutoSuggestBox{
-    placeholderText:"AutoSuggestBox"
+    placeholderText: qsTr("AutoSuggestBox")
 }'
     }
 
@@ -152,12 +164,12 @@ FluScrollablePage{
             }
         }
         FluToggleSwitch{
-            id:spin_box_switch
+            id: spin_box_switch
             anchors{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{

example/qml-Qt6/page/T_Theme.qml

@@ -3,36 +3,44 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"Theme"
+    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
-        height: 270
+        Layout.preferredHeight: 340
         paddings: 10
+
         ColumnLayout{
             spacing:0
             anchors{
                 left: parent.left
             }
-            RowLayout{
+            FluText{
+                text: qsTr("Theme colors")
                 Layout.topMargin: 10
+            }
+            RowLayout{
+                Layout.topMargin: 5
                 Repeater{
-                    model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
-                    delegate:  FluRectangle{
+                    model: root.colorData
+                    delegate:  Rectangle{
                         width: 42
                         height: 42
-                        radius: [4,4,4,4]
+                        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.primaryColor
+                            visible: modelData === FluTheme.accentColor
                             color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
                         }
                         MouseArea{
@@ -40,14 +48,43 @@ FluScrollablePage{
                             anchors.fill: parent
                             hoverEnabled: true
                             onClicked: {
-                                FluTheme.primaryColor = modelData
+                                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:"夜间模式"
+                text: qsTr("Dark Mode")
                 Layout.topMargin: 20
             }
             FluToggleSwitch{
@@ -62,7 +99,7 @@ FluScrollablePage{
                 }
             }
             FluText{
-                text:"native文本渲染"
+                text: qsTr("Native Text")
                 Layout.topMargin: 20
             }
             FluToggleSwitch{
@@ -73,7 +110,7 @@ FluScrollablePage{
                 }
             }
             FluText{
-                text:"开启动画效果"
+                text: qsTr("Open Animation")
                 Layout.topMargin: 20
             }
             FluToggleSwitch{
@@ -88,7 +125,7 @@ FluScrollablePage{
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
-        code:'FluTheme.primaryColor = FluColors.Orange
+        code:'FluTheme.accentColor = FluColors.Orange
 
 FluTheme.dark = true
 

example/qml-Qt6/page/T_TimePicker.qml

@@ -3,11 +3,11 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"TimePicker"
+    title: qsTr("TimePicker")
     launchMode: FluPageType.SingleInstance
     FluArea{
         Layout.fillWidth: true
@@ -23,11 +23,17 @@ FluScrollablePage{
             }
 
             FluText{
-                text:"hourFormat=FluTimePickerType.H"
+                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")))
                 }
@@ -57,11 +63,17 @@ FluScrollablePage{
             }
 
             FluText{
-                text:"hourFormat=FluTimePickerType.HH"
+                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")))
                 }

example/qml-Qt6/page/T_Timeline.qml

@@ -3,11 +3,11 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"Timeline"
+    title: qsTr("Timeline")
 
     Component{
         id:com_dot
@@ -84,7 +84,7 @@ FluScrollablePage{
             text:"找到一份Android外包开发岗位，开发了一个Android应用，满满成就感！前端、服务端、Flutter也都懂一丢丢，什么都会什么都不精通，钱途无望"
         }
         ListElement{
-            lable:"2020-06-01"
+            lable:"2021-06-01"
             text:"由于某个项目紧急，临时加入Qt项目组（就因为大学学了点C++），本来是想进去打个酱油，到后面竟然成开发主力，坑啊"
         }
         ListElement{
@@ -108,17 +108,18 @@ FluScrollablePage{
         spacing: 20
         Layout.topMargin: 20
         FluTextBox{
-            id:text_box
-            text:"Technical testing 2015-09-01"
+            id: text_box
+            text: "Technical testing 2015-09-01"
+            Layout.preferredWidth: 240
         }
         FluFilledButton{
-            text:"Append"
+            text: qsTr("Append")
             onClicked: {
                 list_model.append({text:text_box.text})
             }
         }
         FluFilledButton{
-            text:"clear"
+            text: qsTr("clear")
             onClicked: {
                 list_model.clear()
             }
@@ -131,25 +132,25 @@ FluScrollablePage{
             text:"mode:"
         }
         FluDropDownButton{
-            id:btn_mode
+            id: btn_mode
             Layout.preferredWidth: 100
-            text:"Alternate"
+            text: "Alternate"
             FluMenuItem{
-                text:"Left"
+                text: "Left"
                 onClicked: {
                     btn_mode.text = text
                     time_line.mode = FluTimelineType.Left
                 }
             }
             FluMenuItem{
-                text:"Right"
+                text: "Right"
                 onClicked: {
                     btn_mode.text = text
                     time_line.mode = FluTimelineType.Right
                 }
             }
             FluMenuItem{
-                text:"Alternate"
+                text: "Alternate"
                 onClicked: {
                     btn_mode.text = text
                     time_line.mode = FluTimelineType.Alternate
@@ -159,12 +160,12 @@ FluScrollablePage{
     }
 
     FluTimeline{
-        id:time_line
+        id: time_line
         Layout.fillWidth: true
         Layout.topMargin: 20
         Layout.bottomMargin: 20
         mode: FluTimelineType.Alternate
-        model:list_model
+        model: list_model
     }
 
 }

example/qml-Qt6/page/T_ToggleSwitch.qml

@@ -3,11 +3,11 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"ToggleSwitch"
+    title: qsTr("ToggleSwitch")
 
     FluArea{
         Layout.fillWidth: true
@@ -22,21 +22,21 @@ FluScrollablePage{
             }
             FluToggleSwitch{
                 disabled: toggle_switch.checked
-                text:"Right"
+                text: qsTr("Right")
             }
             FluToggleSwitch{
                 disabled: toggle_switch.checked
-                text:"Left"
+                text: qsTr("Left")
                 textRight: false
             }
         }
         FluToggleSwitch{
-            id:toggle_switch
+            id: toggle_switch
             anchors{
                 right: parent.right
                 verticalCenter: parent.verticalCenter
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{

example/qml-Qt6/page/T_Tooltip.qml

@@ -3,15 +3,15 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"Tooltip"
+    title: qsTr("Tooltip")
 
     FluText{
         Layout.topMargin: 20
-        text:"鼠标悬停不动，弹出Tooltip"
+        text: qsTr("Hover over Tultip and it pops up")
     }
 
     FluArea{
@@ -27,14 +27,14 @@ FluScrollablePage{
                 left: parent.left
             }
             FluText{
-                text:"FluIconButton的text属性自带Tooltip效果"
+                text: qsTr("Text properties of FluIconButton support the Tooltip pop-up window by default")
             }
             FluIconButton{
                 iconSource:FluentIcons.ChromeCloseContrast
                 iconSize: 15
-                text:"删除"
+                text: qsTr("Delete")
                 onClicked:{
-                    showSuccess("点击IconButton")
+                    showSuccess(qsTr("Click IconButton"))
                 }
             }
         }
@@ -45,9 +45,9 @@ FluScrollablePage{
         code:'FluIconButton{
     iconSource:FluentIcons.ChromeCloseContrast
     iconSize: 15
-    text:"删除"
+    text: qsTr("Delete")
     onClicked:{
-        showSuccess("点击IconButton")
+        showSuccess(qsTr("Click IconButton"))
     }
 }
 '
@@ -66,13 +66,13 @@ FluScrollablePage{
                 left: parent.left
             }
             FluText{
-                text:"给一个Button添加Tooltip效果"
+                text: qsTr("Add a Tooltip pop-up to a Button")
             }
             FluButton{
                 id:button_1
-                text:"删除"
+                text: qsTr("Delete")
                 onClicked:{
-                    showSuccess("点击一个Button")
+                    showSuccess(qsTr("Click Button"))
                 }
                 FluTooltip{
                     visible: button_1.hovered
@@ -86,15 +86,15 @@ FluScrollablePage{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluButton{
-    id:button_1
-    text:"删除"
+    id: button_1
+    text: qsTr("Delete")
     FluTooltip{
         visible: button_1.hovered
         text:button_1.text
         delay: 1000
     }
     onClicked:{
-        showSuccess("点击一个Button")
+        showSuccess(qsTr("Click Button"))
     }
 }'
     }

example/qml-Qt6/page/T_Tour.qml

@@ -3,18 +3,18 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"Tour"
+    title: qsTr("Tour")
 
     FluTour{
         id:tour
         steps:[
-            {title:"Upload File",description: "Put your files here.",target:()=>btn_upload},
-            {title:"Save",description: "Save your changes.",target:()=>btn_save},
-            {title:"Other Actions",description: "Click to see other actions.",target:()=>btn_more}
+            {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}
         ]
     }
 
@@ -29,7 +29,7 @@ FluScrollablePage{
                 top: parent.top
                 topMargin: 14
             }
-            text:"Begin Tour"
+            text: qsTr("Begin Tour")
             onClicked: {
                 tour.open()
             }
@@ -42,24 +42,24 @@ FluScrollablePage{
                 topMargin: 60
             }
             FluButton{
-                id:btn_upload
-                text:"Upload"
+                id: btn_upload
+                text: qsTr("Upload")
                 onClicked: {
-                    showInfo("Upload")
+                    showInfo(qsTr("Upload"))
                 }
             }
             FluFilledButton{
-                id:btn_save
-                text:"Save"
+                id: btn_save
+                text: qsTr("Save")
                 onClicked: {
-                    showInfo("Save")
+                    showInfo(qsTr("Save"))
                 }
             }
             FluIconButton{
-                id:btn_more
+                id: btn_more
                 iconSource: FluentIcons.More
                 onClicked: {
-                    showInfo("More")
+                    showInfo(qsTr("More"))
                 }
             }
         }

example/qml-Qt6/page/T_TreeView.qml

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

example/qml-Qt6/page/T_Typography.qml

@@ -7,7 +7,7 @@ FluContentPage {
 
     property real textScale: 1
 
-    title: "Typography"
+    title: qsTr("Typography")
     rightPadding: 10
 
     FluArea{

example/qml-Qt6/page/T_Watermark.qml

@@ -3,11 +3,11 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluContentPage{
 
-    title:"Watermark"
+    title: qsTr("Watermark")
 
     FluArea{
         anchors.fill: parent
@@ -23,23 +23,24 @@ FluContentPage{
                 spacing: 10
                 Layout.topMargin: 14
                 FluText{
-                    text:"text:"
+                    text: "text:"
                     Layout.alignment: Qt.AlignVCenter
                 }
                 FluTextBox{
-                    id:text_box
-                    text:"会磨刀的小猪"
+                    id: text_box
+                    text: "会磨刀的小猪"
+                    Layout.preferredWidth: 240
                 }
             }
 
             RowLayout{
                 spacing: 10
                 FluText{
-                    text:"textSize:"
+                    text: "textSize:"
                     Layout.alignment: Qt.AlignVCenter
                 }
                 FluSlider{
-                    id:slider_text_size
+                    id: slider_text_size
                     value: 20
                     from: 13
                     to:50
@@ -48,7 +49,7 @@ FluContentPage{
             RowLayout{
                 spacing: 10
                 FluText{
-                    text:"gapX:"
+                    text: "gapX:"
                     Layout.alignment: Qt.AlignVCenter
                 }
                 FluSlider{
@@ -59,18 +60,18 @@ FluContentPage{
             RowLayout{
                 spacing: 10
                 FluText{
-                    text:"gapY:"
+                    text: "gapY:"
                     Layout.alignment: Qt.AlignVCenter
                 }
                 FluSlider{
-                    id:slider_gap_y
+                    id: slider_gap_y
                     value: 100
                 }
             }
             RowLayout{
                 spacing: 10
                 FluText{
-                    text:"offsetX:"
+                    text: "offsetX:"
                     Layout.alignment: Qt.AlignVCenter
                 }
                 FluSlider{
@@ -81,22 +82,22 @@ FluContentPage{
             RowLayout{
                 spacing: 10
                 FluText{
-                    text:"offsetY:"
+                    text: "offsetY:"
                     Layout.alignment: Qt.AlignVCenter
                 }
                 FluSlider{
-                    id:slider_offset_y
+                    id: slider_offset_y
                     value: 50
                 }
             }
             RowLayout{
                 spacing: 10
                 FluText{
-                    text:"rotate:"
+                    text: "rotate:"
                     Layout.alignment: Qt.AlignVCenter
                 }
                 FluSlider{
-                    id:slider_rotate
+                    id: slider_rotate
                     value: 22
                     from: 0
                     to:360
@@ -105,23 +106,21 @@ FluContentPage{
             RowLayout{
                 spacing: 10
                 FluText{
-                    text:"textColor:"
+                    text: "textColor:"
                     Layout.alignment: Qt.AlignVCenter
                 }
                 FluColorPicker{
-                    id:color_picker
-                    Component.onCompleted: {
-                        setColor(Qt.rgba(0,0,0,0.1))
-                    }
+                    id: color_picker
+                    current: Qt.rgba(0,0,0,0.1)
                 }
             }
         }
 
         FluWatermark{
-            id:water_mark
+            id: water_mark
             anchors.fill: parent
             text:text_box.text
-            textColor: color_picker.colorValue
+            textColor: color_picker.current
             textSize: slider_text_size.value
             rotate: slider_rotate.value
             gap:Qt.point(slider_gap_x.value,slider_gap_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

@@ -2,14 +2,14 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
-CustomWindow {
+FluWindow {
 
     id:window
     title:"关于"
     width: 600
-    height: 600
+    height: 580
     fixSize: true
     launchMode: FluWindowType.SingleTask
 
@@ -19,9 +19,10 @@ CustomWindow {
             left: parent.left
             right: parent.right
         }
+        spacing: 5
 
         RowLayout{
-            Layout.topMargin: 20
+            Layout.topMargin: 15
             Layout.leftMargin: 15
             spacing: 14
             FluText{
@@ -35,7 +36,7 @@ CustomWindow {
                 }
             }
             FluText{
-                text:"v%1".arg(appInfo.version)
+                text:"v%1".arg(AppInfo.version)
                 font: FluTextStyle.Body
                 Layout.alignment: Qt.AlignBottom
             }
@@ -43,7 +44,6 @@ CustomWindow {
 
         RowLayout{
             spacing: 14
-            Layout.topMargin: 20
             Layout.leftMargin: 15
             FluText{
                 text:"作者："
@@ -54,6 +54,21 @@ CustomWindow {
             }
         }
 
+        RowLayout{
+            spacing: 14
+            Layout.leftMargin: 15
+            FluText{
+                text:"微信号："
+            }
+            FluText{
+                text:"FluentUI"
+                Layout.alignment: Qt.AlignBottom
+            }
+            FluText{
+                text:"(有啥问题可能不会马上回，但发了红包必须立马回......)"
+            }
+        }
+
         RowLayout{
             spacing: 14
             Layout.leftMargin: 15

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,113 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import FluentUI
+import Qt.labs.platform
+import "../component"
+
+FluWindowDialog {
+
+    id:window
+    title:qsTr("FluentUI Initalizr")
+    width: 600
+    height: 400
+
+    contentDelegate:Component{
+        Item{
+            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

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

example/qml-Qt6/window/LoginWindow.qml

@@ -2,16 +2,16 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
-CustomWindow {
+FluWindow {
 
-    id:window
-    title:"登录"
+    id: window
+    title: qsTr("Login")
     width: 400
     height: 400
     fixSize: true
-
+    modality: Qt.ApplicationModal
     onInitArgument:
         (argument)=>{
             textbox_uesrname.updateText(argument.username)
@@ -26,38 +26,34 @@ CustomWindow {
         }
 
         FluAutoSuggestBox{
-            id:textbox_uesrname
+            id: textbox_uesrname
             items:[{title:"Admin"},{title:"User"}]
-            placeholderText: "请输入账号"
+            placeholderText: qsTr("Please enter the account")
             Layout.preferredWidth: 260
             Layout.alignment: Qt.AlignHCenter
         }
 
         FluTextBox{
-            id:textbox_password
+            id: textbox_password
             Layout.topMargin: 20
             Layout.preferredWidth: 260
-            placeholderText: "请输入密码"
+            placeholderText: qsTr("Please enter your password")
             echoMode:TextInput.Password
             Layout.alignment: Qt.AlignHCenter
         }
 
         FluFilledButton{
-            text:"登录"
+            text: qsTr("Login")
             Layout.alignment: Qt.AlignHCenter
             Layout.topMargin: 20
             onClicked:{
                 if(textbox_password.text === ""){
-                    showError("请随便输入一个密码")
+                    showError(qsTr("Please feel free to enter a password"))
                     return
                 }
                 onResult({password:textbox_password.text})
                 window.close()
             }
         }
-
     }
-
-
-
 }

example/qml-Qt6/window/MainWindow.qml

@@ -5,30 +5,59 @@ import QtQuick.Layouts
 import Qt.labs.platform
 import FluentUI
 import example
-import "qrc:///example/qml/component"
-import "qrc:///example/qml/global"
+import "../component"
+import "../global"
+import "../viewmodel"
 
-CustomWindow {
+FluWindow {
 
     id:window
     title: "FluentUI"
     width: 1000
-    height: 640
-    closeDestory:false
+    height: 680
     minimumWidth: 520
     minimumHeight: 200
-    appBarVisible: false
     launchMode: FluWindowType.SingleTask
+    fitsAppBarWindows: true
+    appBar: FluAppBar {
+        height: 30
+        showDark: true
+        darkClickListener:(button)=>handleDarkChanged(button)
+        closeClickListener: ()=>{dialog_close.open()}
+        z:7
+    }
 
-    closeFunc:function(event){
-        dialog_close.open()
-        event.accepted = false
+    SettingsViewModel{
+        id:viewmodel_settings
+    }
+
+    FluEvent{
+        id:event_checkupdate
+        name: "checkUpdate"
+        onTriggered: {
+            checkUpdate(false)
+        }
+    }
+
+    onFirstVisible: {
+        timer_tour_delay.restart()
+    }
+
+    Timer{
+        id:timer_tour_delay
+        interval: 200
+        onTriggered: {
+            tour.open()
+        }
     }
 
     Component.onCompleted: {
-        FluTools.setQuitOnLastWindowClosed(false)
-        tour.open()
-        checkUpdate()
+        checkUpdate(true)
+        FluEventBus.registerEvent(event_checkupdate)
+    }
+
+    Component.onDestruction: {
+        FluEventBus.unRegisterEvent(event_checkupdate)
     }
 
     SystemTrayIcon {
@@ -40,8 +69,7 @@ CustomWindow {
             MenuItem {
                 text: "退出"
                 onTriggered: {
-                    window.deleteWindow()
-                    FluApp.closeApp()
+                    FluApp.exit()
                 }
             }
         }
@@ -55,21 +83,42 @@ CustomWindow {
             }
     }
 
-    FluContentDialog{
-        id:dialog_close
-        title:"退出"
-        message:"确定要退出程序吗？"
-        negativeText:"最小化"
-        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.NeutralButton | FluContentDialogType.PositiveButton
-        onNegativeClicked:{
+    Timer{
+        id: timer_window_hide_delay
+        interval: 150
+        onTriggered: {
             window.hide()
-            system_tray.showMessage("友情提示","FluentUI已隐藏至托盘,点击托盘可再次激活窗口");
         }
-        positiveText:"退出"
-        neutralText:"取消"
+    }
+
+    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:{
-            window.deleteWindow()
-            FluApp.closeApp()
+            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})
+                }
+            }
         }
     }
 
@@ -96,18 +145,8 @@ CustomWindow {
         back: Item{
             anchors.fill: flipable
             visible: flipable.flipAngle !== 0
-            FluAppBar {
-                anchors {
-                    top: parent.top
-                    left: parent.left
-                    right: parent.right
-                }
-                darkText: lang.dark_mode
-                showDark: true
-                z:7
-                darkClickListener:(button)=>handleDarkChanged(button)
-            }
             Row{
+                id:layout_back_buttons
                 z:8
                 anchors{
                     top: parent.top
@@ -133,30 +172,21 @@ CustomWindow {
                         loader.reload()
                     }
                 }
+                Component.onCompleted: {
+                    appBar.setHitTestVisible(layout_back_buttons)
+                }
             }
             FluRemoteLoader{
                 id:loader
                 lazy: true
                 anchors.fill: parent
-                source: "https://zhu-zichu.gitee.io/Qt6_155_LieflatPage.qml"
+                source: "https://zhu-zichu.gitee.io/Qt_168_LieflatPage.qml"
             }
         }
         front: Item{
             id:page_front
             visible: flipable.flipAngle !== 180
             anchors.fill: flipable
-            FluAppBar {
-                id:app_bar_front
-                anchors {
-                    top: parent.top
-                    left: parent.left
-                    right: parent.right
-                }
-                darkText: lang.dark_mode
-                showDark: true
-                darkClickListener:(button)=>handleDarkChanged(button)
-                z:7
-            }
             FluNavigationView{
                 property int clickCount: 0
                 id:nav_view
@@ -164,18 +194,23 @@ CustomWindow {
                 height: parent.height
                 z:999
                 //Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式
-                pageMode: FluNavigationViewType.Stack
-                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存（推荐）
-                //                pageMode: FluNavigationViewType.NoStack
+                //                pageMode: FluNavigationViewType.Stack
+                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存，可以配合FluViewModel保存页面数据（推荐）
+                pageMode: FluNavigationViewType.NoStack
                 items: ItemsOriginal
                 footerItems:ItemsFooter
-                topPadding:FluTools.isMacos() ? 20 : 0
-                displayMode:MainEvent.displayMode
+                topPadding:{
+                    if(window.useSystemAppBar){
+                        return 0
+                    }
+                    return FluTools.isMacos() ? 20 : 0
+                }
+                displayMode:viewmodel_settings.displayMode
                 logo: "qrc:/example/res/image/favicon.ico"
                 title:"FluentUI"
                 onLogoClicked:{
                     clickCount += 1
-                    showSuccess("点击%1次".arg(clickCount))
+                    showSuccess("%1:%2".arg(qsTr("Click Time")).arg(clickCount))
                     if(clickCount === 5){
                         loader.reload()
                         flipable.flipped = true
@@ -183,11 +218,9 @@ CustomWindow {
                     }
                 }
                 autoSuggestBox:FluAutoSuggestBox{
-                    width: 280
-                    anchors.centerIn: parent
                     iconSource: FluentIcons.Search
                     items: ItemsOriginal.getSearchData()
-                    placeholderText: lang.search
+                    placeholderText: qsTr("Search")
                     onItemClicked:
                         (data)=>{
                             ItemsOriginal.startPageByItem(data)
@@ -195,7 +228,12 @@ CustomWindow {
                 }
                 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)
                 }
             }
@@ -218,7 +256,7 @@ CustomWindow {
         }
     }
 
-    Loader{
+    FluLoader{
         id:loader_reveal
         anchors.fill: parent
     }
@@ -228,9 +266,12 @@ CustomWindow {
     }
 
     function handleDarkChanged(button){
-        if(FluTools.isMacos() || !FluTheme.enableAnimation){
+        if(!FluTheme.enableAnimation || window.fitsAppBarWindows === false){
             changeDark()
         }else{
+            if(loader_reveal.sourceComponent){
+                return
+            }
             loader_reveal.sourceComponent = com_reveal
             var target = window.contentItem
             var pos = button.mapToItem(target,0,0)
@@ -269,15 +310,18 @@ CustomWindow {
     }
 
     FluTour{
-        id:tour
-        steps:[
-            {title:"夜间模式",description: "这里可以切换夜间模式.",target:()=>app_bar_front.darkButton()},
-            {title:"隐藏彩蛋",description: "多点几下试试！！",target:()=>nav_view.logoButton()}
-        ]
-    }
-
-    FluHttp{
-        id:http
+        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{
@@ -285,7 +329,7 @@ CustomWindow {
     }
 
     FluText{
-        text:"fps %1".arg(fps_item.fps)
+        text: "fps %1".arg(fps_item.fps)
         opacity: 0.3
         anchors{
             bottom: parent.bottom
@@ -298,39 +342,54 @@ CustomWindow {
     FluContentDialog{
         property string newVerson
         property string body
-        id:dialog_update
-        title:"升级提示"
-        message:"FluentUI目前最新版本 "+ newVerson +" -- 当前应用版本 "+appInfo.version+" \n现在是否去下载新版本？\n\n更新内容：\n"+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: "取消"
-        positiveText:"确定"
+        negativeText: qsTr("Cancel")
+        positiveText: qsTr("OK")
         onPositiveClicked:{
             Qt.openUrlExternally("https://github.com/zhuzichu520/FluentUI/releases/latest")
         }
     }
 
-    function checkUpdate(){
-        var callable = {}
-        callable.onStart = function(){
+    FluNetworkCallable{
+        id:callable
+        property bool silent: true
+        onStart: {
             console.debug("satrt check update...")
         }
-        callable.onFinish = function(){
+        onFinish: {
             console.debug("check update finish")
+            FluEventBus.post("checkUpdateFinish");
         }
-        callable.onSuccess = function(result){
-            var data = JSON.parse(result)
-            console.debug("current version "+appInfo.version)
-            console.debug("new version "+data.tag_name)
-            if(data.tag_name !== appInfo.version){
-                dialog_update.newVerson =  data.tag_name
-                dialog_update.body = data.body
-                dialog_update.open()
+        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)
             }
-        }
-        callable.onError = function(status,errorString){
-            console.debug(status+";"+errorString)
-        }
-        http.get("https://api.github.com/repos/zhuzichu520/FluentUI/releases/latest",callable)
     }
 
+    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

@@ -3,9 +3,9 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
 import example
-import "qrc:///example/qml/component"
+import "../component"
 
-CustomWindow {
+FluWindow {
 
     id:window
     width: 800
@@ -18,7 +18,7 @@ CustomWindow {
             window.title = arg.title
             loader.setSource( arg.url,{animDisabled:true})
         }
-    Loader{
+    FluLoader{
         id: loader
         anchors.fill: parent
     }

example/qml-Qt6/window/SingleInstanceWindow.qml

@@ -2,12 +2,12 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
-CustomWindow {
+FluWindow {
 
-    id:window
-    title:"SingleInstance"
+    id: window
+    title: qsTr("SingleInstance")
     width: 500
     height: 600
     fixSize: true
@@ -30,6 +30,6 @@ CustomWindow {
             rightMargin: 20
             verticalCenter: parent.verticalCenter
         }
-        text:"我是一个SingleInstance模式的窗口，如果我存在，我会销毁之前的窗口，并创建一个新窗口"
+        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

@@ -2,12 +2,12 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
-CustomWindow {
+FluWindow {
 
-    id:window
-    title:"SingleTask"
+    id: window
+    title: qsTr("SingleTask")
     width: 500
     height: 600
     fixSize: true
@@ -15,7 +15,7 @@ CustomWindow {
 
     FluText{
         anchors.centerIn: parent
-        text:"我是一个SingleTask模式的窗口，如果我存在，我就激活窗口"
+        text: qsTr("I'm a SingleTask mode window, and if I exist, I activate the window")
     }
 
 }