update

CMakeLists: simplify code.

.cmake/version_exe.rc.in

@@ -31,4 +31,4 @@ BEGIN
     END
 END
 
-IDI_ICON1 ICON DISCARDABLE "${FLUENTUI_DIRECTORY}/example/favicon.ico"
+IDI_ICON1 ICON DISCARDABLE "${CMAKE_SOURCE_DIR}/example/favicon.ico"

.github/workflows/macos.yml

@@ -21,8 +21,8 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [macos-13]
-        qt_ver: [6.6.1]
+        os: [macos-latest]
+        qt_ver: [6.6.2]
         qt_arch: [clang_64]
     env:
       targetName: example
@@ -50,13 +50,13 @@ jobs:
           cmake --version
           mkdir build
           cd build
-          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/Users/runner/work/FluentUI/Qt/6.6.1/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/6.6.1/macos/qml -name "*.dSYM" | xargs rm -r
+          sudo find /Users/runner/work/FluentUI/Qt/${{ matrix.qt_ver }}/macos/qml -name "*.dSYM" | xargs rm -r
           # 拷贝依赖
           sudo macdeployqt bin/release/${targetName}.app -qmldir=. -dmg     
           
@@ -73,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.6.1]
+        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.6.1/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.6.1
+            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.6.1\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.6.1        
+          - 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.6.1\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

CMakeLists.txt

@@ -8,28 +8,15 @@ if(MSVC)
     set(CMAKE_EXE_LINKER_FLAGS_RELEASE "${CMAKE_EXE_LINKER_FLAGS_RELEASE} /DEBUG /OPT:REF /OPT:ICF")
 endif()
 
-set(FLUENTUI_DIRECTORY ${CMAKE_CURRENT_LIST_DIR})
-list(APPEND CMAKE_MODULE_PATH ${FLUENTUI_DIRECTORY}/.cmake/)
+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)
 
 #Release也支持日志打印代码位置

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

@@ -6,9 +6,6 @@ project(example VERSION 1.0 LANGUAGES CXX)
 set(CMAKE_CXX_STANDARD 17)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
 
-#导入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)
     add_definitions(-DFLUENTUI_BUILD_STATIC_LIB)
@@ -16,13 +13,16 @@ endif()
 
 #设置可执行文件输出目录
 if(CMAKE_BUILD_TYPE STREQUAL "Debug")
-    set(CMAKE_RUNTIME_OUTPUT_DIRECTORY $<1:${FLUENTUI_DIRECTORY}/bin/debug>)
+    set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/debug)
 else()
-    set(CMAKE_RUNTIME_OUTPUT_DIRECTORY $<1:${FLUENTUI_DIRECTORY}/bin/release>)
+    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)
@@ -36,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}
 )
 
@@ -71,36 +86,35 @@ if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
     endforeach(filepath)
 
     #遍历所有资源文件
-    file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp *.obj)
+    file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp *.in)
     foreach(filepath ${RES_PATHS})
         string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
         list(APPEND resource_files ${filename})
     endforeach(filepath)
-
 endif()
 
 #如果是Windows平台，则生成rc文件，还有inno setup脚本文件
 set(EXAMPLE_VERSION_RC_PATH "")
 if(WIN32)
