update

CMakeLists: simplify code.

.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]
-        qt_ver: [6.5.0]
+        os: [macos-latest]
+        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]
-        qt_ver: [6.5.0]
+        os: [ubuntu-latest]
+        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
@@ -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
@@ -101,4 +101,4 @@ jobs:
           file: ./action-cli/installer.exe
           asset_name: ${{ env.fileName }}_${{ github.ref_name }}_${{ matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.exe
           tag: ${{ github.ref }}
-          overwrite: true
+          overwrite: true

.github/workflows/windows-qt5.yml

@@ -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%
@@ -88,4 +88,4 @@ jobs:
           file: ./action-cli/installer.exe
           asset_name: ${{ env.fileName }}_${{ github.ref_name }}_${{ matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.exe
           tag: ${{ github.ref }}
-          overwrite: true
+          overwrite: true

.github/workflows/windows.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%
@@ -90,4 +95,4 @@ jobs:
           file: ./action-cli/installer.exe
           asset_name: ${{ env.fileName }}_${{ github.ref_name }}_${{ matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.exe
           tag: ${{ github.ref }}
-          overwrite: true 
+          overwrite: true 

.gitignore

@@ -40,4 +40,6 @@ cmake-build-*
 example/Version.h
 
 action-cli
-dist
+dist
+
+*.qm

.gitmodules

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

CMakeLists.txt

@@ -1,41 +1,34 @@
 cmake_minimum_required(VERSION 3.20)
 
-project(FluentUI VERSION 0.1 LANGUAGES CXX)
+project(FluentUI VERSION 1.0)
 
-set(FLUENTUI_DIRECTORY ${CMAKE_CURRENT_LIST_DIR})
-list(APPEND CMAKE_MODULE_PATH ${FLUENTUI_DIRECTORY}/.cmake/)
+if(MSVC)
+    #让Release也生成pdb文件
+    set(CMAKE_SHARED_LINKER_FLAGS_RELEASE "${CMAKE_SHARED_LINKER_FLAGS_RELEASE} /DEBUG /OPT:REF /OPT:ICF")
+    set(CMAKE_EXE_LINKER_FLAGS_RELEASE "${CMAKE_EXE_LINKER_FLAGS_RELEASE} /DEBUG /OPT:REF /OPT:ICF")
+endif()
+
+list(APPEND CMAKE_MODULE_PATH ${CMAKE_SOURCE_DIR}/.cmake/)
 
 include(GetGitRevisionDescription)
 
 option(FLUENTUI_BUILD_EXAMPLES "Build FluentUI demo applications." ON)
-option(FLUENTUI_BUILD_STATIC_LIB "Build static library." OFF)
 
 find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core)
 find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Core)
 
-set(QT_SDK_DIR "${Qt${QT_VERSION_MAJOR}_DIR}")
-cmake_path(GET QT_SDK_DIR PARENT_PATH QT_SDK_DIR)
-cmake_path(GET QT_SDK_DIR PARENT_PATH QT_SDK_DIR)
-cmake_path(GET QT_SDK_DIR PARENT_PATH QT_SDK_DIR)
-
-#设置QML插件输出目录，可以通过外部设置，如果外部没有设置就默认到<QT_SDK_DIR_PATH>\qml\FluentUI目录下
-set(FLUENTUI_QML_PLUGIN_DIRECTORY "" CACHE PATH "Path to FluentUI plugin")
-if(NOT FLUENTUI_QML_PLUGIN_DIRECTORY)
-    set(FLUENTUI_QML_PLUGIN_DIRECTORY ${QT_SDK_DIR}/qml/FluentUI)
-endif()
-
 add_subdirectory(src)
-add_subdirectory(zxing-cpp)
+
+#Release也支持日志打印代码位置
+target_compile_definitions(fluentuiplugin
+    PRIVATE
+    QT_MESSAGELOGCONTEXT
+)
 
 if (FLUENTUI_BUILD_EXAMPLES)
     add_subdirectory(example)
 endif ()
 
-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,15 +1,10 @@
 cmake_minimum_required(VERSION 3.20)
 
-project(example VERSION 0.1 LANGUAGES CXX)
+project(example VERSION 1.0 LANGUAGES CXX)
 
 #配置通用编译
+set(CMAKE_CXX_STANDARD 17)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
-if(APPLE)
-    set(CMAKE_OSX_ARCHITECTURES "arm64;x86_64" CACHE STRING "" FORCE)
-endif()
-
-#导入exmaple的QML位置，不然import example有时候会爆红
-set(QML_IMPORT_PATH ${CMAKE_BINARY_DIR}/example CACHE STRING "Qt Creator extra QML import paths" FORCE)
 
 #判断FluentUI库类型
 if(FLUENTUI_BUILD_STATIC_LIB)
@@ -23,9 +18,13 @@ else()
     set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/release)
 endif()
 
-#获取文件路径分隔符（解决执行命令的时候有些平台会报错）
-file(TO_CMAKE_PATH "/" PATH_SEPARATOR)
+if(APPLE)
+    set(APPLICATION_DIR_PATH ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/${PROJECT_NAME}.app/Contents/MacOS)
+else()
+    set(APPLICATION_DIR_PATH ${CMAKE_RUNTIME_OUTPUT_DIRECTORY})
+endif()
 
+#导入Qt相关依赖包
 find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Quick Svg Network)
 find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Quick Svg Network)
 
@@ -37,10 +36,25 @@ else()
     set(CMAKE_AUTOUIC ON)
 endif()
 
+#国际化
+find_program(QT_LUPDATE NAMES lupdate)
+find_program(QT_LRELEASE NAMES lrelease)
+if (NOT EXISTS ${CMAKE_CURRENT_LIST_DIR}/${PROJECT_NAME}_en_US.qm)
+    execute_process(COMMAND ${QT_LUPDATE} ${CMAKE_CURRENT_LIST_DIR} -ts ${PROJECT_NAME}_en_US.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR})
+    execute_process(COMMAND ${QT_LRELEASE} ${PROJECT_NAME}_en_US.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR})
+endif ()
+if (NOT EXISTS ${CMAKE_CURRENT_LIST_DIR}/${PROJECT_NAME}_zh_CN.qm)
+    execute_process(COMMAND ${QT_LUPDATE} ${CMAKE_CURRENT_LIST_DIR} -ts ${PROJECT_NAME}_zh_CN.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR})
+    execute_process(COMMAND ${QT_LRELEASE} ${PROJECT_NAME}_zh_CN.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR})
+endif ()
+
+file(GLOB QM_FILE_PATHS ${CMAKE_CURRENT_LIST_DIR}/ *.qm)
+file(COPY ${QM_FILE_PATHS} DESTINATION ${APPLICATION_DIR_PATH}/i18n)
+
 ##生成版本信息头文件
-set(HEADER_FILE_VERSION_PATH ${FLUENTUI_DIRECTORY}/example/Version.h)
+set(HEADER_FILE_VERSION_PATH ${CMAKE_SOURCE_DIR}/${PROJECT_NAME}/Version.h)
 configure_file(
-    ${FLUENTUI_DIRECTORY}/.cmake/Version.h.in
+    ${CMAKE_SOURCE_DIR}/.cmake/Version.h.in
     ${HEADER_FILE_VERSION_PATH}
 )
 
@@ -51,20 +65,28 @@ foreach(filepath ${CPP_FILES})
     list(APPEND sources_files ${filename})
 endforeach(filepath)
 
+if(WIN32)
+    list(APPEND sources_files "src/app_dmp.h")
+endif()
+
 if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
     #遍历所有qml文件
-    file(GLOB_RECURSE QML_PATHS *.qml)
+    file(GLOB_RECURSE QML_PATHS *.qml qmldir)
     foreach(filepath ${QML_PATHS})
         string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
-        if(${filepath} MATCHES "Qt${QT_VERSION_MAJOR}/")
-            string(REPLACE "qml-Qt${QT_VERSION_MAJOR}" "qml" filealias ${filename})
+        if(${filepath} MATCHES "qml-Qt6")
+            string(REPLACE "qml-Qt6" "qml" filealias ${filename})
             set_source_files_properties(${filename} PROPERTIES QT_RESOURCE_ALIAS ${filealias})
-            list(APPEND qml_files ${filename})
+            if(${filename} MATCHES "qmldir")
+                list(APPEND resource_files ${filename})
+            else()
+                list(APPEND qml_files ${filename})
+            endif()
         endif()
     endforeach(filepath)
 
     #遍历所有资源文件
-    file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp *.obj qmldir)
+    file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp *.in)
     foreach(filepath ${RES_PATHS})
         string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
         list(APPEND resource_files ${filename})
@@ -74,88 +96,97 @@ endif()
 #如果是Windows平台，则生成rc文件，还有inno setup脚本文件
 set(EXAMPLE_VERSION_RC_PATH "")
 if(WIN32)
-    set(EXAMPLE_VERSION_RC_PATH ${CMAKE_BINARY_DIR}/version_${PROJECT_NAME}.rc)
+    set(EXAMPLE_VERSION_RC_PATH ${CMAKE_CURRENT_BINARY_DIR}/version_${PROJECT_NAME}.rc)
     configure_file(
-        ${FLUENTUI_DIRECTORY}/.cmake/version_exe.rc.in
+        ${CMAKE_SOURCE_DIR}/.cmake/version_exe.rc.in
         ${EXAMPLE_VERSION_RC_PATH}
     )
-    configure_file(
-        ${FLUENTUI_DIRECTORY}/.cmake/InstallerScript.iss.in
-        ${CMAKE_SOURCE_DIR}/action-cli/InstallerScript.iss
-    )
+configure_file(
+    ${CMAKE_SOURCE_DIR}/.cmake/InstallerScript.iss.in
+    ${CMAKE_SOURCE_DIR}/action-cli/InstallerScript.iss
+)
 endif()
 
 #添加可执行文件
 if (WIN32)
