update

# Conflicts:
#	src/Qt5/imports/FluentUI/Controls/FluRadioButtons.qml
#	src/Qt6/imports/FluentUI/Controls/FluRadioButtons.qml

.cmake/InstallerScript.iss.in

@@ -30,6 +30,7 @@ SolidCompression=yes
 WizardStyle=modern
 UninstallDisplayIcon={app}\{#MyAppExeName}
 SetupIconFile=.\..\favicon.ico
+MinVersion = 6.0
 
 [Languages]
 Name: "chinesesimplified"; MessagesFile: "compiler:Languages\ChineseSimplified.isl"

.github/workflows/macos.yml

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

.github/workflows/ubuntu.yml

@@ -22,8 +22,8 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [ubuntu-20.04]
+        os: [ubuntu-latest]
-        qt_ver: [6.5.0]
+        qt_ver: [6.6.2]
         qt_arch: [gcc_64]
     env:
       targetName: example
@@ -49,13 +49,16 @@ jobs:
       - name: ubuntu install GL library
         run: sudo apt-get install -y libxcb-cursor0 libgl1-mesa-dev libxcb1-dev libgtk-3-dev libxkbcommon-x11-dev libxcb-icccm4-dev libxcb-image0-dev libxcb-keysyms1-dev libxcb-randr0-dev libxcb-shape0-dev libxcb-xfixes0-dev libxcb-xinerama0-dev libxcb-sync-dev  libxcb-render-util0-dev libxcb-shm0-dev
         
+      - name: ubuntu install libfuse2
+        run: sudo apt install libfuse2
+        
       - name: build ubuntu
         run: |
           ninja --version
           cmake --version
           mkdir build
           cd build
-          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/home/runner/work/FluentUI/Qt/6.5.0/gcc_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/home/runner/work/FluentUI/Qt/${{ matrix.qt_ver }}/gcc_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
           cmake --build . --target all --config Release --parallel
           
       - name: install QT linux deploy
@@ -71,7 +74,7 @@ jobs:
           # make sure Qt plugin finds QML sources so it can deploy the imported files
           export QML_SOURCES_PATHS=./
           # 拷贝依赖
-          linuxdeploy-x86_64.AppImage --plugin=qt --output=appimage --create-desktop-file --icon-file=${targetName}.svg --executable=bin/release/${targetName} --appdir bin/release/
+          linuxdeploy-x86_64.AppImage --plugin=qt --output=appimage --create-desktop-file --icon-file=${targetName}.svg --executable=bin/Release/${targetName} --appdir bin/release/
           mv ${{ env.targetName }}-*.AppImage ${{ env.targetName }}.AppImage
         
       - uses: actions/upload-artifact@v2
@@ -87,4 +90,4 @@ jobs:
           file: ${{ env.targetName }}.AppImage
           asset_name: ${{ env.targetName }}_${{  github.ref_name }}_${{ matrix.os }}_Qt${{ matrix.qt_ver }}.AppImage
           tag: ${{ github.ref }}
-          overwrite: true
+          overwrite: true

.github/workflows/windows-mingw.yml

@@ -21,10 +21,10 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [windows-2022]
+        os: [windows-latest]
         include:
           - qt_arch: win64_mingw
-            qt_ver: 6.5.0
+            qt_ver: 6.6.2
             qt_tools: "tools_mingw,9.0.0-1-202203221220,qt.tools.win64_mingw900"
             qt_tools_mingw_install: mingw900_64
     env:
@@ -69,7 +69,7 @@ jobs:
           mkdir build
           cd build
           ninja --version
-          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 ..
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\${{ matrix.qt_ver }}\mingw_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
           cmake --build . --target all --config Release --parallel
       
       - name: package
@@ -91,14 +91,14 @@ jobs:
         if: startsWith(github.event.ref, 'refs/tags/')
         uses: zhuzichu520/inno-setup-action@v1.0.1
         with:
-          filepath: ./action-cli/InstallerScript.iss
+          filepath: ./package/InstallerScript.iss
           
       - name: uploadRelease
         if: startsWith(github.event.ref, 'refs/tags/')
         uses: svenstaro/upload-release-action@v2
         with:
           repo_token: ${{ secrets.GITHUB_TOKEN }}
-          file: ./action-cli/installer.exe
+          file: ./package/installer.exe
           asset_name: ${{ env.fileName }}_${{ github.ref_name }}_${{ matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.exe
           tag: ${{ github.ref }}
-          overwrite: true
+          overwrite: true

.github/workflows/windows-qt5.yml

@@ -50,7 +50,7 @@ jobs:
           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 -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\${{ matrix.qt_ver }}\msvc2019 -DCMAKE_C_COMPILER=cl -DCMAKE_CXX_COMPILER=cl -DCMAKE_BUILD_TYPE=Release -GNinja ..
           cmake --build . --target all --config Release --parallel
           echo winSdkDir=%WindowsSdkDir% >> %GITHUB_ENV%
           echo winSdkVer=%WindowsSdkVersion% >> %GITHUB_ENV%
@@ -78,14 +78,14 @@ jobs:
         if: startsWith(github.event.ref, 'refs/tags/')
         uses: zhuzichu520/inno-setup-action@v1.0.1
         with:
-          filepath: ./action-cli/InstallerScript.iss
+          filepath: ./package/InstallerScript.iss
           
       - name: uploadRelease
         if: startsWith(github.event.ref, 'refs/tags/')
         uses: svenstaro/upload-release-action@v2
         with:
           repo_token: ${{ secrets.GITHUB_TOKEN }}
-          file: ./action-cli/installer.exe
+          file: ./package/installer.exe
           asset_name: ${{ env.fileName }}_${{ github.ref_name }}_${{ matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.exe
           tag: ${{ github.ref }}
-          overwrite: true
+          overwrite: true

.github/workflows/windows.yml

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

.gitignore

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

.gitmodules

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

CMakeLists.txt

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

README.md

@@ -46,7 +46,7 @@ Use [Qt Online Installers](https://download.qt.io/archive/online_installers/) to
 
 ## ⚽ Get started
 
-+ Download the [pre-built release](https://github.com/zhuzichu520/FluentUI/releases). (Please pecify your platform and compilers.)
++ Download the [pre-built release](https://github.com/zhuzichu520/FluentUI/releases). (Please specify your platform and compilers.)
 
 + run `example` program.
 

example/CMakeLists.txt

@@ -1,170 +1,175 @@
 cmake_minimum_required(VERSION 3.20)
 
-project(example VERSION 0.1 LANGUAGES CXX)
+project(example VERSION 1.0)
 
 #配置通用编译
+set(CMAKE_CXX_STANDARD 17)
+set(CMAKE_INCLUDE_CURRENT_DIR ON)
+set(CMAKE_AUTOMOC ON)
+set(CMAKE_AUTORCC ON)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
-if(APPLE)
-    set(CMAKE_OSX_ARCHITECTURES "arm64;x86_64" CACHE STRING "" FORCE)
-endif()
-
-#导入exmaple的QML位置，不然import example有时候会爆红
-set(QML_IMPORT_PATH ${CMAKE_BINARY_DIR}/example CACHE STRING "Qt Creator extra QML import paths" FORCE)
 
 #判断FluentUI库类型
-if(FLUENTUI_BUILD_STATIC_LIB)
+if (FLUENTUI_BUILD_STATIC_LIB)
     add_definitions(-DFLUENTUI_BUILD_STATIC_LIB)
-endif()
+endif ()
 
 #设置可执行文件输出目录
-if(CMAKE_BUILD_TYPE STREQUAL "Debug")
+set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/${CMAKE_BUILD_TYPE})
-    set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/debug)
-else()
-    set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/release)
-endif()
 
-#获取文件路径分隔符（解决执行命令的时候有些平台会报错）
+if (APPLE)
-file(TO_CMAKE_PATH "/" PATH_SEPARATOR)
+    set(APPLICATION_DIR_PATH ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/${PROJECT_NAME}.app/Contents/MacOS)
+else ()
+    set(APPLICATION_DIR_PATH ${CMAKE_RUNTIME_OUTPUT_DIRECTORY})
+endif ()
 
+#导入Qt相关依赖包
 find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Quick Svg Network)
 find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Quick Svg Network)
 
-if(QT_VERSION VERSION_GREATER_EQUAL "6.3")
+#添加国际化脚本
-    qt_standard_project_setup()
+find_program(QT_LUPDATE NAMES lupdate lupdate-qt6)
-else()
+find_program(QT_LRELEASE NAMES lrelease lrelease-qt6)
-    set(CMAKE_AUTOMOC ON)
+file(GLOB TS_FILE_PATHS ${CMAKE_CURRENT_LIST_DIR}/ *.ts)
-    set(CMAKE_AUTORCC ON)
+add_custom_target(Script-UpdateTranslations
-    set(CMAKE_AUTOUIC ON)
+        COMMAND ${QT_LUPDATE} ${CMAKE_CURRENT_LIST_DIR} -ts ${PROJECT_NAME}_en_US.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
-endif()
+        COMMAND ${QT_LUPDATE} ${CMAKE_CURRENT_LIST_DIR} -ts ${PROJECT_NAME}_zh_CN.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
+        COMMAND ${QT_LRELEASE} ${PROJECT_NAME}_en_US.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
+        COMMAND ${QT_LRELEASE} ${PROJECT_NAME}_zh_CN.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
+        COMMAND ${CMAKE_COMMAND} -E make_directory ${APPLICATION_DIR_PATH}/i18n
+        COMMAND ${CMAKE_COMMAND} -E copy ${PROJECT_NAME}_en_US.qm ${PROJECT_NAME}_zh_CN.qm ${APPLICATION_DIR_PATH}/i18n
+        SOURCES ${TS_FILE_PATHS}
+)
 
 ##生成版本信息头文件
-set(HEADER_FILE_VERSION_PATH ${FLUENTUI_DIRECTORY}/example/Version.h)
+set(HEADER_FILE_VERSION_PATH ${CMAKE_SOURCE_DIR}/${PROJECT_NAME}/Version.h)
 configure_file(
-    ${FLUENTUI_DIRECTORY}/.cmake/Version.h.in
+        ${CMAKE_SOURCE_DIR}/.cmake/Version.h.in
-    ${HEADER_FILE_VERSION_PATH}
+        ${HEADER_FILE_VERSION_PATH}
 )
 
 #遍历所有Cpp文件
 file(GLOB_RECURSE CPP_FILES *.cpp *.h)
-foreach(filepath ${CPP_FILES})
+foreach (filepath ${CPP_FILES})
     string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
     list(APPEND sources_files ${filename})
-endforeach(filepath)
+endforeach (filepath)
 
-if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
+if (WIN32)
-    #遍历所有qml文件
+    list(APPEND sources_files "src/app_dmp.h")
-    file(GLOB_RECURSE QML_PATHS *.qml)
+endif ()
-    foreach(filepath ${QML_PATHS})
-        string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
-        if(${filepath} MATCHES "Qt${QT_VERSION_MAJOR}/")
-            string(REPLACE "qml-Qt${QT_VERSION_MAJOR}" "qml" filealias ${filename})
-            set_source_files_properties(${filename} PROPERTIES QT_RESOURCE_ALIAS ${filealias})
-            list(APPEND qml_files ${filename})
-        endif()
-    endforeach(filepath)
-
-    #遍历所有资源文件
-    file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp *.obj qmldir)
-    foreach(filepath ${RES_PATHS})
-        string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
-        list(APPEND resource_files ${filename})
-    endforeach(filepath)
-endif()
 
 #如果是Windows平台，则生成rc文件，还有inno setup脚本文件
 set(EXAMPLE_VERSION_RC_PATH "")
-if(WIN32)
-    set(EXAMPLE_VERSION_RC_PATH ${CMAKE_BINARY_DIR}/version_${PROJECT_NAME}.rc)
-    configure_file(
-        ${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()
-
-#添加可执行文件
 if (WIN32)
-    add_executable(example
+    set(EXAMPLE_VERSION_RC_PATH ${CMAKE_CURRENT_BINARY_DIR}/version_${PROJECT_NAME}.rc)
-        ${sources_files}
+    configure_file(
-        ${EXAMPLE_VERSION_RC_PATH}
+            ${CMAKE_SOURCE_DIR}/.cmake/version_exe.rc.in
+            ${EXAMPLE_VERSION_RC_PATH}
     )
-else ()
+    configure_file(
-    add_executable(example
+            ${CMAKE_SOURCE_DIR}/.cmake/InstallerScript.iss.in
-        ${sources_files}
+            ${CMAKE_SOURCE_DIR}/package/InstallerScript.iss
     )
 endif ()
 
-if(WIN32)
+#加快qrc编译
-    #复制动态库到可执行文件同级目录下
+qt_add_big_resources(QRC_RESOURCES ${PROJECT_NAME}.qrc)
-    if(CMAKE_SIZEOF_VOID_P EQUAL 4)
+list(APPEND QRC_RESOURCES ${PROJECT_NAME}.qrc)
-        set(3RDPARTY_ARCH_DIR ${CMAKE_SOURCE_DIR}/3rdparty/Win_x86)
+set_property(SOURCE ${PROJECT_NAME}.qrc PROPERTY SKIP_AUTORCC ON)
-    elseif(CMAKE_SIZEOF_VOID_P EQUAL 8)
+list(APPEND sources_files ${QRC_RESOURCES})
-        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})
-    add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
-        COMMAND ${CMAKE_COMMAND} -E copy
-        ${DLL_FILES}
-        ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}
-    )
-endif()
 
-if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
+#添加可执行文件
-    #添加qml模块
+if (WIN32)
-    qt_add_qml_module(example
+    list(APPEND sources_files ${EXAMPLE_VERSION_RC_PATH})
-        URI "example"
+endif ()
-        VERSION 1.0
+if (${QT_VERSION_MAJOR} GREATER_EQUAL 6)
-        QML_FILES ${qml_files}
+    qt_add_executable(${PROJECT_NAME}
-        RESOURCES ${resource_files}
+            MANUAL_FINALIZATION
-        RESOURCE_PREFIX "/"
+            ${sources_files}
     )
-else()
+else ()
-    target_include_directories(example PRIVATE
+    add_executable(${PROJECT_NAME}
-        ${CMAKE_CURRENT_SOURCE_DIR}
+            ${sources_files}
     )
-target_sources(example PRIVATE example.qrc)
+endif ()
-endif()
+add_dependencies(${PROJECT_NAME} Script-UpdateTranslations)
+
+#复制程序运行所需要的动态库
+if (WIN32)
+    if (MSVC)
+        if (CMAKE_SIZEOF_VOID_P EQUAL 4)
+            file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x86/*.dll)
+        elseif (CMAKE_SIZEOF_VOID_P EQUAL 8)
+            file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x64/*.dll)
+        endif ()
+    elseif (MINGW)
+        file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/mingw/*.dll)
+    endif ()
+    file(COPY ${3RDPARTY_DLL_DIR} DESTINATION ${CMAKE_RUNTIME_OUTPUT_DIRECTORY})
+endif ()
+
+#复制FluentUI源码到运行目录下，用于脚手架生成
+file(MAKE_DIRECTORY ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/source/)
+file(COPY ${CMAKE_SOURCE_DIR}/src/ DESTINATION ${APPLICATION_DIR_PATH}/source/)
 
 #导入component头文件,不然通过QML_NAMED_ELEMENT生成的c++类会找不到头文件报错
-target_include_directories(example PRIVATE
+target_include_directories(${PROJECT_NAME} PRIVATE
-    ${CMAKE_CURRENT_SOURCE_DIR}/src/component
+        ${CMAKE_CURRENT_SOURCE_DIR}/src/component
 )
 
-#如何是静态库则需要手动注册插件，导入FluentUI.h头文件
+#如果是静态库则需要手动注册插件，导入FluentUI.h头文件
-if(FLUENTUI_BUILD_STATIC_LIB)
+if (FLUENTUI_BUILD_STATIC_LIB)
-    target_include_directories(example PRIVATE
+    target_include_directories(${PROJECT_NAME} PRIVATE
-        ${CMAKE_SOURCE_DIR}/src
+            ${CMAKE_SOURCE_DIR}/src
     )
-endif()
+endif ()
 
 #设置属性
-set_target_properties(example PROPERTIES
+set_target_properties(${PROJECT_NAME} PROPERTIES
-    MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com
+        MACOSX_BUNDLE_GUI_IDENTIFIER my.${PROJECT_NAME}.com
-    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
+        MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
-    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
+        MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
-    MACOSX_BUNDLE TRUE
+        MACOSX_BUNDLE TRUE
-    WIN32_EXECUTABLE TRUE
+        WIN32_EXECUTABLE TRUE
 )
 
-target_link_libraries(example PRIVATE
+#Release也支持日志打印代码位置
-    Qt${QT_VERSION_MAJOR}::Quick
+target_compile_definitions(${PROJECT_NAME}
-    Qt${QT_VERSION_MAJOR}::Svg
+        PRIVATE
-    Qt${QT_VERSION_MAJOR}::Network
+        QT_MESSAGELOGCONTEXT
-    fluentuiplugin
 )
 
-#安装
+#目标文件链接库
-install(TARGETS example
+target_link_libraries(${PROJECT_NAME} PRIVATE
-    BUNDLE DESTINATION .
+        Qt${QT_VERSION_MAJOR}::Quick
-    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+        Qt${QT_VERSION_MAJOR}::Svg
-    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+        Qt${QT_VERSION_MAJOR}::Network
+        fluentuiplugin
 )
+
+#添加部署脚本
+if (CMAKE_BUILD_TYPE MATCHES "Release")
+    if (APPLE)
+        find_program(QT_DEPLOY_QT NAMES macdeployqt)
+        add_custom_target(Script-DeployRelease
+                COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_SOURCE_DIR}/dist
+                COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} ${CMAKE_SOURCE_DIR}/dist
+                COMMAND ${QT_DEPLOY_QT} ${CMAKE_SOURCE_DIR}/dist/${PROJECT_NAME}.app -qmldir=${CMAKE_CURRENT_LIST_DIR}
+                COMMENT "MacOs Deploying Qt Dependencies After Build........."
+                SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
+                WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
+        )
+    endif ()
+    if (WIN32)
+        find_program(QT_DEPLOY_QT NAMES windeployqt)
+        add_custom_target(Script-DeployRelease
+                COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_SOURCE_DIR}/dist
+                COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} ${CMAKE_SOURCE_DIR}/dist
+                COMMAND ${QT_DEPLOY_QT} --qmldir=${CMAKE_CURRENT_LIST_DIR} --plugindir ${CMAKE_SOURCE_DIR}/dist/plugins --no-translations --compiler-runtime ${CMAKE_SOURCE_DIR}/dist/${PROJECT_NAME}.exe
+                COMMENT "Windows Deploying Qt Dependencies After Build........."
+                SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
+                WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
+        )
+    endif ()
+endif ()

example/README.md

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

example/example.qrc

@@ -127,14 +127,12 @@
         <file>qml/global/ItemsOriginal.qml</file>
         <file>qml/global/qmldir</file>
         <file>qml/page/T_Acrylic.qml</file>
-        <file>qml/page/T_Awesome.qml</file>
         <file>qml/page/T_Badge.qml</file>
         <file>qml/page/T_BreadcrumbBar.qml</file>
         <file>qml/page/T_Buttons.qml</file>
         <file>qml/page/T_CalendarPicker.qml</file>
         <file>qml/page/T_Captcha.qml</file>
         <file>qml/page/T_Carousel.qml</file>
-        <file>qml/page/T_Chart.qml</file>
         <file>qml/page/T_CheckBox.qml</file>
         <file>qml/page/T_ColorPicker.qml</file>
         <file>qml/page/T_ComboBox.qml</file>
@@ -143,7 +141,6 @@
         <file>qml/page/T_Expander.qml</file>
         <file>qml/page/T_FlipView.qml</file>
         <file>qml/page/T_Home.qml</file>
-        <file>qml/page/T_Http.qml</file>
         <file>qml/page/T_Image.qml</file>
         <file>qml/page/T_InfoBar.qml</file>
         <file>qml/page/T_Menu.qml</file>
@@ -156,10 +153,9 @@
         <file>qml/page/T_RatingControl.qml</file>
         <file>qml/page/T_Rectangle.qml</file>
         <file>qml/page/T_RemoteLoader.qml</file>
-        <file>qml/page/T_Screenshot.qml</file>
         <file>qml/page/T_Settings.qml</file>
         <file>qml/page/T_Slider.qml</file>
-        <file>qml/page/T_StatusView.qml</file>
+        <file>qml/page/T_StatusLayout.qml</file>
         <file>qml/page/T_TableView.qml</file>
         <file>qml/page/T_TabView.qml</file>
         <file>qml/page/T_Text.qml</file>
@@ -180,14 +176,39 @@
         <file>qml/window/SingleInstanceWindow.qml</file>
         <file>qml/window/SingleTaskWindow.qml</file>
         <file>qml/window/StandardWindow.qml</file>
-        <file>res/image/bg_scenic.png</file>
         <file>res/image/image_1.jpg</file>
         <file>qml/window/PageWindow.qml</file>
-        <file>qml/page/T_StaggeredView.qml</file>
+        <file>qml/page/T_StaggeredLayout.qml</file>
-        <file>qml/viewmodel/SettingsViewModel.qml</file>
-        <file>qml/viewmodel/TextBoxViewModel.qml</file>
         <file>qml/page/T_Clip.qml</file>
-        <file>qml/page/T_3D.qml</file>
+        <file>qml/page/T_Network.qml</file>
-        <file>qml/global/Lang.qml</file>
+        <file>qml/page/T_ShortcutPicker.qml</file>
+        <file>qml/chart/T_BarChart.qml</file>
+        <file>qml/chart/T_LineChart.qml</file>
+        <file>qml/chart/T_PieChart.qml</file>
+        <file>qml/chart/T_RadarChart.qml</file>
+        <file>qml/chart/T_ScatterChart.qml</file>
+        <file>qml/chart/T_BubbleChart.qml</file>
+        <file>qml/chart/T_PolarAreaChart.qml</file>
+        <file>res/image/ic_crash.png</file>
+        <file>qml/window/CrashWindow.qml</file>
+        <file>qml/page/T_SplitLayout.qml</file>
+        <file>res/template/CMakeLists.txt.in</file>
+        <file>res/template/src/App.qml.in</file>
+        <file>res/template/src/CMakeLists.txt.in</file>
+        <file>res/template/src/en_US.ts.in</file>
+        <file>res/template/src/logo.ico.in</file>
+        <file>res/template/src/main.cpp.in</file>
+        <file>res/template/src/main.qml.in</file>
+        <file>res/template/src/qml.qrc.in</file>
+        <file>res/template/src/zh_CN.ts.in</file>
+        <file>res/template/src/README.md.in</file>
+        <file>qml/global/GlobalModel.qml</file>
+        <file>qml/page/T_Sheet.qml</file>
+        <file>qml/page/T_GroupBox.qml</file>
+        <file>res/image/bg_scenic.jpg</file>
+        <file>qml/window/FluentInitializrWindow.qml</file>
+        <file>qml/page/T_OpenGL.qml</file>
+        <file>qml/page/T_Icons.qml</file>
     </qresource>
+    <qresource prefix="/"/>
 </RCC>

example/qml-Qt6/App.qml

@@ -1,60 +0,0 @@
-import QtQuick
-import QtQuick.Window
-import QtQuick.Controls
-import QtQuick.Layouts
-import FluentUI
-
-Window {
-    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
-        function onIntercept(request){
-            if(request.method === "get"){
-                request.params["method"] = "get"
-            }
-            if(request.method === "post"){
-                request.params["method"] = "post"
-            }
-            request.headers["token"] ="yyds"
-            request.headers["os"] ="pc"
-            console.debug(JSON.stringify(request))
-            return request
-        }
-    }
-
-    Component.onCompleted: {
-        FluApp.init(app)
-        FluApp.vsync = SettingsHelper.getVsync()
-        FluTheme.darkMode = SettingsHelper.getDarkMode()
-        FluTheme.enableAnimation = true
-        FluApp.routes = {
-            "/":"qrc:/example/qml/window/MainWindow.qml",
-            "/about":"qrc:/example/qml/window/AboutWindow.qml",
-            "/login":"qrc:/example/qml/window/LoginWindow.qml",
-            "/hotload":"qrc:/example/qml/window/HotloadWindow.qml",
-            "/singleTaskWindow":"qrc:/example/qml/window/SingleTaskWindow.qml",
-            "/standardWindow":"qrc:/example/qml/window/StandardWindow.qml",
-            "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml",
-            "/pageWindow":"qrc:/example/qml/window/PageWindow.qml"
-        }
-        FluApp.initialRoute = "/"
-        FluApp.httpInterceptor = interceptor
-        FluApp.run()
-    }
-}

example/qml-Qt6/component/CodeExpander.qml

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

example/qml-Qt6/global/ItemsFooter.qml

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

example/qml-Qt6/global/ItemsOriginal.qml

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

example/qml-Qt6/global/Lang.qml

@@ -1,77 +0,0 @@
-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,3 +0,0 @@
-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

@@ -1,120 +0,0 @@
-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

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

example/qml-Qt6/page/T_Awesome.qml

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

example/qml-Qt6/page/T_Badge.qml

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

example/qml-Qt6/page/T_BreadcrumbBar.qml

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

example/qml-Qt6/page/T_Buttons.qml

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

example/qml-Qt6/page/T_CalendarPicker.qml

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

example/qml-Qt6/page/T_Captcha.qml

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

example/qml-Qt6/page/T_Carousel.qml

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

example/qml-Qt6/page/T_Chart.qml

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

example/qml-Qt6/page/T_CheckBox.qml

@@ -1,114 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluScrollablePage{
-
-    title:"CheckBox"
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 72
-        paddings: 10
-        Layout.topMargin: 20
-
-        FluText{
-            text:"A 2-state CheckBox"
-        }
-
-        Row{
-            spacing: 30
-            anchors{
-                top: parent.top
-                topMargin: 30
-            }
-            FluCheckBox{
-                disabled: check_box_switch_two.checked
-            }
-            FluCheckBox{
-                disabled: check_box_switch_two.checked
-                text:"Right"
-            }
-            FluCheckBox{
-                disabled: check_box_switch_two.checked
-                text:"Left"
-                textRight: false
-            }
-        }
-        FluToggleSwitch{
-            id:check_box_switch_two
-            anchors{
-                right: parent.right
-                verticalCenter: parent.verticalCenter
-            }
-            text:"Disabled"
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluCheckBox{
-    text:"Text"
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 72
-        paddings: 10
-        Layout.topMargin: 20
-
-        FluText{
-            text:"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

@@ -1,107 +0,0 @@
-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_ColorPicker.qml

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

example/qml-Qt6/page/T_ComboBox.qml

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

example/qml-Qt6/page/T_DatePicker.qml

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

example/qml-Qt6/page/T_Dialog.qml

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

example/qml-Qt6/page/T_Expander.qml

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

example/qml-Qt6/page/T_FlipView.qml

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

example/qml-Qt6/page/T_Home.qml

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

example/qml-Qt6/page/T_Http.qml

@@ -1,405 +0,0 @@
-import QtQuick
-import Qt.labs.platform
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import QtQuick.Dialogs
-import FluentUI
-import "qrc:///example/qml/component"
-
-FluContentPage{
-
-    title:"Http"
-    property string cacheDirPath: StandardPaths.writableLocation(StandardPaths.AppLocalDataLocation) + "/cache/http"
-    property bool isDownCompleted: false
-
-    FluHttp{
-        id:http
-        cacheDir:cacheDirPath
-    }
-
-    FluHttp{
-        id:http_breakpoint_download
-        cacheDir:cacheDirPath
-        breakPointDownload: true
-    }
-
-    FluHttp{
-        id:http_cache_ifnonecacherequest
-        cacheMode:FluHttpType.IfNoneCacheRequest
-        cacheDir:cacheDirPath
-    }
-
-    FluHttp{
-        id:http_cache_requestfailedreadcache
-        cacheMode:FluHttpType.RequestFailedReadCache
-        cacheDir:cacheDirPath
-    }
-
-    FluHttp{
-        id:http_cache_firstcachethenrequest
-        cacheMode:FluHttpType.FirstCacheThenRequest
-        cacheDir:cacheDirPath
-    }
-
-    HttpCallable{
-        id:callable
-        onStart: {
-            showLoading()
-        }
-        onFinish: {
-            hideLoading()
-        }
-        onError:
-            (status,errorString,result)=>{
-                console.debug(status+";"+errorString+";"+result)
-            }
-        onSuccess:
-            (result)=>{
-                text_info.text = result
-            }
-        onCache:
-            (result)=>{
-                text_info.text = result
-            }
-    }
-
-    Flickable{
-        id:layout_flick
-        width: 200
-        clip: true
-        anchors{
-            top: parent.top
-            topMargin: 20
-            bottom: parent.bottom
-            left: parent.left
-        }
-        ScrollBar.vertical: FluScrollBar {}
-        contentHeight:layout_column.height
-        Column{
-            spacing: 2
-            id:layout_column
-            width: parent.width
-            FluButton{
-                implicitWidth: parent.width
-                implicitHeight: 36
-                text: "Get请求"
-                onClicked: {
-                    var request = http.newRequest("https://httpbingo.org/get")
-                    http.get(request,callable)
-                }
-            }
-            FluButton{
-                implicitWidth: parent.width
-                implicitHeight: 36
-                text: "Post表单请求"
-                onClicked: {
-                    var request = http.newRequest("https://httpbingo.org/post")
-                    var params = {}
-                    params.custname = "朱子楚"
-                    params.custtel = "1234567890"
-                    params.custemail = "zhuzichu520@gmail.com"
-                    request.params = params
-                    var headers = {}
-                    headers.test = "123456789456465321354"
-                    request.headers = headers
-                    http.post(request,callable)
-                }
-            }
-            FluButton{
-                implicitWidth: parent.width
-                implicitHeight: 36
-                text: "Post Json请求"
-                onClicked: {
-                    var request = http.newRequest("https://httpbingo.org/post")
-                    var params = {}
-                    params.custname = "朱子楚"
-                    params.custtel = "1234567890"
-                    params.custemail = "zhuzichu520@gmail.com"
-                    request.params = params
-                    http.postJson(request,callable)
-                }
-            }
-            FluButton{
-                implicitWidth: parent.width
-                implicitHeight: 36
-                text: "Post String请求"
-                onClicked: {
-                    var request = http.newRequest("https://httpbingo.org/post")
-                    request.params = "我命由我不由天"
-                    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
-                implicitHeight: 36
-                text: "下载文件"
-                onClicked: {
-                    folder_dialog.open()
-                }
-            }
-            FluProgressButton{
-                property bool downloading: false
-                id:btn_breakpoint_download
-                implicitWidth: parent.width
-                implicitHeight: 36
-                text: {
-                    if(downloading){
-                        return "暂停下载"
-                    }
-                    if(progress === 0){
-                        return "断点下载文件"
-                    }else if(progress === 1){
-                        return "打开文件"
-                    }else{
-                        return "继续下载"
-                    }
-                }
-                HttpRequest{
-                    id:request_breakpoint_download
-                    url: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
-                    downloadSavePath: FluTools.getApplicationDirPath()+ "/download/big_buck_bunny.mp4"
-                }
-                HttpCallable{
-                    id:callable_breakpoint_download
-                    onStart: {
-                        btn_breakpoint_download.downloading = true
-                    }
-                    onFinish: {
-                        btn_breakpoint_download.downloading = false
-                    }
-                    onError:
-                        (status,errorString,result)=>{
-                            console.debug(status+";"+errorString+";"+result)
-                        }
-                    onSuccess:
-                        (result)=>{
-                            if(!isDownCompleted){
-                                tour.open()
-                                isDownCompleted = true
-                            }
-                            showSuccess(result)
-                        }
-                    onDownloadProgress:
-                        (recv,total)=>{
-                            btn_breakpoint_download.progress = recv/total
-                        }
-                }
-                Component.onCompleted: {
-                    progress = http_breakpoint_download.getBreakPointProgress(request_breakpoint_download)
-                }
-                onClicked: {
-                    if(downloading){
-                        http_breakpoint_download.cancel()
-                        return
-                    }
-                    if(progress === 1){
-                        FluTools.showFileInFolder(request_breakpoint_download.downloadSavePath)
-                    }else{
-                        http_breakpoint_download.download(request_breakpoint_download,callable_breakpoint_download)
-                    }
-                }
-                FluMenu{
-                    id:menu_breakpoint_download
-                    width: 120
-                    FluMenuItem{
-                        text: "删除文件"
-                        onClicked: {
-                            if(FluTools.removeFile(request_breakpoint_download.downloadSavePath)){
-                                btn_breakpoint_download.progress = 0
-                            }
-                        }
-                    }
-                }
-                MouseArea {
-                    anchors.fill: parent
-                    acceptedButtons: Qt.RightButton
-                    onClicked: {
-                        if(btn_breakpoint_download.progress === 1){
-                            menu_breakpoint_download.popup()
-                        }
-                    }
-                }
-            }
-            FluProgressButton{
-                id:btn_upload
-                implicitWidth: parent.width
-                implicitHeight: 36
-                text: "文件上传"
-                onClicked: {
-                    file_dialog.open()
-                }
-            }
-            FluButton{
-                implicitWidth: parent.width
-                implicitHeight: 36
-                text: "FirstCacheThenRequest缓存"
-                onClicked: {
-                    var request = http.newRequest("https://httpbingo.org/post")
-                    request.params = {cacheMode:"FirstCacheThenRequest"}
-                    http_cache_firstcachethenrequest.post(request,callable)
-                }
-            }
-            FluButton{
-                implicitWidth: parent.width
-                implicitHeight: 36
-                text: "RequestFailedReadCache缓存"
-                onClicked: {
-                    var request = http.newRequest("https://httpbingo.org/post")
-                    request.params = {cacheMode:"RequestFailedReadCache"}
-                    http_cache_requestfailedreadcache.post(request,callable)
-                }
-            }
-
-            FluButton{
-                implicitWidth: parent.width
-                implicitHeight: 36
-                text: "IfNoneCacheRequest缓存"
-                onClicked: {
-                    var request = http.newRequest("https://httpbingo.org/post")
-                    request.params = {cacheMode:"IfNoneCacheRequest"}
-                    http_cache_ifnonecacherequest.post(request,callable)
-                }
-            }
-            FluButton{
-                implicitWidth: parent.width
-                implicitHeight: 36
-                text: "打开缓存路径"
-                onClicked: {
-                    Qt.openUrlExternally(cacheDirPath)
-                }
-            }
-            FluButton{
-                implicitWidth: parent.width
-                implicitHeight: 36
-                text: "删除缓存"
-                onClicked: {
-                    console.debug(FluTools.removeDir(cacheDirPath))
-                }
-            }
-            FluButton{
-                implicitWidth: parent.width
-                implicitHeight: 36
-                text: "清空右边数据"
-                onClicked: {
-                    text_info.text = ""
-                }
-            }
-        }
-    }
-
-    FluTour{
-        id:tour
-        steps:[
-            {title:"友情提示",description: "下载已完成，左击这里可以打开文件所在路径，右击可以弹出菜单删除文件！",target:()=>btn_breakpoint_download}
-        ]
-    }
-
-    HttpCallable{
-        id:callable_upload
-        onStart: {
-            btn_upload.disabled = true
-        }
-        onFinish: {
-            btn_upload.disabled = false
-        }
-        onError:
-            (status,errorString,result)=>{
-                btn_upload.progress = 0
-                text_info.text = result
-                console.debug(result)
-            }
-        onSuccess:
-            (result)=>{
-                text_info.text = result
-            }
-        onUploadProgress:
-            (sent,total)=>{
-                btn_upload.progress = sent/total
-            }
-    }
-    FileDialog {
-        id: file_dialog
-        onAccepted: {
-            var request = http.newRequest("https://httpbingo.org/post")
-            var params = {}
-            for(var i=0;i<selectedFiles.length;i++){
-                var fileUrl = selectedFiles[i]
-                var fileName = FluTools.getFileNameByUrl(fileUrl)
-                var filePath = FluTools.toLocalPath(fileUrl)
-                params[fileName] = filePath
-            }
-            request.params = params
-            http.upload(request,callable_upload)
-        }
-    }
-
-    HttpCallable{
-        id:callable_download
-        onStart: {
-            btn_download.progress = 0
-            btn_download.disabled = true
-        }
-        onFinish: {
-            btn_download.disabled = false
-        }
-        onError:
-            (status,errorString,result)=>{
-                btn_download.progress = 0
-                showError(errorString)
-                console.debug(status+";"+errorString+";"+result)
-            }
-        onSuccess:
-            (result)=>{
-                showSuccess(result)
-            }
-        onDownloadProgress:
-            (recv,total)=>{
-                btn_download.progress = recv/total
-            }
-    }
-    FolderDialog {
-        id: folder_dialog
-        currentFolder: StandardPaths.standardLocations(StandardPaths.DownloadLocation)[0]
-        onAccepted: {
-            var request = http.newRequest("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4")
-            request.downloadSavePath = FluTools.toLocalPath(currentFolder)+ "/big_buck_bunny.mp4"
-            http.download(request,callable_download)
-        }
-    }
-    FluArea{
-        anchors{
-            top: layout_flick.top
-            bottom: layout_flick.bottom
-            left: layout_flick.right
-            right: parent.right
-            leftMargin: 8
-        }
-        Flickable{
-            clip: true
-            id:scrollview
-            boundsBehavior:Flickable.StopAtBounds
-            width: parent.width
-            height: parent.height
-            contentWidth: width
-            contentHeight: text_info.height
-            ScrollBar.vertical: FluScrollBar {}
-            FluText{
-                id:text_info
-                width: scrollview.width
-                wrapMode: Text.WrapAnywhere
-                padding: 14
-            }
-        }
-    }
-}

example/qml-Qt6/page/T_Image.qml

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

example/qml-Qt6/page/T_InfoBar.qml

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

example/qml-Qt6/page/T_Menu.qml

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

example/qml-Qt6/page/T_MultiWindow.qml

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

example/qml-Qt6/page/T_Pagination.qml

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

example/qml-Qt6/page/T_Pivot.qml

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

example/qml-Qt6/page/T_Progress.qml

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

example/qml-Qt6/page/T_QRCode.qml

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

example/qml-Qt6/page/T_RadioButton.qml

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

example/qml-Qt6/page/T_RatingControl.qml

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

example/qml-Qt6/page/T_Rectangle.qml

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

example/qml-Qt6/page/T_RemoteLoader.qml

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

example/qml-Qt6/page/T_Screenshot.qml

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

example/qml-Qt6/page/T_Settings.qml

@@ -1,203 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/global"
-import "qrc:///example/qml/component"
-import "qrc:///example/qml/viewmodel"
-
-FluScrollablePage{
-
-    title:"Settings"
-
-    SettingsViewModel{
-        id:viewmodel_settings
-    }
-
-    FluEvent{
-        id:event_checkupdate_finish
-        name: "checkUpdateFinish"
-        onTriggered: {
-            btn_checkupdate.loading = false
-        }
-    }
-
-    Component.onCompleted: {
-        FluEventBus.registerEvent(event_checkupdate_finish)
-    }
-
-    Component.onDestruction: {
-        FluEventBus.unRegisterEvent(event_checkupdate_finish)
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 60
-        paddings: 10
-        Row{
-            spacing: 20
-            anchors.verticalCenter: parent.verticalCenter
-            FluText{
-                text:"当前版本 v%1".arg(AppInfo.version)
-                font: FluTextStyle.Body
-                anchors.verticalCenter: parent.verticalCenter
-            }
-            FluLoadingButton{
-                id:btn_checkupdate
-                text:"检查更新"
-                anchors.verticalCenter: parent.verticalCenter
-                onClicked: {
-                    loading = true
-                    FluEventBus.post("checkUpdate")
-                }
-            }
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 50
-        paddings: 10
-        FluCheckBox{
-            text:"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
-        Layout.topMargin: 20
-        height: 128
-        paddings: 10
-
-        ColumnLayout{
-            spacing: 5
-            anchors{
-                top: parent.top
-                left: parent.left
-            }
-            FluText{
-                text:Lang.dark_mode
-                font: FluTextStyle.BodyStrong
-                Layout.bottomMargin: 4
-            }
-            Repeater{
-                model: [{title:"System",mode:FluThemeType.System},{title:"Light",mode:FluThemeType.Light},{title:"Dark",mode:FluThemeType.Dark}]
-                delegate:  FluRadioButton{
-                    checked : FluTheme.darkMode === modelData.mode
-                    text:modelData.title
-                    clickListener:function(){
-                        FluTheme.darkMode = modelData.mode
-                    }
-                }
-            }
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 160
-        paddings: 10
-
-        ColumnLayout{
-            spacing: 5
-            anchors{
-                top: parent.top
-                left: parent.left
-            }
-            FluText{
-                text:Lang.navigation_view_display_mode
-                font: FluTextStyle.BodyStrong
-                Layout.bottomMargin: 4
-            }
-            Repeater{
-                model: [{title:"Open",mode:FluNavigationViewType.Open},{title:"Compact",mode:FluNavigationViewType.Compact},{title:"Minimal",mode:FluNavigationViewType.Minimal},{title:"Auto",mode:FluNavigationViewType.Auto}]
-                delegate: FluRadioButton{
-                    checked : viewmodel_settings.displayMode===modelData.mode
-                    text:modelData.title
-                    clickListener:function(){
-                        viewmodel_settings.displayMode = modelData.mode
-                    }
-                }
-            }
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
-
-        ColumnLayout{
-            spacing: 10
-            anchors{
-                top: parent.top
-                left: parent.left
-            }
-
-            FluText{
-                text:Lang.locale
-                font: FluTextStyle.BodyStrong
-                Layout.bottomMargin: 4
-            }
-
-            Flow{
-                spacing: 5
-                Repeater{
-                    model: Lang.__localeList
-                    delegate: FluRadioButton{
-                        checked: Lang.__locale === modelData
-                        text:modelData
-                        clickListener:function(){
-                            Lang.__locale = modelData
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-}

example/qml-Qt6/page/T_Slider.qml

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

example/qml-Qt6/page/T_StaggeredView.qml

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

example/qml-Qt6/page/T_StatusView.qml

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

example/qml-Qt6/page/T_TabView.qml

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

example/qml-Qt6/page/T_TableView.qml

@@ -1,353 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-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{
-            RowLayout{
-                anchors.centerIn: parent
-                FluButton{
-                    text:"删除"
-                    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)))
-                    }
-                }
-            }
-        }
-    }
-
-
-    Component{
-        id:com_column_checbox
-        Item{
-            RowLayout{
-                anchors.centerIn: parent
-                FluText{
-                    text:"全选"
-                    Layout.alignment: Qt.AlignVCenter
-                }
-                FluCheckBox{
-                    checked: true === options.checked
-                    enableAnimation: false
-                    Layout.alignment: Qt.AlignVCenter
-                    clickListener: function(){
-                        var checked = !options.checked
-                        itemModel.display = table_view.customItem(com_column_checbox,{"checked":checked})
-                        for(var i =0;i< tableModel.rowCount ;i++){
-                            var rowData = tableModel.getRow(i)
-                            rowData.checkbox = table_view.customItem(com_checbox,{"checked":checked})
-                            tableModel.setRow(i,rowData)
-                        }
-                    }
-                }
-                Connections{
-                    target: root
-                    function onCheckBoxChanged(){
-                        for(var i =0;i< tableModel.rowCount ;i++){
-                            if(false === tableModel.getRow(i).checkbox.options.checked){
-                                itemModel.display = table_view.customItem(com_column_checbox,{"checked":false})
-                                return
-                            }
-                        }
-                        itemModel.display = table_view.customItem(com_column_checbox,{"checked":true})
-                    }
-                }
-            }
-        }
-    }
-
-    Component{
-        id:com_combobox
-        FluComboBox {
-            anchors.fill: parent
-            focus: true
-            currentIndex: display
-            editable: true
-            model: ListModel {
-                ListElement { text: 100 }
-                ListElement { text: 300 }
-                ListElement { text: 500 }
-                ListElement { text: 1000 }
-            }
-            Component.onCompleted: {
-                currentIndex=[100,300,500,1000].findIndex((element) => element === Number(display))
-                selectAll()
-            }
-            onCommit: {
-                display = editText
-                tableView.closeEditor()
-            }
-        }
-    }
-
-    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{
-            left: parent.left
-            right: parent.right
-            top: parent.top
-            bottom: gagination.top
-        }
-        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: table_view.customItem(com_column_sort_age,{sort:0}),
-                dataIndex: 'age',
-                editDelegate:com_combobox,
-                width:100,
-                minimumWidth:100,
-                maximumWidth:100
-            },
-            {
-                title: '住址',
-                dataIndex: 'address',
-                width:200,
-                minimumWidth:100,
-                maximumWidth:250
-            },
-            {
-                title: '别名',
-                dataIndex: 'nickname',
-                width:100,
-                minimumWidth:80,
-                maximumWidth:200
-            },
-            {
-                title: '长字符串',
-                dataIndex: 'longstring',
-                width:200,
-                minimumWidth:100,
-                maximumWidth:300
-            },
-            {
-                title: '操作',
-                dataIndex: 'action',
-                width:160,
-                minimumWidth:160,
-                maximumWidth:160
-            }
-        ]
-    }
-
-    FluPagination{
-        id:gagination
-        anchors{
-            bottom: parent.bottom
-            left: parent.left
-        }
-        pageCurrent: 1
-        itemCount: 100000
-        pageButtonCount: 7
-        __itemPerPage: 1000
-        onRequestPage:
-            (page,count)=> {
-                table_view.closeEditor()
-                loadData(page,count)
-                table_view.resetPosition()
-            }
-    }
-
-    function loadData(page,count){
-        var numbers = [100, 300, 500, 1000];
-        function getRandomAge() {
-            var randomIndex = Math.floor(Math.random() * numbers.length);
-            return numbers[randomIndex];
-        }
-        var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"];
-        function getRandomName(){
-            var randomIndex = Math.floor(Math.random() * names.length);
-            return names[randomIndex];
-        }
-        var nicknames = ["复海大圣","混天大圣","移山大圣","通风大圣","驱神大圣","齐天大圣","平天大圣"]
-        function getRandomNickname(){
-            var randomIndex = Math.floor(Math.random() * nicknames.length);
-            return nicknames[randomIndex];
-        }
-        var addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
-        function getRandomAddresses(){
-            var randomIndex = Math.floor(Math.random() * addresses.length);
-            return addresses[randomIndex];
-        }
-
-        var avatars = ["qrc:/example/res/svg/avatar_1.svg", "qrc:/example/res/svg/avatar_2.svg", "qrc:/example/res/svg/avatar_3.svg", "qrc:/example/res/svg/avatar_4.svg","qrc:/example/res/svg/avatar_5.svg","qrc:/example/res/svg/avatar_6.svg","qrc:/example/res/svg/avatar_7.svg","qrc:/example/res/svg/avatar_8.svg","qrc:/example/res/svg/avatar_9.svg","qrc:/example/res/svg/avatar_10.svg","qrc:/example/res/svg/avatar_11.svg","qrc:/example/res/svg/avatar_12.svg"];
-        function getAvatar(){
-            var randomIndex = Math.floor(Math.random() * avatars.length);
-            return avatars[randomIndex];
-        }
-
-        const dataSource = []
-        for(var i=0;i<count;i++){
-            dataSource.push({
-                                checkbox: table_view.customItem(com_checbox,{checked:true}),
-                                avatar:table_view.customItem(com_avatar,{avatar:getAvatar()}),
-                                name: getRandomName(),
-                                age:getRandomAge(),
-                                address: getRandomAddresses(),
-                                nickname: getRandomNickname(),
-                                longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
-                                action: table_view.customItem(com_action),
-                                minimumHeight:50
-                            })
-        }
-        root.dataSource = dataSource
-        table_view.dataSource = root.dataSource
-    }
-
-}

example/qml-Qt6/page/T_Text.qml

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

example/qml-Qt6/page/T_TextBox.qml

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

example/qml-Qt6/page/T_Theme.qml

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

example/qml-Qt6/page/T_TimePicker.qml

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

example/qml-Qt6/page/T_Timeline.qml

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

example/qml-Qt6/page/T_ToggleSwitch.qml

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

example/qml-Qt6/page/T_Tooltip.qml

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

example/qml-Qt6/page/T_Tour.qml

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

example/qml-Qt6/page/T_TreeView.qml

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

example/qml-Qt6/page/T_Typography.qml

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

example/qml-Qt6/page/T_Watermark.qml

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

example/qml-Qt6/viewmodel/SettingsViewModel.qml

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

example/qml-Qt6/viewmodel/TextBoxViewModel.qml

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

example/qml-Qt6/window/AboutWindow.qml

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

example/qml-Qt6/window/HotloadWindow.qml

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

example/qml-Qt6/window/LoginWindow.qml

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

example/qml-Qt6/window/MainWindow.qml

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

example/qml-Qt6/window/PageWindow.qml

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

example/qml-Qt6/window/SingleInstanceWindow.qml

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

example/qml-Qt6/window/SingleTaskWindow.qml

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

example/qml-Qt6/window/StandardWindow.qml

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

example/qml/App.qml

@@ -4,57 +4,52 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import FluentUI 1.0
 
-Window {
+FluLauncher {
     id: app
-    flags: Qt.SplashScreen
-
     Connections{
         target: FluTheme
         function onDarkModeChanged(){
             SettingsHelper.saveDarkMode(FluTheme.darkMode)
         }
     }
-
     Connections{
         target: FluApp
-        function onVsyncChanged(){
+        function onUseSystemAppBarChanged(){
-            SettingsHelper.saveVsync(FluApp.vsync)
+            SettingsHelper.saveUseSystemAppBar(FluApp.useSystemAppBar)
         }
     }
-
+    Connections{
-    FluHttpInterceptor{
+        target: TranslateHelper
-        id:interceptor
+        function onCurrentChanged(){
-        function onIntercept(request){
+            SettingsHelper.saveLanguage(TranslateHelper.current)
-            if(request.method === "get"){
-                request.params["method"] = "get"
-            }
-            if(request.method === "post"){
-                request.params["method"] = "post"
-            }
-            request.headers["token"] ="yyds"
-            request.headers["os"] ="pc"
-            console.debug(JSON.stringify(request))
-            return request
         }
     }
-
     Component.onCompleted: {
-        FluApp.init(app)
+        Network.openLog = false
-        FluApp.vsync = SettingsHelper.getVsync()
+        Network.setInterceptor(function(param){
+            param.addHeader("Token","000000000000000000000")
+        })
+        FluApp.init(app,Qt.locale(TranslateHelper.current))
+        FluApp.windowIcon = "qrc:/example/res/image/favicon.ico"
+        FluApp.useSystemAppBar = SettingsHelper.getUseSystemAppBar()
         FluTheme.darkMode = SettingsHelper.getDarkMode()
-        FluTheme.enableAnimation = true
+        FluTheme.animationEnabled = true
-        FluApp.routes = {
+        FluRouter.routes = {
             "/":"qrc:/example/qml/window/MainWindow.qml",
             "/about":"qrc:/example/qml/window/AboutWindow.qml",
             "/login":"qrc:/example/qml/window/LoginWindow.qml",
             "/hotload":"qrc:/example/qml/window/HotloadWindow.qml",
+            "/crash":"qrc:/example/qml/window/CrashWindow.qml",
             "/singleTaskWindow":"qrc:/example/qml/window/SingleTaskWindow.qml",
             "/standardWindow":"qrc:/example/qml/window/StandardWindow.qml",
             "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml",
             "/pageWindow":"qrc:/example/qml/window/PageWindow.qml"
         }
-        FluApp.initialRoute = "/"
+        var args = Qt.application.arguments
-        FluApp.httpInterceptor = interceptor
+        if(args.length>=2 && args[1].startsWith("-crashed=")){
-        FluApp.run()
+            FluRouter.navigate("/crash",{crashFilePath:args[1].replace("-crashed=","")})
+        }else{
+            FluRouter.navigate("/")
+        }
     }
 }

example/qml/chart/T_BarChart.qml

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

example/qml/chart/T_BubbleChart.qml

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

example/qml/chart/T_LineChart.qml

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

example/qml/chart/T_PieChart.qml

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

example/qml/chart/T_PolarAreaChart.qml

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

example/qml/chart/T_RadarChart.qml

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

example/qml/chart/T_ScatterChart.qml

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