-    set(EXAMPLE_VERSION_RC_PATH ${CMAKE_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
-    ${FLUENTUI_DIRECTORY}/action-cli/InstallerScript.iss
+    ${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 ()
@@ -109,26 +123,28 @@ endif ()
 if(WIN32)
     if(MSVC)
         if(CMAKE_SIZEOF_VOID_P EQUAL 4)
-            set(3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x86/*.dll)
+            file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x86/*.dll)
         elseif(CMAKE_SIZEOF_VOID_P EQUAL 8)
-            set(3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x64/*.dll)
+            file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x64/*.dll)
         endif()
     elseif(MINGW)
-        set(3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/mingw/*.dll)
+        file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/mingw/*.dll)
     endif()
-    string(REPLACE "/" ${PATH_SEPARATOR} 3RDPARTY_DLL_DIR "${3RDPARTY_DLL_DIR}")
-    file(GLOB DLL_FILES ${3RDPARTY_DLL_DIR})
     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")
     #如果是Qt6.2以上，则使用qt_add_qml_module添加资源文件
-    qt_add_qml_module(example
-        URI "example"
+    qt_add_qml_module(${PROJECT_NAME}
+        URI ${PROJECT_NAME}
         VERSION 1.0
         QML_FILES ${qml_files}
         RESOURCES ${resource_files}
@@ -136,27 +152,27 @@ if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
     )
 else()
     #如果是Qt6.2以下，则使用qrc添加资源文件
-    target_include_directories(example PRIVATE
+    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头文件
 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
@@ -164,13 +180,13 @@ set_target_properties(example PROPERTIES
 )
 
 #Release也支持日志打印代码位置
-target_compile_definitions(example
+target_compile_definitions(${PROJECT_NAME}
     PRIVATE
     QT_MESSAGELOGCONTEXT
 )
 
 #目标文件链接库
-target_link_libraries(example PRIVATE
+target_link_libraries(${PROJECT_NAME} PRIVATE
     Qt${QT_VERSION_MAJOR}::Quick
     Qt${QT_VERSION_MAJOR}::Svg
     Qt${QT_VERSION_MAJOR}::Network
@@ -178,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

@@ -154,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>
@@ -181,12 +180,11 @@
         <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>
@@ -198,5 +196,16 @@
         <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

@@ -21,12 +21,19 @@ Item {
         }
     }
 
+    Connections{
+        target: TranslateHelper
+        function onCurrentChanged(){
+            SettingsHelper.saveLanguage(TranslateHelper.current)
+        }
+    }
+
     Component.onCompleted: {
         FluNetwork.openLog = false
         FluNetwork.setInterceptor(function(param){
             param.addHeader("Token","000000000000000000000")
         })
-        FluApp.init(app)
+        FluApp.init(app,Qt.locale(TranslateHelper.current))
         FluApp.windowIcon = "qrc:/example/res/image/favicon.ico"
         FluApp.useSystemAppBar = SettingsHelper.getUseSystemAppBar()
         FluTheme.darkMode = SettingsHelper.getDarkMode()

example/qml-Qt6/chart/T_BarChart.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:"Bar Chart"
+    title: qsTr("Bar Chart")
 
     FluArea{
         width: 500

example/qml-Qt6/chart/T_BubbleChart.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:"Bubble Chart"
+    title: qsTr("Bubble Chart")
 
     function randomScalingFactor() {
         return Math.random().toFixed(1);

example/qml-Qt6/chart/T_LineChart.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:"Line Chart"
+    title: qsTr("Line Chart")
 
     FluArea{
         width: 500

example/qml-Qt6/chart/T_PieChart.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:"Doughnut and Pie Chart"
+    title: qsTr("Pie Chart")
 
     FluArea{
         width: 500

example/qml-Qt6/chart/T_PolarAreaChart.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:"PolarArea Chart"
+    title: qsTr("Polar Area Chart")
 
     FluArea{
         width: 500

example/qml-Qt6/chart/T_RadarChart.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:"Radar Chart"
+    title: qsTr("Radar Chart")
 
     FluArea{
         width: 500

example/qml-Qt6/chart/T_ScatterChart.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:"Scatter Chart"
+    title: qsTr("Scatter Chart")
 
     function randomScalingFactor() {
         return Math.random().toFixed(1);

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",
@@ -136,7 +130,7 @@ FluExpander{
                     "FluTimeline",
                     "FluChart",
                     "FluRangeSlider",
-                    "FluStaggeredView",
+                    "FluStaggeredLayout",
                     "FluProgressButton",
                     "FluLoadingButton",
                     "FluClip",

example/qml-Qt6/global/ItemsFooter.qml

@@ -13,7 +13,7 @@ FluObject{
     FluPaneItemSeparator{}
 
     FluPaneItem{
-        title:Lang.about
+        title:qsTr("About")
         icon:FluentIcons.Contact
         onTapListener:function(){
             FluApp.navigate("/about")
@@ -21,7 +21,7 @@ FluObject{
     }
 
     FluPaneItem{
-        title:Lang.settings
+        title:qsTr("Settings")
         menuDelegate: paneItemMenu
         icon:FluentIcons.Settings
         url:"qrc:/example/qml/page/T_Settings.qml"

example/qml-Qt6/global/ItemsOriginal.qml

@@ -17,14 +17,14 @@ FluObject{
     FluPaneItem{
         id:item_home
         count: 9
-        title:Lang.home
+        title: qsTr("Home")
         menuDelegate: paneItemMenu
-        infoBadge:FluBadge{
+        infoBadge: FluBadge{
             count: item_home.count
         }
-        icon:FluentIcons.Home
-        url:"qrc:/example/qml/page/T_Home.qml"
-        onTap:{
+        icon: FluentIcons.Home
+        url: "qrc:/example/qml/page/T_Home.qml"
+        onTap: {
             if(navigationView.getCurrentUrl()){
                 item_home.count = 0
             }
@@ -33,365 +33,376 @@ FluObject{
     }
 
     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
+        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"
+            title: qsTr("Buttons")
             menuDelegate: paneItemMenu
-            extra:({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"
-            onTap:{
+            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"
-            onTap:{
+            url: "qrc:/example/qml/page/T_Text.qml"
+            onTap: {
                 item_text.count = 0
                 navigationView.push(url)
             }
         }
         FluPaneItem{
-            title:"Image"
+            title: qsTr("Image")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Image.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Image.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Slider"
+            title: qsTr("Slider")
             menuDelegate: paneItemMenu
-            extra:({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"
-            onTap:{ navigationView.push(url) }
+            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"
+            title: qsTr("CheckBox")
             menuDelegate: paneItemMenu
-            extra:({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"
-            onTap:{ navigationView.push(url) }
+            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"
+            title: qsTr("RadioButton")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_RadioButton.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_RadioButton.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"ToggleSwitch"
+            title: qsTr("ToggleSwitch")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_ToggleSwitch.qml"
-            onTap:{ navigationView.push(url) }
+            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"
+        title: qsTr("Form")
+        icon: FluentIcons.GridView
+        FluPaneItem {
+            title: qsTr("TextBox")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_TextBox.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_TextBox.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"TimePicker"
+            title: qsTr("TimePicker")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_TimePicker.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_TimePicker.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"DatePicker"
+            title: qsTr("DatePicker")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_DatePicker.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_DatePicker.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"CalendarPicker"
+            title: qsTr("CalendarPicker")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_CalendarPicker.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_CalendarPicker.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"ColorPicker"
+            title: qsTr("ColorPicker")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_ColorPicker.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_ColorPicker.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"ShortcutPicker"
+            title: qsTr("ShortcutPicker")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_ShortcutPicker.qml"
-            onTap:{ navigationView.push(url) }
+            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"
+            title: qsTr("InfoBar")
             menuDelegate: paneItemMenu
-            extra:({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"
-            onTap:{ navigationView.push(url) }
+            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"
+            title: qsTr("Progress")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Progress.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Progress.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"RatingControl"
+            title: qsTr("RatingControl")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_RatingControl.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_RatingControl.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Badge"
+            title: qsTr("Badge")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Badge.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Badge.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Rectangle"
+            title: qsTr("Rectangle")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Rectangle.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Rectangle.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Clip"
+            title: qsTr("Clip")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Clip.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Clip.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"StatusView"
+            title: qsTr("Carousel")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_StatusView.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Carousel.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Carousel"
+            title: qsTr("Expander")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Carousel.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Expander.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Expander"
+            title: qsTr("Watermark")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Expander.qml"
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"StaggeredView"
-            menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_StaggeredView.qml"
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"Watermark"
-            menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Watermark.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Watermark.qml"
+            onTap: { navigationView.push(url) }
         }
     }
 
     FluPaneItemExpander{
-        title:Lang.popus
-        icon:FluentIcons.ButtonMenu
-        FluPaneItem{
-            title:"Dialog"
+        title: qsTr("Layout")
+        icon: FluentIcons.DockLeft
+        FluPaneItem {
+            title: qsTr("StaggeredLayout")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Dialog.qml"
-            onTap:{ navigationView.push(url) }
+            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"
-            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"
+            title: qsTr("Tooltip")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Tooltip.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Tooltip.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Menu"
+            title: qsTr("Menu")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Menu.qml"
-            onTap:{ navigationView.push(url) }
+            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"
+            title: qsTr("Pivot")
             menuDelegate: paneItemMenu
-            extra:({image:"qrc:/example/res/image/control/Pivot.png",order:3,recentlyAdded:true,desc:"Presents information from different sources in atabbed view."})
-            url:"qrc:/example/qml/page/T_Pivot.qml"
-            onTap:{ navigationView.push(url) }
+            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"
+            title: qsTr("BreadcrumbBar")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_BreadcrumbBar.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_BreadcrumbBar.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"TabView"
+            title: qsTr("TabView")
             menuDelegate: paneItemMenu
-            extra:({image:"qrc:/example/res/image/control/TabView.png",order:1,recentlyAdded:true,desc:"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) }
+            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"
+            title: qsTr("TreeView")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_TreeView.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_TreeView.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"TableView"
+            title: qsTr("TableView")
             menuDelegate: paneItemMenu
-            extra:({image:"qrc:/example/res/image/control/DataGrid.png",order:4,recentlyAdded:true,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"
-            onTap:{ navigationView.push(url) }
+            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"
+            title: qsTr("Pagination")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Pagination.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Pagination.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"MultiWindow"
+            title: qsTr("MultiWindow")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_MultiWindow.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_MultiWindow.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"FlipView"
+            title: qsTr("FlipView")
             menuDelegate: paneItemMenu
-            extra:({image:"qrc:/example/res/image/control/FlipView.png",order:2,recentlyAdded:true,desc:"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) }
+            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"
+            title: qsTr("Acrylic")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Acrylic.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Acrylic.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Theme"
+            title: qsTr("Theme")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Theme.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Theme.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Typography"
+            title: qsTr("Typography")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Typography.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Typography.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Awesome"
+            title: qsTr("Awesome")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Awesome.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Awesome.qml"
+            onTap: { navigationView.push(url) }
         }
     }
 
     FluPaneItemExpander{
-        title: Lang.chart
-        icon:FluentIcons.AreaChart
+        title: qsTr("Chart")
+        icon: FluentIcons.AreaChart
         FluPaneItem{
-            title:Lang.bar_chart
+            title: qsTr("Bar Chart")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/chart/T_BarChart.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/chart/T_BarChart.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:Lang.line_chart
+            title: qsTr("Line Chart")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/chart/T_LineChart.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/chart/T_LineChart.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:Lang.pie_chart
+            title: qsTr("Pie Chart")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/chart/T_PieChart.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/chart/T_PieChart.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:Lang.polar_area_chart
+            title: qsTr("Polar Area Chart")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/chart/T_PolarAreaChart.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/chart/T_PolarAreaChart.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:Lang.bubble_chart
+            title: qsTr("Bubble Chart")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/chart/T_BubbleChart.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/chart/T_BubbleChart.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:Lang.scatter_chart
+            title: qsTr("Scatter Chart")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/chart/T_ScatterChart.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/chart/T_ScatterChart.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:Lang.radar_chart
+            title: qsTr("Radar Chart")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/chart/T_RadarChart.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/chart/T_RadarChart.qml"
+            onTap: { navigationView.push(url) }
         }
     }
 
@@ -401,73 +412,67 @@ FluObject{
     }
 
     FluPaneItemExpander{
-        title:Lang.other
-        icon:FluentIcons.Shop
+        title: qsTr("Other")
+        icon: FluentIcons.Shop
         FluPaneItem{
-            title:"QRCode"
+            title: qsTr("QRCode")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_QRCode.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_QRCode.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Tour"
+            title: qsTr("Tour")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Tour.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Tour.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Timeline"
+            title: qsTr("Timeline")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Timeline.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Timeline.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Screenshot(Todo)"
+            title: qsTr("Captcha")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Screenshot.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Captcha.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Captcha"
+            title: qsTr("Network")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Captcha.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Network.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Network"
-            menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Network.qml"
-            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"
-            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")
             }
         }
         FluPaneItem{
-            title:"3D"
+            title: qsTr("3D")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_3D.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_3D.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Test Crash"
+            title: qsTr("Test Crash")
             visible: FluTools.isWin()
             onTapListener: function(){
                 AppInfo.testCrash()

example/qml-Qt6/global/Lang.qml

@@ -1,101 +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
-    property string chart
-    property string bar_chart
-    property string line_chart
-    property string pie_chart
-    property string polar_area_chart
-    property string bubble_chart
-    property string scatter_chart
-    property string radar_chart
-
-    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="其他"
-        chart="表格"
-        bar_chart="条形图"
-        line_chart="折线图"
-        pie_chart="饼图"
-        polar_area_chart="极坐标区域图"
-        bubble_chart="气泡图"
-        scatter_chart="散点图"
-        radar_chart="雷达图"
-    }
-
-    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"
-        chart="Chart"
-        bar_chart="Bar Chart"
-        line_chart="Line Chart"
-        pie_chart="Pie Chart"
-        polar_area_chart="Polar Area Chart"
-        bubble_chart="Bubble Chart"
-        scatter_chart="Scatter Chart"
-        radar_chart="Radar Chart"
-    }
-
-    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,7 +42,7 @@ FluScrollablePage{
         Layout.topMargin: 10
         FluTextBox{
             id:text_box
-            placeholderText: "请输入验证码"
+            placeholderText: qsTr("Please enter a verification code")
             Layout.preferredWidth: 240
         }
         FluButton{
@@ -50,9 +50,9 @@ FluScrollablePage{
             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_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,68 +74,76 @@ 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: 68
+        height: 100
         paddings: 10
         Layout.topMargin: 20
         FluButton{
-            anchors.verticalCenter: parent.verticalCenter
-            Layout.topMargin: 20
-            text:"Custom Content Dialog"
+            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:"友情提示"
-    message:"数据正在加载中，请稍等..."
-    negativeText:"取消加载"
+    id: dialog
+    title: qsTr("Friendly Reminder")
+    message: qsTr("Data is loading, please wait...")
+    negativeText: qsTr("Unload")
     contentDelegate: Component{
         Item{
             width: parent.width
@@ -147,36 +153,80 @@ FluScrollablePage{
             }
         }
     }
-    onNegativeClicked:{
-        showSuccess("点击取消按钮")
+    onNegativeClicked: {
+        showSuccess(qsTr("Click the Cancel Button"))
     }
-    positiveText:"确定"
-    onPositiveClicked:{
-        showSuccess("点击确定按钮")
+    positiveText :qsTr("OK")
+    onPositiveClicked: {
+        showSuccess(qsTr("Click the OK Button"))
+        }
     }
     dialog.open()'
     }
 
     FluContentDialog{
-        id:custom_btn_dialog
-        title:"友情提示"
-        message:"数据正在加载中，请稍等..."
-        negativeText:"取消加载"
+        id: custom_btn_dialog
+        title: qsTr("Friendly Reminder")
+        message: qsTr("Data is loading, please wait...")
+        negativeText: qsTr("Unload")
         contentDelegate: Component{
             Item{
-                width: parent.width
-                height: 80
+                implicitWidth: parent.width
+                implicitHeight: 80
                 FluProgressRing{
                     anchors.centerIn: parent
                 }
             }
         }
-        onNegativeClicked:{
-            showSuccess("点击取消按钮")
+        onNegativeClicked: {
+            showSuccess(qsTr("Click the Cancel Button"))
         }
-        positiveText:"确定"
-        onPositiveClicked:{
-            showSuccess("点击确定按钮")
+        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
@@ -48,7 +65,6 @@ FluScrollablePage{
                 leftMargin: 20
             }
         }
-
         Component{
             id:com_grallery
             Item{
@@ -129,7 +145,7 @@ FluScrollablePage{
                                 else scrollbar_header.increase()
                             }
                         onClicked: {
-                            Qt.openUrlExternally(model.url)
+                            model.clicked(model)
                         }
                     }
                 }
@@ -275,3 +291,4 @@ FluScrollablePage{
     }
 
 }
+

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

@@ -4,12 +4,12 @@ import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
 import Qt.labs.platform
-import "qrc:///example/qml/component"
+import "../component"
 
 FluContentPage{
 
     id:root
-    title:"Network"
+    title: qsTr("Network")
 
     FluNetworkCallable{
         id:callable

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
@@ -44,9 +44,7 @@ FluScrollablePage{
         }
         FluColorPicker{
             id:color_picker
-            Component.onCompleted: {
-                setColor(Qt.rgba(0,0,0,1))
-            }
+            current: Qt.rgba(0,0,0,1)
         }
     }
 
@@ -59,9 +57,7 @@ FluScrollablePage{
         }
         FluColorPicker{
             id:bgcolor_picker
-            Component.onCompleted: {
-                setColor(Qt.rgba(1,1,1,1))
-            }
+            current: Qt.rgba(1,1,1,1)
         }
     }
 

example/qml-Qt6/page/T_RadioButton.qml

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

example/qml-Qt6/page/T_RatingControl.qml

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

example/qml-Qt6/page/T_Rectangle.qml

@@ -3,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
-        }
-        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,7 +62,7 @@ FluScrollablePage{
         height: 50
         paddings: 10
         FluCheckBox{
-            text:"Use System AppBar"
+            text: qsTr("Use System AppBar")
             checked: FluApp.useSystemAppBar
             anchors.verticalCenter: parent.verticalCenter
             onClicked: {
@@ -78,7 +78,7 @@ FluScrollablePage{
         height: 50
         paddings: 10
         FluCheckBox{
-            text:"fitsAppBarWindows"
+            text:qsTr("Fits AppBar Windows")
             checked: window.fitsAppBarWindows
             anchors.verticalCenter: parent.verticalCenter
             onClicked: {
@@ -88,13 +88,13 @@ FluScrollablePage{
     }
 
     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)
         }
     }
@@ -112,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(){
@@ -142,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
@@ -159,6 +159,16 @@ FluScrollablePage{
         }
     }
 
+    ListModel{
+        id:model_language
+        ListElement{
+            name:"en"
+        }
+        ListElement{
+            name:"zh"
+        }
+    }
+
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
@@ -171,22 +181,21 @@ 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

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

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,11 +58,15 @@ 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
@@ -73,9 +77,9 @@ FluScrollablePage{
     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

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: {
@@ -126,5 +126,4 @@ FluScrollablePage{
 }
 '
     }
-
 }

example/qml-Qt6/page/T_TableView.qml

@@ -3,67 +3,154 @@ 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
-        signal showDialog(string text,var callback)
-        property var _textBox
+        property var text
         property var onAccpetListener
-        title:"修改列名"
-        negativeText:"取消"
+        title: qsTr("Modify the column name")
+        negativeText: qsTr("Cancel")
         contentDelegate: Component{
             Item{
-                width: parent.width
-                height: 60
+                implicitWidth: parent.width
+                implicitHeight: 60
                 FluTextBox{
                     id:textbox_text
                     anchors.centerIn: parent
-                }
-                Connections{
-                    target: custom_update_dialog
-                    function onShowDialog(text,callback){
-                        custom_update_dialog._textBox = textbox_text
-                        custom_update_dialog.onAccpetListener = callback
-                        textbox_text.text = text
-                        textbox_text.forceActiveFocus()
-                        custom_update_dialog.open()
+                    onTextChanged: {
+                        custom_update_dialog.text = textbox_text.text
                     }
                 }
+                Component.onCompleted: {
+                    textbox_text.text = custom_update_dialog.text
+                    textbox_text.forceActiveFocus()
+                }
             }
         }
-        onNegativeClicked:{
-        }
-        positiveText:"确定"
+        positiveText: qsTr("OK")
         onPositiveClicked:{
-            if(custom_update_dialog.onAccpetListener && custom_update_dialog._textBox){
-                custom_update_dialog.onAccpetListener(custom_update_dialog._textBox.text)
+            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{
@@ -74,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))
                     }
                 }
             }
@@ -116,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})
-                    }
-                }
             }
         }
     }
@@ -154,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()
             }
         }
@@ -227,7 +334,7 @@ FluContentPage{
         id:com_column_sort_age
         Item{
             FluText{
-                text:"年龄"
+                text: qsTr("Age")
                 anchors.centerIn: parent
             }
             ColumnLayout{
@@ -283,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: table_view.customItem(com_column_update_title,{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}),
@@ -321,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,
@@ -361,6 +528,8 @@ FluContentPage{
         itemCount: 100000
         pageButtonCount: 7
         __itemPerPage: 1000
+        previousText: qsTr("<Previous")
+        nextText: qsTr("Next>")
         onRequestPage:
             (page,count)=> {
                 table_view.closeEditor()
@@ -369,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(){
@@ -390,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.themeColor
+                            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.themeColor = 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.themeColor = 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,18 +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()
             }
@@ -132,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
@@ -160,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,12 +23,12 @@ 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
                 }
             }
@@ -36,11 +36,11 @@ FluContentPage{
             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
@@ -49,7 +49,7 @@ FluContentPage{
             RowLayout{
                 spacing: 10
                 FluText{
-                    text:"gapX:"
+                    text: "gapX:"
                     Layout.alignment: Qt.AlignVCenter
                 }
                 FluSlider{
@@ -60,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{
@@ -82,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
@@ -106,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/window/AboutWindow.qml

@@ -2,7 +2,7 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluWindow {
 
@@ -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

@@ -3,20 +3,23 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
 import Qt.labs.platform
-import "qrc:///example/qml/component"
+import "../component"
 
 FluWindow {
 
     id:window
-    title:"友情提示"
+    title: qsTr("Friendly Reminder")
     width: 300
     height: 400
     fixSize: true
     showMinimize: false
-    showStayTop: false
 
     property string crashFilePath
 
+    Component.onCompleted: {
+        window.stayTop = true
+    }
+
     onInitArgument:
         (argument)=>{
             crashFilePath = argument.crashFilePath
@@ -36,11 +39,15 @@ FluWindow {
     FluText{
         id:text_info
         anchors{
-            horizontalCenter: parent.horizontalCenter
             top: parent.top
             topMargin: 240
+            left: parent.left
+            right: parent.right
+            leftMargin: 10
+            rightMargin: 10
         }
-        text:"发生意外错误\n给您带来的不便，我们深表歉意"
+        wrapMode: Text.WrapAnywhere
+        text: qsTr("We apologize for the inconvenience caused by an unexpected error")
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
     }
@@ -52,7 +59,7 @@ FluWindow {
             bottomMargin: 20
         }
         FluButton{
-            text:"日志上报"
+            text: qsTr("Report Logs")
             onClicked: {
                 FluTools.showFileInFolder(crashFilePath)
             }
@@ -62,7 +69,7 @@ FluWindow {
             height: 1
         }
         FluFilledButton{
-            text:"重启程序"
+            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

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,23 +5,22 @@ 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: 960
-    height: 600
+    width: 1000
+    height: 680
     minimumWidth: 520
     minimumHeight: 200
     launchMode: FluWindowType.SingleTask
     fitsAppBarWindows: true
     appBar: FluAppBar {
         height: 30
-        darkText: Lang.dark_mode
         showDark: true
         darkClickListener:(button)=>handleDarkChanged(button)
         closeClickListener: ()=>{dialog_close.open()}
@@ -85,7 +84,7 @@ FluWindow {
     }
 
     Timer{
-        id:timer_window_hide_delay
+        id: timer_window_hide_delay
         interval: 150
         onTriggered: {
             window.hide()
@@ -93,30 +92,29 @@ FluWindow {
     }
 
     FluContentDialog{
-        id:dialog_close
-        title:"退出"
-        message:"确定要退出程序吗？"
-        negativeText:"最小化"
+        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("友情提示","FluentUI已隐藏至托盘,点击托盘可再次激活窗口");
+            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:"退出"
-        neutralText:"取消"
+        positiveText: qsTr("Quit")
+        neutralText: qsTr("Cancel")
         onPositiveClicked:{
             FluApp.exit(0)
         }
     }
 
     Component{
-        id:nav_item_right_menu
+        id: nav_item_right_menu
         FluMenu{
-            id:menu
-            width: 130
+            width: 186
             FluMenuItem{
-                text: "在独立窗口打开"
-                visible: true
+                text: qsTr("Open in Separate Window")
+                font.pixelSize: 12
                 onClicked: {
                     FluApp.navigate("/pageWindow",{title:modelData.title,url:modelData.url})
                 }
@@ -174,12 +172,15 @@ FluWindow {
                         loader.reload()
                     }
                 }
+                Component.onCompleted: {
+                    appBar.setHitTestVisible(layout_back_buttons)
+                }
             }
             FluRemoteLoader{
                 id:loader
                 lazy: true
                 anchors.fill: parent
-                source: "https://zhu-zichu.gitee.io/Qt_163_LieflatPage.qml"
+                source: "https://zhu-zichu.gitee.io/Qt_168_LieflatPage.qml"
             }
         }
         front: Item{
@@ -209,7 +210,7 @@ FluWindow {
                 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
@@ -219,7 +220,7 @@ FluWindow {
                 autoSuggestBox:FluAutoSuggestBox{
                     iconSource: FluentIcons.Search
                     items: ItemsOriginal.getSearchData()
-                    placeholderText: Lang.search
+                    placeholderText: qsTr("Search")
                     onItemClicked:
                         (data)=>{
                             ItemsOriginal.startPageByItem(data)
@@ -230,6 +231,9 @@ FluWindow {
                     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)
                 }
             }
@@ -240,7 +244,7 @@ FluWindow {
         id:com_reveal
         CircularReveal{
             id:reveal
-            target:window.layoutContainer()
+            target:window.contentItem
             anchors.fill: parent
             onAnimationFinished:{
                 //动画结束后释放资源
@@ -269,7 +273,7 @@ FluWindow {
                 return
             }
             loader_reveal.sourceComponent = com_reveal
-            var target = window.layoutContainer()
+            var target = window.contentItem
             var pos = button.mapToItem(target,0,0)
             var mouseX = pos.x
             var mouseY = pos.y
@@ -306,13 +310,16 @@ FluWindow {
     }
 
     FluTour{
-        id:tour
+        id: tour
+        finishText: qsTr("Finish")
+        nextText: qsTr("Next")
+        previousText: qsTr("Previous")
         steps:{
             var data = []
             if(!window.useSystemAppBar){
-                data.push({title:"夜间模式",description: "这里可以切换夜间模式.",target:()=>appBar.darkButton()})
+                data.push({title:qsTr("Dark Mode"),description: qsTr("Here you can switch to night mode."),target:()=>appBar.buttonDark})
             }
-            data.push({title:"隐藏彩蛋",description: "多点几下试试！！",target:()=>nav_view.logoButton()})
+            data.push({title:qsTr("Hide Easter eggs"),description: qsTr("Try a few more clicks!!"),target:()=>nav_view.imageLogo})
             return data
         }
     }
@@ -322,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
@@ -335,12 +342,12 @@ 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")
         }
@@ -367,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)
             }
@@ -385,5 +392,4 @@ FluWindow {
         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 {
 

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")
     }
 }

example/qml-Qt6/window/SingleTaskWindow.qml

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

example/qml-Qt6/window/StandardWindow.qml

@@ -2,7 +2,7 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
-import "qrc:///example/qml/component"
+import "../component"
 
 FluWindow {
 
@@ -37,7 +37,7 @@ FluWindow {
 
     FluText{
         anchors.centerIn: parent
-        text:"我是一个Standard模式的窗口，每次我都会创建一个新的窗口"
+        text: qsTr("I'm a Standard mode window, and every time I create a new window")
     }
 
 }

example/qml/App.qml

@@ -21,12 +21,19 @@ Item {
         }
     }
 
+    Connections{
+        target: TranslateHelper
+        function onCurrentChanged(){
+            SettingsHelper.saveLanguage(TranslateHelper.current)
+        }
+    }
+
     Component.onCompleted: {
         FluNetwork.openLog = false
         FluNetwork.setInterceptor(function(param){
             param.addHeader("Token","000000000000000000000")
         })
-        FluApp.init(app)
+        FluApp.init(app,Qt.locale(TranslateHelper.current))
         FluApp.windowIcon = "qrc:/example/res/image/favicon.ico"
         FluApp.useSystemAppBar = SettingsHelper.getUseSystemAppBar()
         FluTheme.darkMode = SettingsHelper.getDarkMode()

example/qml/chart/T_BarChart.qml

@@ -3,12 +3,11 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
-import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{
 
-    title:"Bar Chart"
+    title: qsTr("Bar Chart")
 
     FluArea{
         width: 500

example/qml/chart/T_BubbleChart.qml

@@ -3,12 +3,11 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
-import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{
 
-    title:"Bubble Chart"
+    title: qsTr("Bubble Chart")
 
     function randomScalingFactor() {
         return Math.random().toFixed(1);

example/qml/chart/T_LineChart.qml

@@ -3,12 +3,11 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
-import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{
 
-    title:"Line Chart"
+    title: qsTr("Line Chart")
 
     FluArea{
         width: 500

example/qml/chart/T_PieChart.qml

@@ -3,12 +3,11 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
-import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{
 
-    title:"Doughnut and Pie Chart"
+    title: qsTr("Pie Chart")
 
     FluArea{
         width: 500

example/qml/chart/T_PolarAreaChart.qml

@@ -3,12 +3,11 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
-import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{
 
-    title:"PolarArea Chart"
+    title: qsTr("Polar Area Chart")
 
     FluArea{
         width: 500

example/qml/chart/T_RadarChart.qml

@@ -3,12 +3,11 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
-import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{
 
-    title:"Radar Chart"
+    title: qsTr("Radar Chart")
 
     FluArea{
         width: 500

example/qml/chart/T_ScatterChart.qml

@@ -3,12 +3,11 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
-import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{
 
-    title:"Scatter Chart"
+    title: qsTr("Scatter Chart")
 
     function randomScalingFactor() {
         return Math.random().toFixed(1);

example/qml/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",
@@ -136,7 +130,7 @@ FluExpander{
                     "FluTimeline",
                     "FluChart",
                     "FluRangeSlider",
-                    "FluStaggeredView",
+                    "FluStaggeredLayout",
                     "FluProgressButton",
                     "FluLoadingButton",
                     "FluClip",

example/qml/global/ItemsFooter.qml

@@ -13,7 +13,7 @@ FluObject{
     FluPaneItemSeparator{}
 
     FluPaneItem{
-        title:Lang.about
+        title:qsTr("About")
         icon:FluentIcons.Contact
         onTapListener:function(){
             FluApp.navigate("/about")
@@ -21,7 +21,7 @@ FluObject{
     }
 
     FluPaneItem{
-        title:Lang.settings
+        title:qsTr("Settings")
         menuDelegate: paneItemMenu
         icon:FluentIcons.Settings
         url:"qrc:/example/qml/page/T_Settings.qml"

example/qml/global/ItemsOriginal.qml

@@ -17,14 +17,14 @@ FluObject{
     FluPaneItem{
         id:item_home
         count: 9
-        title:Lang.home
+        title: qsTr("Home")
         menuDelegate: paneItemMenu
-        infoBadge:FluBadge{
+        infoBadge: FluBadge{
             count: item_home.count
         }
-        icon:FluentIcons.Home
-        url:"qrc:/example/qml/page/T_Home.qml"
-        onTap:{
+        icon: FluentIcons.Home
+        url: "qrc:/example/qml/page/T_Home.qml"
+        onTap: {
             if(navigationView.getCurrentUrl()){
                 item_home.count = 0
             }
@@ -33,365 +33,376 @@ FluObject{
     }
 
     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
+        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"
+            title: qsTr("Buttons")
             menuDelegate: paneItemMenu
-            extra:({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"
-            onTap:{
+            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"
-            onTap:{
+            url: "qrc:/example/qml/page/T_Text.qml"
+            onTap: {
                 item_text.count = 0
                 navigationView.push(url)
             }
         }
         FluPaneItem{
-            title:"Image"
+            title: qsTr("Image")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Image.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Image.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Slider"
+            title: qsTr("Slider")
             menuDelegate: paneItemMenu
-            extra:({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"
-            onTap:{ navigationView.push(url) }
+            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"
+            title: qsTr("CheckBox")
             menuDelegate: paneItemMenu
-            extra:({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"
-            onTap:{ navigationView.push(url) }
+            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"
+            title: qsTr("RadioButton")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_RadioButton.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_RadioButton.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"ToggleSwitch"
+            title: qsTr("ToggleSwitch")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_ToggleSwitch.qml"
-            onTap:{ navigationView.push(url) }
+            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"
+        title: qsTr("Form")
+        icon: FluentIcons.GridView
+        FluPaneItem {
+            title: qsTr("TextBox")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_TextBox.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_TextBox.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"TimePicker"
+            title: qsTr("TimePicker")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_TimePicker.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_TimePicker.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"DatePicker"
+            title: qsTr("DatePicker")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_DatePicker.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_DatePicker.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"CalendarPicker"
+            title: qsTr("CalendarPicker")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_CalendarPicker.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_CalendarPicker.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"ColorPicker"
+            title: qsTr("ColorPicker")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_ColorPicker.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_ColorPicker.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"ShortcutPicker"
+            title: qsTr("ShortcutPicker")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_ShortcutPicker.qml"
-            onTap:{ navigationView.push(url) }
+            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"
+            title: qsTr("InfoBar")
             menuDelegate: paneItemMenu
-            extra:({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"
-            onTap:{ navigationView.push(url) }
+            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"
+            title: qsTr("Progress")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Progress.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Progress.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"RatingControl"
+            title: qsTr("RatingControl")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_RatingControl.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_RatingControl.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Badge"
+            title: qsTr("Badge")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Badge.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Badge.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Rectangle"
+            title: qsTr("Rectangle")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Rectangle.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Rectangle.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Clip"
+            title: qsTr("Clip")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Clip.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Clip.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"StatusView"
+            title: qsTr("Carousel")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_StatusView.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Carousel.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Carousel"
+            title: qsTr("Expander")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Carousel.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Expander.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Expander"
+            title: qsTr("Watermark")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Expander.qml"
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"StaggeredView"
-            menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_StaggeredView.qml"
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"Watermark"
-            menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Watermark.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Watermark.qml"
+            onTap: { navigationView.push(url) }
         }
     }
 
     FluPaneItemExpander{
-        title:Lang.popus
-        icon:FluentIcons.ButtonMenu
-        FluPaneItem{
-            title:"Dialog"
+        title: qsTr("Layout")
+        icon: FluentIcons.DockLeft
+        FluPaneItem {
+            title: qsTr("StaggeredLayout")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Dialog.qml"
-            onTap:{ navigationView.push(url) }
+            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"
-            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"
+            title: qsTr("Tooltip")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Tooltip.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Tooltip.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Menu"
+            title: qsTr("Menu")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Menu.qml"
-            onTap:{ navigationView.push(url) }
+            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"
+            title: qsTr("Pivot")
             menuDelegate: paneItemMenu
-            extra:({image:"qrc:/example/res/image/control/Pivot.png",order:3,recentlyAdded:true,desc:"Presents information from different sources in atabbed view."})
-            url:"qrc:/example/qml/page/T_Pivot.qml"
-            onTap:{ navigationView.push(url) }
+            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"
+            title: qsTr("BreadcrumbBar")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_BreadcrumbBar.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_BreadcrumbBar.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"TabView"
+            title: qsTr("TabView")
             menuDelegate: paneItemMenu
-            extra:({image:"qrc:/example/res/image/control/TabView.png",order:1,recentlyAdded:true,desc:"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) }
+            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"
+            title: qsTr("TreeView")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_TreeView.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_TreeView.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"TableView"
+            title: qsTr("TableView")
             menuDelegate: paneItemMenu
-            extra:({image:"qrc:/example/res/image/control/DataGrid.png",order:4,recentlyAdded:true,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"
-            onTap:{ navigationView.push(url) }
+            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"
+            title: qsTr("Pagination")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Pagination.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Pagination.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"MultiWindow"
+            title: qsTr("MultiWindow")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_MultiWindow.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_MultiWindow.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"FlipView"
+            title: qsTr("FlipView")
             menuDelegate: paneItemMenu
-            extra:({image:"qrc:/example/res/image/control/FlipView.png",order:2,recentlyAdded:true,desc:"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) }
+            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"
+            title: qsTr("Acrylic")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Acrylic.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Acrylic.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Theme"
+            title: qsTr("Theme")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Theme.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Theme.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Typography"
+            title: qsTr("Typography")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Typography.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Typography.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Awesome"
+            title: qsTr("Awesome")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Awesome.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Awesome.qml"
+            onTap: { navigationView.push(url) }
         }
     }
 
     FluPaneItemExpander{
-        title: Lang.chart
-        icon:FluentIcons.AreaChart
+        title: qsTr("Chart")
+        icon: FluentIcons.AreaChart
         FluPaneItem{
-            title:Lang.bar_chart
+            title: qsTr("Bar Chart")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/chart/T_BarChart.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/chart/T_BarChart.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:Lang.line_chart
+            title: qsTr("Line Chart")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/chart/T_LineChart.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/chart/T_LineChart.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:Lang.pie_chart
+            title: qsTr("Pie Chart")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/chart/T_PieChart.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/chart/T_PieChart.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:Lang.polar_area_chart
+            title: qsTr("Polar Area Chart")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/chart/T_PolarAreaChart.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/chart/T_PolarAreaChart.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:Lang.bubble_chart
+            title: qsTr("Bubble Chart")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/chart/T_BubbleChart.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/chart/T_BubbleChart.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:Lang.scatter_chart
+            title: qsTr("Scatter Chart")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/chart/T_ScatterChart.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/chart/T_ScatterChart.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:Lang.radar_chart
+            title: qsTr("Radar Chart")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/chart/T_RadarChart.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/chart/T_RadarChart.qml"
+            onTap: { navigationView.push(url) }
         }
     }
 
@@ -401,73 +412,67 @@ FluObject{
     }
 
     FluPaneItemExpander{
-        title:Lang.other
-        icon:FluentIcons.Shop
+        title: qsTr("Other")
+        icon: FluentIcons.Shop
         FluPaneItem{
-            title:"QRCode"
+            title: qsTr("QRCode")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_QRCode.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_QRCode.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Tour"
+            title: qsTr("Tour")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Tour.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Tour.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Timeline"
+            title: qsTr("Timeline")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Timeline.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Timeline.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Screenshot(Todo)"
+            title: qsTr("Captcha")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Screenshot.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Captcha.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Captcha"
+            title: qsTr("Network")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Captcha.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_Network.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Network"
-            menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_Network.qml"
-            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"
-            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")
             }
         }
         FluPaneItem{
-            title:"3D"
+            title: qsTr("3D")
             menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_3D.qml"
-            onTap:{ navigationView.push(url) }
+            url: "qrc:/example/qml/page/T_3D.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Test Crash"
+            title: qsTr("Test Crash")
             visible: FluTools.isWin()
             onTapListener: function(){
                 AppInfo.testCrash()

example/qml/global/Lang.qml

@@ -1,101 +0,0 @@
-pragma Singleton
-
-import QtQuick 2.15
-
-QtObject {
-
-    property string home
-    property string basic_input
-    property string form
-    property string surface
-    property string popus
-    property string navigation
-    property string theming
-    property string media
-    property string dark_mode
-    property string sys_dark_mode
-    property string search
-    property string about
-    property string settings
-    property string locale
-    property string navigation_view_display_mode
-    property string other
-    property string chart
-    property string bar_chart
-    property string line_chart
-    property string pie_chart
-    property string polar_area_chart
-    property string bubble_chart
-    property string scatter_chart
-    property string radar_chart
-
-    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="其他"
-        chart="表格"
-        bar_chart="条形图"
-        line_chart="折线图"
-        pie_chart="饼图"
-        polar_area_chart="极坐标区域图"
-        bubble_chart="气泡图"
-        scatter_chart="散点图"
-        radar_chart="雷达图"
-    }
-
-    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"
-        chart="Chart"
-        bar_chart="Bar Chart"
-        line_chart="Line Chart"
-        pie_chart="Pie Chart"
-        polar_area_chart="Polar Area Chart"
-        bubble_chart="Bubble Chart"
-        scatter_chart="Scatter Chart"
-        radar_chart="Radar Chart"
-    }
-
-    property string __locale
-    property var __localeList: ["Zh","En"]
-
-    on__LocaleChanged: {
-        if(__locale === "Zh"){
-            zh()
-        }else{
-            en()
-        }
-    }
-
-    Component.onCompleted: {
-        __locale = "En"
-    }
-
-}

example/qml/global/qmldir

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