update

optimize style for FluPivot

.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")
+    message(STATUS "Current .git not exist")
-  set(GIT_COMMIT_COUNT "1")
+    set(GIT_COMMIT_COUNT "1")
-  set(GIT_DESCRIBE "1.0.0")
+    set(GIT_DESCRIBE "1.0.0")
-  set(GIT_TAG "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}")
-	string(REPLACE "ref: " "" HEAD_REF "${HEAD_CONTENTS}")
+    if(EXISTS "@GIT_DIR@/${HEAD_REF}")
-	if(EXISTS "@GIT_DIR@/${HEAD_REF}")
+        configure_file("@GIT_DIR@/${HEAD_REF}" "@GIT_DATA@/head-ref" COPYONLY)
-		configure_file("@GIT_DIR@/${HEAD_REF}" "@GIT_DATA@/head-ref" COPYONLY)
+    else()
-	else()
+        configure_file("@GIT_DIR@/packed-refs" "@GIT_DATA@/packed-refs" COPYONLY)
-		configure_file("@GIT_DIR@/packed-refs" "@GIT_DATA@/packed-refs" COPYONLY)
+        file(READ "@GIT_DATA@/packed-refs" PACKED_REFS)
-		file(READ "@GIT_DATA@/packed-refs" PACKED_REFS)
+            if(${PACKED_REFS} MATCHES "([0-9a-z]*) ${HEAD_REF}")
-		if(${PACKED_REFS} MATCHES "([0-9a-z]*) ${HEAD_REF}")
+                set(HEAD_HASH "${CMAKE_MATCH_1}")
-			set(HEAD_HASH "${CMAKE_MATCH_1}")
+            endif()
-		endif()
+    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)
+    file(READ "@GIT_DATA@/head-ref" HEAD_HASH LIMIT 1024)
-	string(STRIP "${HEAD_HASH}" HEAD_HASH)
+    string(STRIP "${HEAD_HASH}" HEAD_HASH)
 endif()

.cmake/InstallerScript.iss.in

@@ -0,0 +1,51 @@
+; 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
+
+[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
+

.github/workflows/macos.yml

@@ -21,8 +21,8 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [macos-12]
+        os: [macos-13]
-        qt_ver: [6.5.0]
+        qt_ver: [6.6.0]
         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,17 @@ 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/6.6.0/macos -DCMAKE_C_COMPILER=clang -DCMAKE_CXX_COMPILER=clang++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
           cmake --build . --target all --config Release --parallel
           
       - name: package
         run: |
           # 拷贝依赖
-          macdeployqt bin/release/${targetName}.app -qmldir=. -verbose=1 -dmg     
+          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

.github/workflows/ubuntu.yml

@@ -23,7 +23,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-20.04]
-        qt_ver: [6.5.0]
+        qt_ver: [6.6.0]
         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
@@ -55,7 +55,7 @@ jobs:
           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/6.6.0/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

.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-2022]
         include:
           - qt_arch: win64_mingw
-            qt_ver: 6.5.0
+            qt_ver: 6.6.0
             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\6.6.0\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
+          file: ./action-cli/installer.exe
-          asset_name: ${{ env.fileName }}_${{  github.ref_name }}_${{  matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.zip
+          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\5.15.2\msvc2019 -DCMAKE_C_COMPILER=cl -DCMAKE_CXX_COMPILER=cl -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake --build . --target all --config Release --parallel
+          echo winSdkDir=%WindowsSdkDir% >> %GITHUB_ENV%
+          echo winSdkVer=%WindowsSdkVersion% >> %GITHUB_ENV%
+          echo vcToolsInstallDir=%VCToolsInstallDir% >> %GITHUB_ENV%
+          echo vcToolsRedistDir=%VCToolsRedistDir% >> %GITHUB_ENV%
+          
+      - name: package
+        id: package      
+        env:
+          archiveName: ${{ env.fileName }}-${{ matrix.qt_arch }}-${{ matrix.qt_ver }}
+          msvcArch: ${{ matrix.msvc_arch }}          
+        shell: pwsh
+        run: |
+          & scripts\windows-publish.ps1 ${env:archiveName} ${env:targetName}
+          # 记录packageName给后续step
+           $name = ${env:archiveName}
+           echo "::set-output name=packageName::$name"     
+           
+      - uses: actions/upload-artifact@v2
+        with:
+          name: ${{ steps.package.outputs.packageName }}
+          path: 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

@@ -23,10 +23,10 @@ jobs:
       matrix:
         os: [windows-2019]
         include:
-          - qt_ver: 6.5.0        
+          - qt_ver: 6.6.0        
             qt_arch: win64_msvc2019_64
             msvc_arch: x64
-            qt_arch_install: msvc2019_64          
+            qt_arch_install: msvc2019_64  
     env:
       targetName: example.exe
       fileName: example
@@ -42,16 +42,17 @@ jobs:
           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 }}
+          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\6.6.0\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 +74,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
+          file: ./action-cli/installer.exe
-          asset_name: ${{ env.fileName }}_${{  github.ref_name }}_${{  matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.zip
+          asset_name: ${{ env.fileName }}_${{ github.ref_name }}_${{ matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.exe
           tag: ${{ github.ref }}
           overwrite: true 

.gitignore

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

CMakeLists.txt

@@ -8,7 +8,6 @@ list(APPEND CMAKE_MODULE_PATH ${FLUENTUI_DIRECTORY}/.cmake/)
 include(GetGitRevisionDescription)
 
 option(FLUENTUI_BUILD_EXAMPLES "Build FluentUI demo applications." ON)
-option(FLUENTUI_BUILD_FRAMELESSHEPLER "Build FramelessHelper." ON)
 option(FLUENTUI_BUILD_STATIC_LIB "Build static library." OFF)
 
 find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core)
@@ -32,14 +31,12 @@ if (FLUENTUI_BUILD_EXAMPLES)
     add_subdirectory(example)
 endif ()
 
-if (FLUENTUI_BUILD_FRAMELESSHEPLER)
+set(FRAMELESSHELPER_BUILD_STATIC ON)
-    set(FRAMELESSHELPER_BUILD_STATIC ON)
+set(FRAMELESSHELPER_NO_DEBUG_OUTPUT ON)
-    set(FRAMELESSHELPER_NO_DEBUG_OUTPUT ON)
+set(FRAMELESSHELPER_BUILD_WIDGETS OFF)
-    add_subdirectory(framelesshelper)
+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]

example/CMakeLists.txt

@@ -53,7 +53,7 @@ endforeach(filepath)
 
 if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
     #遍历所有qml文件
-    file(GLOB_RECURSE QML_PATHS *.qml qmldir)
+    file(GLOB_RECURSE QML_PATHS *.qml)
     foreach(filepath ${QML_PATHS})
         string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
         if(${filepath} MATCHES "Qt${QT_VERSION_MAJOR}/")
@@ -64,14 +64,14 @@ if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
     endforeach(filepath)
 
     #遍历所有资源文件
-    file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp)
+    file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp *.obj qmldir)
     foreach(filepath ${RES_PATHS})
         string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
         list(APPEND resource_files ${filename})
     endforeach(filepath)
 endif()
 
-#如果是Windows平台，则生成rc文件
+#如果是Windows平台，则生成rc文件，还有inno setup脚本文件
 set(EXAMPLE_VERSION_RC_PATH "")
 if(WIN32)
     set(EXAMPLE_VERSION_RC_PATH ${CMAKE_BINARY_DIR}/version_${PROJECT_NAME}.rc)
@@ -79,6 +79,10 @@ if(WIN32)
         ${FLUENTUI_DIRECTORY}/.cmake/version_exe.rc.in
         ${EXAMPLE_VERSION_RC_PATH}
     )
+    configure_file(
+        ${FLUENTUI_DIRECTORY}/.cmake/InstallerScript.iss.in
+        ${CMAKE_SOURCE_DIR}/action-cli/InstallerScript.iss
+    )
 endif()
 
 #添加可执行文件
@@ -93,12 +97,17 @@ else ()
     )
 endif ()
 
-#复制动态库到可执行文件同级目录下
 if(WIN32)