-    add_executable(example
+    add_executable(${PROJECT_NAME}
         ${sources_files}
         ${EXAMPLE_VERSION_RC_PATH}
     )
 else ()
-    add_executable(example
+    add_executable(${PROJECT_NAME}
         ${sources_files}
     )
 endif ()
 
+#复制程序运行所需要的动态库
 if(WIN32)
-    #复制动态库到可执行文件同级目录下
-    if(CMAKE_SIZEOF_VOID_P EQUAL 4)
-        set(3RDPARTY_ARCH_DIR ${CMAKE_SOURCE_DIR}/3rdparty/Win_x86)
-    elseif(CMAKE_SIZEOF_VOID_P EQUAL 8)
-        set(3RDPARTY_ARCH_DIR ${CMAKE_SOURCE_DIR}/3rdparty/Win_x64)
-    endif()
     if(MSVC)
-        set(DLLPATH ${3RDPARTY_ARCH_DIR}/msvc/*.dll)
+        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)
-        set(DLLPATH ${3RDPARTY_ARCH_DIR}/mingw/*.dll)
+        file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/mingw/*.dll)
     endif()
-    string(REPLACE "/" ${PATH_SEPARATOR} DLLPATH "${DLLPATH}")
-    file(GLOB DLL_FILES ${DLLPATH})
     add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
         COMMAND ${CMAKE_COMMAND} -E copy
-        ${DLL_FILES}
+        ${3RDPARTY_DLL_DIR}
         ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}
     )
 endif()
 
+#复制FluentUI源码到运行目录下，用于脚手架生成
+file(MAKE_DIRECTORY ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/source/)
+file(COPY ${CMAKE_SOURCE_DIR}/src/ DESTINATION ${APPLICATION_DIR_PATH}/source/)
+
 if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
-    #添加qml模块
-    qt_add_qml_module(example
-        URI "example"
+    #如果是Qt6.2以上，则使用qt_add_qml_module添加资源文件
+    qt_add_qml_module(${PROJECT_NAME}
+        URI ${PROJECT_NAME}
         VERSION 1.0
         QML_FILES ${qml_files}
         RESOURCES ${resource_files}
         RESOURCE_PREFIX "/"
     )
 else()
-    target_include_directories(example PRIVATE
+    #如果是Qt6.2以下，则使用qrc添加资源文件
+    target_include_directories(${PROJECT_NAME} PRIVATE
         ${CMAKE_CURRENT_SOURCE_DIR}
     )
-target_sources(example PRIVATE example.qrc)
+target_sources(${PROJECT_NAME} PRIVATE ${PROJECT_NAME}.qrc)
 endif()
 
 #导入component头文件,不然通过QML_NAMED_ELEMENT生成的c++类会找不到头文件报错
-target_include_directories(example PRIVATE
+target_include_directories(${PROJECT_NAME} PRIVATE
     ${CMAKE_CURRENT_SOURCE_DIR}/src/component
 )
 
-#如何是静态库则需要手动注册插件，导入FluentUI.h头文件
+#如果是静态库则需要手动注册插件，导入FluentUI.h头文件
 if(FLUENTUI_BUILD_STATIC_LIB)
-    target_include_directories(example PRIVATE
+    target_include_directories(${PROJECT_NAME} PRIVATE
         ${CMAKE_SOURCE_DIR}/src
     )
 endif()
 
 #设置属性
-set_target_properties(example PROPERTIES
-    MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com
+set_target_properties(${PROJECT_NAME} PROPERTIES
+    MACOSX_BUNDLE_GUI_IDENTIFIER my.${PROJECT_NAME}.com
     MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
     MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
     MACOSX_BUNDLE TRUE
     WIN32_EXECUTABLE TRUE
 )
 
-target_link_libraries(example PRIVATE
+#Release也支持日志打印代码位置
+target_compile_definitions(${PROJECT_NAME}
+    PRIVATE
+    QT_MESSAGELOGCONTEXT
+)
+
+#目标文件链接库
+target_link_libraries(${PROJECT_NAME} PRIVATE
     Qt${QT_VERSION_MAJOR}::Quick
     Qt${QT_VERSION_MAJOR}::Svg
     Qt${QT_VERSION_MAJOR}::Network
@@ -163,7 +194,7 @@ target_link_libraries(example PRIVATE
 )
 
 #安装
-install(TARGETS example
+install(TARGETS ${PROJECT_NAME}
     BUNDLE DESTINATION .
     LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
     RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}

example/example.qrc

@@ -134,7 +134,6 @@
         <file>qml/page/T_CalendarPicker.qml</file>
         <file>qml/page/T_Captcha.qml</file>
         <file>qml/page/T_Carousel.qml</file>
-        <file>qml/page/T_Chart.qml</file>
         <file>qml/page/T_CheckBox.qml</file>
         <file>qml/page/T_ColorPicker.qml</file>
         <file>qml/page/T_ComboBox.qml</file>
@@ -143,7 +142,6 @@
         <file>qml/page/T_Expander.qml</file>
         <file>qml/page/T_FlipView.qml</file>
         <file>qml/page/T_Home.qml</file>
-        <file>qml/page/T_Http.qml</file>
         <file>qml/page/T_Image.qml</file>
         <file>qml/page/T_InfoBar.qml</file>
         <file>qml/page/T_Menu.qml</file>
@@ -156,10 +154,9 @@
         <file>qml/page/T_RatingControl.qml</file>
         <file>qml/page/T_Rectangle.qml</file>
         <file>qml/page/T_RemoteLoader.qml</file>
-        <file>qml/page/T_Screenshot.qml</file>
         <file>qml/page/T_Settings.qml</file>
         <file>qml/page/T_Slider.qml</file>
-        <file>qml/page/T_StatusView.qml</file>
+        <file>qml/page/T_StatusLayout.qml</file>
         <file>qml/page/T_TableView.qml</file>
         <file>qml/page/T_TabView.qml</file>
         <file>qml/page/T_Text.qml</file>
@@ -183,11 +180,32 @@
         <file>res/image/bg_scenic.png</file>
         <file>res/image/image_1.jpg</file>
         <file>qml/window/PageWindow.qml</file>
-        <file>qml/page/T_StaggeredView.qml</file>
+        <file>qml/page/T_StaggeredLayout.qml</file>
         <file>qml/viewmodel/SettingsViewModel.qml</file>
         <file>qml/viewmodel/TextBoxViewModel.qml</file>
         <file>qml/page/T_Clip.qml</file>
         <file>qml/page/T_3D.qml</file>
-        <file>qml/global/Lang.qml</file>
+        <file>qml/page/T_Network.qml</file>
+        <file>qml/page/T_ShortcutPicker.qml</file>
+        <file>qml/chart/T_BarChart.qml</file>
+        <file>qml/chart/T_LineChart.qml</file>
+        <file>qml/chart/T_PieChart.qml</file>
+        <file>qml/chart/T_RadarChart.qml</file>
+        <file>qml/chart/T_ScatterChart.qml</file>
+        <file>qml/chart/T_BubbleChart.qml</file>
+        <file>qml/chart/T_PolarAreaChart.qml</file>
+        <file>res/image/ic_crash.png</file>
+        <file>qml/window/CrashWindow.qml</file>
+        <file>qml/page/T_SplitLayout.qml</file>
+        <file>qml/window/FluentInitalizrWindow.qml</file>
+        <file>res/template/CMakeLists.txt.in</file>
+        <file>res/template/src/App.qml.in</file>
+        <file>res/template/src/CMakeLists.txt.in</file>
+        <file>res/template/src/en_US.ts.in</file>
+        <file>res/template/src/logo.ico.in</file>
+        <file>res/template/src/main.cpp.in</file>
+        <file>res/template/src/main.qml.in</file>
+        <file>res/template/src/qml.qrc.in</file>
+        <file>res/template/src/zh_CN.ts.in</file>
     </qresource>
 </RCC>

example/qml-Qt6/App.qml

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

example/qml-Qt6/chart/T_BarChart.qml

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

example/qml-Qt6/chart/T_BubbleChart.qml

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

example/qml-Qt6/chart/T_LineChart.qml

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

example/qml-Qt6/chart/T_PieChart.qml

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

example/qml-Qt6/chart/T_PolarAreaChart.qml

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

example/qml-Qt6/chart/T_RadarChart.qml

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

example/qml-Qt6/chart/T_ScatterChart.qml

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

example/qml-Qt6/component/CodeExpander.qml

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

example/qml-Qt6/global/ItemsFooter.qml

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

example/qml-Qt6/global/ItemsOriginal.qml

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

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

@@ -10,7 +10,7 @@ import Qt3D.Extras
 import QtQuick.Scene3D
 import QtQuick.Dialogs
 import Qt.labs.platform
-import "qrc:///example/qml/component"
+import "../component"
 
 FluContentPage{
 
@@ -55,7 +55,7 @@ FluContentPage{
             }
             PhongMaterial {
                 id: material
-                ambient: color_picker.colorValue
+                ambient: color_picker.current
             }
             Transform{
                 id:transform
@@ -92,10 +92,7 @@ FluContentPage{
             }
             FluColorPicker{
                 id:color_picker
-                enableAlphaChannel:false
-                Component.onCompleted: {
-                    setColor("gray")
-                }
+                current: "gray"
             }
         }
 

example/qml-Qt6/page/T_Acrylic.qml

@@ -3,11 +3,11 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"Acrylic"
+    title: qsTr("Acrylic")
 
     RowLayout{
         spacing: 10
@@ -64,7 +64,7 @@ FluScrollablePage{
                 width: 200
                 height: 200
                 tintOpacity: slider_tint_opacity.value/100
-                tintColor: color_picker.colorValue
+                tintColor: color_picker.current
                 blurRadius: slider_blur_radius.value
                 x:(image.width-width)/2
                 y:(image.height-height)/2
@@ -77,6 +77,7 @@ FluScrollablePage{
                 MouseArea {
                     property point clickPos: Qt.point(0,0)
                     id:drag_area
+                    preventStealing: true
                     anchors.fill: parent
                     onPressed: (mouse)=>{
                                    clickPos = Qt.point(mouse.x, mouse.y)

example/qml-Qt6/page/T_Awesome.qml

@@ -6,11 +6,11 @@ import FluentUI
 
 FluContentPage {
 
-    title:"Awesome"
+    title: qsTr("Awesome")
 
     FluTextBox{
         id:text_box
-        placeholderText: "请输入关键字"
+        placeholderText: qsTr("Please enter a keyword")
         anchors{
             topMargin: 20
             top:parent.top
@@ -18,7 +18,7 @@ FluContentPage {
     }
 
     FluFilledButton{
-        text:"搜索"
+        text: qsTr("Search")
         anchors{
             left: text_box.right
             verticalCenter: text_box.verticalCenter
@@ -53,7 +53,7 @@ FluContentPage {
                 onClicked: {
                     var text  ="FluentIcons."+modelData.name;
                     FluTools.clipText(text)
-                    showSuccess("您复制了 "+text)
+                    showSuccess(qsTr("You Copied ")+text)
                 }
             }
             FluText {

example/qml-Qt6/page/T_Badge.qml

@@ -3,16 +3,16 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"Badge"
+    title: qsTr("Badge")
 
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 106
+        height: 120
         paddings: 10
 
         Column{
@@ -20,11 +20,13 @@ FluScrollablePage{
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
+                right: parent.right
             }
             FluText{
-                text:"一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数"
+                wrapMode: Text.WrapAnywhere
+                width: parent.width
+                text: qsTr("It usually appears in the upper right corner of the notification icon or avatar to display the number of messages that need to be processed")
             }
-
             Row{
                 spacing: 20
                 Rectangle{

example/qml-Qt6/page/T_BreadcrumbBar.qml

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

example/qml-Qt6/page/T_Buttons.qml

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

example/qml-Qt6/page/T_CalendarPicker.qml

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

example/qml-Qt6/page/T_Captcha.qml

@@ -3,14 +3,14 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"Captcha"
+    title: qsTr("Captcha")
 
     FluCaptcha{
-        id:captcha
+        id: captcha
         Layout.topMargin: 20
         ignoreCase:switch_case.checked
         MouseArea{
@@ -23,7 +23,7 @@ FluScrollablePage{
     }
 
     FluButton{
-        text:"Refresh"
+        text: qsTr("Refresh")
         Layout.topMargin: 20
         onClicked: {
             captcha.refresh()
@@ -31,8 +31,8 @@ FluScrollablePage{
     }
 
     FluToggleSwitch{
-        id:switch_case
-        text:"Ignore Case"
+        id: switch_case
+        text: qsTr("Ignore Case")
         checked: true
         Layout.topMargin: 10
     }
@@ -42,16 +42,17 @@ FluScrollablePage{
         Layout.topMargin: 10
         FluTextBox{
             id:text_box
-            placeholderText: "请输入验证码"
+            placeholderText: qsTr("Please enter a verification code")
+            Layout.preferredWidth: 240
         }
         FluButton{
             text:"verify"
             onClicked: {
                 var success =  captcha.verify(text_box.text)
                 if(success){
-                    showSuccess("验证码正确")
+                    showSuccess(qsTr("The verification code is correct"))
                 }else{
-                    showError("错误验证，请重新输入")
+                    showError(qsTr("Error validation, please re-enter"))
                 }
             }
         }

example/qml-Qt6/page/T_Carousel.qml

@@ -3,11 +3,11 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"Carousel"
+    title: qsTr("Carousel")
 
     ListModel{
         id:data_model
@@ -34,7 +34,7 @@ FluScrollablePage{
                 left:parent.left
             }
             FluText{
-                text:"轮播图，支持无限轮播，无限滑动，用ListView实现的组件"
+                text: qsTr("Carousel map, support infinite carousel, infinite swipe, and components implemented with ListView")
             }
             Item{
                 width: 400

example/qml-Qt6/page/T_Chart.qml

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

example/qml-Qt6/page/T_CheckBox.qml

@@ -3,11 +3,11 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"CheckBox"
+    title: qsTr("CheckBox")
 
     FluArea{
         Layout.fillWidth: true
@@ -16,7 +16,7 @@ FluScrollablePage{
         Layout.topMargin: 20
 
         FluText{
-            text:"A 2-state CheckBox"
+            text: qsTr("A 2-state CheckBox")
         }
 
         Row{
@@ -30,11 +30,11 @@ FluScrollablePage{
             }
             FluCheckBox{
                 disabled: check_box_switch_two.checked
-                text:"Right"
+                text: qsTr("Right")
             }
             FluCheckBox{
                 disabled: check_box_switch_two.checked
-                text:"Left"
+                text: qsTr("Left")
                 textRight: false
             }
         }
@@ -44,7 +44,7 @@ FluScrollablePage{
                 right: parent.right
                 verticalCenter: parent.verticalCenter
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
@@ -62,7 +62,7 @@ FluScrollablePage{
         Layout.topMargin: 20
 
         FluText{
-            text:"A 3-state CheckBox"
+            text: qsTr("A 3-state CheckBox")
         }
 
         Row{
@@ -73,7 +73,7 @@ FluScrollablePage{
             }
             FluCheckBox{
                 property int count: 1
-                text:"Three State"
+                text: qsTr("Three State")
                 disabled: check_box_switch_three.checked
                 clickListener: function(){
                     var flag = count%3
@@ -94,12 +94,12 @@ FluScrollablePage{
             }
         }
         FluToggleSwitch{
-            id:check_box_switch_three
+            id:  check_box_switch_three
             anchors{
                 right: parent.right
                 verticalCenter: parent.verticalCenter
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{

example/qml-Qt6/page/T_Clip.qml

@@ -3,11 +3,11 @@ import QtQuick.Layouts
 import QtQuick.Controls
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"Clip"
+    title: qsTr("Clip")
 
     FluArea{
         Layout.fillWidth: true
@@ -22,8 +22,7 @@ FluScrollablePage{
                 left: parent.left
             }
             FluText{
-                text:"配合图片使用(software渲染下该组件将没有效果)"
-                font: FluTextStyle.Subtitle
+                text: qsTr("Use with images (this component will have no effect under software rendering)")
                 Layout.topMargin: 20
             }
             RowLayout{
@@ -31,7 +30,7 @@ FluScrollablePage{
                 FluClip{
                     width: 50
                     height: 50
-                    radius:[25,0,25,25]
+                    radius: [25,0,25,25]
                     Image {
                         asynchronous: true
                         anchors.fill: parent
@@ -42,7 +41,7 @@ FluScrollablePage{
                 FluClip{
                     width: 50
                     height: 50
-                    radius:[10,10,10,10]
+                    radius: [10,10,10,10]
                     Image {
                         asynchronous: true
                         anchors.fill: parent
@@ -53,7 +52,7 @@ FluScrollablePage{
                 FluClip{
                     width: 50
                     height: 50
-                    radius:[25,25,25,25]
+                    radius: [25,25,25,25]
                     Image {
                         asynchronous: true
                         anchors.fill: parent
@@ -64,7 +63,7 @@ FluScrollablePage{
                 FluClip{
                     width: 50
                     height: 50
-                    radius:[0,25,25,25]
+                    radius: [0,25,25,25]
                     Image {
                         asynchronous: true
                         anchors.fill: parent
@@ -76,7 +75,7 @@ FluScrollablePage{
             FluClip{
                 width: 1920/5
                 height: 1200/5
-                radius:[8,8,8,8]
+                radius: [8,8,8,8]
                 Image {
                     asynchronous: true
                     source: "qrc:/example/res/image/banner_1.jpg"

example/qml-Qt6/page/T_ColorPicker.qml

@@ -3,57 +3,31 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"ColorPicker"
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 280
-        Layout.topMargin: 20
-        paddings: 10
-        ColumnLayout{
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left:parent.left
-            }
-            FluText{
-                text:"此颜色组件是Github上的开源项目"
-            }
-            FluTextButton{
-                text:"https://github.com/rshest/qml-colorpicker"
-                onClicked: {
-                    Qt.openUrlExternally(text)
-                }
-            }
-            FluColorView{
-
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluColorView{
-
-}'
-    }
+    title: qsTr("ColorPicker")
 
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
         height: 60
         paddings: 10
-
         RowLayout{
             FluText{
-                text:"点击选择颜色->"
+                text: qsTr("Click to Select a Color - >")
                 Layout.alignment: Qt.AlignVCenter
             }
             FluColorPicker{
-
+                cancelText: qsTr("Cancel")
+                okText: qsTr("OK")
+                titleText: qsTr("Color Picker")
+                editText: qsTr("Edit Color")
+                redText: qsTr("Red")
+                greenText: qsTr("Green")
+                blueText: qsTr("Blue")
+                opacityText: qsTr("Opacity")
             }
         }
     }

example/qml-Qt6/page/T_ComboBox.qml

@@ -3,11 +3,11 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"ComboBox"
+    title: qsTr("ComboBox")
 
     FluArea{
         Layout.fillWidth: true
@@ -32,6 +32,30 @@ FluScrollablePage{
         }
     }
 
+    FluArea {
+        Layout.fillWidth: true
+        height: 80
+        paddings: 5
+        Layout.topMargin: 20
+        Column{
+            spacing: 5
+            anchors.verticalCenter: parent.verticalCenter
+            FluText{
+                text: "disabled=true"
+                x:10
+            }
+            FluComboBox {
+                disabled: true
+                model: ListModel {
+                    id: model_2
+                    ListElement { text: "Banana" }
+                    ListElement { text: "Apple" }
+                    ListElement { text: "Coconut" }
+                }
+            }
+        }
+    }
+
     FluArea{
         Layout.fillWidth: true
         height: 80
@@ -47,14 +71,14 @@ FluScrollablePage{
             FluComboBox {
                 editable: true
                 model: ListModel {
-                    id: model_2
+                    id: model_3
                     ListElement { text: "Banana" }
                     ListElement { text: "Apple" }
                     ListElement { text: "Coconut" }
                 }
                 onAccepted: {
                     if (find(editText) === -1)
-                        model_2.append({text: editText})
+                        model_3.append({text: editText})
                 }
             }
         }

example/qml-Qt6/page/T_DatePicker.qml

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

example/qml-Qt6/page/T_Dialog.qml

@@ -3,11 +3,11 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"Dialog"
+    title: qsTr("Dialog")
 
     FluArea{
         Layout.fillWidth: true
@@ -16,8 +16,7 @@ FluScrollablePage{
         Layout.topMargin: 20
         FluButton{
             anchors.verticalCenter: parent.verticalCenter
-            Layout.topMargin: 20
-            text:"Show Double Button Dialog"
+            text: qsTr("Show Double Button Dialog")
             onClicked: {
                 double_btn_dialog.open()
             }
@@ -28,33 +27,33 @@ FluScrollablePage{
         Layout.topMargin: -1
         code:'FluContentDialog{
     id:dialog
-    title:"友情提示"
-    message:"确定要退出程序么？"
-    negativeText:"取消"
+    title: qsTr("Friendly Reminder")
+    message: qsTr("Are you sure you want to opt out?")
+    negativeText: qsTr("Cancel")
     buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
     onNegativeClicked:{
-        showSuccess("点击取消按钮")
+        showSuccess(qsTr("Click the Cancel Button"))
     }
-    positiveText:"确定"
+    positiveText: qsTr("OK")
     onPositiveClicked:{
-        showSuccess("点击确定按钮")
-    }
+        showSuccess(qsTr("Click the OK Button"))
+        }
     }
     dialog.open()'
     }
 
     FluContentDialog{
         id:double_btn_dialog
-        title:"友情提示"
-        message:"确定要退出程序么？"
+        title: qsTr("Friendly Reminder")
+        message: qsTr("Are you sure you want to opt out?")
         buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
-        negativeText:"取消"
-        onNegativeClicked:{
-            showSuccess("点击取消按钮")
+        negativeText: qsTr("Cancel")
+        onNegativeClicked: {
+            showSuccess(qsTr("Click the Cancel Button"))
         }
-        positiveText:"确定"
+        positiveText: qsTr("OK")
         onPositiveClicked:{
-            showSuccess("点击确定按钮")
+            showSuccess(qsTr("Click the OK Button"))
         }
     }
 
@@ -65,8 +64,7 @@ FluScrollablePage{
         Layout.topMargin: 20
         FluButton{
             anchors.verticalCenter: parent.verticalCenter
-            Layout.topMargin: 20
-            text:"Show Triple Button Dialog"
+            text: qsTr("Show Triple Button Dialog")
             onClicked: {
                 triple_btn_dialog.open()
             }
@@ -76,43 +74,159 @@ FluScrollablePage{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluContentDialog{
-    id:dialog
-    title:"友情提示"
-    message:"确定要退出程序么？"
-    negativeText:"取消"
+    id: dialog
+    title: qsTr("Friendly Reminder")
+    message: qsTr("Are you sure you want to opt out?")
+    negativeText: qsTr("Cancel")
     buttonFlags: FluContentDialogType.NeutralButton | FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
-    negativeText:"取消"
-    onNegativeClicked:{
-        showSuccess("点击取消按钮")
+    negativeText: qsTr("Cancel")
+    onNegativeClicked: {
+        showSuccess(qsTr("Click the Cancel Button"))
     }
-    positiveText:"确定"
-    onPositiveClicked:{
-        showSuccess("点击确定按钮")
+    positiveText: qsTr("OK")
+    onPositiveClicked: {
+        showSuccess(qsTr("Click the OK Button"))
     }
-    neutralText:"最小化"
-    onNeutralClicked:{
-        showSuccess("点击最小化按钮")
+    neutralText: qsTr("Minimize")
+    onNeutralClicked: {
+        showSuccess(qsTr("Click Minimize"))
         }
     }
     dialog.open()'
     }
 
     FluContentDialog{
-        id:triple_btn_dialog
-        title:"友情提示"
-        message:"确定要退出程序么？"
+        id: triple_btn_dialog
+        title: qsTr("Friendly Reminder")
+        message: qsTr("Are you sure you want to opt out?")
         buttonFlags: FluContentDialogType.NeutralButton | FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
-        negativeText:"取消"
-        onNegativeClicked:{
-            showSuccess("点击取消按钮")
+        negativeText: qsTr("Cancel")
+        onNegativeClicked: {
+            showSuccess(qsTr("Click the Cancel Button"))
         }
-        positiveText:"确定"
-        onPositiveClicked:{
-            showSuccess("点击确定按钮")
+        positiveText: qsTr("OK")
+        onPositiveClicked: {
+            showSuccess(qsTr("Click the OK Button"))
         }
-        neutralText:"最小化"
-        onNeutralClicked:{
-            showSuccess("点击最小化按钮")
+        neutralText: qsTr("Minimize")
+        onNeutralClicked: {
+            showSuccess(qsTr("Click Minimize"))
+        }
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        height: 100
+        paddings: 10
+        Layout.topMargin: 20
+        FluButton{
+            anchors.top: parent.top
+            anchors.topMargin: 5
+            text: qsTr("Custom Content Dialog")
+            onClicked: {
+                custom_btn_dialog.open()
+            }
+        }
+        FluButton{
+            anchors.top: parent.top
+            anchors.topMargin: 48
+            text: qsTr("Custom Content Dialog2")
+            onClicked: {
+                custom_btn_dialog2.open()
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluContentDialog{
+    id: dialog
+    title: qsTr("Friendly Reminder")
+    message: qsTr("Data is loading, please wait...")
+    negativeText: qsTr("Unload")
+    contentDelegate: Component{
+        Item{
+            width: parent.width
+            height: 80
+            FluProgressRing{
+                anchors.centerIn: parent
+            }
+        }
+    }
+    onNegativeClicked: {
+        showSuccess(qsTr("Click the Cancel Button"))
+    }
+    positiveText :qsTr("OK")
+    onPositiveClicked: {
+        showSuccess(qsTr("Click the OK Button"))
+        }
+    }
+    dialog.open()'
+    }
+
+    FluContentDialog{
+        id: custom_btn_dialog
+        title: qsTr("Friendly Reminder")
+        message: qsTr("Data is loading, please wait...")
+        negativeText: qsTr("Unload")
+        contentDelegate: Component{
+            Item{
+                implicitWidth: parent.width
+                implicitHeight: 80
+                FluProgressRing{
+                    anchors.centerIn: parent
+                }
+            }
+        }
+        onNegativeClicked: {
+            showSuccess(qsTr("Click the Cancel Button"))
+        }
+        positiveText: qsTr("OK")
+        onPositiveClickListener: function(){
+            showError(qsTr("Test the InfoBar level on top of the Popup"))
+        }
+    }
+
+    FluContentDialog{
+        id:custom_btn_dialog2
+        title: qsTr("Line Chart")
+        contentDelegate: Component{
+            Item{
+                implicitWidth: parent.width
+                implicitHeight: 300
+                FluChart{
+                    anchors.fill: parent
+                    chartType: 'line'
+                    chartData: { return {
+                            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                            datasets: [{
+                                    label: 'My First Dataset',
+                                    data: [65, 59, 80, 81, 56, 55, 40],
+                                    fill: false,
+                                    borderColor: 'rgb(75, 192, 192)',
+                                    tension: 0.1
+                                }]
+                        }
+                    }
+                    chartOptions: { return {
+                            maintainAspectRatio: false,
+                            title: {
+                                display: true,
+                                text: 'Chart.js Line Chart - Stacked'
+                            },
+                            tooltips: {
+                                mode: 'index',
+                                intersect: false
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        buttonFlags: FluContentDialogType.PositiveButton
+        positiveText: qsTr("OK")
+        onPositiveClicked: {
+            showSuccess(qsTr("Click the OK Button"))
         }
     }
 }

example/qml-Qt6/page/T_Expander.qml

@@ -3,11 +3,11 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"Expander"
+    title: qsTr("Expander")
 
     FluArea{
         Layout.fillWidth: true
@@ -23,7 +23,7 @@ FluScrollablePage{
             }
 
             FluExpander{
-                headerText:"打开一个单选框"
+                headerText: qsTr("Open a radio box")
                 Layout.topMargin: 20
                 Item{
                     anchors.fill: parent
@@ -50,7 +50,7 @@ FluScrollablePage{
 
             FluExpander{
                 Layout.topMargin: 20
-                headerText:"打开一个滑动文本框"
+                headerText: qsTr("Open a sliding text box")
                 Item{
                     anchors.fill: parent
                     Flickable{
@@ -66,7 +66,14 @@ FluScrollablePage{
                             width: scrollview.width
                             wrapMode: Text.WrapAnywhere
                             padding: 14
-                            text:"先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激。今当远离，临表涕零，不知所言。"
+                            text: qsTr("Permit me to observe: the late emperor was taken from us before he could finish his life`s work, the restoration of Han. Today, the empire is still divided in three, and our very survival is threatened. Yet still the officials at court and the soldiers throughout the realm remain loyal to you, your majesty. Because they remember the late emperor, all of them, and they wish to repay his kindness in service to you. This is the moment to extend your divine influence, to honour the memory of the late Emperor and strengthen the morale of your officers. It is not time to listen to bad advice, or close your ears to the suggestions of loyal men.
+The court and the administration are as one. Both must be judged by one standard. Those who are loyal and good must get what they deserve, but so must the evil-doers who break the law. This will demonstrate the justice of your rule. There cannot be one law for the court and another for the administration.
+Counselors and attendants like Guo Youzhi, Fei Yi, and Dong Yun are all reliable men, loyal of purpose and pure in motive. The late Emperor selected them for office so that they would serve you after his death.These are the men who should be consulted on all palace affairs. Xiang Chong has proved himself a fine general in battle, and the late Emperor believed in him. That is why the assembly has recommended him for overall command. It will keep the troops happy if he is consulted on all military matters.
+Xiang Chong has proved himself a fine general in battle, and the late Emperor believed in him. That is why the assembly has recommended him for overall command. It will keep the troops happy if he is consulted on all military matters.
+The emperors of the Western Han chose their courtiers wisely, and their dynasty flourished. The emperors of the Eastern Han chose poorly, and they doomed the empire to ruin. Whenever the late Emperor discussed this problem with me, he lamented the failings of Emperors Huan and Ling. Advisors like Guo Youzhi, Fei Yi, Chen Zhen, Zhang Yi, and Jiang Wan – these are all men of great integrity and devotion. I encourage you to trust them, your majesty, if the house of Han is to rise again.
+I begin as a common man, farming in my fields in Nanyang, doing what I could to survive in an age of chaos. I never had any interest in making a name for myself as a noble. The late Emperor was not ashamed to visit my cottage and seek my advice. Grateful for his regard, I responded to his appeal and threw myself into his service. Now twenty-one years has passed, the late Emperor always appreciated my caution and, in his final days, entrusted me with his cause.
+Since that moment, I have been tormented day and night by the fear that I might let him down. That is why I crossed the Lu river at the height of summer, and entered the wastelands beyond. Now the south has been subdued, and our forces are fully armed.I should lead our soldiers to conquer the northern heartland and attempt to remove the hateful traitors, restore the house of Han, and return it to the former capital.This the way I mean to honor my debt to the late Emperor and fulfill my duty to you. Guo Youzhi, Fei Yi, and Dong Yun are the ones who should be making policy decisions and recommendations.
+My only desire is to be permitted to drive out the traitors and restore the Han. If I should let you down, punish my offense and report it to the spirit of the late Emperor. If those three advisors should fail in their duties, then they should be punished for their negligence.Your Majesty, consider your course of action carefully. Seek out good advice, and never forget the late Emperor. I depart now on a long expedition, and I will be forever grateful if you heed my advice. Blinded by my own tears, I know not what I write.")
                         }
                     }
                 }
@@ -78,7 +85,7 @@ FluScrollablePage{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluExpander{
-    headerText:"打开一个单选框"
+    headerText: qsTr("Open a radio box")
     Item{
         anchors.fill: parent
         Flickable{
@@ -92,7 +99,7 @@ FluScrollablePage{
                 width: scrollview.width
                 wrapMode: Text.WrapAnywhere
                 padding: 14
-                text:"先帝创业未半而中道崩殂，今天下三分......""
+                text: qsTr("Permit me to observe: the late emperor was taken from us before he could finish his life`s work...")
             }
         }
     }

example/qml-Qt6/page/T_FlipView.qml

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

example/qml-Qt6/page/T_Home.qml

@@ -2,24 +2,41 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
-import "qrc:///example/qml/global"
 import FluentUI
+import "../global"
+import "../window"
+
 
 FluScrollablePage{
 
     launchMode: FluPageType.SingleTask
     animDisabled: true
 
-    ListModel{
-        id:model_header
-        ListElement{
-            icon:"qrc:/example/res/image/ic_home_github.png"
-            title:"FluentUI GitHub"
-            desc:"The latest FluentUI controls and styles for your applications."
-            url:"https://github.com/zhuzichu520/FluentUI"
-        }
+    FluentInitalizrWindow{
+        id:fluent_initalizr
     }
 
+    ListModel{
+        id: model_header
+        ListElement{
+            icon: "qrc:/example/res/image/ic_home_github.png"
+            title: qsTr("FluentUI GitHub")
+            desc: qsTr("The latest FluentUI controls and styles for your applications.")
+            url: "https://github.com/zhuzichu520/FluentUI"
+            clicked: function(model){
+                Qt.openUrlExternally(model.url)
+            }
+        }
+        ListElement{
+            icon: "qrc:/example/res/image/favicon.ico"
+            title: qsTr("FluentUI Initalizr")
+            desc: qsTr("FluentUI Initializr is a Tool that helps you create and customize Fluent UI projects with various options.")
+            url: "https://github.com/zhuzichu520/FluentUI"
+            clicked: function(model){
+                fluent_initalizr.showDialog()
+            }
+        }
+    }
     Item{
         Layout.fillWidth: true
         Layout.preferredHeight: 320
@@ -27,7 +44,6 @@ FluScrollablePage{
             id: bg
             fillMode:Image.PreserveAspectCrop
             anchors.fill: parent
-            asynchronous: true
             verticalAlignment: Qt.AlignTop
             sourceSize: Qt.size(960,640)
             source: "qrc:/example/res/image/bg_home_header.png"
@@ -49,7 +65,6 @@ FluScrollablePage{
                 leftMargin: 20
             }
         }
-
         Component{
             id:com_grallery
             Item{
@@ -77,7 +92,7 @@ FluScrollablePage{
                     Rectangle{
                         anchors.fill: parent
                         radius: 5
-                        color:FluTheme.dark ? Qt.rgba(1,1,1,0.03) : Qt.rgba(0,0,0,0.03)
+                        color:FluTheme.itemHoverColor
                         visible: item_mouse.containsMouse
                     }
                     Rectangle{
@@ -130,7 +145,7 @@ FluScrollablePage{
                                 else scrollbar_header.increase()
                             }
                         onClicked: {
-                            Qt.openUrlExternally(model.url)
+                            model.clicked(model)
                         }
                     }
                 }
@@ -160,7 +175,7 @@ FluScrollablePage{
     Component{
         id:com_item
         Item{
-            property string desc: modelData.desc
+            property string desc: modelData.extra.desc
             width: 320
             height: 120
             FluArea{
@@ -172,24 +187,17 @@ FluScrollablePage{
                     anchors.fill: parent
                     radius: 8
                     color:{
-                        if(FluTheme.dark){
-                            if(item_mouse.containsMouse){
-                                return Qt.rgba(1,1,1,0.03)
-                            }
-                            return Qt.rgba(0,0,0,0)
-                        }else{
-                            if(item_mouse.containsMouse){
-                                return Qt.rgba(0,0,0,0.03)
-                            }
-                            return Qt.rgba(0,0,0,0)
+                        if(item_mouse.containsMouse){
+                            return FluTheme.itemHoverColor
                         }
+                        return FluTheme.itemNormalColor
                     }
                 }
                 Image{
                     id:item_icon
                     height: 40
                     width: 40
-                    source: modelData.image
+                    source: modelData.extra.image
                     anchors{
                         left: parent.left
                         leftMargin: 20
@@ -227,7 +235,7 @@ FluScrollablePage{
                     height: 12
                     width: 12
                     radius:  6
-                    color: FluTheme.primaryColor.dark
+                    color: FluTheme.primaryColor
                     anchors{
                         right: parent.right
                         top: parent.top
@@ -283,3 +291,4 @@ FluScrollablePage{
     }
 
 }
+

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

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

example/qml-Qt6/page/T_InfoBar.qml

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

example/qml-Qt6/page/T_Menu.qml

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

example/qml-Qt6/page/T_MultiWindow.qml

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

example/qml-Qt6/page/T_Network.qml

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

example/qml-Qt6/page/T_Pagination.qml

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

example/qml-Qt6/page/T_Pivot.qml

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

example/qml-Qt6/page/T_Progress.qml

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

example/qml-Qt6/page/T_QRCode.qml

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

example/qml-Qt6/page/T_RadioButton.qml

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

example/qml-Qt6/page/T_RatingControl.qml

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

example/qml-Qt6/page/T_Rectangle.qml

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

example/qml-Qt6/page/T_RemoteLoader.qml

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

example/qml-Qt6/page/T_Screenshot.qml

@@ -1,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

@@ -3,13 +3,13 @@ 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"
+import "../global"
+import "../component"
+import "../viewmodel"
 
 FluScrollablePage{
 
-    title:"Settings"
+    title: qsTr("Settings")
 
     SettingsViewModel{
         id:viewmodel_settings
@@ -40,13 +40,13 @@ FluScrollablePage{
             spacing: 20
             anchors.verticalCenter: parent.verticalCenter
             FluText{
-                text:"当前版本 v%1".arg(AppInfo.version)
+                text: "%1 v%2".arg(qsTr("Current Version")).arg(AppInfo.version)
                 font: FluTextStyle.Body
                 anchors.verticalCenter: parent.verticalCenter
             }
             FluLoadingButton{
-                id:btn_checkupdate
-                text:"检查更新"
+                id: btn_checkupdate
+                text: qsTr("Check for Updates")
                 anchors.verticalCenter: parent.verticalCenter
                 onClicked: {
                     loading = true
@@ -62,45 +62,39 @@ FluScrollablePage{
         height: 50
         paddings: 10
         FluCheckBox{
-            text:"V-Sync"
-            checked: FluApp.vsync
+            text: qsTr("Use System AppBar")
+            checked: FluApp.useSystemAppBar
             anchors.verticalCenter: parent.verticalCenter
             onClicked: {
-                FluApp.vsync = !FluApp.vsync
+                FluApp.useSystemAppBar = !FluApp.useSystemAppBar
                 dialog_restart.open()
             }
         }
     }
 
-
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
         height: 50
         paddings: 10
         FluCheckBox{
-            text:"Software Render"
-            checked: SettingsHelper.getRender() === "software"
+            text:qsTr("Fits AppBar Windows")
+            checked: window.fitsAppBarWindows
             anchors.verticalCenter: parent.verticalCenter
             onClicked: {
-                if(SettingsHelper.getRender() === "software"){
-                    SettingsHelper.saveRender("")
-                }else{
-                    SettingsHelper.saveRender("software")
-                }
-                dialog_restart.open()
+                window.fitsAppBarWindows = !window.fitsAppBarWindows
             }
         }
     }
 
     FluContentDialog{
-        id:dialog_restart
-        title:"友情提示"
-        message:"此操作需要重启才能生效，是否重新启动？"
+        id: dialog_restart
+        title: qsTr("Friendly Reminder")
+        message: qsTr("This action requires a restart of the program to take effect, is it restarted?")
         buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
-        negativeText: "取消"
-        positiveText:"确定"
-        onPositiveClicked:{
+        negativeText: qsTr("Cancel")
+        positiveText: qsTr("OK")
+        onPositiveClicked: {
             FluApp.exit(931)
         }
     }
@@ -118,13 +112,13 @@ FluScrollablePage{
                 left: parent.left
             }
             FluText{
-                text:Lang.dark_mode
+                text: qsTr("Dark Mode")
                 font: FluTextStyle.BodyStrong
                 Layout.bottomMargin: 4
             }
             Repeater{
-                model: [{title:"System",mode:FluThemeType.System},{title:"Light",mode:FluThemeType.Light},{title:"Dark",mode:FluThemeType.Dark}]
-                delegate:  FluRadioButton{
+                model: [{title:qsTr("System"),mode:FluThemeType.System},{title:qsTr("Light"),mode:FluThemeType.Light},{title:qsTr("Dark"),mode:FluThemeType.Dark}]
+                delegate: FluRadioButton{
                     checked : FluTheme.darkMode === modelData.mode
                     text:modelData.title
                     clickListener:function(){
@@ -148,12 +142,12 @@ FluScrollablePage{
                 left: parent.left
             }
             FluText{
-                text:Lang.navigation_view_display_mode
+                text:qsTr("Navigation View Display Mode")
                 font: FluTextStyle.BodyStrong
                 Layout.bottomMargin: 4
             }
             Repeater{
-                model: [{title:"Open",mode:FluNavigationViewType.Open},{title:"Compact",mode:FluNavigationViewType.Compact},{title:"Minimal",mode:FluNavigationViewType.Minimal},{title:"Auto",mode:FluNavigationViewType.Auto}]
+                model: [{title:qsTr("Open"),mode:FluNavigationViewType.Open},{title:qsTr("Compact"),mode:FluNavigationViewType.Compact},{title:qsTr("Minimal"),mode:FluNavigationViewType.Minimal},{title:qsTr("Auto"),mode:FluNavigationViewType.Auto}]
                 delegate: FluRadioButton{
                     checked : viewmodel_settings.displayMode===modelData.mode
                     text:modelData.title
@@ -165,6 +159,16 @@ FluScrollablePage{
         }
     }
 
+    ListModel{
+        id:model_language
+        ListElement{
+            name:"en"
+        }
+        ListElement{
+            name:"zh"
+        }
+    }
+
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
@@ -177,27 +181,25 @@ FluScrollablePage{
                 top: parent.top
                 left: parent.left
             }
-
             FluText{
-                text:Lang.locale
+                text:qsTr("Language")
                 font: FluTextStyle.BodyStrong
                 Layout.bottomMargin: 4
             }
-
             Flow{
                 spacing: 5
                 Repeater{
-                    model: Lang.__localeList
+                    model: TranslateHelper.languages
                     delegate: FluRadioButton{
-                        checked: Lang.__locale === modelData
+                        checked: TranslateHelper.current === modelData
                         text:modelData
                         clickListener:function(){
-                            Lang.__locale = modelData
+                            TranslateHelper.current = modelData
+                            dialog_restart.open()
                         }
                     }
                 }
             }
         }
     }
-
 }

example/qml-Qt6/page/T_ShortcutPicker.qml

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

example/qml-Qt6/page/T_Slider.qml

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

example/qml-Qt6/page/T_SplitLayout.qml

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

example/qml-Qt6/page/T_StaggeredLayout.qml

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

example/qml-Qt6/page/T_StatusLayout.qml

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

example/qml-Qt6/page/T_TabView.qml

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

example/qml-Qt6/page/T_TableView.qml

@@ -3,32 +3,156 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluContentPage{
 
     id:root
-    title:"TableView"
+    title: qsTr("TableView")
     signal checkBoxChanged
 
     property var dataSource : []
     property int sortType: 0
+    property bool seletedAll: true
+    property string nameKeyword: ""
+
+    onNameKeywordChanged: {
+        table_view.filter(function(item){
+            if(item.name.includes(nameKeyword)){
+                return true
+            }
+            return false
+        })
+    }
 
     Component.onCompleted: {
         loadData(1,1000)
     }
 
+    onCheckBoxChanged: {
+        for(var i =0;i< table_view.rows ;i++){
+            if(false === table_view.getRow(i).checkbox.options.checked){
+                root.seletedAll = false
+                return
+            }
+        }
+        root.seletedAll = true
+    }
+
     onSortTypeChanged: {
         table_view.closeEditor()
         if(sortType === 0){
             table_view.sort()
         }else if(sortType === 1){
-            table_view.sort((a, b) => a.age - b.age);
+            table_view.sort(
+                        (l, r) =>{
+                            var lage = Number(l.age)
+                            var rage = Number(r.age)
+                            if(lage === rage){
+                                return l._key>r._key
+                            }
+                            return lage>rage
+                        });
         }else if(sortType === 2){
-            table_view.sort((a, b) => b.age - a.age);
+            table_view.sort(
+                        (l, r) => {
+                            var lage = Number(l.age)
+                            var rage = Number(r.age)
+                            if(lage === rage){
+                                return l._key>r._key
+                            }
+                            return lage<rage
+                        });
         }
     }
 
+    FluContentDialog{
+        id:custom_update_dialog
+        property var text
+        property var onAccpetListener
+        title: qsTr("Modify the column name")
+        negativeText: qsTr("Cancel")
+        contentDelegate: Component{
+            Item{
+                implicitWidth: parent.width
+                implicitHeight: 60
+                FluTextBox{
+                    id:textbox_text
+                    anchors.centerIn: parent
+                    onTextChanged: {
+                        custom_update_dialog.text = textbox_text.text
+                    }
+                }
+                Component.onCompleted: {
+                    textbox_text.text = custom_update_dialog.text
+                    textbox_text.forceActiveFocus()
+                }
+            }
+        }
+        positiveText: qsTr("OK")
+        onPositiveClicked:{
+            if(custom_update_dialog.onAccpetListener){
+                custom_update_dialog.onAccpetListener(custom_update_dialog.text)
+            }
+        }
+        function showDialog(text,listener){
+            custom_update_dialog.text = text
+            custom_update_dialog.onAccpetListener = listener
+            custom_update_dialog.open()
+        }
+    }
+
+    FluMenu{
+        id:pop_filter
+        width: 200
+        height: 89
+
+        contentItem: Item{
+
+            onVisibleChanged: {
+                if(visible){
+                    name_filter_text.text = root.nameKeyword
+                    name_filter_text.cursorPosition = name_filter_text.text.length
+                    name_filter_text.forceActiveFocus()
+                }
+            }
+
+            FluTextBox{
+                id:name_filter_text
+                anchors{
+                    left: parent.left
+                    right: parent.right
+                    top: parent.top
+                    leftMargin: 10
+                    rightMargin: 10
+                    topMargin: 10
+                }
+                iconSource: FluentIcons.Search
+            }
+
+            FluButton{
+                text: qsTr("Search")
+                anchors{
+                    bottom: parent.bottom
+                    right: parent.right
+                    bottomMargin: 10
+                    rightMargin: 10
+                }
+                onClicked: {
+                    root.nameKeyword = name_filter_text.text
+                    pop_filter.close()
+                }
+            }
+
+        }
+
+        function showPopup(){
+            table_view.closeEditor()
+            pop_filter.popup()
+        }
+
+    }
+
     Component{
         id:com_checbox
         Item{
@@ -37,35 +161,66 @@ FluContentPage{
                 checked: true === options.checked
                 enableAnimation: false
                 clickListener: function(){
-                    var obj = tableModel.getRow(row)
+                    var obj = table_view.getRow(row)
                     obj.checkbox = table_view.customItem(com_checbox,{checked:!options.checked})
-                    tableModel.setRow(row,obj)
+                    table_view.setRow(row,obj)
                     checkBoxChanged()
                 }
             }
         }
     }
 
+    Component{
+        id:com_column_filter_name
+        Item{
+            FluText{
+                text: qsTr("Name")
+                anchors.centerIn: parent
+            }
+            FluIconButton{
+                width: 20
+                height: 20
+                iconSize: 12
+                verticalPadding:0
+                horizontalPadding:0
+                iconSource: FluentIcons.Filter
+                iconColor: {
+                    if("" !== root.nameKeyword){
+                        return FluTheme.primaryColor
+                    }
+                    return FluTheme.dark ?  Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
+                }
+                anchors{
+                    right: parent.right
+                    rightMargin: 3
+                    verticalCenter: parent.verticalCenter
+                }
+                onClicked: {
+                    pop_filter.showPopup()
+                }
+            }
+        }
+    }
+
     Component{
         id:com_action
         Item{
             RowLayout{
                 anchors.centerIn: parent
                 FluButton{
-                    text:"删除"
+                    text: qsTr("Delete")
                     onClicked: {
                         table_view.closeEditor()
-                        tableModel.removeRow(row)
-                        checkBoxChanged()
+                        table_view.removeRow(row)
                     }
                 }
                 FluFilledButton{
-                    text:"编辑"
+                    text: qsTr("Edit")
                     onClicked: {
-                        var obj = tableModel.getRow(row)
+                        var obj = table_view.getRow(row)
                         obj.name = "12345"
-                        tableModel.setRow(row,obj)
-                        showSuccess(JSON.stringify(tableModel.getRow(row)))
+                        table_view.setRow(row,obj)
+                        showSuccess(JSON.stringify(obj))
                     }
                 }
             }
@@ -79,35 +234,24 @@ FluContentPage{
             RowLayout{
                 anchors.centerIn: parent
                 FluText{
-                    text:"全选"
+                    text: qsTr("Select All")
                     Layout.alignment: Qt.AlignVCenter
                 }
                 FluCheckBox{
-                    checked: true === options.checked
+                    checked: true === root.seletedAll
                     enableAnimation: false
                     Layout.alignment: Qt.AlignVCenter
                     clickListener: function(){
-                        var checked = !options.checked
+                        root.seletedAll = !root.seletedAll
+                        var checked = root.seletedAll
                         itemModel.display = table_view.customItem(com_column_checbox,{"checked":checked})
-                        for(var i =0;i< tableModel.rowCount ;i++){
-                            var rowData = tableModel.getRow(i)
+                        for(var i =0;i< table_view.rows ;i++){
+                            var rowData = table_view.getRow(i)
                             rowData.checkbox = table_view.customItem(com_checbox,{"checked":checked})
-                            tableModel.setRow(i,rowData)
+                            table_view.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})
-                    }
-                }
             }
         }
     }
@@ -117,20 +261,20 @@ FluContentPage{
         FluComboBox {
             anchors.fill: parent
             focus: true
-            currentIndex: display
+            editText: display
             editable: true
             model: ListModel {
-                ListElement { text: 100 }
-                ListElement { text: 300 }
-                ListElement { text: 500 }
-                ListElement { text: 1000 }
+                ListElement { text: "100" }
+                ListElement { text: "300" }
+                ListElement { text: "500" }
+                ListElement { text: "1000" }
             }
             Component.onCompleted: {
-                currentIndex=[100,300,500,1000].findIndex((element) => element === Number(display))
+                currentIndex=["100","300","500","1000"].findIndex((element) => element === display)
                 selectAll()
             }
             onCommit: {
-                display = editText
+                editTextChaged(editText)
                 tableView.closeEditor()
             }
         }
@@ -158,11 +302,39 @@ FluContentPage{
         }
     }
 
+    Component{
+        id:com_column_update_title
+        Item{
+            FluText{
+                id:text_title
+                text: {
+                    if(options.title){
+                        return options.title
+                    }
+                    return ""
+                }
+                anchors.fill: parent
+                verticalAlignment: Qt.AlignVCenter
+                horizontalAlignment: Qt.AlignHCenter
+                elide: Text.ElideRight
+            }
+            MouseArea{
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    custom_update_dialog.showDialog(options.title,function(text){
+                        itemModel.display = table_view.customItem(com_column_update_title,{"title":text})
+                    })
+                }
+            }
+        }
+    }
+
     Component{
         id:com_column_sort_age
         Item{
             FluText{
-                text:"年龄"
+                text: qsTr("Age")
                 anchors.centerIn: parent
             }
             ColumnLayout{
@@ -181,7 +353,7 @@ FluContentPage{
                     iconSource: FluentIcons.ChevronUp
                     iconColor: {
                         if(1 === root.sortType){
-                            return FluTheme.primaryColor.dark
+                            return FluTheme.primaryColor
                         }
                         return FluTheme.dark ?  Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
                     }
@@ -202,7 +374,7 @@ FluContentPage{
                     iconSource: FluentIcons.ChevronDown
                     iconColor: {
                         if(2 === root.sortType){
-                            return FluTheme.primaryColor.dark
+                            return FluTheme.primaryColor
                         }
                         return FluTheme.dark ?  Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
                     }
@@ -218,34 +390,94 @@ FluContentPage{
         }
     }
 
+    FluArea{
+        id:layout_controls
+        anchors{
+            left: parent.left
+            right: parent.right
+            top: parent.top
+            topMargin: 20
+        }
+        height: 60
+
+        Row{
+            spacing: 5
+            anchors{
+                left: parent.left
+                leftMargin: 10
+                verticalCenter: parent.verticalCenter
+            }
+
+            FluButton{
+                text: qsTr("Clear All")
+                onClicked: {
+                    table_view.dataSource = []
+                }
+            }
+
+            FluButton{
+                text: qsTr("Delete Selection")
+                onClicked: {
+                    var data = []
+                    var rows = []
+                    for (var i = 0; i < table_view.rows; i++) {
+                        var item = table_view.getRow(i);
+                        rows.push(item)
+                        if (!item.checkbox.options.checked) {
+                            data.push(item);
+                        }
+                    }
+                    var sourceModel = table_view.sourceModel;
+                    for (i = 0; i < sourceModel.rowCount; i++) {
+                        var sourceItem = sourceModel.getRow(i);
+                        const foundItem = rows.find(item=> item._key === sourceItem._key)
+                        if (!foundItem) {
+                            data.push(sourceItem);
+                        }
+                    }
+                    table_view.dataSource = data
+                }
+            }
+
+            FluButton{
+                text: qsTr("Add a row of Data")
+                onClicked: {
+                    table_view.appendRow(genTestObject())
+                }
+            }
+
+        }
+    }
+
     FluTableView{
         id:table_view
         anchors{
             left: parent.left
             right: parent.right
-            top: parent.top
+            top: layout_controls.bottom
             bottom: gagination.top
         }
-        anchors.topMargin: 20
+        anchors.topMargin: 5
+        onRowsChanged: {
+            root.checkBoxChanged()
+        }
         columnSource:[
             {
                 title: 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: '姓名',
+                title: table_view.customItem(com_column_update_title,{title:qsTr("Avatar")}),
+                dataIndex: 'avatar',
+                width:100
+            },
+            {
+                title: table_view.customItem(com_column_filter_name,{title:qsTr("Name")}),
                 dataIndex: 'name',
-                readOnly:true,
+                readOnly:true
             },
             {
                 title: table_view.customItem(com_column_sort_age,{sort:0}),
@@ -256,28 +488,28 @@ FluContentPage{
                 maximumWidth:100
             },
             {
-                title: '住址',
+                title: qsTr("Address"),
                 dataIndex: 'address',
                 width:200,
                 minimumWidth:100,
                 maximumWidth:250
             },
             {
-                title: '别名',
+                title: qsTr("Nickname"),
                 dataIndex: 'nickname',
                 width:100,
                 minimumWidth:80,
                 maximumWidth:200
             },
             {
-                title: '长字符串',
+                title: qsTr("Long String"),
                 dataIndex: 'longstring',
                 width:200,
                 minimumWidth:100,
                 maximumWidth:300
             },
             {
-                title: '操作',
+                title: qsTr("Options"),
                 dataIndex: 'action',
                 width:160,
                 minimumWidth:160,
@@ -296,6 +528,8 @@ FluContentPage{
         itemCount: 100000
         pageButtonCount: 7
         __itemPerPage: 1000
+        previousText: qsTr("<Previous")
+        nextText: qsTr("Next>")
         onRequestPage:
             (page,count)=> {
                 table_view.closeEditor()
@@ -304,11 +538,11 @@ FluContentPage{
             }
     }
 
-    function loadData(page,count){
-        var numbers = [100, 300, 500, 1000];
+    function genTestObject(){
+        var ages = ["100", "300", "500", "1000"];
         function getRandomAge() {
-            var randomIndex = Math.floor(Math.random() * numbers.length);
-            return numbers[randomIndex];
+            var randomIndex = Math.floor(Math.random() * ages.length);
+            return ages[randomIndex];
         }
         var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"];
         function getRandomName(){
@@ -325,29 +559,31 @@ FluContentPage{
             var randomIndex = Math.floor(Math.random() * addresses.length);
             return addresses[randomIndex];
         }
-
         var avatars = ["qrc:/example/res/svg/avatar_1.svg", "qrc:/example/res/svg/avatar_2.svg", "qrc:/example/res/svg/avatar_3.svg", "qrc:/example/res/svg/avatar_4.svg","qrc:/example/res/svg/avatar_5.svg","qrc:/example/res/svg/avatar_6.svg","qrc:/example/res/svg/avatar_7.svg","qrc:/example/res/svg/avatar_8.svg","qrc:/example/res/svg/avatar_9.svg","qrc:/example/res/svg/avatar_10.svg","qrc:/example/res/svg/avatar_11.svg","qrc:/example/res/svg/avatar_12.svg"];
         function getAvatar(){
             var randomIndex = Math.floor(Math.random() * avatars.length);
             return avatars[randomIndex];
         }
-
+        return {
+            checkbox: table_view.customItem(com_checbox,{checked:root.seletedAll}),
+            avatar:table_view.customItem(com_avatar,{avatar:getAvatar()}),
+            name: getRandomName(),
+            age:getRandomAge(),
+            address: getRandomAddresses(),
+            nickname: getRandomNickname(),
+            longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
+            action: table_view.customItem(com_action),
+            _minimumHeight:50,
+            _key:FluTools.uuid()
+        }
+    }
+    function loadData(page,count){
+        root.seletedAll = true
         const dataSource = []
         for(var i=0;i<count;i++){
-            dataSource.push({
-                                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
-                            })
+            dataSource.push(genTestObject())
         }
         root.dataSource = dataSource
         table_view.dataSource = root.dataSource
     }
-
 }

example/qml-Qt6/page/T_Text.qml

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

example/qml-Qt6/page/T_TextBox.qml

@@ -3,20 +3,17 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
-import "qrc:///example/qml/viewmodel"
+import "../component"
+import "../viewmodel"
 
 FluScrollablePage{
-    title:"TextBox"
+
+    title: qsTr("TextBox")
 
     TextBoxViewModel{
         id:viewModel
     }
 
-    Component.onDestruction: {
-        console.debug("T_TextBox页面销毁了")
-    }
-
     FluArea{
         Layout.fillWidth: true
         height: 68
@@ -24,10 +21,10 @@ FluScrollablePage{
         Layout.topMargin: 20
 
         FluTextBox{
-            placeholderText: "单行输入框"
-            disabled:text_box_switch.checked
+            placeholderText: qsTr("Single-line Input Box")
+            disabled: text_box_switch.checked
             cleanEnabled: true
-            text:viewModel.text1
+            text: viewModel.text1
             onTextChanged: {
                 viewModel.text1 = text
             }
@@ -38,19 +35,19 @@ FluScrollablePage{
         }
 
         FluToggleSwitch{
-            id:text_box_switch
+            id: text_box_switch
             anchors{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluTextBox{
-    placeholderText:"单行输入框"
+    placeholderText: qsTr("Single-line Input Box")
 }'
     }
 
@@ -61,7 +58,7 @@ FluScrollablePage{
         Layout.topMargin: 20
 
         FluPasswordBox{
-            placeholderText: "请输入密码"
+            placeholderText: qsTr("Please enter your password")
             disabled:password_box_switch.checked
             anchors{
                 verticalCenter: parent.verticalCenter
@@ -74,14 +71,14 @@ FluScrollablePage{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluPasswordBox{
-    placeholderText:"请输入密码"
+    placeholderText: qsTr("Please enter your password")
 }'
     }
 
@@ -93,13 +90,13 @@ FluScrollablePage{
         Layout.topMargin: 20
 
         FluMultilineTextBox{
-            id:multiine_textbox
-            placeholderText: "多行输入框"
+            id: multiine_textbox
+            placeholderText: qsTr("Multi-line Input Box")
             text:viewModel.text2
             onTextChanged: {
                 viewModel.text2 = text
             }
-            disabled:text_box_multi_switch.checked
+            disabled: text_box_multi_switch.checked
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
@@ -112,14 +109,14 @@ FluScrollablePage{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluMultilineTextBox{
-    placeholderText:"多行输入框"
+    placeholderText: qsTr("Multi-line Input Box")
 }'
     }
 
@@ -129,9 +126,9 @@ FluScrollablePage{
         paddings: 10
         Layout.topMargin: 20
         FluAutoSuggestBox{
-            placeholderText: "AutoSuggestBox"
-            items:generateRandomNames(100)
-            disabled:text_box_suggest_switch.checked
+            placeholderText: qsTr("AutoSuggestBox")
+            items: generateRandomNames(100)
+            disabled: text_box_suggest_switch.checked
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
@@ -143,14 +140,14 @@ FluScrollablePage{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluAutoSuggestBox{
-    placeholderText:"AutoSuggestBox"
+    placeholderText: qsTr("AutoSuggestBox")
 }'
     }
 
@@ -167,12 +164,12 @@ FluScrollablePage{
             }
         }
         FluToggleSwitch{
-            id:spin_box_switch
+            id: spin_box_switch
             anchors{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{

example/qml-Qt6/page/T_Theme.qml

@@ -3,36 +3,44 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"Theme"
+    property var colorData: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
+    id: root
+    title: qsTr("Theme")
 
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 270
+        Layout.preferredHeight: 340
         paddings: 10
+
         ColumnLayout{
             spacing:0
             anchors{
                 left: parent.left
             }
-            RowLayout{
+            FluText{
+                text: qsTr("Theme colors")
                 Layout.topMargin: 10
+            }
+            RowLayout{
+                Layout.topMargin: 5
                 Repeater{
-                    model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
-                    delegate:  FluRectangle{
+                    model: root.colorData
+                    delegate:  Rectangle{
                         width: 42
                         height: 42
-                        radius: [4,4,4,4]
+                        radius: 4
                         color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
+                        border.color: modelData.darker
                         FluIcon {
                             anchors.centerIn: parent
                             iconSource: FluentIcons.AcceptMedium
                             iconSize: 15
-                            visible: modelData === FluTheme.primaryColor
+                            visible: modelData === FluTheme.accentColor
                             color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
                         }
                         MouseArea{
@@ -40,14 +48,43 @@ FluScrollablePage{
                             anchors.fill: parent
                             hoverEnabled: true
                             onClicked: {
-                                FluTheme.primaryColor = modelData
+                                FluTheme.accentColor = modelData
                             }
                         }
                     }
                 }
             }
+            Row{
+                Layout.topMargin: 10
+                spacing: 10
+                FluText{
+                    text: qsTr("Customize the Theme Color")
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+                FluColorPicker{
+                    id:color_picker
+                    current: FluTheme.accentColor.normal
+                    onAccepted: {
+                       FluTheme.accentColor = FluColors.createAccentColor(current)
+                    }
+                    FluIcon {
+                        anchors.centerIn: parent
+                        iconSource: FluentIcons.AcceptMedium
+                        iconSize: 15
+                        visible: {
+                            for(var i =0 ;i< root.colorData.length; i++){
+                                if(root.colorData[i] === FluTheme.accentColor){
+                                    return false
+                                }
+                            }
+                            return true
+                        }
+                        color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+                    }
+                }
+            }
             FluText{
-                text:"夜间模式"
+                text: qsTr("Dark Mode")
                 Layout.topMargin: 20
             }
             FluToggleSwitch{
@@ -62,7 +99,7 @@ FluScrollablePage{
                 }
             }
             FluText{
-                text:"native文本渲染"
+                text: qsTr("Native Text")
                 Layout.topMargin: 20
             }
             FluToggleSwitch{
@@ -73,7 +110,7 @@ FluScrollablePage{
                 }
             }
             FluText{
-                text:"开启动画效果"
+                text: qsTr("Open Animation")
                 Layout.topMargin: 20
             }
             FluToggleSwitch{
@@ -88,7 +125,7 @@ FluScrollablePage{
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
-        code:'FluTheme.primaryColor = FluColors.Orange
+        code:'FluTheme.accentColor = FluColors.Orange
 
 FluTheme.dark = true
 

example/qml-Qt6/page/T_TimePicker.qml

@@ -3,11 +3,11 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"TimePicker"
+    title: qsTr("TimePicker")
     launchMode: FluPageType.SingleInstance
     FluArea{
         Layout.fillWidth: true
@@ -23,11 +23,17 @@ FluScrollablePage{
             }
 
             FluText{
-                text:"hourFormat=FluTimePickerType.H"
+                text: qsTr("hourFormat=FluTimePickerType.H")
             }
 
             FluTimePicker{
                 current: new Date()
+                amText: qsTr("AM")
+                pmText: qsTr("PM")
+                hourText: qsTr("Hour")
+                minuteText: qsTr("Minute")
+                cancelText: qsTr("Cancel")
+                okText: qsTr("OK")
                 onAccepted: {
                     showSuccess(current.toLocaleTimeString(Qt.locale("de_DE")))
                 }
@@ -57,11 +63,17 @@ FluScrollablePage{
             }
 
             FluText{
-                text:"hourFormat=FluTimePickerType.HH"
+                text: qsTr("hourFormat=FluTimePickerType.HH")
             }
 
             FluTimePicker{
                 hourFormat:FluTimePickerType.HH
+                amText: qsTr("AM")
+                pmText: qsTr("PM")
+                hourText: qsTr("Hour")
+                minuteText: qsTr("Minute")
+                cancelText: qsTr("Cancel")
+                okText: qsTr("OK")
                 onAccepted: {
                     showSuccess(current.toLocaleTimeString(Qt.locale("de_DE")))
                 }

example/qml-Qt6/page/T_Timeline.qml

@@ -3,11 +3,11 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
-    title:"Timeline"
+    title: qsTr("Timeline")
 
     Component{
         id:com_dot
@@ -108,17 +108,18 @@ FluScrollablePage{
         spacing: 20
         Layout.topMargin: 20
         FluTextBox{
-            id:text_box
-            text:"Technical testing 2015-09-01"
+            id: text_box
+            text: "Technical testing 2015-09-01"
+            Layout.preferredWidth: 240
         }
         FluFilledButton{
-            text:"Append"
+            text: qsTr("Append")
             onClicked: {
                 list_model.append({text:text_box.text})
             }
         }
         FluFilledButton{
-            text:"clear"
+            text: qsTr("clear")
             onClicked: {
                 list_model.clear()
             }
@@ -131,25 +132,25 @@ FluScrollablePage{
             text:"mode:"
         }
         FluDropDownButton{
-            id:btn_mode
+            id: btn_mode
             Layout.preferredWidth: 100
-            text:"Alternate"
+            text: "Alternate"
             FluMenuItem{
-                text:"Left"
+                text: "Left"
                 onClicked: {
                     btn_mode.text = text
                     time_line.mode = FluTimelineType.Left
                 }
             }
             FluMenuItem{
-                text:"Right"
+                text: "Right"
                 onClicked: {
                     btn_mode.text = text
                     time_line.mode = FluTimelineType.Right
                 }
             }
             FluMenuItem{
-                text:"Alternate"
+                text: "Alternate"
                 onClicked: {
                     btn_mode.text = text
                     time_line.mode = FluTimelineType.Alternate
@@ -159,12 +160,12 @@ FluScrollablePage{
     }
 
     FluTimeline{
-        id:time_line
+        id: time_line
         Layout.fillWidth: true
         Layout.topMargin: 20
         Layout.bottomMargin: 20
         mode: FluTimelineType.Alternate
-        model:list_model
+        model: list_model
     }
 
 }

example/qml-Qt6/page/T_ToggleSwitch.qml

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

example/qml-Qt6/page/T_Tooltip.qml

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

example/qml-Qt6/page/T_Tour.qml

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

example/qml-Qt6/page/T_TreeView.qml

@@ -3,11 +3,11 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluContentPage {
 
-    title:"TreeView"
+    title: qsTr("TreeView")
 
     function treeData(){
         const dig = (path = '0', level = 4) => {
@@ -29,7 +29,7 @@ FluContentPage {
     }
 
     Column{
-        id:layout_column
+        id: layout_column
         spacing: 12
         width: 300
         anchors{
@@ -42,21 +42,21 @@ FluContentPage {
         }
 
         FluText{
-            text:"共计%1条数据，当前显示的%2条数据".arg(tree_view.count()).arg(tree_view.visibleCount())
+            text: qsTr("Total %1 data, %2 data currently displayed").arg(tree_view.count()).arg(tree_view.visibleCount())
         }
 
         FluText{
-            text:"共计选中%1条数据".arg(tree_view.selectionModel().length)
+            text: qsTr("A total of %1 data items are selected").arg(tree_view.selectionModel().length)
         }
 
         RowLayout{
             spacing: 10
             FluText{
-                text:"cellHeight:"
+                text: "cellHeight:"
                 Layout.alignment: Qt.AlignVCenter
             }
             FluSlider{
-                id:slider_cell_height
+                id: slider_cell_height
                 value: 30
                 from: 30
                 to:100
@@ -65,39 +65,39 @@ FluContentPage {
         RowLayout{
             spacing: 10
             FluText{
-                text:"depthPadding:"
+                text: "depthPadding:"
                 Layout.alignment: Qt.AlignVCenter
             }
             FluSlider{
-                id:slider_depth_padding
+                id: slider_depth_padding
                 value: 30
                 from: 30
                 to:100
             }
         }
         FluToggleSwitch{
-            id:switch_showline
+            id: switch_showline
             text:"showLine"
             checked: false
         }
         FluToggleSwitch{
-            id:switch_draggable
+            id: switch_draggable
             text:"draggable"
             checked: false
         }
         FluToggleSwitch{
-            id:switch_checkable
+            id: switch_checkable
             text:"checkable"
             checked: false
         }
         FluButton{
-            text:"all expand"
+            text: "all expand"
             onClicked: {
                 tree_view.allExpand()
             }
         }
         FluButton{
-            text:"all collapse"
+            text: "all collapse"
             onClicked: {
                 tree_view.allCollapse()
             }

example/qml-Qt6/page/T_Typography.qml

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

example/qml-Qt6/page/T_Watermark.qml

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

example/qml-Qt6/viewmodel/SettingsViewModel.qml

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

example/qml-Qt6/window/AboutWindow.qml

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

example/qml-Qt6/window/CrashWindow.qml

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

example/qml-Qt6/window/FluentInitalizrWindow.qml

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

example/qml-Qt6/window/HotloadWindow.qml

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

example/qml-Qt6/window/LoginWindow.qml

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

example/qml-Qt6/window/MainWindow.qml

@@ -5,32 +5,32 @@ 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"
+import "../component"
+import "../global"
+import "../viewmodel"
 
 FluWindow {
 
     id:window
     title: "FluentUI"
     width: 1000
-    height: 640
-    closeDestory:false
+    height: 680
     minimumWidth: 520
     minimumHeight: 200
     launchMode: FluWindowType.SingleTask
-
-    appBar: undefined
+    fitsAppBarWindows: true
+    appBar: FluAppBar {
+        height: 30
+        showDark: true
+        darkClickListener:(button)=>handleDarkChanged(button)
+        closeClickListener: ()=>{dialog_close.open()}
+        z:7
+    }
 
     SettingsViewModel{
         id:viewmodel_settings
     }
 
-    closeListener:function(event){
-        dialog_close.open()
-        event.accepted = false
-    }
-
     FluEvent{
         id:event_checkupdate
         name: "checkUpdate"
@@ -38,9 +38,20 @@ FluWindow {
             checkUpdate(false)
         }
     }
+
+    onFirstVisible: {
+        timer_tour_delay.restart()
+    }
+
+    Timer{
+        id:timer_tour_delay
+        interval: 200
+        onTriggered: {
+            tour.open()
+        }
+    }
+
     Component.onCompleted: {
-        FluTools.setQuitOnLastWindowClosed(false)
-        tour.open()
         checkUpdate(true)
         FluEventBus.registerEvent(event_checkupdate)
     }
@@ -72,20 +83,42 @@ FluWindow {
             }
     }
 
-    FluContentDialog{
-        id:dialog_close
-        title:"退出"
-        message:"确定要退出程序吗？"
-        negativeText:"最小化"
-        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.NeutralButton | FluContentDialogType.PositiveButton
-        onNegativeClicked:{
+    Timer{
+        id: timer_window_hide_delay
+        interval: 150
+        onTriggered: {
             window.hide()
-            system_tray.showMessage("友情提示","FluentUI已隐藏至托盘,点击托盘可再次激活窗口");
         }
-        positiveText:"退出"
-        neutralText:"取消"
+    }
+
+    FluContentDialog{
+        id: dialog_close
+        title: qsTr("Quit")
+        message: qsTr("Are you sure you want to exit the program?")
+        negativeText: qsTr("Minimize")
+        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.NeutralButton | FluContentDialogType.PositiveButton
+        onNegativeClicked: {
+            system_tray.showMessage(qsTr("Friendly Reminder"),qsTr("FluentUI is hidden from the tray, click on the tray to activate the window again"));
+            timer_window_hide_delay.restart()
+        }
+        positiveText: qsTr("Quit")
+        neutralText: qsTr("Cancel")
         onPositiveClicked:{
-            FluApp.exit()
+            FluApp.exit(0)
+        }
+    }
+
+    Component{
+        id: nav_item_right_menu
+        FluMenu{
+            width: 186
+            FluMenuItem{
+                text: qsTr("Open in Separate Window")
+                font.pixelSize: 12
+                onClicked: {
+                    FluApp.navigate("/pageWindow",{title:modelData.title,url:modelData.url})
+                }
+            }
         }
     }
 
@@ -112,18 +145,8 @@ FluWindow {
         back: Item{
             anchors.fill: flipable
             visible: flipable.flipAngle !== 0
-            FluAppBar {
-                anchors {
-                    top: parent.top
-                    left: parent.left
-                    right: parent.right
-                }
-                darkText: Lang.dark_mode
-                showDark: true
-                z:7
-                darkClickListener:(button)=>handleDarkChanged(button)
-            }
             Row{
+                id:layout_back_buttons
                 z:8
                 anchors{
                     top: parent.top
@@ -149,30 +172,21 @@ FluWindow {
                         loader.reload()
                     }
                 }
+                Component.onCompleted: {
+                    appBar.setHitTestVisible(layout_back_buttons)
+                }
             }
             FluRemoteLoader{
                 id:loader
                 lazy: true
                 anchors.fill: parent
-                source: "https://zhu-zichu.gitee.io/Qt6_156_LieflatPage.qml"
+                source: "https://zhu-zichu.gitee.io/Qt_168_LieflatPage.qml"
             }
         }
         front: Item{
             id:page_front
             visible: flipable.flipAngle !== 180
             anchors.fill: flipable
-            FluAppBar {
-                id:app_bar_front
-                anchors {
-                    top: parent.top
-                    left: parent.left
-                    right: parent.right
-                }
-                darkText: Lang.dark_mode
-                showDark: true
-                darkClickListener:(button)=>handleDarkChanged(button)
-                z:7
-            }
             FluNavigationView{
                 property int clickCount: 0
                 id:nav_view
@@ -185,13 +199,18 @@ FluWindow {
                 pageMode: FluNavigationViewType.NoStack
                 items: ItemsOriginal
                 footerItems:ItemsFooter
-                topPadding:FluTools.isMacos() ? 20 : 0
+                topPadding:{
+                    if(window.useSystemAppBar){
+                        return 0
+                    }
+                    return FluTools.isMacos() ? 20 : 0
+                }
                 displayMode:viewmodel_settings.displayMode
                 logo: "qrc:/example/res/image/favicon.ico"
                 title:"FluentUI"
                 onLogoClicked:{
                     clickCount += 1
-                    showSuccess("点击%1次".arg(clickCount))
+                    showSuccess("%1:%2".arg(qsTr("Click Time")).arg(clickCount))
                     if(clickCount === 5){
                         loader.reload()
                         flipable.flipped = true
@@ -201,7 +220,7 @@ FluWindow {
                 autoSuggestBox:FluAutoSuggestBox{
                     iconSource: FluentIcons.Search
                     items: ItemsOriginal.getSearchData()
-                    placeholderText: Lang.search
+                    placeholderText: qsTr("Search")
                     onItemClicked:
                         (data)=>{
                             ItemsOriginal.startPageByItem(data)
@@ -209,7 +228,12 @@ FluWindow {
                 }
                 Component.onCompleted: {
                     ItemsOriginal.navigationView = nav_view
+                    ItemsOriginal.paneItemMenu = nav_item_right_menu
                     ItemsFooter.navigationView = nav_view
+                    ItemsFooter.paneItemMenu = nav_item_right_menu
+                    appBar.setHitTestVisible(nav_view.buttonMenu)
+                    appBar.setHitTestVisible(nav_view.buttonBack)
+                    appBar.setHitTestVisible(nav_view.imageLogo)
                     setCurrentIndex(0)
                 }
             }
@@ -232,7 +256,7 @@ FluWindow {
         }
     }
 
-    Loader{
+    FluLoader{
         id:loader_reveal
         anchors.fill: parent
     }
@@ -242,9 +266,12 @@ FluWindow {
     }
 
     function handleDarkChanged(button){
-        if(FluTools.isMacos() || !FluTheme.enableAnimation){
+        if(!FluTheme.enableAnimation || window.fitsAppBarWindows === false){
             changeDark()
         }else{
+            if(loader_reveal.sourceComponent){
+                return
+            }
             loader_reveal.sourceComponent = com_reveal
             var target = window.contentItem
             var pos = button.mapToItem(target,0,0)
@@ -283,15 +310,18 @@ FluWindow {
     }
 
     FluTour{
-        id:tour
-        steps:[
-            {title:"夜间模式",description: "这里可以切换夜间模式.",target:()=>app_bar_front.darkButton()},
-            {title:"隐藏彩蛋",description: "多点几下试试！！",target:()=>nav_view.logoButton()}
-        ]
-    }
-
-    FluHttp{
-        id:http
+        id: tour
+        finishText: qsTr("Finish")
+        nextText: qsTr("Next")
+        previousText: qsTr("Previous")
+        steps:{
+            var data = []
+            if(!window.useSystemAppBar){
+                data.push({title:qsTr("Dark Mode"),description: qsTr("Here you can switch to night mode."),target:()=>appBar.buttonDark})
+            }
+            data.push({title:qsTr("Hide Easter eggs"),description: qsTr("Try a few more clicks!!"),target:()=>nav_view.imageLogo})
+            return data
+        }
     }
 
     FpsItem{
@@ -299,7 +329,7 @@ FluWindow {
     }
 
     FluText{
-        text:"fps %1".arg(fps_item.fps)
+        text: "fps %1".arg(fps_item.fps)
         opacity: 0.3
         anchors{
             bottom: parent.bottom
@@ -312,18 +342,18 @@ FluWindow {
     FluContentDialog{
         property string newVerson
         property string body
-        id:dialog_update
-        title:"升级提示"
-        message:"FluentUI目前最新版本 "+ newVerson +" -- 当前应用版本 "+AppInfo.version+" \n现在是否去下载新版本？\n\n更新内容：\n"+body
+        id: dialog_update
+        title: qsTr("Upgrade Tips")
+        message:qsTr("FluentUI is currently up to date ")+ newVerson +qsTr(" -- The current app version") +AppInfo.version+qsTr(" \nNow go and download the new version？\n\nUpdated content: \n")+body
         buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
-        negativeText: "取消"
-        positiveText:"确定"
+        negativeText: qsTr("Cancel")
+        positiveText: qsTr("OK")
         onPositiveClicked:{
             Qt.openUrlExternally("https://github.com/zhuzichu520/FluentUI/releases/latest")
         }
     }
 
-    HttpCallable{
+    FluNetworkCallable{
         id:callable
         property bool silent: true
         onStart: {
@@ -344,14 +374,14 @@ FluWindow {
                     dialog_update.open()
                 }else{
                     if(!silent){
-                        showInfo("当前版本已经是最新版")
+                        showInfo(qsTr("The current version is already the latest"))
                     }
                 }
             }
         onError:
             (status,errorString)=>{
                 if(!silent){
-                    showError("网络异常!")
+                    showError(qsTr("The network is abnormal"))
                 }
                 console.debug(status+";"+errorString)
             }
@@ -359,8 +389,7 @@ FluWindow {
 
     function checkUpdate(silent){
         callable.silent = silent
-        var request = http.newRequest("https://api.github.com/repos/zhuzichu520/FluentUI/releases/latest")
-        http.get(request,callable);
+        FluNetwork.get("https://api.github.com/repos/zhuzichu520/FluentUI/releases/latest")
+        .go(callable)
     }
-
 }

example/qml-Qt6/window/PageWindow.qml

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

example/qml-Qt6/window/SingleInstanceWindow.qml

@@ -2,12 +2,12 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluWindow {
 
-    id:window
-    title:"SingleInstance"
+    id: window
+    title: qsTr("SingleInstance")
     width: 500
     height: 600
     fixSize: true
@@ -30,6 +30,6 @@ FluWindow {
             rightMargin: 20
             verticalCenter: parent.verticalCenter
         }
-        text:"我是一个SingleInstance模式的窗口，如果我存在，我会销毁之前的窗口，并创建一个新窗口"
+        text: qsTr("I'm a SingleInstance window, and if I exist, I'll destroy the previous window and create a new one")
     }
 }