-    if(CMAKE_CXX_COMPILER_ID STREQUAL "MSVC")
+    #复制动态库到可执行文件同级目录下
-        set(DLLPATH ${CMAKE_SOURCE_DIR}/3rdparty/msvc/*.dll)
+    if(CMAKE_SIZEOF_VOID_P EQUAL 4)
-    else()
+        set(3RDPARTY_ARCH_DIR ${CMAKE_SOURCE_DIR}/3rdparty/Win_x86)
-        set(DLLPATH ${CMAKE_SOURCE_DIR}/3rdparty/mingw/*.dll)
+    elseif(CMAKE_SIZEOF_VOID_P EQUAL 8)
+        set(3RDPARTY_ARCH_DIR ${CMAKE_SOURCE_DIR}/3rdparty/Win_x64)
+    endif()
+    if(MSVC)
+        set(DLLPATH ${3RDPARTY_ARCH_DIR}/msvc/*.dll)
+    elseif(MINGW)
+        set(DLLPATH ${3RDPARTY_ARCH_DIR}/mingw/*.dll)
     endif()
     string(REPLACE "/" ${PATH_SEPARATOR} DLLPATH "${DLLPATH}")
     file(GLOB DLL_FILES ${DLLPATH})
@@ -151,8 +160,6 @@ target_link_libraries(example PRIVATE
     Qt${QT_VERSION_MAJOR}::Svg
     Qt${QT_VERSION_MAJOR}::Network
     fluentuiplugin
-    FramelessHelper::Core
-    FramelessHelper::Quick
 )
 
 #安装

example/example.qrc

@@ -123,7 +123,6 @@
         <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/qmldir</file>
@@ -187,5 +186,8 @@
         <file>qml/page/T_StaggeredView.qml</file>
         <file>qml/viewmodel/SettingsViewModel.qml</file>
         <file>qml/viewmodel/TextBoxViewModel.qml</file>
+        <file>qml/page/T_Clip.qml</file>
+        <file>qml/page/T_3D.qml</file>
+        <file>qml/global/Lang.qml</file>
     </qresource>
 </RCC>

example/qml-Qt6/App.qml

@@ -4,9 +4,22 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
 
-Window {
+Item {
     id: app
-    flags: Qt.SplashScreen
+
+    Connections{
+        target: FluTheme
+        function onDarkModeChanged(){
+            SettingsHelper.saveDarkMode(FluTheme.darkMode)
+        }
+    }
+
+    Connections{
+        target: FluApp
+        function onVsyncChanged(){
+            SettingsHelper.saveVsync(FluApp.vsync)
+        }
+    }
 
     FluHttpInterceptor{
         id:interceptor
@@ -26,7 +39,8 @@ Window {
 
     Component.onCompleted: {
         FluApp.init(app)
-        FluTheme.darkMode = FluThemeType.System
+        FluApp.vsync = SettingsHelper.getVsync()
+        FluTheme.darkMode = SettingsHelper.getDarkMode()
         FluTheme.enableAnimation = true
         FluApp.routes = {
             "/":"qrc:/example/qml/window/MainWindow.qml",

example/qml-Qt6/component/CodeExpander.qml

@@ -80,7 +80,6 @@ FluExpander{
                     "FluIcon",
                     "FluIconButton",
                     "FluInfoBar",
-                    "FluItem",
                     "FluMediaPlayer",
                     "FluMenu",
                     "FluMenuItem",
@@ -140,7 +139,8 @@ FluExpander{
                     "FluRangeSlider",
                     "FluStaggeredView",
                     "FluProgressButton",
-                    "FluLoadingButton"
+                    "FluLoadingButton",
+                    "FluClip"
                 ];
         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:Lang.about
         icon:FluentIcons.Contact
-        onDropped: { FluApp.navigate("/about") }
         onTapListener:function(){
             FluApp.navigate("/about")
         }
     }
 
     FluPaneItem{
-        title:lang.settings
+        title:Lang.settings
+        menuDelegate: paneItemMenu
         icon:FluentIcons.Settings
         url:"qrc:/example/qml/page/T_Settings.qml"
-        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,51 +17,31 @@ FluObject{
     FluPaneItem{
         id:item_home
         count: 9
-        title:lang.home
+        title:Lang.home
+        menuDelegate: paneItemMenu
         infoBadge:FluBadge{
             count: item_home.count
         }
         icon:FluentIcons.Home
         url:"qrc:/example/qml/page/T_Home.qml"
-        onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
         onTap:{
             if(navigationView.getCurrentUrl()){
                 item_home.count = 0
             }
             navigationView.push(url)
         }
-        editDelegate: FluTextBox{
+    }
-            text:item_home.title
+
-        }
+    FluPaneItemExpander{
-        menuDelegate: FluMenu{
+        title:"PaneItemExpander Disabled"
-            id:nav_item_right_menu
+        iconVisible: false
-            width: 120
+        disabled: true
-            FluMenuItem{
-                text: "重命名"
-                visible: true
-                onClicked: {
-                    item_home.showEdit = true
-                }
-            }
-        }
     }
 
     FluPaneItemExpander{
         id:item_expander_basic_input
-        title:lang.basic_input
+        title:Lang.basic_input
         icon:FluentIcons.CheckboxComposite
-        editDelegate: FluTextBox{
-            text:item_expander_basic_input.title
-        }
-        menuDelegate: FluMenu{
-            FluMenuItem{
-                text: "重命名"
-                visible: true
-                onClicked: {
-                    item_expander_basic_input.showEdit = true
-                }
-            }
-        }
         FluPaneItem{
             id:item_buttons
             count: 99
@@ -68,11 +49,11 @@ FluObject{
                 count: item_buttons.count
             }
             title:"Buttons"
+            menuDelegate: paneItemMenu
             image:"qrc:/example/res/image/control/Button.png"
             recentlyUpdated:true
             desc:"A control that responds to user input and raisesa Click event."
             url:"qrc:/example/qml/page/T_Buttons.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{
                 item_buttons.count = 0
                 navigationView.push(url)
@@ -81,13 +62,13 @@ FluObject{
         FluPaneItem{
             id:item_text
             title:"Text"
+            menuDelegate: paneItemMenu
             count: 5
             infoBadge:FluBadge{
                 count: item_text.count
                 color: Qt.rgba(82/255,196/255,26/255,1)
             }
             url:"qrc:/example/qml/page/T_Text.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{
                 item_text.count = 0
                 navigationView.push(url)
@@ -95,164 +76,175 @@ FluObject{
         }
         FluPaneItem{
             title:"Image"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Image.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Slider"
+            menuDelegate: paneItemMenu
             image:"qrc:/example/res/image/control/Slider.png"
             recentlyUpdated:true
             desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
             url:"qrc:/example/qml/page/T_Slider.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"CheckBox"
+            menuDelegate: paneItemMenu
             image:"qrc:/example/res/image/control/Checkbox.png"
             recentlyUpdated:true
             desc:"A control that a user can select or clear."
             url:"qrc:/example/qml/page/T_CheckBox.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"RadioButton"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_RadioButton.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"ToggleSwitch"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_ToggleSwitch.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
+        FluPaneItem{
+            title:"PaneItem Disabled"
+            disabled: true
+            icon: FluentIcons.Error
+        }
     }
 
     FluPaneItemExpander{
-        title:lang.form
+        title:Lang.form
         icon:FluentIcons.GridView
         FluPaneItem{
             title:"TextBox"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_TextBox.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TimePicker"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_TimePicker.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"DatePicker"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_DatePicker.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"CalendarPicker"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_CalendarPicker.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"ColorPicker"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_ColorPicker.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
     }
 
     FluPaneItemExpander{
-        title:lang.surface
+        title:Lang.surface
         icon:FluentIcons.SurfaceHub
         FluPaneItem{
             title:"InfoBar"
+            menuDelegate: paneItemMenu
             image:"qrc:/example/res/image/control/InfoBar.png"
             recentlyUpdated:true
             desc:"An inline message to display app-wide statuschange information."
             url:"qrc:/example/qml/page/T_InfoBar.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Progress"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Progress.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"RatingControl"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_RatingControl.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Badge"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Badge.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Rectangle"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Rectangle.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:"Clip"
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_Clip.qml"
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"StatusView"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_StatusView.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Carousel"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Carousel.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Expander"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Expander.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"StaggeredView"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_StaggeredView.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Watermark"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Watermark.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
     }
 
     FluPaneItemExpander{
-        title:lang.popus
+        title:Lang.popus
         icon:FluentIcons.ButtonMenu
         FluPaneItem{
             title:"Dialog"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Dialog.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             id:item_combobox
             title:"ComboBox"
+            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:{
                 item_combobox.count = 0
                 navigationView.push("qrc:/example/qml/page/T_ComboBox.qml")
@@ -260,112 +252,112 @@ FluObject{
         }
         FluPaneItem{
             title:"Tooltip"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Tooltip.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Menu"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Menu.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
     }
 
     FluPaneItemExpander{
-        title:lang.navigation
+        title:Lang.navigation
         icon:FluentIcons.AllApps
         FluPaneItem{
             title:"Pivot"
+            menuDelegate: paneItemMenu
             image:"qrc:/example/res/image/control/Pivot.png"
             recentlyAdded:true
             order:3
             desc:"Presents information from different sources in atabbed view."
             url:"qrc:/example/qml/page/T_Pivot.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"BreadcrumbBar"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_BreadcrumbBar.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TabView"
+            menuDelegate: paneItemMenu
             image:"qrc:/example/res/image/control/TabView.png"
             recentlyAdded:true
             order:1
             desc:"A control that displays a collection of tabs thatcan be used to display several documents."
             url:"qrc:/example/qml/page/T_TabView.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TreeView"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_TreeView.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TableView"
+            menuDelegate: paneItemMenu
             image:"qrc:/example/res/image/control/DataGrid.png"
             recentlyAdded:true
             order:4
             desc:"The TableView control provides a flexible way to display a collection of data in rows and columns"
             url:"qrc:/example/qml/page/T_TableView.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Pagination"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Pagination.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"MultiWindow"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_MultiWindow.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"FlipView"
+            menuDelegate: paneItemMenu
             image:"qrc:/example/res/image/control/FlipView.png"
             recentlyAdded:true
             order:2
             desc:"Presents a collection of items that the user canflip through, one item at a time."
             url:"qrc:/example/qml/page/T_FlipView.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
     }
 
     FluPaneItemExpander{
-        title:lang.theming
+        title:Lang.theming
         icon:FluentIcons.Brightness
         FluPaneItem{
             title:"Acrylic"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Acrylic.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Theme"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Theme.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Typography"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Typography.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Awesome"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Awesome.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
     }
@@ -376,60 +368,60 @@ FluObject{
     }
 
     FluPaneItemExpander{
-        title:lang.other
+        title:Lang.other
         icon:FluentIcons.Shop
         FluPaneItem{
             title:"QRCode"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_QRCode.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Tour"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Tour.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Timeline"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Timeline.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Screenshot(Todo)"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Screenshot.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Captcha"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Captcha.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Chart"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Chart.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Http"
+            menuDelegate: paneItemMenu
             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"
+            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:{
                 item_other.count = 0
                 navigationView.push("qrc:/example/qml/page/T_RemoteLoader.qml")
@@ -440,7 +432,12 @@ FluObject{
             onTapListener:function(){
                 FluApp.navigate("/hotload")
             }
-            onDropped:{ FluApp.navigate("/hotload") }
+        }
+        FluPaneItem{
+            title:"3D"
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_3D.qml"
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -477,6 +474,9 @@ FluObject{
     }
 
     function getSearchData(){
+        if(!navigationView){
+            return
+        }
         var arr = []
         var items = navigationView.getItems();
         for(var i=0;i<items.length;i++){

example/qml-Qt6/global/Lang.qml

@@ -0,0 +1,77 @@
+pragma Singleton
+
+import QtQuick
+
+QtObject {
+
+    property string home
+    property string basic_input
+    property string form
+    property string surface
+    property string popus
+    property string navigation
+    property string theming
+    property string media
+    property string dark_mode
+    property string sys_dark_mode
+    property string search
+    property string about
+    property string settings
+    property string locale
+    property string navigation_view_display_mode
+    property string other
+
+    function zh(){
+        home="首页"
+        basic_input="基本输入"
+        form="表单"
+        surface="表面"
+        popus="弹窗"
+        navigation="导航"
+        theming="主题"
+        media="媒体"
+        dark_mode="夜间模式"
+        sys_dark_mode="跟随系统"
+        search="查找"
+        about="关于"
+        settings="设置"
+        locale="语言环境"
+        navigation_view_display_mode="导航视图显示模式"
+        other="其他"
+    }
+
+    function en(){
+        home="Home"
+        basic_input="Basic Input"
+        form="Form"
+        surface="Surfaces"
+        popus="Popus"
+        navigation="Navigation"
+        theming="Theming"
+        media="Media"
+        dark_mode="Dark Mode"
+        sys_dark_mode="Sync with system"
+        search="Search"
+        about="About"
+        settings="Settings"
+        locale="Locale"
+        navigation_view_display_mode="NavigationView Display Mode"
+        other="Other"
+    }
+
+    property string __locale
+    property var __localeList: ["Zh","En"]
+
+    on__LocaleChanged: {
+        if(__locale === "Zh"){
+            zh()
+        }else{
+            en()
+        }
+    }
+
+    Component.onCompleted: {
+        __locale = "En"
+    }
+
+}

example/qml-Qt6/global/qmldir

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

example/qml-Qt6/page/T_3D.qml

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

example/qml-Qt6/page/T_Acrylic.qml

@@ -47,7 +47,7 @@ FluScrollablePage{
         height: 1200/4+20
         paddings: 10
         Layout.topMargin: 10
-        FluRectangle{
+        FluClip{
             width: 1920/4
             height: 1200/4
             radius:[8,8,8,8]

example/qml-Qt6/page/T_Awesome.qml

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

example/qml-Qt6/page/T_CalendarPicker.qml

@@ -36,7 +36,7 @@ FluScrollablePage{
                 left: parent.left
             }
             FluCalendarPicker{
-                current:Date.fromLocaleString("2013年7月11日 21:17:42")
+                current:new Date()
                 onAccepted:{
                     showSuccess(current.toLocaleString())
                 }

example/qml-Qt6/page/T_Captcha.qml

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

example/qml-Qt6/page/T_Carousel.qml

@@ -44,7 +44,6 @@ FluScrollablePage{
                 }
                 FluCarousel{
                     anchors.fill: parent
-                    radius:[8,8,8,8]
                     delegate: Component{
                         Image {
                             anchors.fill: parent
@@ -82,7 +81,6 @@ FluScrollablePage{
                 }
                 FluCarousel{
                     anchors.fill: parent
-                    radius:[8,8,8,8]
                     loopTime:1500
                     indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
                     indicatorMarginTop:15

example/qml-Qt6/page/T_CheckBox.qml

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

example/qml-Qt6/page/T_Clip.qml

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

example/qml-Qt6/page/T_ComboBox.qml

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

example/qml-Qt6/page/T_Expander.qml

@@ -58,6 +58,7 @@ FluScrollablePage{
                         width: parent.width
                         height: parent.height
                         contentWidth: width
+                        boundsBehavior: Flickable.StopAtBounds
                         contentHeight: text_info.height
                         ScrollBar.vertical: FluScrollBar {}
                         FluText{

example/qml-Qt6/page/T_Home.qml

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

example/qml-Qt6/page/T_Http.qml

@@ -10,7 +10,7 @@ import "qrc:///example/qml/component"
 FluContentPage{
 
     title:"Http"
-    property string cacheDirPath: FluTools.getApplicationDirPath() + "/cache/http"
+    property string cacheDirPath: StandardPaths.writableLocation(StandardPaths.AppLocalDataLocation) + "/cache/http"
     property bool isDownCompleted: false
 
     FluHttp{
@@ -100,6 +100,9 @@ FluContentPage{
                     params.custtel = "1234567890"
                     params.custemail = "zhuzichu520@gmail.com"
                     request.params = params
+                    var headers = {}
+                    headers.test = "123456789456465321354"
+                    request.headers = headers
                     http.post(request,callable)
                 }
             }
@@ -127,6 +130,15 @@ FluContentPage{
                     http.postString(request,callable)
                 }
             }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Delete请求"
+                onClicked: {
+                    var request = http.newRequest("https://httpbingo.org/delete")
+                    http.deleteResource(request,callable)
+                }
+            }
             FluProgressButton{
                 id:btn_download
                 implicitWidth: parent.width
@@ -264,7 +276,7 @@ FluContentPage{
                 implicitHeight: 36
                 text: "打开缓存路径"
                 onClicked: {
-                    Qt.openUrlExternally("file:///"+cacheDirPath)
+                    Qt.openUrlExternally(cacheDirPath)
                 }
             }
             FluButton{

example/qml-Qt6/page/T_InfoBar.qml

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

example/qml-Qt6/page/T_QRCode.qml

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

example/qml-Qt6/page/T_Rectangle.qml

@@ -12,16 +12,15 @@ FluScrollablePage{
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 460
+        height: 80
         paddings: 10
 
         Column{
             spacing: 15
             anchors{
-                verticalCenter: parent.verticalCenter
                 left: parent.left
+                verticalCenter: parent.verticalCenter
             }
-
             RowLayout{
                 Layout.topMargin: 20
                 FluRectangle{
@@ -61,70 +60,6 @@ FluScrollablePage{
                     radius:[0,0,0,15]
                 }
             }
-            FluText{
-                text:"配合图片使用"
-                font: FluTextStyle.Subtitle
-                Layout.topMargin: 20
-            }
-            RowLayout{
-                spacing: 14
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    radius:[25,0,25,25]
-                    Image {
-                        asynchronous: true
-                        anchors.fill: parent
-                        source: "qrc:/example/res/svg/avatar_1.svg"
-                        sourceSize: Qt.size(width,height)
-                    }
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    radius:[10,10,10,10]
-                    Image {
-                        asynchronous: true
-                        anchors.fill: parent
-                        sourceSize: Qt.size(width,height)
-                        source: "qrc:/example/res/svg/avatar_2.svg"
-                    }
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    radius:[25,25,25,25]
-                    Image {
-                        asynchronous: true
-                        anchors.fill: parent
-                        sourceSize: Qt.size(width,height)
-                        source: "qrc:/example/res/svg/avatar_3.svg"
-                    }
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    radius:[0,25,25,25]
-                    Image {
-                        asynchronous: true
-                        anchors.fill: parent
-                        sourceSize: Qt.size(width,height)
-                        source: "qrc:/example/res/svg/avatar_4.svg"
-                    }
-                }
-            }
-            FluRectangle{
-                width: 1920/5
-                height: 1200/5
-                radius:[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{
@@ -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_Screenshot.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
+import Qt.labs.platform
 import "qrc:///example/qml/component"
 
 FluScrollablePage{
@@ -47,7 +48,7 @@ FluScrollablePage{
     FluScreenshot{
         id:screenshot
         captrueMode: FluScreenshotType.File
-        saveFolder: FluTools.getApplicationDirPath()+"/screenshot"
+        saveFolder: StandardPaths.writableLocation(StandardPaths.AppLocalDataLocation)+"/screenshot"
         onCaptrueCompleted:
             (captrue)=>{
                 image.source = captrue

example/qml-Qt6/page/T_Settings.qml

@@ -40,7 +40,7 @@ FluScrollablePage{
             spacing: 20
             anchors.verticalCenter: parent.verticalCenter
             FluText{
-                text:"当前版本 v%1".arg(appInfo.version)
+                text:"当前版本 v%1".arg(AppInfo.version)
                 font: FluTextStyle.Body
                 anchors.verticalCenter: parent.verticalCenter
             }
@@ -56,6 +56,54 @@ FluScrollablePage{
         }
     }
 
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 50
+        paddings: 10
+        FluCheckBox{
+            text:"V-Sync"
+            checked: FluApp.vsync
+            anchors.verticalCenter: parent.verticalCenter
+            onClicked: {
+                FluApp.vsync = !FluApp.vsync
+                dialog_restart.open()
+            }
+        }
+    }
+
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 50
+        paddings: 10
+        FluCheckBox{
+            text:"Software Render"
+            checked: SettingsHelper.getRender() === "software"
+            anchors.verticalCenter: parent.verticalCenter
+            onClicked: {
+                if(SettingsHelper.getRender() === "software"){
+                    SettingsHelper.saveRender("")
+                }else{
+                    SettingsHelper.saveRender("software")
+                }
+                dialog_restart.open()
+            }
+        }
+    }
+
+    FluContentDialog{
+        id:dialog_restart
+        title:"友情提示"
+        message:"此操作需要重启才能生效，是否重新启动？"
+        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
+        negativeText: "取消"
+        positiveText:"确定"
+        onPositiveClicked:{
+            FluApp.exit(931)
+        }
+    }
 
     FluArea{
         Layout.fillWidth: true
@@ -70,7 +118,7 @@ FluScrollablePage{
                 left: parent.left
             }
             FluText{
-                text:lang.dark_mode
+                text:Lang.dark_mode
                 font: FluTextStyle.BodyStrong
                 Layout.bottomMargin: 4
             }
@@ -100,7 +148,7 @@ FluScrollablePage{
                 left: parent.left
             }
             FluText{
-                text:lang.navigation_view_display_mode
+                text:Lang.navigation_view_display_mode
                 font: FluTextStyle.BodyStrong
                 Layout.bottomMargin: 4
             }
@@ -131,7 +179,7 @@ FluScrollablePage{
             }
 
             FluText{
-                text:lang.locale
+                text:Lang.locale
                 font: FluTextStyle.BodyStrong
                 Layout.bottomMargin: 4
             }
@@ -139,12 +187,12 @@ FluScrollablePage{
             Flow{
                 spacing: 5
                 Repeater{
-                    model: ["Zh","En"]
+                    model: Lang.__localeList
                     delegate: FluRadioButton{
-                        checked: appInfo.lang.objectName === modelData
+                        checked: Lang.__locale === modelData
                         text:modelData
                         clickListener:function(){
-                            appInfo.changeLang(modelData)
+                            Lang.__locale = modelData
                         }
                     }
                 }

example/qml-Qt6/page/T_TableView.qml

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

example/qml-Qt6/page/T_Timeline.qml

@@ -84,7 +84,7 @@ FluScrollablePage{
             text:"找到一份Android外包开发岗位，开发了一个Android应用，满满成就感！前端、服务端、Flutter也都懂一丢丢，什么都会什么都不精通，钱途无望"
         }
         ListElement{
-            lable:"2020-06-01"
+            lable:"2021-06-01"
             text:"由于某个项目紧急，临时加入Qt项目组（就因为大学学了点C++），本来是想进去打个酱油，到后面竟然成开发主力，坑啊"
         }
         ListElement{

example/qml-Qt6/page/T_TreeView.qml

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

example/qml-Qt6/viewmodel/SettingsViewModel.qml

@@ -4,6 +4,7 @@ import FluentUI
 FluViewModel{
 
     objectName: "SettingsViewModel"
+    scope: FluViewModelType.Application
     property int displayMode
 
     onInitData: {

example/qml-Qt6/window/AboutWindow.qml

@@ -4,7 +4,7 @@ import QtQuick.Layouts
 import FluentUI
 import "qrc:///example/qml/component"
 
-CustomWindow {
+FluWindow {
 
     id:window
     title:"关于"
@@ -35,7 +35,7 @@ CustomWindow {
                 }
             }
             FluText{
-                text:"v%1".arg(appInfo.version)
+                text:"v%1".arg(AppInfo.version)
                 font: FluTextStyle.Body
                 Layout.alignment: Qt.AlignBottom
             }

example/qml-Qt6/window/HotloadWindow.qml

@@ -5,7 +5,7 @@ import FluentUI
 import example
 import "qrc:///example/qml/component"
 
-CustomWindow {
+FluWindow {
 
     id:window
     title:"热加载"

example/qml-Qt6/window/LoginWindow.qml

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

example/qml-Qt6/window/MainWindow.qml

@@ -9,27 +9,21 @@ import "qrc:///example/qml/component"
 import "qrc:///example/qml/global"
 import "qrc:///example/qml/viewmodel"
 
-CustomWindow {
+FluWindow {
 
     id:window
     title: "FluentUI"
     width: 1000
     height: 640
-    closeDestory:false
     minimumWidth: 520
     minimumHeight: 200
-    appBarVisible: false
     launchMode: FluWindowType.SingleTask
+    appBar: undefined
 
     SettingsViewModel{
         id:viewmodel_settings
     }
 
-    closeFunc:function(event){
-        dialog_close.open()
-        event.accepted = false
-    }
-
     FluEvent{
         id:event_checkupdate
         name: "checkUpdate"
@@ -39,7 +33,6 @@ CustomWindow {
     }
 
     Component.onCompleted: {
-        FluTools.setQuitOnLastWindowClosed(false)
         tour.open()
         checkUpdate(true)
         FluEventBus.registerEvent(event_checkupdate)
@@ -58,8 +51,7 @@ CustomWindow {
             MenuItem {
                 text: "退出"
                 onTriggered: {
-                    window.deleteWindow()
+                    FluApp.exit()
-                    FluApp.closeApp()
                 }
             }
         }
@@ -86,8 +78,22 @@ CustomWindow {
         positiveText:"退出"
         neutralText:"取消"
         onPositiveClicked:{
-            window.deleteWindow()
+            FluApp.exit(0)
-            FluApp.closeApp()
+        }
+    }
+
+    Component{
+        id:nav_item_right_menu
+        FluMenu{
+            id:menu
+            width: 130
+            FluMenuItem{
+                text: "在独立窗口打开"
+                visible: true
+                onClicked: {
+                    FluApp.navigate("/pageWindow",{title:modelData.title,url:modelData.url})
+                }
+            }
         }
     }
 
@@ -120,10 +126,11 @@ CustomWindow {
                     left: parent.left
                     right: parent.right
                 }
-                darkText: lang.dark_mode
+                darkText: Lang.dark_mode
                 showDark: true
                 z:7
                 darkClickListener:(button)=>handleDarkChanged(button)
+                closeClickListener: ()=>{dialog_close.open()}
             }
             Row{
                 z:8
@@ -156,7 +163,7 @@ CustomWindow {
                 id:loader
                 lazy: true
                 anchors.fill: parent
-                source: "https://zhu-zichu.gitee.io/Qt6_156_LieflatPage.qml"
+                source: "https://zhu-zichu.gitee.io/Qt5_156_LieflatPage.qml"
             }
         }
         front: Item{
@@ -170,9 +177,10 @@ CustomWindow {
                     left: parent.left
                     right: parent.right
                 }
-                darkText: lang.dark_mode
+                darkText: Lang.dark_mode
                 showDark: true
                 darkClickListener:(button)=>handleDarkChanged(button)
+                closeClickListener: ()=>{dialog_close.open()}
                 z:7
             }
             FluNavigationView{
@@ -183,7 +191,7 @@ CustomWindow {
                 z:999
                 //Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式
                 //                pageMode: FluNavigationViewType.Stack
-                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存（推荐）
+                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存，可以配合FluViewModel保存页面数据（推荐）
                 pageMode: FluNavigationViewType.NoStack
                 items: ItemsOriginal
                 footerItems:ItemsFooter
@@ -201,11 +209,9 @@ CustomWindow {
                     }
                 }
                 autoSuggestBox:FluAutoSuggestBox{
-                    width: 280
-                    anchors.centerIn: parent
                     iconSource: FluentIcons.Search
                     items: ItemsOriginal.getSearchData()
-                    placeholderText: lang.search
+                    placeholderText: Lang.search
                     onItemClicked:
                         (data)=>{
                             ItemsOriginal.startPageByItem(data)
@@ -213,7 +219,9 @@ CustomWindow {
                 }
                 Component.onCompleted: {
                     ItemsOriginal.navigationView = nav_view
+                    ItemsOriginal.paneItemMenu = nav_item_right_menu
                     ItemsFooter.navigationView = nav_view
+                    ItemsFooter.paneItemMenu = nav_item_right_menu
                     setCurrentIndex(0)
                 }
             }
@@ -246,7 +254,7 @@ CustomWindow {
     }
 
     function handleDarkChanged(button){
-        if(FluTools.isMacos() || !FluTheme.enableAnimation){
+        if(!FluTheme.enableAnimation){
             changeDark()
         }else{
             loader_reveal.sourceComponent = com_reveal
@@ -318,7 +326,7 @@ CustomWindow {
         property string body
         id:dialog_update
         title:"升级提示"
-        message:"FluentUI目前最新版本 "+ newVerson +" -- 当前应用版本 "+appInfo.version+" \n现在是否去下载新版本？\n\n更新内容：\n"+body
+        message:"FluentUI目前最新版本 "+ newVerson +" -- 当前应用版本 "+AppInfo.version+" \n现在是否去下载新版本？\n\n更新内容：\n"+body
         buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
         negativeText: "取消"
         positiveText:"确定"
@@ -340,9 +348,9 @@ CustomWindow {
         onSuccess:
             (result)=>{
                 var data = JSON.parse(result)
-                console.debug("current version "+appInfo.version)
+                console.debug("current version "+AppInfo.version)
                 console.debug("new version "+data.tag_name)
-                if(data.tag_name !== appInfo.version){
+                if(data.tag_name !== AppInfo.version){
                     dialog_update.newVerson =  data.tag_name
                     dialog_update.body = data.body
                     dialog_update.open()

example/qml-Qt6/window/PageWindow.qml

@@ -5,7 +5,7 @@ import FluentUI
 import example
 import "qrc:///example/qml/component"
 
-CustomWindow {
+FluWindow {
 
     id:window
     width: 800

example/qml-Qt6/window/SingleInstanceWindow.qml

@@ -4,7 +4,7 @@ import QtQuick.Layouts
 import FluentUI
 import "qrc:///example/qml/component"
 
-CustomWindow {
+FluWindow {
 
     id:window
     title:"SingleInstance"

example/qml-Qt6/window/SingleTaskWindow.qml

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

example/qml-Qt6/window/StandardWindow.qml

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

example/qml/App.qml

@@ -4,9 +4,22 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import FluentUI 1.0
 
-Window {
+Item {
     id: app
-    flags: Qt.SplashScreen
+
+    Connections{
+        target: FluTheme
+        function onDarkModeChanged(){
+            SettingsHelper.saveDarkMode(FluTheme.darkMode)
+        }
+    }
+
+    Connections{
+        target: FluApp
+        function onVsyncChanged(){
+            SettingsHelper.saveVsync(FluApp.vsync)
+        }
+    }
 
     FluHttpInterceptor{
         id:interceptor
@@ -26,7 +39,8 @@ Window {
 
     Component.onCompleted: {
         FluApp.init(app)
-        FluTheme.darkMode = FluThemeType.System
+        FluApp.vsync = SettingsHelper.getVsync()
+        FluTheme.darkMode = SettingsHelper.getDarkMode()
         FluTheme.enableAnimation = true
         FluApp.routes = {
             "/":"qrc:/example/qml/window/MainWindow.qml",

example/qml/component/CodeExpander.qml

@@ -80,7 +80,6 @@ FluExpander{
                     "FluIcon",
                     "FluIconButton",
                     "FluInfoBar",
-                    "FluItem",
                     "FluMediaPlayer",
                     "FluMenu",
                     "FluMenuItem",
@@ -140,7 +139,8 @@ FluExpander{
                     "FluRangeSlider",
                     "FluStaggeredView",
                     "FluProgressButton",
-                    "FluLoadingButton"
+                    "FluLoadingButton",
+                    "FluClip"
                 ];
         code = code.replace(/\n/g, "<br>");
         code = code.replace(/ /g, "&nbsp;");

example/qml/component/CustomWindow.qml

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

example/qml/global/ItemsFooter.qml

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

example/qml/global/ItemsOriginal.qml

@@ -6,6 +6,7 @@ import FluentUI 1.0
 FluObject{
 
     property var navigationView
+    property var paneItemMenu
 
     function rename(item, newName){
         if(newName && newName.trim().length>0){
@@ -16,51 +17,31 @@ FluObject{
     FluPaneItem{
         id:item_home
         count: 9
-        title:lang.home
+        title:Lang.home
+        menuDelegate: paneItemMenu
         infoBadge:FluBadge{
             count: item_home.count
         }
         icon:FluentIcons.Home
         url:"qrc:/example/qml/page/T_Home.qml"
-        onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
         onTap:{
             if(navigationView.getCurrentUrl()){
                 item_home.count = 0
             }
             navigationView.push(url)
         }
-        editDelegate: FluTextBox{
+    }
-            text:item_home.title
+
-        }
+    FluPaneItemExpander{
-        menuDelegate: FluMenu{
+        title:"PaneItemExpander Disabled"
-            id:nav_item_right_menu
+        iconVisible: false
-            width: 120
+        disabled: true
-            FluMenuItem{
-                text: "重命名"
-                visible: true
-                onClicked: {
-                    item_home.showEdit = true
-                }
-            }
-        }
     }
 
     FluPaneItemExpander{
         id:item_expander_basic_input
-        title:lang.basic_input
+        title:Lang.basic_input
         icon:FluentIcons.CheckboxComposite
-        editDelegate: FluTextBox{
-            text:item_expander_basic_input.title
-        }
-        menuDelegate: FluMenu{
-            FluMenuItem{
-                text: "重命名"
-                visible: true
-                onClicked: {
-                    item_expander_basic_input.showEdit = true
-                }
-            }
-        }
         FluPaneItem{
             id:item_buttons
             count: 99
@@ -68,11 +49,11 @@ FluObject{
                 count: item_buttons.count
             }
             title:"Buttons"
+            menuDelegate: paneItemMenu
             image:"qrc:/example/res/image/control/Button.png"
             recentlyUpdated:true
             desc:"A control that responds to user input and raisesa Click event."
             url:"qrc:/example/qml/page/T_Buttons.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{
                 item_buttons.count = 0
                 navigationView.push(url)
@@ -81,13 +62,13 @@ FluObject{
         FluPaneItem{
             id:item_text
             title:"Text"
+            menuDelegate: paneItemMenu
             count: 5
             infoBadge:FluBadge{
                 count: item_text.count
                 color: Qt.rgba(82/255,196/255,26/255,1)
             }
             url:"qrc:/example/qml/page/T_Text.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{
                 item_text.count = 0
                 navigationView.push(url)
@@ -95,164 +76,175 @@ FluObject{
         }
         FluPaneItem{
             title:"Image"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Image.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Slider"
+            menuDelegate: paneItemMenu
             image:"qrc:/example/res/image/control/Slider.png"
             recentlyUpdated:true
             desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
             url:"qrc:/example/qml/page/T_Slider.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"CheckBox"
+            menuDelegate: paneItemMenu
             image:"qrc:/example/res/image/control/Checkbox.png"
             recentlyUpdated:true
             desc:"A control that a user can select or clear."
             url:"qrc:/example/qml/page/T_CheckBox.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"RadioButton"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_RadioButton.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"ToggleSwitch"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_ToggleSwitch.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
+        FluPaneItem{
+            title:"PaneItem Disabled"
+            disabled: true
+            icon: FluentIcons.Error
+        }
     }
 
     FluPaneItemExpander{
-        title:lang.form
+        title:Lang.form
         icon:FluentIcons.GridView
         FluPaneItem{
             title:"TextBox"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_TextBox.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TimePicker"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_TimePicker.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"DatePicker"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_DatePicker.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"CalendarPicker"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_CalendarPicker.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"ColorPicker"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_ColorPicker.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
     }
 
     FluPaneItemExpander{
-        title:lang.surface
+        title:Lang.surface
         icon:FluentIcons.SurfaceHub
         FluPaneItem{
             title:"InfoBar"
+            menuDelegate: paneItemMenu
             image:"qrc:/example/res/image/control/InfoBar.png"
             recentlyUpdated:true
             desc:"An inline message to display app-wide statuschange information."
             url:"qrc:/example/qml/page/T_InfoBar.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Progress"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Progress.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"RatingControl"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_RatingControl.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Badge"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Badge.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Rectangle"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Rectangle.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
+        }
+        FluPaneItem{
+            title:"Clip"
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_Clip.qml"
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"StatusView"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_StatusView.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Carousel"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Carousel.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Expander"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Expander.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"StaggeredView"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_StaggeredView.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Watermark"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Watermark.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
     }
 
     FluPaneItemExpander{
-        title:lang.popus
+        title:Lang.popus
         icon:FluentIcons.ButtonMenu
         FluPaneItem{
             title:"Dialog"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Dialog.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             id:item_combobox
             title:"ComboBox"
+            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:{
                 item_combobox.count = 0
                 navigationView.push("qrc:/example/qml/page/T_ComboBox.qml")
@@ -260,112 +252,112 @@ FluObject{
         }
         FluPaneItem{
             title:"Tooltip"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Tooltip.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Menu"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Menu.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
     }
 
     FluPaneItemExpander{
-        title:lang.navigation
+        title:Lang.navigation
         icon:FluentIcons.AllApps
         FluPaneItem{
             title:"Pivot"
+            menuDelegate: paneItemMenu
             image:"qrc:/example/res/image/control/Pivot.png"
             recentlyAdded:true
             order:3
             desc:"Presents information from different sources in atabbed view."
             url:"qrc:/example/qml/page/T_Pivot.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"BreadcrumbBar"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_BreadcrumbBar.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TabView"
+            menuDelegate: paneItemMenu
             image:"qrc:/example/res/image/control/TabView.png"
             recentlyAdded:true
             order:1
             desc:"A control that displays a collection of tabs thatcan be used to display several documents."
             url:"qrc:/example/qml/page/T_TabView.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TreeView"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_TreeView.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"TableView"
+            menuDelegate: paneItemMenu
             image:"qrc:/example/res/image/control/DataGrid.png"
             recentlyAdded:true
             order:4
             desc:"The TableView control provides a flexible way to display a collection of data in rows and columns"
             url:"qrc:/example/qml/page/T_TableView.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Pagination"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Pagination.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"MultiWindow"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_MultiWindow.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"FlipView"
+            menuDelegate: paneItemMenu
             image:"qrc:/example/res/image/control/FlipView.png"
             recentlyAdded:true
             order:2
             desc:"Presents a collection of items that the user canflip through, one item at a time."
             url:"qrc:/example/qml/page/T_FlipView.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
     }
 
     FluPaneItemExpander{
-        title:lang.theming
+        title:Lang.theming
         icon:FluentIcons.Brightness
         FluPaneItem{
             title:"Acrylic"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Acrylic.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Theme"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Theme.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Typography"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Typography.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Awesome"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Awesome.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
     }
@@ -376,60 +368,60 @@ FluObject{
     }
 
     FluPaneItemExpander{
-        title:lang.other
+        title:Lang.other
         icon:FluentIcons.Shop
         FluPaneItem{
             title:"QRCode"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_QRCode.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Tour"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Tour.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Timeline"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Timeline.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Screenshot(Todo)"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Screenshot.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Captcha"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Captcha.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Chart"
+            menuDelegate: paneItemMenu
             url:"qrc:/example/qml/page/T_Chart.qml"
-            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
         FluPaneItem{
             title:"Http"
+            menuDelegate: paneItemMenu
             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"
+            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:{
                 item_other.count = 0
                 navigationView.push("qrc:/example/qml/page/T_RemoteLoader.qml")
@@ -440,7 +432,12 @@ FluObject{
             onTapListener:function(){
                 FluApp.navigate("/hotload")
             }
-            onDropped:{ FluApp.navigate("/hotload") }
+        }
+        FluPaneItem{
+            title:"3D"
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_3D.qml"
+            onTap:{ navigationView.push(url) }
         }
     }
 
@@ -477,6 +474,9 @@ FluObject{
     }
 
     function getSearchData(){
+        if(!navigationView){
+            return
+        }
         var arr = []
         var items = navigationView.getItems();
         for(var i=0;i<items.length;i++){

example/qml/global/Lang.qml

@@ -0,0 +1,77 @@
+pragma Singleton
+
+import QtQuick 2.15
+
+QtObject {
+
+    property string home
+    property string basic_input
+    property string form
+    property string surface
+    property string popus
+    property string navigation
+    property string theming
+    property string media
+    property string dark_mode
+    property string sys_dark_mode
+    property string search
+    property string about
+    property string settings
+    property string locale
+    property string navigation_view_display_mode
+    property string other
+
+    function zh(){
+        home="首页"
+        basic_input="基本输入"
+        form="表单"
+        surface="表面"
+        popus="弹窗"
+        navigation="导航"
+        theming="主题"
+        media="媒体"
+        dark_mode="夜间模式"
+        sys_dark_mode="跟随系统"
+        search="查找"
+        about="关于"
+        settings="设置"
+        locale="语言环境"
+        navigation_view_display_mode="导航视图显示模式"
+        other="其他"
+    }
+
+    function en(){
+        home="Home"
+        basic_input="Basic Input"
+        form="Form"
+        surface="Surfaces"
+        popus="Popus"
+        navigation="Navigation"
+        theming="Theming"
+        media="Media"
+        dark_mode="Dark Mode"
+        sys_dark_mode="Sync with system"
+        search="Search"
+        about="About"
+        settings="Settings"
+        locale="Locale"
+        navigation_view_display_mode="NavigationView Display Mode"
+        other="Other"
+    }
+
+    property string __locale
+    property var __localeList: ["Zh","En"]
+
+    on__LocaleChanged: {
+        if(__locale === "Zh"){
+            zh()
+        }else{
+            en()
+        }
+    }
+
+    Component.onCompleted: {
+        __locale = "En"
+    }
+
+}

example/qml/global/qmldir

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

example/qml/page/T_3D.qml

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

example/qml/page/T_Acrylic.qml

@@ -48,7 +48,7 @@ FluScrollablePage{
         height: 1200/4+20
         paddings: 10
         Layout.topMargin: 10
-        FluRectangle{
+        FluClip{
             width: 1920/4
             height: 1200/4
             radius:[8,8,8,8]

example/qml/page/T_Awesome.qml

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

example/qml/page/T_CalendarPicker.qml

@@ -37,7 +37,7 @@ FluScrollablePage{
                 left: parent.left
             }
             FluCalendarPicker{
-                current:Date.fromLocaleString("2013年7月11日 21:17:42")
+                current:new Date()
                 onAccepted:{
                     showSuccess(current.toLocaleString())
                 }

example/qml/page/T_Captcha.qml

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

example/qml/page/T_Carousel.qml

@@ -45,7 +45,6 @@ FluScrollablePage{
                 }
                 FluCarousel{
                     anchors.fill: parent
-                    radius:[8,8,8,8]
                     delegate: Component{
                         Image {
                             anchors.fill: parent
@@ -83,7 +82,6 @@ FluScrollablePage{
                 }
                 FluCarousel{
                     anchors.fill: parent
-                    radius:[8,8,8,8]
                     loopTime:1500
                     indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
                     indicatorMarginTop:15

example/qml/page/T_CheckBox.qml

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

example/qml/page/T_Clip.qml

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

example/qml/page/T_ComboBox.qml

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

example/qml/page/T_Expander.qml

@@ -59,6 +59,7 @@ FluScrollablePage{
                         width: parent.width
                         height: parent.height
                         contentWidth: width
+                        boundsBehavior: Flickable.StopAtBounds
                         contentHeight: text_info.height
                         ScrollBar.vertical: FluScrollBar {}
                         FluText{

example/qml/page/T_Home.qml

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

example/qml/page/T_Http.qml

@@ -11,7 +11,7 @@ import "../component"
 FluContentPage{
 
     title:"Http"
-    property string cacheDirPath: FluTools.getApplicationDirPath() + "/cache/http"
+    property string cacheDirPath: StandardPaths.writableLocation(StandardPaths.AppLocalDataLocation) + "/cache/http"
     property bool isDownCompleted: false
 
     FluHttp{
@@ -101,6 +101,9 @@ FluContentPage{
                     params.custtel = "1234567890"
                     params.custemail = "zhuzichu520@gmail.com"
                     request.params = params
+                    var headers = {}
+                    headers.test = "123456789456465321354"
+                    request.headers = headers
                     http.post(request,callable)
                 }
             }
@@ -128,6 +131,15 @@ FluContentPage{
                     http.postString(request,callable)
                 }
             }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Delete请求"
+                onClicked: {
+                    var request = http.newRequest("https://httpbingo.org/delete")
+                    http.deleteResource(request,callable)
+                }
+            }
             FluProgressButton{
                 id:btn_download
                 implicitWidth: parent.width
@@ -265,7 +277,7 @@ FluContentPage{
                 implicitHeight: 36
                 text: "打开缓存路径"
                 onClicked: {
-                    Qt.openUrlExternally("file:///"+cacheDirPath)
+                    Qt.openUrlExternally(cacheDirPath)
                 }
             }
             FluButton{

example/qml/page/T_InfoBar.qml

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

example/qml/page/T_QRCode.qml

@@ -3,7 +3,6 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
-import QtGraphicalEffects 1.15
 import "qrc:///example/qml/component"
 import "../component"
 

example/qml/page/T_Rectangle.qml

@@ -13,16 +13,15 @@ FluScrollablePage{
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 460
+        height: 80
         paddings: 10
 
         Column{
             spacing: 15
             anchors{
-                verticalCenter: parent.verticalCenter
                 left: parent.left
+                verticalCenter: parent.verticalCenter
             }
-
             RowLayout{
                 Layout.topMargin: 20
                 FluRectangle{
@@ -62,70 +61,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:[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{
@@ -135,14 +70,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/page/T_Screenshot.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
+import Qt.labs.platform 1.0
 import "qrc:///example/qml/component"
 import "../component"
 
@@ -48,7 +49,7 @@ FluScrollablePage{
     FluScreenshot{
         id:screenshot
         captrueMode: FluScreenshotType.File
-        saveFolder: FluTools.getApplicationDirPath()+"/screenshot"
+        saveFolder: StandardPaths.writableLocation(StandardPaths.AppLocalDataLocation)+"/screenshot"
         onCaptrueCompleted:
             (captrue)=>{
                 image.source = captrue

example/qml/page/T_Settings.qml

@@ -43,7 +43,7 @@ FluScrollablePage{
             spacing: 20
             anchors.verticalCenter: parent.verticalCenter
             FluText{
-                text:"当前版本 v%1".arg(appInfo.version)
+                text:"当前版本 v%1".arg(AppInfo.version)
                 font: FluTextStyle.Body
                 anchors.verticalCenter: parent.verticalCenter
             }
@@ -59,6 +59,54 @@ FluScrollablePage{
         }
     }
 
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 50
+        paddings: 10
+        FluCheckBox{
+            text:"V-Sync"
+            checked: FluApp.vsync
+            anchors.verticalCenter: parent.verticalCenter
+            onClicked: {
+                FluApp.vsync = !FluApp.vsync
+                dialog_restart.open()
+            }
+        }
+    }
+
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 50
+        paddings: 10
+        FluCheckBox{
+            text:"Software Render"
+            checked: SettingsHelper.getRender() === "software"
+            anchors.verticalCenter: parent.verticalCenter
+            onClicked: {
+                if(SettingsHelper.getRender() === "software"){
+                    SettingsHelper.saveRender("")
+                }else{
+                    SettingsHelper.saveRender("software")
+                }
+                dialog_restart.open()
+            }
+        }
+    }
+
+    FluContentDialog{
+        id:dialog_restart
+        title:"友情提示"
+        message:"此操作需要重启才能生效，是否重新启动？"
+        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
+        negativeText: "取消"
+        positiveText:"确定"
+        onPositiveClicked:{
+            FluApp.exit(931)
+        }
+    }
 
     FluArea{
         Layout.fillWidth: true
@@ -73,7 +121,7 @@ FluScrollablePage{
                 left: parent.left
             }
             FluText{
-                text:lang.dark_mode
+                text:Lang.dark_mode
                 font: FluTextStyle.BodyStrong
                 Layout.bottomMargin: 4
             }
@@ -103,7 +151,7 @@ FluScrollablePage{
                 left: parent.left
             }
             FluText{
-                text:lang.navigation_view_display_mode
+                text:Lang.navigation_view_display_mode
                 font: FluTextStyle.BodyStrong
                 Layout.bottomMargin: 4
             }
@@ -134,7 +182,7 @@ FluScrollablePage{
             }
 
             FluText{
-                text:lang.locale
+                text:Lang.locale
                 font: FluTextStyle.BodyStrong
                 Layout.bottomMargin: 4
             }
@@ -142,12 +190,12 @@ FluScrollablePage{
             Flow{
                 spacing: 5
                 Repeater{
-                    model: ["Zh","En"]
+                    model: Lang.__localeList
                     delegate: FluRadioButton{
-                        checked: appInfo.lang.objectName === modelData
+                        checked: Lang.__locale === modelData
                         text:modelData
                         clickListener:function(){
-                            appInfo.changeLang(modelData)
+                            Lang.__locale = modelData
                         }
                     }
                 }

example/qml/page/T_TableView.qml

@@ -8,12 +8,45 @@ import "../component"
 
 FluContentPage{
 
+    id:root
     title:"TableView"
+    signal checkBoxChanged
+
+    property var dataSource : []
+    property int sortType: 0
 
     Component.onCompleted: {
         loadData(1,1000)
     }
 
+    onSortTypeChanged: {
+        table_view.closeEditor()
+        if(sortType === 0){
+            table_view.sort()
+        }else if(sortType === 1){
+            table_view.sort((a, b) => a.age - b.age);
+        }else if(sortType === 2){
+            table_view.sort((a, b) => b.age - a.age);
+        }
+    }
+
+    Component{
+        id:com_checbox
+        Item{
+            FluCheckBox{
+                anchors.centerIn: parent
+                checked: true === options.checked
+                enableAnimation: false
+                clickListener: function(){
+                    var obj = tableModel.getRow(row)
+                    obj.checkbox = table_view.customItem(com_checbox,{checked:!options.checked})
+                    tableModel.setRow(row,obj)
+                    checkBoxChanged()
+                }
+            }
+        }
+    }
+
     Component{
         id:com_action
         Item{
@@ -24,11 +57,15 @@ FluContentPage{
                     onClicked: {
                         table_view.closeEditor()
                         tableModel.removeRow(row)
+                        checkBoxChanged()
                     }
                 }
                 FluFilledButton{
                     text:"编辑"
                     onClicked: {
+                        var obj = tableModel.getRow(row)
+                        obj.name = "12345"
+                        tableModel.setRow(row,obj)
                         showSuccess(JSON.stringify(tableModel.getRow(row)))
                     }
                 }
@@ -36,39 +73,44 @@ FluContentPage{
         }
     }
 
-    function loadData(page,count){
+
-        var numbers = [100, 300, 500, 1000];
+    Component{
-        function getRandomAge() {
+        id:com_column_checbox
-            var randomIndex = Math.floor(Math.random() * numbers.length);
+        Item{
-            return numbers[randomIndex];
+            RowLayout{
+                anchors.centerIn: parent
+                FluText{
+                    text:"全选"
+                    Layout.alignment: Qt.AlignVCenter
+                }
+                FluCheckBox{
+                    checked: true === options.checked
+                    enableAnimation: false
+                    Layout.alignment: Qt.AlignVCenter
+                    clickListener: function(){
+                        var checked = !options.checked
+                        itemModel.display = table_view.customItem(com_column_checbox,{"checked":checked})
+                        for(var i =0;i< tableModel.rowCount ;i++){
+                            var rowData = tableModel.getRow(i)
+                            rowData.checkbox = table_view.customItem(com_checbox,{"checked":checked})
+                            tableModel.setRow(i,rowData)
+                        }
+                    }
+                }
+                Connections{
+                    target: root
+                    function onCheckBoxChanged(){
+                        for(var i =0;i< tableModel.rowCount ;i++){
+                            if(false === tableModel.getRow(i).checkbox.options.checked){
+                                itemModel.display = table_view.customItem(com_column_checbox,{"checked":false})
+                                return
+                            }
+                        }
+                        itemModel.display = table_view.customItem(com_column_checbox,{"checked":true})
+                    }
+                }
+            }
         }
-        var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"];
-        function getRandomName(){
-            var randomIndex = Math.floor(Math.random() * names.length);
-            return names[randomIndex];
-        }
-        var nicknames = ["复海大圣","混天大圣","移山大圣","通风大圣","驱神大圣","齐天大圣","平天大圣"]
-        function getRandomNickname(){
-            var randomIndex = Math.floor(Math.random() * nicknames.length);
-            return nicknames[randomIndex];
-        }
-        var addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
-        function getRandomAddresses(){
-            var randomIndex = Math.floor(Math.random() * addresses.length);
-            return addresses[randomIndex];
-        }
-        const dataSource = []
-        for(var i=0;i<count;i++){
-            dataSource.push({
-                                name: getRandomName(),
-                                age:getRandomAge(),
-                                address: getRandomAddresses(),
-                                nickname: getRandomNickname(),
-                                longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
-                                action:com_action
-                            })
-        }
-        table_view.dataSource = dataSource
     }
 
     Component{
@@ -95,6 +137,88 @@ FluContentPage{
         }
     }
 
+    Component{
+        id:com_avatar
+        Item{
+            FluClip{
+                anchors.centerIn: parent
+                width: 40
+                height: 40
+                radius: [20,20,20,20]
+                Image{
+                    anchors.fill: parent
+                    source: {
+                        if(options && options.avatar){
+                            return options.avatar
+                        }
+                        return ""
+                    }
+                    sourceSize: Qt.size(80,80)
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_column_sort_age
+        Item{
+            FluText{
+                text:"年龄"
+                anchors.centerIn: parent
+            }
+            ColumnLayout{
+                spacing: 0
+                anchors{
+                    right: parent.right
+                    verticalCenter: parent.verticalCenter
+                    rightMargin: 4
+                }
+                FluIconButton{
+                    Layout.preferredWidth: 20
+                    Layout.preferredHeight: 15
+                    iconSize: 12
+                    verticalPadding:0
+                    horizontalPadding:0
+                    iconSource: FluentIcons.ChevronUp
+                    iconColor: {
+                        if(1 === root.sortType){
+                            return FluTheme.primaryColor.dark
+                        }
+                        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.dark
+                        }
+                        return FluTheme.dark ?  Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
+                    }
+                    onClicked: {
+                        if(root.sortType === 2){
+                            root.sortType = 0
+                            return
+                        }
+                        root.sortType = 2
+                    }
+                }
+            }
+        }
+    }
+
     FluTableView{
         id:table_view
         anchors{
@@ -105,13 +229,27 @@ FluContentPage{
         }
         anchors.topMargin: 20
         columnSource:[
+            {
+                title: table_view.customItem(com_column_checbox,{checked:true}),
+                dataIndex: 'checkbox',
+                width:80,
+                minimumWidth:80,
+                maximumWidth:80,
+            },
+            {
+                title: '头像',
+                dataIndex: 'avatar',
+                width:100,
+                minimumWidth:100,
+                maximumWidth:100
+            },
             {
                 title: '姓名',
                 dataIndex: 'name',
                 readOnly:true,
             },
             {
-                title: '年龄',
+                title: table_view.customItem(com_column_sort_age,{sort:0}),
                 dataIndex: 'age',
                 editDelegate:com_combobox,
                 width:100,
@@ -167,6 +305,50 @@ FluContentPage{
             }
     }
 
+    function loadData(page,count){
+        var numbers = [100, 300, 500, 1000];
+        function getRandomAge() {
+            var randomIndex = Math.floor(Math.random() * numbers.length);
+            return numbers[randomIndex];
+        }
+        var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"];
+        function getRandomName(){
+            var randomIndex = Math.floor(Math.random() * names.length);
+            return names[randomIndex];
+        }
+        var nicknames = ["复海大圣","混天大圣","移山大圣","通风大圣","驱神大圣","齐天大圣","平天大圣"]
+        function getRandomNickname(){
+            var randomIndex = Math.floor(Math.random() * nicknames.length);
+            return nicknames[randomIndex];
+        }
+        var addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
+        function getRandomAddresses(){
+            var randomIndex = Math.floor(Math.random() * addresses.length);
+            return addresses[randomIndex];
+        }
 
+        var avatars = ["qrc:/example/res/svg/avatar_1.svg", "qrc:/example/res/svg/avatar_2.svg", "qrc:/example/res/svg/avatar_3.svg", "qrc:/example/res/svg/avatar_4.svg","qrc:/example/res/svg/avatar_5.svg","qrc:/example/res/svg/avatar_6.svg","qrc:/example/res/svg/avatar_7.svg","qrc:/example/res/svg/avatar_8.svg","qrc:/example/res/svg/avatar_9.svg","qrc:/example/res/svg/avatar_10.svg","qrc:/example/res/svg/avatar_11.svg","qrc:/example/res/svg/avatar_12.svg"];
+        function getAvatar(){
+            var randomIndex = Math.floor(Math.random() * avatars.length);
+            return avatars[randomIndex];
+        }
+
+        const dataSource = []
+        for(var i=0;i<count;i++){
+            dataSource.push({
+                                checkbox: table_view.customItem(com_checbox,{checked:true}),
+                                avatar:table_view.customItem(com_avatar,{avatar:getAvatar()}),
+                                name: getRandomName(),
+                                age:getRandomAge(),
+                                address: getRandomAddresses(),
+                                nickname: getRandomNickname(),
+                                longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
+                                action: table_view.customItem(com_action),
+                                minimumHeight:50
+                            })
+        }
+        root.dataSource = dataSource
+        table_view.dataSource = root.dataSource
+    }
 
 }

example/qml/page/T_Timeline.qml

@@ -85,7 +85,7 @@ FluScrollablePage{
             text:"找到一份Android外包开发岗位，开发了一个Android应用，满满成就感！前端、服务端、Flutter也都懂一丢丢，什么都会什么都不精通，钱途无望"
         }
         ListElement{
-            lable:"2020-06-01"
+            lable:"2021-06-01"
             text:"由于某个项目紧急，临时加入Qt项目组（就因为大学学了点C++），本来是想进去打个酱油，到后面竟然成开发主力，坑啊"
         }
         ListElement{

example/qml/page/T_TreeView.qml

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

example/qml/viewmodel/SettingsViewModel.qml

@@ -4,6 +4,7 @@ import FluentUI 1.0
 FluViewModel{
 
     objectName: "SettingsViewModel"
+    scope: FluViewModelType.Application
     property int displayMode
 
     onInitData: {

example/qml/window/AboutWindow.qml

@@ -5,7 +5,7 @@ import FluentUI 1.0
 import "qrc:///example/qml/component"
 import "../component"
 
-CustomWindow {
+FluWindow {
 
     id:window
     title:"关于"
@@ -36,7 +36,7 @@ CustomWindow {
                 }
             }
             FluText{
-                text:"v%1".arg(appInfo.version)
+                text:"v%1".arg(AppInfo.version)
                 font: FluTextStyle.Body
                 Layout.alignment: Qt.AlignBottom
             }

example/qml/window/HotloadWindow.qml

@@ -6,7 +6,7 @@ import example 1.0
 import "qrc:///example/qml/component"
 import "../component"
 
-CustomWindow {
+FluWindow {
 
     id:window
     title:"热加载"

example/qml/window/LoginWindow.qml

@@ -5,7 +5,7 @@ import FluentUI 1.0
 import "qrc:///example/qml/component"
 import "../component"
 
-CustomWindow {
+FluWindow {
 
     id:window
     title:"登录"

example/qml/window/MainWindow.qml

@@ -12,27 +12,21 @@ import "../component"
 import "../viewmodel"
 import "../global"
 
-CustomWindow {
+FluWindow {
 
     id:window
     title: "FluentUI"
     width: 1000
     height: 640
-    closeDestory:false
     minimumWidth: 520
     minimumHeight: 200
-    appBarVisible: false
     launchMode: FluWindowType.SingleTask
+    appBar: undefined
 
     SettingsViewModel{
         id:viewmodel_settings
     }
 
-    closeFunc:function(event){
-        dialog_close.open()
-        event.accepted = false
-    }
-
     FluEvent{
         id:event_checkupdate
         name: "checkUpdate"
@@ -42,7 +36,6 @@ CustomWindow {
     }
 
     Component.onCompleted: {
-        FluTools.setQuitOnLastWindowClosed(false)
         tour.open()
         checkUpdate(true)
         FluEventBus.registerEvent(event_checkupdate)
@@ -61,8 +54,7 @@ CustomWindow {
             MenuItem {
                 text: "退出"
                 onTriggered: {
-                    window.deleteWindow()
+                    FluApp.exit()
-                    FluApp.closeApp()
                 }
             }
         }
@@ -89,8 +81,22 @@ CustomWindow {
         positiveText:"退出"
         neutralText:"取消"
         onPositiveClicked:{
-            window.deleteWindow()
+            FluApp.exit(0)
-            FluApp.closeApp()
+        }
+    }
+
+    Component{
+        id:nav_item_right_menu
+        FluMenu{
+            id:menu
+            width: 130
+            FluMenuItem{
+                text: "在独立窗口打开"
+                visible: true
+                onClicked: {
+                    FluApp.navigate("/pageWindow",{title:modelData.title,url:modelData.url})
+                }
+            }
         }
     }
 
@@ -123,10 +129,11 @@ CustomWindow {
                     left: parent.left
                     right: parent.right
                 }
-                darkText: lang.dark_mode
+                darkText: Lang.dark_mode
                 showDark: true
                 z:7
                 darkClickListener:(button)=>handleDarkChanged(button)
+                closeClickListener: ()=>{dialog_close.open()}
             }
             Row{
                 z:8
@@ -173,9 +180,10 @@ CustomWindow {
                     left: parent.left
                     right: parent.right
                 }
-                darkText: lang.dark_mode
+                darkText: Lang.dark_mode
                 showDark: true
                 darkClickListener:(button)=>handleDarkChanged(button)
+                closeClickListener: ()=>{dialog_close.open()}
                 z:7
             }
             FluNavigationView{
@@ -186,7 +194,7 @@ CustomWindow {
                 z:999
                 //Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式
                 //                pageMode: FluNavigationViewType.Stack
-                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存（推荐）
+                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存，可以配合FluViewModel保存页面数据（推荐）
                 pageMode: FluNavigationViewType.NoStack
                 items: ItemsOriginal
                 footerItems:ItemsFooter
@@ -204,11 +212,9 @@ CustomWindow {
                     }
                 }
                 autoSuggestBox:FluAutoSuggestBox{
-                    width: 280
-                    anchors.centerIn: parent
                     iconSource: FluentIcons.Search
                     items: ItemsOriginal.getSearchData()
-                    placeholderText: lang.search
+                    placeholderText: Lang.search
                     onItemClicked:
                         (data)=>{
                             ItemsOriginal.startPageByItem(data)
@@ -216,7 +222,9 @@ CustomWindow {
                 }
                 Component.onCompleted: {
                     ItemsOriginal.navigationView = nav_view
+                    ItemsOriginal.paneItemMenu = nav_item_right_menu
                     ItemsFooter.navigationView = nav_view
+                    ItemsFooter.paneItemMenu = nav_item_right_menu
                     setCurrentIndex(0)
                 }
             }
@@ -249,7 +257,7 @@ CustomWindow {
     }
 
     function handleDarkChanged(button){
-        if(FluTools.isMacos() || !FluTheme.enableAnimation){
+        if(!FluTheme.enableAnimation){
             changeDark()
         }else{
             loader_reveal.sourceComponent = com_reveal
@@ -321,7 +329,7 @@ CustomWindow {
         property string body
         id:dialog_update
         title:"升级提示"
-        message:"FluentUI目前最新版本 "+ newVerson +" -- 当前应用版本 "+appInfo.version+" \n现在是否去下载新版本？\n\n更新内容：\n"+body
+        message:"FluentUI目前最新版本 "+ newVerson +" -- 当前应用版本 "+AppInfo.version+" \n现在是否去下载新版本？\n\n更新内容：\n"+body
         buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
         negativeText: "取消"
         positiveText:"确定"
@@ -343,9 +351,9 @@ CustomWindow {
         onSuccess:
             (result)=>{
                 var data = JSON.parse(result)
-                console.debug("current version "+appInfo.version)
+                console.debug("current version "+AppInfo.version)
                 console.debug("new version "+data.tag_name)
-                if(data.tag_name !== appInfo.version){
+                if(data.tag_name !== AppInfo.version){
                     dialog_update.newVerson =  data.tag_name
                     dialog_update.body = data.body
                     dialog_update.open()

example/qml/window/PageWindow.qml

@@ -6,7 +6,7 @@ import example 1.0
 import "qrc:///example/qml/component"
 import "../component"
 
-CustomWindow {
+FluWindow {
 
     id:window
     width: 800

example/qml/window/SingleInstanceWindow.qml

@@ -5,7 +5,7 @@ import FluentUI 1.0
 import "qrc:///example/qml/component"
 import "../component"
 
-CustomWindow {
+FluWindow {
 
     id:window
     title:"SingleInstance"

example/qml/window/SingleTaskWindow.qml

@@ -5,7 +5,7 @@ import FluentUI 1.0
 import "qrc:///example/qml/component"
 import "../component"
 
-CustomWindow {
+FluWindow {
 
     id:window
     title:"SingleTask"

example/qml/window/StandardWindow.qml

@@ -5,7 +5,7 @@ import FluentUI 1.0
 import "qrc:///example/qml/component"
 import "../component"
 
-CustomWindow {
+FluWindow {
 
     id:window
     title:"Standard"

example/src/AppInfo.cpp

@@ -2,36 +2,15 @@
 
 #include <QQmlContext>
 #include <QDebug>
-#include "lang/En.h"
+#include <QGuiApplication>
-#include "lang/Zh.h"
 #include "Version.h"
 
 AppInfo::AppInfo(QObject *parent)
     : QObject{parent}
 {
     version(APPLICATION_VERSION);
-    lang(new En());
 }
 
 void AppInfo::init(QQmlApplicationEngine *engine){
-    QQmlContext * context = engine->rootContext();
+    engine->rootContext();
-    Lang* lang = this->lang();
-    context->setContextProperty("lang",lang);
-    QObject::connect(this,&AppInfo::langChanged,this,[=]{
-        context->setContextProperty("lang",this->lang());
-    });
-    context->setContextProperty("appInfo",this);
-}
-
-void AppInfo::changeLang(const QString& locale){
-    if(_lang){
-        _lang->deleteLater();
-    }
-    if(locale=="Zh"){
-        lang(new Zh());
-    }else if(locale=="En"){
-        lang(new En());
-    }else {
-        lang(new En());
-    }
 }

example/src/AppInfo.h

@@ -3,18 +3,18 @@
 
 #include <QObject>
 #include <QQmlApplicationEngine>
-#include "lang/Lang.h"
 #include "stdafx.h"
+#include "singleton.h"
 
 class AppInfo : public QObject
 {
     Q_OBJECT
     Q_PROPERTY_AUTO(QString,version)
-    Q_PROPERTY_AUTO(Lang*,lang)
+private:
-public:
     explicit AppInfo(QObject *parent = nullptr);
+public:
+    SINGLETONG(AppInfo)
     void init(QQmlApplicationEngine *engine);
-    Q_INVOKABLE void changeLang(const QString& locale);
 };
 
 #endif // APPINFO_H

example/src/helper/SettingsHelper.cpp

@@ -0,0 +1,41 @@
+#include "SettingsHelper.h"
+
+#include <QDataStream>
+#include <QStandardPaths>
+
+SettingsHelper::SettingsHelper(QObject *parent) : QObject(parent)
+{
+
+}
+
+SettingsHelper::~SettingsHelper() = default;
+
+void SettingsHelper::save(const QString& key,QVariant val)
+{
+    QByteArray data = {};
+    QDataStream stream(&data, QIODevice::WriteOnly);
+    stream.setVersion(QDataStream::Qt_5_6);
+    stream << val;
+    m_settings->setValue(key, data);
+}
+
+QVariant SettingsHelper::get(const QString& key,QVariant def){
+    const QByteArray data = m_settings->value(key).toByteArray();
+    if (data.isEmpty()) {
+        return def;
+    }
+    QDataStream stream(data);
+    stream.setVersion(QDataStream::Qt_5_6);
+    QVariant val;
+    stream >> val;
+    return val;
+}
+
+void SettingsHelper::init(char *argv[]){
+    auto applicationPath = QString::fromStdString(argv[0]);
+    const QFileInfo fileInfo(applicationPath);
+    const QString iniFileName = fileInfo.completeBaseName() + ".ini";
+    const QString iniFilePath = QStandardPaths::writableLocation(QStandardPaths::AppLocalDataLocation) + "/" + iniFileName;
+    qDebug()<<"Application configuration file path->"<<iniFilePath;
+    m_settings.reset(new QSettings(iniFilePath, QSettings::IniFormat));
+}

example/src/helper/SettingsHelper.h

@@ -0,0 +1,35 @@
+#ifndef SETTINGSHELPER_H
+#define SETTINGSHELPER_H
+
+#include <QtCore/qobject.h>
+#include <QtQml/qqml.h>
+#include <QSettings>
+#include <QScopedPointer>
+#include <QFileInfo>
+#include <QCoreApplication>
+#include <QDir>
+#include "src/singleton.h"
+
+class SettingsHelper : public QObject
+{
+    Q_OBJECT
+private:
+    explicit SettingsHelper(QObject* parent = nullptr);
+public:
+    SINGLETONG(SettingsHelper)
+    ~SettingsHelper() override;
+    void init(char *argv[]);
+    Q_INVOKABLE void saveRender(const QVariant& render){save("render",render);}
+    Q_INVOKABLE QVariant getRender(){return get("render");}
+    Q_INVOKABLE void saveDarkMode(int darkModel){save("darkMode",darkModel);}
+    Q_INVOKABLE QVariant getDarkMode(){return get("darkMode",QVariant(0));}
+    Q_INVOKABLE void saveVsync(bool vsync){save("vsync",vsync);}
+    Q_INVOKABLE QVariant getVsync(){return get("vsync",QVariant(true));}
+private:
+    void save(const QString& key,QVariant val);
+    QVariant get(const QString& key,QVariant def={});
+private:
+    QScopedPointer<QSettings> m_settings;
+};
+
+#endif // SETTINGSHELPER_H