Update README.md

feat: FluCarousel支持纵向轮播

.clang-format

@@ -0,0 +1,130 @@
+# References:
+#   https://clang.llvm.org/docs/ClangFormatStyleOptions.html
+#   https://code.qt.io/cgit/qt/qt5.git/tree/_clang-format
+
+BasedOnStyle: LLVM
+
+Standard: c++17
+
+# 指针和引用的对齐方式。
+# 可能的值有：
+# PAS_Left (在配置中： Left) 指针左对齐。
+# PAS_Right (在配置中： Right) 指针右对齐。
+# PAS_Middle (在配置中： Middle) 指针中间对齐。
+PointerAlignment: Right
+
+# public/protected/private 等访问修饰符偏移量
+AccessModifierOffset: -4
+
+# 缩进长度
+IndentWidth: 4
+
+# 连续空行的最大数
+MaxEmptyLinesToKeep: 999
+
+# 在OC中的@property后面添加一个空格。例如：使用“@property (readonly)”而不是“@property(readonly)”
+ObjCSpaceAfterProperty: true
+
+# OC块中所拍的字符数
+ObjCBlockIndentWidth: 4
+
+# 取决于值, 语句“int f() { return 0; }”可以被放到一个单行。
+# 可能的值有：
+# SFS_None (在配置中： None) 从不合并方法或函数到单独的一行。
+# SFS_Empty (在配置中： Empty) 仅合并空的函数。
+# SFS_Inline (在配置中： Inline) 仅合并类中定义的方法或函数. 意味着 “empty”.
+# SFS_All (在配置中： All) 合并所有的方法适应单行.
+AllowShortFunctionsOnASingleLine: None
+
+# 如果为真（true）, 语句“if (a) return;” 能被放到单行。
+AllowShortIfStatementsOnASingleLine: false
+
+# 如果为真（true）, 对齐注释。
+AlignTrailingComments: true
+
+# 如果为真,对齐连续的宏定义
+AlignConsecutiveMacros: true
+
+# 如果为真（true）,将会在“[”之后和“]”之前插入空格。
+SpacesInSquareBrackets: false
+
+# 如果为真（true）, 将会在“(”之后和“)”之前插入空格。
+SpacesInParentheses : false
+
+# 如果为真（true）, 校准连续的声明。
+# 这将会校准连续多行的声明的名字。这将会导致像下面这样的格式：
+# int         aaaa = 12;
+# float       b = 23;
+# std::string ccc = 23;
+AlignConsecutiveDeclarations: false
+
+# 如果为真（true），连续调整多行
+# 这将会调整连续行中的分配操作符。这将会导致像下面这样的格式：
+# int aaaa = 12;
+# int b    = 23;
+# int ccc  = 23;
+AlignConsecutiveAssignments: false
+
+# 如果为假（false），移除分配操作符（=）前空格。
+SpaceBeforeAssignmentOperators: true
+
+# 如果为真（true）, 将会在字面量容器中插入空格(例如 OC和Javascript的数组和字典字面量)。
+SpacesInContainerLiterals: false
+
+# 缩进case标签
+IndentCaseLabels: true
+
+# 如果表达式中包含函数调用，并且函数调用因为表达式太长被放到了下一行，是否缩进
+IndentWrappedFunctionNames: true
+
+# 如果为真（true）, 保持块的起始空行。
+# true:                                  false:
+# if (foo) {                     vs.     if (foo) {
+#                                          bar();
+#   bar();                               }
+# }
+KeepEmptyLinesAtTheStartOfBlocks: true
+
+# 允许所有参数都被放在下一行
+AllowAllParametersOfDeclarationOnNextLine: false
+
+# 使用C风格强制类型转换后，是否在中间添加一个空格
+SpaceAfterCStyleCast: true
+
+# 在模板定义后换行
+AlwaysBreakTemplateDeclarations: Yes
+
+# Tab长度
+TabWidth: 4
+
+# 是否使用Tab
+UseTab: Never
+
+# 在括号后对齐参数
+# someLongFunction(argument1,
+#                  argument2);
+AlignAfterOpenBracket: Align
+
+# 名字空间内部缩进
+NamespaceIndentation: All
+
+# 一行最长列数
+ColumnLimit: 100
+
+# 按层次缩进宏定义
+IndentPPDirectives: AfterHash
+
+# 预处理语句缩进为 2
+PPIndentWidth: 2
+
+# 数组元素对齐
+AlignArrayOfStructures: Left
+
+# 不对头文件排序
+SortIncludes: Never
+
+FixNamespaceComments: false
+
+StatementMacros: ['__qas_attr__', '__qas_exclude__', '__qas_include__']
+
+ForEachMacros: [ foreach, Q_FOREACH, BOOST_FOREACH, forever, Q_FOREVER, QBENCHMARK, QBENCHMARK_ONCE ]

.cmake/GetGitRevisionDescription.cmake

@@ -0,0 +1,317 @@
+if(__get_git_revision_description)
+    return()
+endif()
+set(__get_git_revision_description YES)
+
+get_filename_component(_gitdescmoddir ${CMAKE_CURRENT_LIST_FILE} PATH)
+
+function(_git_find_closest_git_dir _start_dir _git_dir_var)
+    set(cur_dir "${_start_dir}")
+    set(git_dir "${_start_dir}/.git")
+    while(NOT EXISTS "${git_dir}")
+        set(git_previous_parent "${cur_dir}")
+        get_filename_component(cur_dir ${cur_dir} DIRECTORY)
+        if(cur_dir STREQUAL git_previous_parent)
+            set(${_git_dir_var}
+                ""
+                PARENT_SCOPE)
+            return()
+        endif()
+        set(git_dir "${cur_dir}/.git")
+    endwhile()
+    set(${_git_dir_var}
+        "${git_dir}"
+        PARENT_SCOPE)
+endfunction()
+
+function(get_git_head_revision _refspecvar _hashvar)
+    _git_find_closest_git_dir("${CMAKE_CURRENT_SOURCE_DIR}" GIT_DIR)
+
+    if("${ARGN}" STREQUAL "ALLOW_LOOKING_ABOVE_CMAKE_SOURCE_DIR")
+        set(ALLOW_LOOKING_ABOVE_CMAKE_SOURCE_DIR TRUE)
+    else()
+        set(ALLOW_LOOKING_ABOVE_CMAKE_SOURCE_DIR FALSE)
+    endif()
+    if(NOT "${GIT_DIR}" STREQUAL "")
+        file(RELATIVE_PATH _relative_to_source_dir "${CMAKE_SOURCE_DIR}"
+            "${GIT_DIR}")
+        if("${_relative_to_source_dir}" MATCHES "[.][.]" AND NOT ALLOW_LOOKING_ABOVE_CMAKE_SOURCE_DIR)
+            set(GIT_DIR "")
+        endif()
+    endif()
+    if("${GIT_DIR}" STREQUAL "")
+        set(${_refspecvar}
+            "GITDIR-NOTFOUND"
+            PARENT_SCOPE)
+        set(${_hashvar}
+            "GITDIR-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+
+    if(NOT IS_DIRECTORY ${GIT_DIR})
+        execute_process(
+            COMMAND "${GIT_EXECUTABLE}" rev-parse
+            --show-superproject-working-tree
+            WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+            OUTPUT_VARIABLE out
+            ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+        if(NOT "${out}" STREQUAL "")
+            file(READ ${GIT_DIR} submodule)
+            string(REGEX REPLACE "gitdir: (.*)$" "\\1" GIT_DIR_RELATIVE
+                ${submodule})
+            string(STRIP ${GIT_DIR_RELATIVE} GIT_DIR_RELATIVE)
+            get_filename_component(SUBMODULE_DIR ${GIT_DIR} PATH)
+            get_filename_component(GIT_DIR ${SUBMODULE_DIR}/${GIT_DIR_RELATIVE}
+                ABSOLUTE)
+            set(HEAD_SOURCE_FILE "${GIT_DIR}/HEAD")
+        else()
+            file(READ ${GIT_DIR} worktree_ref)
+            string(REGEX REPLACE "gitdir: (.*)$" "\\1" git_worktree_dir
+                ${worktree_ref})
+            string(STRIP ${git_worktree_dir} git_worktree_dir)
+            _git_find_closest_git_dir("${git_worktree_dir}" GIT_DIR)
+            set(HEAD_SOURCE_FILE "${git_worktree_dir}/HEAD")
+        endif()
+    else()
+        set(HEAD_SOURCE_FILE "${GIT_DIR}/HEAD")
+    endif()
+    set(GIT_DATA "${CMAKE_CURRENT_BINARY_DIR}/CMakeFiles/git-data")
+    if(NOT EXISTS "${GIT_DATA}")
+        file(MAKE_DIRECTORY "${GIT_DATA}")
+    endif()
+
+    if(NOT EXISTS "${HEAD_SOURCE_FILE}")
+        return()
+    endif()
+    set(HEAD_FILE "${GIT_DATA}/HEAD")
+    configure_file("${HEAD_SOURCE_FILE}" "${HEAD_FILE}" COPYONLY)
+
+    configure_file("${_gitdescmoddir}/GetGitRevisionDescription.cmake.in"
+        "${GIT_DATA}/grabRef.cmake" @ONLY)
+    include("${GIT_DATA}/grabRef.cmake")
+
+    set(${_refspecvar}
+        "${HEAD_REF}"
+        PARENT_SCOPE)
+    set(${_hashvar}
+        "${HEAD_HASH}"
+        PARENT_SCOPE)
+endfunction()
+
+function(git_latest_tag _var)
+    if(NOT GIT_FOUND)
+        find_package(Git QUIET)
+    endif()
+    if(NOT GIT_FOUND)
+        set(${_var}
+            "GIT-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+    execute_process(
+        COMMAND "${GIT_EXECUTABLE}" describe --abbrev=0 --tag
+        WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+        RESULT_VARIABLE res
+        OUTPUT_VARIABLE out
+        ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+    if(NOT res EQUAL 0)
+        set(out "GIT-TAG-NOTFOUND")
+    endif()
+
+    set(${_var}
+        "${out}"
+        PARENT_SCOPE)
+endfunction()
+
+function(git_commit_counts _var)
+    if(NOT GIT_FOUND)
+        find_package(Git QUIET)
+    endif()
+    if(NOT GIT_FOUND)
+        set(${_var}
+            "GIT-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+    execute_process(
+        COMMAND "${GIT_EXECUTABLE}" rev-list HEAD --count
+        WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+        RESULT_VARIABLE res
+        OUTPUT_VARIABLE out
+        ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+    if(NOT res EQUAL 0)
+        set(out "GIT-TAG-NOTFOUND")
+    endif()
+
+    set(${_var}
+        "${out}"
+        PARENT_SCOPE)
+endfunction()
+
+function(git_describe _var)
+    if(NOT GIT_FOUND)
+        find_package(Git QUIET)
+    endif()
+    get_git_head_revision(refspec hash ALLOW_LOOKING_ABOVE_CMAKE_SOURCE_DIR)
+    if(NOT GIT_FOUND)
+        set(${_var}
+            "GIT-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+    if(NOT hash)
+        set(${_var}
+            "HEAD-HASH-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+
+    execute_process(
+        COMMAND "${GIT_EXECUTABLE}" describe --tags --always ${hash} ${ARGN}
+        WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+        RESULT_VARIABLE res
+        OUTPUT_VARIABLE out
+        ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+    if(NOT res EQUAL 0)
+        set(out "${out}-${res}-NOTFOUND")
+    endif()
+
+    set(${_var}
+        "${out}"
+        PARENT_SCOPE)
+endfunction()
+
+function(git_release_version _var)
+    if(NOT GIT_FOUND)
+        find_package(Git QUIET)
+    endif()
+    get_git_head_revision(refspec hash ALLOW_LOOKING_ABOVE_CMAKE_SOURCE_DIR)
+    if(NOT GIT_FOUND)
+        set(${_var}
+            "GIT-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+    if(NOT hash)
+        set(${_var}
+            "HEAD-HASH-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+
+    execute_process(
+        COMMAND "${GIT_EXECUTABLE}" symbolic-ref --short -q HEAD
+        WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+        RESULT_VARIABLE res
+        OUTPUT_VARIABLE out
+        ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+    if(NOT res EQUAL 0)
+        set(out "${out}-${res}-NOTFOUND")
+    endif()
+
+    string(FIND ${out} "release/" found})
+    if(${out} MATCHES "^release/.+$")
+        string(REPLACE "release/" "" tmp_out ${out})
+        set(${_var} "${tmp_out}" PARENT_SCOPE)
+    else()
+        set(${_var} "" PARENT_SCOPE)
+    endif()
+endfunction()
+
+function(git_describe_working_tree _var)
+    if(NOT GIT_FOUND)
+        find_package(Git QUIET)
+    endif()
+    if(NOT GIT_FOUND)
+        set(${_var}
+            "GIT-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+
+    execute_process(
+        COMMAND "${GIT_EXECUTABLE}" describe --dirty ${ARGN}
+        WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+        RESULT_VARIABLE res
+        OUTPUT_VARIABLE out
+        ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+    if(NOT res EQUAL 0)
+        set(out "${out}-${res}-NOTFOUND")
+    endif()
+
+    set(${_var}
+        "${out}"
+        PARENT_SCOPE)
+endfunction()
+
+function(git_get_exact_tag _var)
+    git_describe(out --exact-match ${ARGN})
+    set(${_var}
+        "${out}"
+        PARENT_SCOPE)
+endfunction()
+
+function(git_local_changes _var)
+    if(NOT GIT_FOUND)
+        find_package(Git QUIET)
+    endif()
+    get_git_head_revision(refspec hash)
+    if(NOT GIT_FOUND)
+        set(${_var}
+            "GIT-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+    if(NOT hash)
+        set(${_var}
+            "HEAD-HASH-NOTFOUND"
+            PARENT_SCOPE)
+        return()
+    endif()
+
+    execute_process(
+        COMMAND "${GIT_EXECUTABLE}" diff-index --quiet HEAD --
+        WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
+        RESULT_VARIABLE res
+        OUTPUT_VARIABLE out
+        ERROR_QUIET OUTPUT_STRIP_TRAILING_WHITESPACE)
+    if(res EQUAL 0)
+        set(${_var}
+            "CLEAN"
+            PARENT_SCOPE)
+    else()
+        set(${_var}
+            "DIRTY"
+            PARENT_SCOPE)
+    endif()
+endfunction()
+
+git_release_version(GIT_TAG)
+git_get_exact_tag(GIT_EXACT_TAG)
+if(GIT_TAG STREQUAL "")
+    git_latest_tag(GIT_TAG)
+endif()
+if(GIT_TAG STREQUAL "GIT-TAG-NOTFOUND")
+    set(GIT_TAG "1.0.0")
+endif ()
+git_describe(GIT_DESCRIBE)
+git_commit_counts(GIT_COMMIT_COUNT)
+_git_find_closest_git_dir("${CMAKE_CURRENT_SOURCE_DIR}" GIT_DIR)
+if(NOT IS_DIRECTORY ${GIT_DIR})
+    message(STATUS "Current .git not exist")
+    set(GIT_COMMIT_COUNT "1")
+    set(GIT_DESCRIBE "1.0.0")
+    set(GIT_TAG "1.0.0")
+else()
+    message(STATUS "Current .git exist")
+endif()
+string(REPLACE "." "," GIT_TAG_WITH_COMMA ${GIT_TAG})
+string(REGEX MATCH "[0-9]+\\.[0-9]+\\.[0-9]+" GIT_SEMVER "${GIT_TAG}")
+string(REGEX MATCH "([0-9]+)\\.([0-9]+)\\.([0-9]+)" SEMVER_SPLITED "${GIT_SEMVER}")
+set(MAJOR_VERSION ${CMAKE_MATCH_1})
+set(MINOR_VERSION ${CMAKE_MATCH_2})
+set(PATCH_VERSION ${CMAKE_MATCH_3})
+MATH(EXPR VERSION_COUNTER "${MAJOR_VERSION} * 10000 + ${MINOR_VERSION} * 100 + ${PATCH_VERSION}")
+message(STATUS "Current git tag: ${GIT_TAG}, commit count: ${GIT_COMMIT_COUNT}, describe: ${GIT_DESCRIBE}")
+message(STATUS "Current semver: major: ${MAJOR_VERSION}, minor: ${MINOR_VERSION}, patch: ${PATCH_VERSION}, counter: ${VERSION_COUNTER}")

.cmake/GetGitRevisionDescription.cmake.in

@@ -0,0 +1,21 @@
+set(HEAD_HASH)
+file(READ "@HEAD_FILE@" HEAD_CONTENTS LIMIT 1024)
+string(STRIP "${HEAD_CONTENTS}" HEAD_CONTENTS)
+if(HEAD_CONTENTS MATCHES "ref")
+    string(REPLACE "ref: " "" HEAD_REF "${HEAD_CONTENTS}")
+    if(EXISTS "@GIT_DIR@/${HEAD_REF}")
+        configure_file("@GIT_DIR@/${HEAD_REF}" "@GIT_DATA@/head-ref" COPYONLY)
+    else()
+        configure_file("@GIT_DIR@/packed-refs" "@GIT_DATA@/packed-refs" COPYONLY)
+        file(READ "@GIT_DATA@/packed-refs" PACKED_REFS)
+            if(${PACKED_REFS} MATCHES "([0-9a-z]*) ${HEAD_REF}")
+                set(HEAD_HASH "${CMAKE_MATCH_1}")
+            endif()
+    endif()
+else()
+    configure_file("@GIT_DIR@/HEAD" "@GIT_DATA@/head-ref" COPYONLY)
+endif()
+if(NOT HEAD_HASH)
+    file(READ "@GIT_DATA@/head-ref" HEAD_HASH LIMIT 1024)
+    string(STRIP "${HEAD_HASH}" HEAD_HASH)
+endif()

.cmake/InstallerScript.iss.in

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

.cmake/Version.h.in

@@ -0,0 +1,11 @@
+#ifndef VERSION_H
+#define VERSION_H
+
+#include <QtGlobal>
+
+#define APPLICATION_FULL_VERSION "${GIT_SEMVER}.${GIT_COMMIT_COUNT}"
+#define VERSION_COUNTER ${GIT_COMMIT_COUNT}
+#define COMMIT_HASH "${GIT_DESCRIBE}"
+#define APPLICATION_VERSION "${GIT_SEMVER}"
+
+#endif  // VERSION_H

.cmake/version_exe.rc.in

@@ -0,0 +1,34 @@
+1 VERSIONINFO
+ FILEVERSION ${GIT_TAG_WITH_COMMA},${GIT_COMMIT_COUNT}
+ PRODUCTVERSION ${GIT_TAG_WITH_COMMA},${GIT_COMMIT_COUNT}
+ FILEFLAGSMASK 0x3fL
+#ifdef _DEBUG
+ FILEFLAGS 0x1L
+#else
+ FILEFLAGS 0x0L
+#endif
+ FILEOS 0x40004L
+ FILETYPE 0x2L
+ FILESUBTYPE 0x0L
+BEGIN
+    BLOCK "StringFileInfo"
+    BEGIN
+        BLOCK "080404b0"
+        BEGIN
+            VALUE "CompanyName", "ZhuZiChu"
+            VALUE "FileDescription", "${PROJECT_DESCRIPTION}"
+            VALUE "FileVersion", "${GIT_SEMVER}.${GIT_COMMIT_COUNT}"
+            VALUE "InternalName", "${PROJECT_NAME}.exe"
+            VALUE "LegalCopyright", "Copyright (C) 2023 ZhuZiChu. All rights reserved."
+            VALUE "OriginalFilename", "${PROJECT_NAME}.exe"
+            VALUE "ProductName", "${PROJECT_NAME}"
+            VALUE "ProductVersion", "${GIT_SEMVER}.0"
+        END
+    END
+    BLOCK "VarFileInfo"
+    BEGIN
+        VALUE "Translation", 0x804, 1200
+    END
+END
+
+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-12]
-        qt_ver: [6.5.0]
+        os: [macos-latest]
+        qt_ver: [6.6.2]
         qt_arch: [clang_64]
     env:
       targetName: example
@@ -38,7 +38,7 @@ jobs:
           version: ${{ matrix.qt_ver }}
           cache: ${{steps.cache-qt.outputs.cache-hit}}
           arch: ${{ matrix.qt_arch }}
-          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qt3d'
           
       - name: Set up Ninja
         uses: seanmiddleditch/gha-setup-ninja@v3
@@ -50,17 +50,19 @@ jobs:
           cmake --version
           mkdir build
           cd build
-          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/Users/runner/work/FluentUI/Qt/6.5.0/macos -DCMAKE_C_COMPILER=clang -DCMAKE_CXX_COMPILER=clang++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/Users/runner/work/FluentUI/Qt/${{ matrix.qt_ver }}/macos -DCMAKE_C_COMPILER=clang -DCMAKE_CXX_COMPILER=clang++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
           cmake --build . --target all --config Release --parallel
           
       - name: package
         run: |
+          # 先删除所有dSYM文件，减少包的体积
+          sudo find /Users/runner/work/FluentUI/Qt/${{ matrix.qt_ver }}/macos/qml -name "*.dSYM" | xargs rm -r
           # 拷贝依赖
-          macdeployqt bin/release/${targetName}.app -qmldir=. -verbose=1 -dmg     
+          sudo macdeployqt bin/Release/${targetName}.app -qmldir=. -dmg     
           
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v4
         with:
-          name: ${{ env.targetName }}_${{ matrix.os }}_${{matrix.qt_ver}}.zip
+          name: ${{ env.targetName }}_${{ matrix.os }}_${{matrix.qt_ver}}
           path: bin/release/${{ env.targetName }}.app
           
       - name: uploadRelease

.github/workflows/ubuntu.yml

@@ -22,8 +22,8 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [ubuntu-20.04]
-        qt_ver: [6.5.0]
+        os: [ubuntu-latest]
+        qt_ver: [6.6.2]
         qt_arch: [gcc_64]
     env:
       targetName: example
@@ -39,7 +39,7 @@ jobs:
           version: ${{ matrix.qt_ver }}
           cache: ${{steps.cache-qt.outputs.cache-hit}}
           arch: ${{ matrix.qt_arch }}
-          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qt3d'
       
       - name: Set up Ninja
         uses: seanmiddleditch/gha-setup-ninja@v3
@@ -49,13 +49,16 @@ jobs:
       - name: ubuntu install GL library
         run: sudo apt-get install -y libxcb-cursor0 libgl1-mesa-dev libxcb1-dev libgtk-3-dev libxkbcommon-x11-dev libxcb-icccm4-dev libxcb-image0-dev libxcb-keysyms1-dev libxcb-randr0-dev libxcb-shape0-dev libxcb-xfixes0-dev libxcb-xinerama0-dev libxcb-sync-dev  libxcb-render-util0-dev libxcb-shm0-dev
         
+      - name: ubuntu install libfuse2
+        run: sudo apt install libfuse2
+        
       - name: build ubuntu
         run: |
           ninja --version
           cmake --version
           mkdir build
           cd build
-          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/home/runner/work/FluentUI/Qt/6.5.0/gcc_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/home/runner/work/FluentUI/Qt/${{ matrix.qt_ver }}/gcc_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
           cmake --build . --target all --config Release --parallel
           
       - name: install QT linux deploy
@@ -66,15 +69,20 @@ jobs:
       - name: Check if svg file exists
         run: if [ ! -f "${targetName}.svg" ]; then echo "File not found, creating..."; touch ${targetName}.svg; fi
 
+      - name: Copy translation files
+        run: |
+          mkdir -p bin/release/usr/bin/
+          cp -r bin/Release/i18n/ bin/release/usr/bin/i18n/
+
       - name: package
         run: |
           # make sure Qt plugin finds QML sources so it can deploy the imported files
           export QML_SOURCES_PATHS=./
           # 拷贝依赖
-          linuxdeploy-x86_64.AppImage --plugin=qt --output=appimage --create-desktop-file --icon-file=${targetName}.svg --executable=bin/release/${targetName} --appdir bin/release/
+          linuxdeploy-x86_64.AppImage --plugin=qt --output=appimage --create-desktop-file --icon-file=${targetName}.svg --executable=bin/Release/${targetName} --appdir bin/release/
           mv ${{ env.targetName }}-*.AppImage ${{ env.targetName }}.AppImage
         
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v4
         with:
           name: ${{ env.targetName }}_${{ matrix.os }}_${{matrix.qt_ver}}
           path: ${{ env.targetName }}.AppImage

.github/workflows/windows-mingw.yml

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

.github/workflows/windows-qt5.yml

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

.github/workflows/windows.yml

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

.gitignore

@@ -31,9 +31,13 @@ target_wrapper.*
 # QtCreator CMake
 CMakeLists.txt.user*
 
-src/build-preset/plugins.qmltypes
 bin
 .DS_Store
 build
 cmake-build-*
 .idea
+package
+example/Version.h
+dist
+
+*.qm

.gitmodules

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

.vscode/settings.json

@@ -0,0 +1,20 @@
+{
+    "MicroPython.executeButton": [
+        {
+            "text": "▶",
+            "tooltip": "运行",
+            "alignment": "left",
+            "command": "extension.executeFile",
+            "priority": 3.5
+        }
+    ],
+    "MicroPython.syncButton": [
+        {
+            "text": "$(sync)",
+            "tooltip": "同步",
+            "alignment": "left",
+            "command": "extension.execute",
+            "priority": 4
+        }
+    ]
+}

CMakeLists.txt

@@ -1,33 +1,36 @@
 cmake_minimum_required(VERSION 3.20)
 
-project(FluentUI VERSION 0.1 LANGUAGES CXX)
+project(FluentUI VERSION 1.0)
+
+if (MSVC)
+    #让Release也生成pdb文件
+    set(CMAKE_SHARED_LINKER_FLAGS_RELEASE "${CMAKE_SHARED_LINKER_FLAGS_RELEASE} /DEBUG /OPT:REF /OPT:ICF")
+    set(CMAKE_EXE_LINKER_FLAGS_RELEASE "${CMAKE_EXE_LINKER_FLAGS_RELEASE} /DEBUG /OPT:REF /OPT:ICF")
+endif ()
+
+list(APPEND CMAKE_MODULE_PATH ${CMAKE_CURRENT_LIST_DIR}/.cmake/)
+
+include(GetGitRevisionDescription)
 
 option(FLUENTUI_BUILD_EXAMPLES "Build FluentUI demo applications." ON)
-option(FLUENTUI_BUILD_FRAMELESSHEPLER "Build FramelessHelper." ON)
 option(FLUENTUI_BUILD_STATIC_LIB "Build static library." OFF)
 
-#设置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 ${CMAKE_PREFIX_PATH}/qml/FluentUI)
-endif()
+find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core)
+find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Core)
 
 add_subdirectory(src)
 
+#Release也支持日志打印代码位置
+target_compile_definitions(fluentuiplugin
+        PRIVATE
+        QT_MESSAGELOGCONTEXT
+)
+
 if (FLUENTUI_BUILD_EXAMPLES)
     add_subdirectory(example)
 endif ()
 
-if (FLUENTUI_BUILD_FRAMELESSHEPLER)
-    set(FRAMELESSHELPER_BUILD_STATIC ON)
-    set(FRAMELESSHELPER_NO_SUMMARY OFF)
-    set(FRAMELESSHELPER_NO_DEBUG_OUTPUT OFF)
-    set(FRAMELESSHELPER_BUILD_WIDGETS OFF)
-    add_subdirectory(framelesshelper)
-endif ()
-
 message("------------------------ FluentUI ------------------------")
 message("Build FluentUI demo applications.: ${FLUENTUI_BUILD_EXAMPLES}")
-message("Build FramelessHelper.: ${FLUENTUI_BUILD_FRAMELESSHEPLER}")
 message("Build static library.: ${FLUENTUI_BUILD_STATIC_LIB}")
 message("Path to FluentUI plugin.: ${FLUENTUI_QML_PLUGIN_DIRECTORY}")

README.md

@@ -1,23 +1,23 @@
+# ATTENTION! 
+# PLEASE USE THE BRAND NEW [FluentUI Pro](https://github.com/zhuzichu520/FluentUI2) INSTEAD!
 <div align=center>
-  <img width=64 src="doc/preview/fluent_design.svg">
-</div>
+<img width=64 src="doc/preview/fluent_design.svg">
 
-<h1 align="center">
-  QML FluentUI 
-</h1>
-<p align="center">
-  A fluent design component library for Qt QML。 <a href="https://zhuzichu520.github.io">official wasm app.</a>
-</p>
+# QML FluentUI
+
+A Fluent Design component library for Qt QML, You need PySide6 [PySide6-FluentUI-QML](https://github.com/zhuzichu520/PySide6-FluentUI-QML).
+
+</div>
 
 ![win-badge] ![ubuntu-badge] ![macos-badge] ![release-badge] ![download-badge] ![download-latest]
 
-<p align="center">
-English | <a href="README_zh_CN.md">简体中文</a>
-</p>
 <div align=center>
-  <img src="doc/preview/demo_large.png">
-</div>
 
+English | [简体中文](README_zh_CN.md)
+
+<img src="doc/preview/demo_large.png">
+
+</div>
 
 [win-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AWindows "WindowsAction"
 [win-badge]: https://github.com/zhuzichu520/FluentUI/workflows/Windows/badge.svg  "Windows"
@@ -31,7 +31,6 @@ English | <a href="README_zh_CN.md">简体中文</a>
 [download-badge]: https://img.shields.io/github/downloads/zhuzichu520/FluentUI/total.svg "Download status"
 [download-latest]: https://img.shields.io/github/downloads/zhuzichu520/FluentUI/latest/total.svg "latest status"
 
-
 <p align=center>
 This is a beautiful FluentUI component library based on Qt QML. Currently the main branch supports Qt 6. If you want to use it in Qt 5, checkout the Qt 5 branch.
 </p>
@@ -46,7 +45,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.
 
@@ -54,13 +53,13 @@ or
 
 + Clone the repository.
 
-```SHELL
+```bash
 git clone --recursive https://github.com/zhuzichu520/FluentUI.git
 ```
 
 + Build
 
-```
+```bash
 git clone --recursive https://github.com/zhuzichu520/FluentUI.git
 cd FluentUI
 mkdir build
@@ -79,38 +78,35 @@ cmake --build . --config Release --target all --parallel
 
 + Great! Now you are ready to write your first QML FluentUI program! Check the documentations for more details.
 
-
 ## 📑 Documentations
 
 (Work in progress...🚀)
 
 ## Supported components
 
-|Catalog|Detail|Notes / Demos|
-|:----:|:----:|:----:|
-|FluApp|The initial entry of the program|Router supported(SPA)|
-|FluWindow|Frameless Window|*This only works on windows|
-|FluAppBar|Title bar on top of the window|Drag, minimize, maximize and close are supported.|
-|FluText|Common text||
-|FluButton|Common button|![btn](doc/preview/demo_standardbtn.png) |
-|FluFilledButton|Filled button|![filledbtn](doc/preview/demo_filledbtn.png)|
-|FluTextButton|Text button|![textbtn](doc/preview/demo_textbtn.png)|
-|FluToggleButton|Toggle buttons|![togglebtn](doc/preview/demo_toggle_btn.png)|
-|FluIcon|Common icon|![icons](doc/preview/demo_icon.png)|
-|FluRadioButton|radio button|![radiobtn](doc/preview/demo_radiobtn.png)|
-|FluTextBox|Single-line input box|![textbox](doc/preview/demo_textbox.png)|
-|FluMultiLineTextBox|Multi-lines input area|![textarea](doc/preview/demo_multiline_textbox.png)|
-|FluToggleSwitch|toggle switch|![toggleswitch](doc/preview/demo_toggle_switch.png)|
-
+|       Catalog       |              Detail              |                    Notes / Demos                    |
+| :-----------------: | :------------------------------: | :-------------------------------------------------: |
+|       FluApp        | The initial entry of the program |                Router supported(SPA)                |
+|      FluWindow      |         Frameless Window         |             *This only works on windows             |
+|      FluAppBar      |  Title bar on top of the window  |  Drag, minimize, maximize and close are supported.  |
+|       FluText       |           Common text            |                                                     |
+|      FluButton      |          Common button           |      ![btn](doc/preview/demo_standardbtn.png)       |
+|   FluFilledButton   |          Filled button           |    ![filledbtn](doc/preview/demo_filledbtn.png)     |
+|    FluTextButton    |           Text button            |      ![textbtn](doc/preview/demo_textbtn.png)       |
+|   FluToggleButton   |          Toggle buttons          |    ![togglebtn](doc/preview/demo_toggle_btn.png)    |
+|       FluIcon       |           Common icon            |         ![icons](doc/preview/demo_icon.png)         |
+|   FluRadioButton    |           radio button           |     ![radiobtn](doc/preview/demo_radiobtn.png)      |
+|     FluTextBox      |      Single-line input box       |      ![textbox](doc/preview/demo_textbox.png)       |
+| FluMultiLineTextBox |      Multi-lines input area      | ![textarea](doc/preview/demo_multiline_textbox.png) |
+|   FluToggleSwitch   |          toggle switch           | ![toggleswitch](doc/preview/demo_toggle_switch.png) |
 
 View more [`here`](doc/md/all_components.md)!
 
-
 ## Reference
+
 + [**Windows design**: Design guidelines and toolkits of Microsoft.](https://learn.microsoft.com/en-us/windows/apps/design/)
 + [**Microsoft/WinUI-Gallery**: Microsoft's demo](https://github.com/microsoft/WinUI-Gallery)
 
-
 ## License
 
 This FluentUI library currently licensed under [MIT License](./License)
@@ -120,4 +116,5 @@ This FluentUI library currently licensed under [MIT License](./License)
 [![Star History Chart](https://api.star-history.com/svg?repos=zhuzichu520/FluentUI&type=Date)](https://star-history.com/#zhuzichu520/FluentUI&Date)
 
 ## ⚡ Visitor count
-![](https://profile-counter.glitch.me/zhuzichu520-FluentUI/count.svg)
+
+![Visitor count](https://profile-counter.glitch.me/zhuzichu520-FluentUI/count.svg)

README_zh_CN.md

@@ -1,99 +1,118 @@
-# FluentUI
+<div align=center>
+<img width=64 src="doc/preview/fluent_design.svg">
 
-## 简介
+# QML FluentUI
 
-这是一个漂亮的Fluent组件库，使用QML插件开发的。main分支是Qt6.4.3，<a href="https://github.com/zhuzichu520/FluentUI/wiki/%E6%96%B0%E6%89%8B%E5%85%A5%E9%97%A8" target="_blank">如何使用？</a>。如果需要qt5的请切换至qt5分支，<a href="https://github.com/zhuzichu520/FluentUI/wiki/%E6%96%B0%E6%89%8B%E5%85%A5%E9%97%A8%EF%BC%881.2.7%E4%BB%A5%E5%8F%8A%E4%B9%8B%E5%89%8D%E7%89%88%E6%9C%AC%EF%BC%89" target="_blank">如何使用？</a>
+一个 Qt QML 的 Fluent Design 组件库，需要 PySide6 [PySide6-FluentUI-QML](https://github.com/zhuzichu520/PySide6-FluentUI-QML)。
 
-## 编译状态
-| [Windows][win-link]| [Ubuntu][ubuntu-link]|[MacOS][macos-link]|
-|---------------|---------------|-----------------|
-| ![win-badge]  | ![ubuntu-badge]      | ![macos-badge] |
+</div>
+
+![win-badge] ![ubuntu-badge] ![macos-badge] ![release-badge] ![download-badge] ![download-latest]
+
+<div align=center>
+
+[English](README.md) | 简体中文
+
+<img src="doc/preview/demo_large.png">
+
+</div>
 
 [win-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AWindows "WindowsAction"
 [win-badge]: https://github.com/zhuzichu520/FluentUI/workflows/Windows/badge.svg  "Windows"
-
 [ubuntu-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AUbuntu "UbuntuAction"
 [ubuntu-badge]: https://github.com/zhuzichu520/FluentUI/workflows/Ubuntu/badge.svg "Ubuntu"
-
 [macos-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AMacOS "MacOSAction"
 [macos-badge]: https://github.com/zhuzichu520/FluentUI/workflows/MacOS/badge.svg "MacOS"
-
-## 发布
-
-|[已发布][release-link]|[下载][download-link]|下载次数|
-|:--:|:--:|:--:|
-|![release-badge] |![download-badge]|![download-latest]|
-
 [release-link]: https://github.com/zhuzichu520/FluentUI/releases "Release status"
 [release-badge]: https://img.shields.io/github/release/zhuzichu520/FluentUI.svg?style=flat-square "Release status"
 [download-link]: https://github.com/zhuzichu520/FluentUI/releases/latest "Download status"
 [download-badge]: https://img.shields.io/github/downloads/zhuzichu520/FluentUI/total.svg "Download status"
 [download-latest]: https://img.shields.io/github/downloads/zhuzichu520/FluentUI/latest/total.svg "latest status"
 
+<p align=center>
+这是一个基于 Qt QML 的漂亮 FluentUI 组件库。目前主分支支持 Qt 6。如果您想在 Qt 5 中使用它，请切换至 Qt 5 分支。
+</p>
+
+## 必要条件
+
++ Qt Core、Qt Quick、Qt QML、Qt ShaderTool、Qt 5 Compatibility Module.（**重要**）
++ Qt LinguistTool（可选，用于翻译）
++ Qt Svg（可选，但对于 Qt 5 来说必不可少）
+
+在使用库之前使用 [Qt 在线安装程序](https://download.qt.io/archive/online_installers/) 获取模块（**推荐**），或先编译模块。
+
+## ⚽ 快速开始
+
++ 下载 [预编译版本](https://github.com/zhuzichu520/FluentUI/releases)。（请注意您的平台和编译器）。
+
++ 运行 `example` 程序。
+
+或者
+
++ 克隆此仓库
+
+```bash
+git clone --recursive https://github.com/zhuzichu520/FluentUI.git
+```
+
++ 构建
+
+```bash
+git clone --recursive https://github.com/zhuzichu520/FluentUI.git
+cd FluentUI
+mkdir build
+cd build
+cmake -DCMAKE_PREFIX_PATH=<YOUR_QT_SDK_DIR_PATH> -DCMAKE_BUILD_TYPE=Release -GNinja <仓库路径>
+cmake --build . --config Release --target all --parallel
+```
+
++ 使用 IDE（`Qt Creator` 或者 `CLion`）打开项目。（仅支持 **CMake**）。
+
+<div align=center>
+  <img src="doc/preview/qt_creator_project.png">
+</div>
+
++ 编译项目。然后尝试执行 `example` 演示程序。
+
++ 太好了！现在您可以编写第一个 QML FluentUI 程序了！查看文档了解更多详情。
+
+## 📑 文档
+
+(正在进行中...🚀)
+
 ## 支持的组件
 
-|目录|说明|备注|
-|----|----|----|
-|FluApp|初始化入口|支持路由跳转|
-|FluWindow|无边框窗口|解决windows拖动闪烁问题|
-|FluAppBar|窗口顶部标题栏|支持拖动窗口，最小化、最大化、关闭窗口|
-|FluText|Text文本||
-|FluButton|按钮||
-|FluFilledButton|实心按钮||
-|FluIconButton|图标按钮||
-|FluTextButton|文本按钮||
-|FluIcon|图标||
-|FluRadioButton|单选按钮||
-|FluTextBox|单行输入框||
-|FluMultiLineTextBox|多行输入框||
-|FluToggleSwitch|开关按钮||
-|FluSlider|拖动条||
-|FluInfoBar|提示Toast||
-|FluContentDialog|对话框||
-|FluProgressBar|条形进度条||
-|FluProgressRing|圆形进度条||
-|FluRectangle|矩形|支持部分圆角、clip|
-|FluMenu|菜单框||
-|FluTooltip|tooltip提示框||
-|FluTreeView|树控件||
-|FluTheme|主题设置|支持主题颜色切换，夜间模式|
-|FluCarousel|轮播图组件|支持无限轮播|
-|FluTimePicker|时间选择器||
-|FluDatePicker|日期选择器||
-|FluMenu|菜单Popup||
-|FluNavigationView|响应式导航布局||
-|FluScrollbar|滚动条||
-|FluToggleButton|开关按钮||
-|FluPagination|分页组件||
-|FluTableView|表格组件||
-|FluMediaPlayer|播放器||
-|FluFlipView|FlipView||
+|        目录         |       详情       |                    备注 / Demos                     |
+| :-----------------: | :--------------: | :-------------------------------------------------: |
+|       FluApp        |   程序初始入口   |                   支持路由（SPA）                   |
+|      FluWindow      |     无框窗口     |                  *仅适用于 Windows                  |
+|      FluAppBar      | 窗口顶部的标题栏 |          支持拖动、最小化、最大化和关闭。           |
+|       FluText       |     通用文本     |                                                     |
+|      FluButton      |     通用按钮     |      ![btn](doc/preview/demo_standardbtn.png)       |
+|   FluFilledButton   |   Filled 按钮    |    ![filledbtn](doc/preview/demo_filledbtn.png)     |
+|    FluTextButton    |     文本按钮     |      ![textbtn](doc/preview/demo_textbtn.png)       |
+|   FluToggleButton   |     切换按钮     |    ![togglebtn](doc/preview/demo_toggle_btn.png)    |
+|       FluIcon       |     通用图标     |         ![icons](doc/preview/demo_icon.png)         |
+|   FluRadioButton    |      单选框      |     ![radiobtn](doc/preview/demo_radiobtn.png)      |
+|     FluTextBox      |    单行输入框    |      ![textbox](doc/preview/demo_textbox.png)       |
+| FluMultiLineTextBox |    多行输入框    | ![textarea](doc/preview/demo_multiline_textbox.png) |
+|   FluToggleSwitch   |       开关       | ![toggleswitch](doc/preview/demo_toggle_switch.png) |
 
-# 部分效果预览
+在 [`这里`](doc/md/all_components.md) 查看更多！
 
-## 首页
+## 参考
 
-![](doc/preview/home.png)
++ [**Windows 设计**：Microsoft 的设计指南和工具包。](https://learn.microsoft.com/zh-CN/windows/apps/design/)
++ [**Microsoft/WinUI-Gallery**: Microsoft's demo](https://github.com/microsoft/WinUI-Gallery)
 
-## 各种Button按钮
+## 许可
 
-![](doc/preview/buttons.png)
+本 FluentUI 库目前采用 [MIT License](./License) 许可。
 
-## 主题颜色切换、夜间模式
+## 星标历史
 
-![](doc/preview/theme.png)
+[![星标历史图表](https://api.star-history.com/svg?repos=zhuzichu520/FluentUI&type=Date)](https://star-history.com/#zhuzichu520/FluentUI&Date)
 
-## TableView表格组件
+## ⚡ 游客数量
 
-![](doc/preview/tableview.png)
-
-## FluTreeView树组件
-
-![](doc/preview/treeview.png)
-
-## 轮播图组件
-
-![](doc/preview/carousel.png)
-
-### ⚡ Visitor count
-![](https://profile-counter.glitch.me/zhuzichu520-FluentUI/count.svg)
+![游客数量](https://profile-counter.glitch.me/zhuzichu520-FluentUI/count.svg)

example/CMakeLists.txt

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

example/README.md

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

example/example.qrc

@@ -0,0 +1,218 @@
+<RCC>
+    <qresource prefix="/example">
+        <file>res/svg/avatar_1.svg</file>
+        <file>res/svg/avatar_2.svg</file>
+        <file>res/svg/avatar_3.svg</file>
+        <file>res/svg/avatar_4.svg</file>
+        <file>res/svg/avatar_5.svg</file>
+        <file>res/svg/avatar_6.svg</file>
+        <file>res/svg/avatar_7.svg</file>
+        <file>res/svg/avatar_8.svg</file>
+        <file>res/svg/avatar_9.svg</file>
+        <file>res/svg/avatar_10.svg</file>
+        <file>res/svg/avatar_11.svg</file>
+        <file>res/svg/avatar_12.svg</file>
+        <file>res/image/banner_1.jpg</file>
+        <file>res/image/banner_2.jpg</file>
+        <file>res/image/banner_3.jpg</file>
+        <file>res/image/logo_openai.png</file>
+        <file>res/image/favicon.ico</file>
+        <file>res/image/bg_home_header.png</file>
+        <file>res/image/ic_home_github.png</file>
+        <file>res/image/control/Acrylic.png</file>
+        <file>res/image/control/AnimatedIcon.png</file>
+        <file>res/image/control/AnimatedVisualPlayer.png</file>
+        <file>res/image/control/AnimationInterop.png</file>
+        <file>res/image/control/AppBarButton.png</file>
+        <file>res/image/control/AppBarSeparator.png</file>
+        <file>res/image/control/AppBarToggleButton.png</file>
+        <file>res/image/control/AutomationProperties.png</file>
+        <file>res/image/control/AutoSuggestBox.png</file>
+        <file>res/image/control/Border.png</file>
+        <file>res/image/control/BreadcrumbBar.png</file>
+        <file>res/image/control/Button.png</file>
+        <file>res/image/control/CalendarDatePicker.png</file>
+        <file>res/image/control/CalendarView.png</file>
+        <file>res/image/control/Canvas.png</file>
+        <file>res/image/control/Checkbox.png</file>
+        <file>res/image/control/Clipboard.png</file>
+        <file>res/image/control/ColorPaletteResources.png</file>
+        <file>res/image/control/ColorPicker.png</file>
+        <file>res/image/control/ComboBox.png</file>
+        <file>res/image/control/CommandBar.png</file>
+        <file>res/image/control/CommandBarFlyout.png</file>
+        <file>res/image/control/CompactSizing.png</file>
+        <file>res/image/control/ConnectedAnimation.png</file>
+        <file>res/image/control/ContentDialog.png</file>
+        <file>res/image/control/CreateMultipleWindows.png</file>
+        <file>res/image/control/DataGrid.png</file>
+        <file>res/image/control/DatePicker.png</file>
+        <file>res/image/control/DropDownButton.png</file>
+        <file>res/image/control/EasingFunction.png</file>
+        <file>res/image/control/Expander.png</file>
+        <file>res/image/control/FilePicker.png</file>
+        <file>res/image/control/FlipView.png</file>
+        <file>res/image/control/Flyout.png</file>
+        <file>res/image/control/Grid.png</file>
+        <file>res/image/control/GridView.png</file>
+        <file>res/image/control/HyperlinkButton.png</file>
+        <file>res/image/control/IconElement.png</file>
+        <file>res/image/control/Image.png</file>
+        <file>res/image/control/ImplicitTransition.png</file>
+        <file>res/image/control/InfoBadge.png</file>
+        <file>res/image/control/InfoBar.png</file>
+        <file>res/image/control/InkCanvas.png</file>
+        <file>res/image/control/InkToolbar.png</file>
+        <file>res/image/control/InputValidation.png</file>
+        <file>res/image/control/ItemsRepeater.png</file>
+        <file>res/image/control/Line.png</file>
+        <file>res/image/control/ListBox.png</file>
+        <file>res/image/control/ListView.png</file>
+        <file>res/image/control/MediaPlayerElement.png</file>
+        <file>res/image/control/MenuBar.png</file>
+        <file>res/image/control/MenuFlyout.png</file>
+        <file>res/image/control/NavigationView.png</file>
+        <file>res/image/control/NumberBox.png</file>
+        <file>res/image/control/PageTransition.png</file>
+        <file>res/image/control/ParallaxView.png</file>
+        <file>res/image/control/PasswordBox.png</file>
+        <file>res/image/control/PersonPicture.png</file>
+        <file>res/image/control/PipsPager.png</file>
+        <file>res/image/control/Pivot.png</file>
+        <file>res/image/control/ProgressBar.png</file>
+        <file>res/image/control/ProgressRing.png</file>
+        <file>res/image/control/PullToRefresh.png</file>
+        <file>res/image/control/RadialGradientBrush.png</file>
+        <file>res/image/control/RadioButton.png</file>
+        <file>res/image/control/RadioButtons.png</file>
+        <file>res/image/control/RatingControl.png</file>
+        <file>res/image/control/RelativePanel.png</file>
+        <file>res/image/control/RepeatButton.png</file>
+        <file>res/image/control/RevealFocus.png</file>
+        <file>res/image/control/RichEditBox.png</file>
+        <file>res/image/control/RichTextBlock.png</file>
+        <file>res/image/control/ScrollViewer.png</file>
+        <file>res/image/control/SemanticZoom.png</file>
+        <file>res/image/control/Shape.png</file>
+        <file>res/image/control/Slider.png</file>
+        <file>res/image/control/Sound.png</file>
+        <file>res/image/control/SplitButton.png</file>
+        <file>res/image/control/SplitView.png</file>
+        <file>res/image/control/StackPanel.png</file>
+        <file>res/image/control/StandardUICommand.png</file>
+        <file>res/image/control/SwipeControl.png</file>
+        <file>res/image/control/TabView.png</file>
+        <file>res/image/control/TeachingTip.png</file>
+        <file>res/image/control/TextBlock.png</file>
+        <file>res/image/control/TextBox.png</file>
+        <file>res/image/control/ThemeTransition.png</file>
+        <file>res/image/control/TimePicker.png</file>
+        <file>res/image/control/TitleBar.png</file>
+        <file>res/image/control/ToggleButton.png</file>
+        <file>res/image/control/ToggleSplitButton.png</file>
+        <file>res/image/control/ToggleSwitch.png</file>
+        <file>res/image/control/ToolTip.png</file>
+        <file>res/image/control/TreeView.png</file>
+        <file>res/image/control/VariableSizedWrapGrid.png</file>
+        <file>res/image/control/Viewbox.png</file>
+        <file>res/image/control/WebView.png</file>
+        <file>res/image/control/XamlUICommand.png</file>
+        <file>res/svg/home.svg</file>
+        <file>res/svg/home_dark.svg</file>
+        <file>res/image/qrcode_wx.jpg</file>
+        <file>res/image/qrcode_zfb.jpg</file>
+        <file>qml/App.qml</file>
+        <file>qml/component/CodeExpander.qml</file>
+        <file>qml/global/ItemsFooter.qml</file>
+        <file>qml/global/ItemsOriginal.qml</file>
+        <file>qml/global/qmldir</file>
+        <file>qml/page/T_Acrylic.qml</file>
+        <file>qml/page/T_Badge.qml</file>
+        <file>qml/page/T_BreadcrumbBar.qml</file>
+        <file>qml/page/T_Buttons.qml</file>
+        <file>qml/page/T_CalendarPicker.qml</file>
+        <file>qml/page/T_Captcha.qml</file>
+        <file>qml/page/T_Carousel.qml</file>
+        <file>qml/page/T_CheckBox.qml</file>
+        <file>qml/page/T_ColorPicker.qml</file>
+        <file>qml/page/T_ComboBox.qml</file>
+        <file>qml/page/T_DatePicker.qml</file>
+        <file>qml/page/T_Dialog.qml</file>
+        <file>qml/page/T_Expander.qml</file>
+        <file>qml/page/T_FlipView.qml</file>
+        <file>qml/page/T_Home.qml</file>
+        <file>qml/page/T_Image.qml</file>
+        <file>qml/page/T_InfoBar.qml</file>
+        <file>qml/page/T_Menu.qml</file>
+        <file>qml/page/T_MultiWindow.qml</file>
+        <file>qml/page/T_Pagination.qml</file>
+        <file>qml/page/T_Pivot.qml</file>
+        <file>qml/page/T_Progress.qml</file>
+        <file>qml/page/T_QRCode.qml</file>
+        <file>qml/page/T_RadioButton.qml</file>
+        <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_Settings.qml</file>
+        <file>qml/page/T_Slider.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>
+        <file>qml/page/T_TextBox.qml</file>
+        <file>qml/page/T_Theme.qml</file>
+        <file>qml/page/T_Timeline.qml</file>
+        <file>qml/page/T_TimePicker.qml</file>
+        <file>qml/page/T_ToggleSwitch.qml</file>
+        <file>qml/page/T_Tooltip.qml</file>
+        <file>qml/page/T_Tour.qml</file>
+        <file>qml/page/T_TreeView.qml</file>
+        <file>qml/page/T_Typography.qml</file>
+        <file>qml/page/T_Watermark.qml</file>
+        <file>qml/window/AboutWindow.qml</file>
+        <file>qml/window/HotloadWindow.qml</file>
+        <file>qml/window/LoginWindow.qml</file>
+        <file>qml/window/MainWindow.qml</file>
+        <file>qml/window/SingleInstanceWindow.qml</file>
+        <file>qml/window/SingleTaskWindow.qml</file>
+        <file>qml/window/StandardWindow.qml</file>
+        <file>res/image/image_1.jpg</file>
+        <file>qml/window/PageWindow.qml</file>
+        <file>qml/page/T_StaggeredLayout.qml</file>
+        <file>qml/page/T_Clip.qml</file>
+        <file>qml/page/T_Network.qml</file>
+        <file>qml/page/T_ShortcutPicker.qml</file>
+        <file>qml/chart/T_BarChart.qml</file>
+        <file>qml/chart/T_LineChart.qml</file>
+        <file>qml/chart/T_PieChart.qml</file>
+        <file>qml/chart/T_RadarChart.qml</file>
+        <file>qml/chart/T_ScatterChart.qml</file>
+        <file>qml/chart/T_BubbleChart.qml</file>
+        <file>qml/chart/T_PolarAreaChart.qml</file>
+        <file>res/image/ic_crash.png</file>
+        <file>qml/window/CrashWindow.qml</file>
+        <file>qml/page/T_SplitLayout.qml</file>
+        <file>res/template/CMakeLists.txt.in</file>
+        <file>res/template/src/App.qml.in</file>
+        <file>res/template/src/CMakeLists.txt.in</file>
+        <file>res/template/src/en_US.ts.in</file>
+        <file>res/template/src/logo.ico.in</file>
+        <file>res/template/src/main.cpp.in</file>
+        <file>res/template/src/main.qml.in</file>
+        <file>res/template/src/qml.qrc.in</file>
+        <file>res/template/src/zh_CN.ts.in</file>
+        <file>res/template/src/README.md.in</file>
+        <file>qml/global/GlobalModel.qml</file>
+        <file>qml/page/T_Sheet.qml</file>
+        <file>qml/page/T_GroupBox.qml</file>
+        <file>res/image/bg_scenic.jpg</file>
+        <file>qml/window/FluentInitializrWindow.qml</file>
+        <file>qml/page/T_OpenGL.qml</file>
+        <file>qml/page/T_Icons.qml</file>
+        <file>qml/window/HotkeyWindow.qml</file>
+        <file>qml/page/T_CustomPlot.qml</file>
+        <file>res/image/logo_pro.png</file>
+        <file>qml/page/T_FluentPro.qml</file>
+    </qresource>
+    <qresource prefix="/"/>
+</RCC>

example/example.rc

@@ -1,42 +0,0 @@
-#include <windows.h>
-
-IDI_ICON1 ICON "favicon.ico"
-
-#define STR(x) #x
-#define VER_JOIN(a,b,c,d) STR(a.b.c.d)
-#define VER_JOIN_(x) VER_JOIN x
-#define VER_STR VER_JOIN_((VERSION))
-
-VS_VERSION_INFO VERSIONINFO
-FILEVERSION     VERSION
-PRODUCTVERSION  VERSION
-FILEFLAGSMASK   0x3fL
-#ifdef _DEBUG
-FILEFLAGS       VS_FF_DEBUG
-#else
-FILEFLAGS       0x0L
-#endif
-FILEOS          VOS_NT_WINDOWS32
-FILETYPE        VFT_APP
-FILESUBTYPE     VFT2_UNKNOWN
-BEGIN
-    BLOCK "StringFileInfo"
-    BEGIN
-        BLOCK "040904b0"
-        BEGIN
-            VALUE "Comments",         "Built by the FluentUI."
-            VALUE "CompanyName",      "zhuzichu"
-            VALUE "FileDescription",  "example"
-            VALUE "FileVersion",      VER_STR
-            VALUE "InternalName",     ""
-            VALUE "LegalCopyright",   "Copyright (C) 2023"
-            VALUE "OriginalFilename", ""
-            VALUE "ProductName",      "example"
-            VALUE "ProductVersion",   VER_STR
-        END
-    END
-    BLOCK "VarFileInfo"
-    BEGIN
-        VALUE "Translation", 0x409, 1200
-    END
-END

example/qml/App.qml

@@ -1,26 +1,125 @@
-import QtQuick
-import QtQuick.Window
-import QtQuick.Controls
-import QtQuick.Layouts
-import FluentUI
+import QtQuick 2.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import FluentUI 1.0
 
-Window {
+FluLauncher {
     id: app
-    flags: Qt.SplashScreen
+    Connections{
+        target: FluTheme
+        function onDarkModeChanged(){
+            SettingsHelper.saveDarkMode(FluTheme.darkMode)
+        }
+    }
+    Connections{
+        target: FluApp
+        function onUseSystemAppBarChanged(){
+            SettingsHelper.saveUseSystemAppBar(FluApp.useSystemAppBar)
+        }
+    }
+    Connections{
+        target: TranslateHelper
+        function onCurrentChanged(){
+            SettingsHelper.saveLanguage(TranslateHelper.current)
+        }
+    }
     Component.onCompleted: {
-        FluApp.init(app)
-        FluTheme.darkMode = FluDarkMode.System
-        FluTheme.enableAnimation = true
-        FluApp.routes = {
+        Network.openLog = false
+        Network.setInterceptor(function(param){
+            param.addHeader("Token","000000000000000000000")
+        })
+        FluApp.init(app,Qt.locale(TranslateHelper.current))
+        FluApp.windowIcon = "qrc:/example/res/image/favicon.ico"
+        FluApp.useSystemAppBar = SettingsHelper.getUseSystemAppBar()
+        FluTheme.darkMode = SettingsHelper.getDarkMode()
+        FluTheme.animationEnabled = true
+        FluRouter.routes = {
             "/":"qrc:/example/qml/window/MainWindow.qml",
             "/about":"qrc:/example/qml/window/AboutWindow.qml",
             "/login":"qrc:/example/qml/window/LoginWindow.qml",
             "/hotload":"qrc:/example/qml/window/HotloadWindow.qml",
+            "/crash":"qrc:/example/qml/window/CrashWindow.qml",
             "/singleTaskWindow":"qrc:/example/qml/window/SingleTaskWindow.qml",
             "/standardWindow":"qrc:/example/qml/window/StandardWindow.qml",
-            "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml"
+            "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml",
+            "/pageWindow":"qrc:/example/qml/window/PageWindow.qml",
+            "/hotkey":"qrc:/example/qml/window/HotkeyWindow.qml"
         }
-        FluApp.initialRoute = "/"
-        FluApp.run()
+        var args = Qt.application.arguments
+        if(args.length>=2 && args[1].startsWith("-crashed=")){
+            FluRouter.navigate("/crash",{crashFilePath:args[1].replace("-crashed=","")})
+        }else{
+            FluRouter.navigate("/")
         }
+    }
+
+    property alias hotkeys: object_hotkey
+    FluObject{
+        id: object_hotkey
+        FluHotkey{
+            name: qsTr("Quit")
+            sequence: "Ctrl+Alt+Q"
+            onActivated: {
+                FluRouter.exit()
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test1")
+            sequence: "Alt+A"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test2")
+            sequence: "Alt+B"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test3")
+            sequence: "Alt+C"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test4")
+            sequence: "Alt+D"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test5")
+            sequence: "Alt+E"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test6")
+            sequence: "Alt+F"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test7")
+            sequence: "Alt+G"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+        FluHotkey{
+            name: qsTr("Test8")
+            sequence: "Alt+H"
+            onActivated: {
+                FluRouter.navigate("/hotkey",{sequence:sequence})
+            }
+        }
+    }
+
 }

example/qml/chart/T_BarChart.qml

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

example/qml/chart/T_BubbleChart.qml

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

example/qml/chart/T_LineChart.qml

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

example/qml/chart/T_PieChart.qml

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

example/qml/chart/T_PolarAreaChart.qml

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

example/qml/chart/T_RadarChart.qml

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

example/qml/chart/T_ScatterChart.qml

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

example/qml/component/CodeExpander.qml

@@ -1,32 +1,27 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
 
 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
-        }
+        textFormat: FluCopyableText.RichText
+        padding: 10
+        topPadding: 10
+        leftPadding: 10
+        rightPadding: 10
+        bottomPadding: 10
     }
 
     FluIconButton{
@@ -38,8 +33,8 @@ FluExpander{
             topMargin: 5
         }
         onClicked:{
-            FluTools.clipText(content.text)
-            showSuccess("复制成功")
+            FluTools.clipText(FluTools.html2PlantText(content.text))
+            showSuccess(qsTr("The Copy is Successful"))
         }
     }
 
@@ -54,7 +49,6 @@ FluExpander{
     }
 
     function highlightQmlCode(code) {
-        // 定义 QML 关键字列表
         var qmlKeywords = [
                     "FluTextButton",
                     "FluAppBar",
@@ -80,7 +74,6 @@ FluExpander{
                     "FluIcon",
                     "FluIconButton",
                     "FluInfoBar",
-                    "FluItem",
                     "FluMediaPlayer",
                     "FluMenu",
                     "FluMenuItem",
@@ -119,7 +112,7 @@ FluExpander{
                     "FluTableView",
                     "FluColors",
                     "FluTheme",
-                    "FluStatusView",
+                    "FluStatusLayout",
                     "FluRatingControl",
                     "FluPasswordBox",
                     "FluBreadcrumbBar",
@@ -130,7 +123,23 @@ FluExpander{
                     "FluPagination",
                     "FluRadioButtons",
                     "FluImage",
-                    "FluSpinBox"
+                    "FluSpinBox",
+                    "FluWatermark",
+                    "FluTour",
+                    "FluQRCode",
+                    "FluTimeline",
+                    "FluChart",
+                    "FluRangeSlider",
+                    "FluStaggeredLayout",
+                    "FluProgressButton",
+                    "FluLoadingButton",
+                    "FluClip",
+                    "FluNetwork",
+                    "FluShortcutPicker",
+                    "FluWindowResultLauncher",
+                    "FluRouter",
+                    "FluGroupBox",
+                    "FluSheet",
                 ];
         code = code.replace(/\n/g, "<br>");
         code = code.replace(/ /g, "&nbsp;");

example/qml/component/CustomWindow.qml

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

example/qml/global/GlobalModel.qml

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

example/qml/global/ItemsFooter.qml

@@ -1,30 +1,42 @@
 pragma Singleton
 
-import QtQuick
-import FluentUI
+import QtQuick 2.15
+import FluentUI 1.0
 
 FluObject{
 
     property var navigationView
+    property var paneItemMenu
 
     id:footer_items
 
     FluPaneItemSeparator{}
 
     FluPaneItem{
-        title:lang.about
+        title:qsTr("About")
         icon:FluentIcons.Contact
-        tapFunc:function(){
-            FluApp.navigate("/about")
+        onTapListener:function(){
+            FluRouter.navigate("/about")
         }
     }
 
     FluPaneItem{
-        title:lang.settings
+        title:qsTr("Settings")
+        menuDelegate: paneItemMenu
         icon:FluentIcons.Settings
+        url:"qrc:/example/qml/page/T_Settings.qml"
         onTap:{
-            navigationView.push("qrc:/example/qml/page/T_Settings.qml")
+            navigationView.push(url)
         }
     }
 
+    FluPaneItem{
+        title:qsTr("FluentUI Pro")
+        menuDelegate: paneItemMenu
+        icon: FluentIcons.Airplane
+        url:"qrc:/example/qml/page/T_FluentPro.qml"
+        onTap:{
+            navigationView.push(url)
+        }
+    }
 }

example/qml/global/ItemsOriginal.qml

@@ -1,363 +1,515 @@
 pragma Singleton
 
-import QtQuick
-import FluentUI
+import QtQuick 2.15
+import FluentUI 1.0
 
 FluObject{
 
     property var navigationView
+    property var paneItemMenu
+
+    function rename(item, newName){
+        if(newName && newName.trim().length>0){
+            item.title = newName;
+        }
+    }
 
     FluPaneItem{
         id:item_home
         count: 9
-        title:lang.home
-        infoBadge:FluBadge{
+        title: qsTr("Home")
+        menuDelegate: paneItemMenu
+        infoBadge: FluBadge{
             count: item_home.count
         }
-        icon:FluentIcons.Home
-        onTap:{
+        icon: FluentIcons.Home
+        url: "qrc:/example/qml/page/T_Home.qml"
+        onTap: {
             if(navigationView.getCurrentUrl()){
                 item_home.count = 0
             }
-            navigationView.push("qrc:/example/qml/page/T_Home.qml")
+            navigationView.push(url)
         }
     }
 
     FluPaneItemExpander{
-        title:lang.basic_input
-        icon:FluentIcons.CheckboxComposite
+        title: qsTr("PaneItemExpander Disabled")
+        iconVisible: false
+        disabled: true
+    }
+
+    FluPaneItemExpander{
+        id: item_expander_basic_input
+        title: qsTr("Basic Input")
+        icon: FluentIcons.CheckboxComposite
         FluPaneItem{
-            id:item_buttons
+            id: item_buttons
             count: 99
-            infoBadge:FluBadge{
+            infoBadge: FluBadge{
                 count: item_buttons.count
             }
-            title:"Buttons"
-            image:"qrc:/example/res/image/control/Button.png"
-            recentlyUpdated:true
-            desc:"A control that responds to user input and raisesa Click event."
-            onTap:{
+            title: qsTr("Buttons")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/Button.png",recentlyUpdated:true,desc:qsTr("A control that responds to user input and raisesa Click event.")})
+            url: "qrc:/example/qml/page/T_Buttons.qml"
+            onTap: {
                 item_buttons.count = 0
-                navigationView.push("qrc:/example/qml/page/T_Buttons.qml")
+                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)
             }
-            onTap:{
+            url: "qrc:/example/qml/page/T_Text.qml"
+            onTap: {
                 item_text.count = 0
-                navigationView.push("qrc:/example/qml/page/T_Text.qml")
+                navigationView.push(url)
             }
         }
         FluPaneItem{
-            title:"Image"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Image.qml")
-            }
+            title: qsTr("Image")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Image.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Slider"
-            image:"qrc:/example/res/image/control/Slider.png"
-            recentlyUpdated:true
-            desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Slider.qml")
-            }
+            title: qsTr("Slider")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/Slider.png",recentlyUpdated:true,desc:qsTr("A control that lets the user select from a rangeof values by moving a Thumb control along atrack.")})
+            url: "qrc:/example/qml/page/T_Slider.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"CheckBox"
-            image:"qrc:/example/res/image/control/Checkbox.png"
-            recentlyUpdated:true
-            desc:"A control that a user can select or clear."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_CheckBox.qml")
-            }
+            title: qsTr("CheckBox")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/Checkbox.png",recentlyUpdated:true,desc:qsTr("A control that a user can select or clear.")})
+            url: "qrc:/example/qml/page/T_CheckBox.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"RadioButton"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_RadioButton.qml")
-            }
+            title: qsTr("RadioButton")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_RadioButton.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"ToggleSwitch"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_ToggleSwitch.qml")
+            title: qsTr("ToggleSwitch")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_ToggleSwitch.qml"
+            onTap: { navigationView.push(url) }
         }
+        FluPaneItem{
+            title: qsTr("GroupBox")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_GroupBox.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("PaneItem Disabled")
+            disabled: true
+            icon: FluentIcons.Error
         }
     }
 
     FluPaneItemExpander{
-        title:lang.form
-        icon:FluentIcons.GridView
-        FluPaneItem{
-            title:"TextBox"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TextBox.qml")
-            }
+        title: qsTr("Form")
+        icon: FluentIcons.GridView
+        FluPaneItem {
+            title: qsTr("TextBox")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_TextBox.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"TimePicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TimePicker.qml")
-            }
+            title: qsTr("TimePicker")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_TimePicker.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"DatePicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_DatePicker.qml")
-            }
+            title: qsTr("DatePicker")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_DatePicker.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"CalendarPicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_CalendarPicker.qml")
-            }
+            title: qsTr("CalendarPicker")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_CalendarPicker.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"ColorPicker"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_ColorPicker.qml")
+            title: qsTr("ColorPicker")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_ColorPicker.qml"
+            onTap: { navigationView.push(url) }
         }
+        FluPaneItem{
+            title: qsTr("ShortcutPicker")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_ShortcutPicker.qml"
+            onTap: { navigationView.push(url) }
         }
     }
 
     FluPaneItemExpander{
-        title:lang.surface
-        icon:FluentIcons.SurfaceHub
+        title: qsTr("Surface")
+        icon: FluentIcons.SurfaceHub
         FluPaneItem{
-            title:"InfoBar"
-            image:"qrc:/example/res/image/control/InfoBar.png"
-            recentlyUpdated:true
-            desc:"An inline message to display app-wide statuschange information."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_InfoBar.qml")
-            }
+            title: qsTr("InfoBar")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/InfoBar.png",recentlyUpdated:true,desc:qsTr("An inline message to display app-wide statuschange information.")})
+            url: "qrc:/example/qml/page/T_InfoBar.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Progress"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Progress.qml")
-            }
+            title: qsTr("Progress")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Progress.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"RatingControl"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_RatingControl.qml")
-            }
+            title: qsTr("RatingControl")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_RatingControl.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Badge"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Badge.qml")
-            }
+            title: qsTr("Badge")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Badge.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Rectangle"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Rectangle.qml")
-            }
+            title: qsTr("Rectangle")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Rectangle.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"StatusView"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_StatusView.qml")
-            }
+            title: qsTr("Clip")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Clip.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Carousel"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Carousel.qml")
-            }
+            title: qsTr("Carousel")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Carousel.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Expander"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Expander.qml")
+            title: qsTr("Expander")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Expander.qml"
+            onTap: { navigationView.push(url) }
         }
+        FluPaneItem{
+            title: qsTr("Watermark")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Watermark.qml"
+            onTap: { navigationView.push(url) }
         }
     }
 
     FluPaneItemExpander{
-        title:lang.popus
-        icon:FluentIcons.ButtonMenu
-        FluPaneItem{
-            title:"Dialog"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Dialog.qml")
-            }
+        title: qsTr("Layout")
+        icon: FluentIcons.DockLeft
+        FluPaneItem {
+            title: qsTr("StaggeredLayout")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_StaggeredLayout.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            id:item_combobox
-            title:"ComboBox"
+            title: qsTr("SplitLayout")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_SplitLayout.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("StatusLayout")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_StatusLayout.qml"
+            onTap: { navigationView.push(url) }
+        }
+    }
+
+    FluPaneItemExpander{
+        title: qsTr("Popus")
+        icon: FluentIcons.ButtonMenu
+        FluPaneItem{
+            title: qsTr("Dialog")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Dialog.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            id: item_combobox
+            title: qsTr("ComboBox")
+            menuDelegate: paneItemMenu
             count: 9
             infoBadge:FluBadge{
                 count: item_combobox.count
                 color: Qt.rgba(250/255,173/255,20/255,1)
             }
-            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"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Tooltip.qml")
-            }
+            title: qsTr("Tooltip")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Tooltip.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Menu"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Menu.qml")
+            title: qsTr("Menu")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Menu.qml"
+            onTap: { navigationView.push(url) }
         }
+        FluPaneItem{
+            title: qsTr("Sheet")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Sheet.qml"
+            onTap: { navigationView.push(url) }
         }
     }
 
     FluPaneItemExpander{
-        title:lang.navigation
-        icon:FluentIcons.AllApps
+        title: qsTr("Navigation")
+        icon: FluentIcons.AllApps
         FluPaneItem{
-            title:"Pivot"
-            image:"qrc:/example/res/image/control/Pivot.png"
-            recentlyAdded:true
-            order:3
-            desc:"Presents information from different sources in atabbed view."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Pivot.qml")
-            }
+            title: qsTr("Pivot")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/Pivot.png",order:3,recentlyAdded:true,desc:qsTr("Presents information from different sources in a tabbed view.")})
+            url: "qrc:/example/qml/page/T_Pivot.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"BreadcrumbBar"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_BreadcrumbBar.qml")
-            }
+            title: qsTr("BreadcrumbBar")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_BreadcrumbBar.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"TabView"
-            image:"qrc:/example/res/image/control/TabView.png"
-            recentlyAdded:true
-            order:1
-            desc:"A control that displays a collection of tabs thatcan be used to display several documents."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TabView.qml")
-            }
+            title: qsTr("TabView")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/TabView.png",order:1,recentlyAdded:true,desc:qsTr("A control that displays a collection of tabs thatcan be used to display several documents.")})
+            url: "qrc:/example/qml/page/T_TabView.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"TreeView"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TreeView.qml")
-            }
+            title: qsTr("TreeView")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_TreeView.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"TableView"
-            image:"qrc:/example/res/image/control/DataGrid.png"
-            recentlyAdded:true
-            order:4
-            desc:"The TableView control provides a flexible way to display a collection of data in rows and columns"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_TableView.qml")
-            }
+            title: qsTr("TableView")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/DataGrid.png",order:4,recentlyAdded:true,desc:qsTr("The TableView control provides a flexible way to display a collection of data in rows and columns")})
+            url: "qrc:/example/qml/page/T_TableView.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Pagination"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Pagination.qml")
-            }
+            title: qsTr("Pagination")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Pagination.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"MultiWindow"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_MultiWindow.qml")
-            }
+            title: qsTr("MultiWindow")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_MultiWindow.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"FlipView"
-            image:"qrc:/example/res/image/control/FlipView.png"
-            recentlyAdded:true
-            order:2
-            desc:"Presents a collection of items that the user canflip through, one item at a time."
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_FlipView.qml")
-            }
+            title: qsTr("FlipView")
+            menuDelegate: paneItemMenu
+            extra: ({image:"qrc:/example/res/image/control/FlipView.png",order:2,recentlyAdded:true,desc:qsTr("Presents a collection of items that the user canflip through, one item at a time.")})
+            url: "qrc:/example/qml/page/T_FlipView.qml"
+            onTap: { navigationView.push(url) }
         }
     }
 
     FluPaneItemExpander{
-        title:lang.theming
+        title: qsTr("Theming")
         icon:FluentIcons.Brightness
         FluPaneItem{
-            title:"Acrylic"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Acrylic.qml")
-            }
+            title: qsTr("Acrylic")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Acrylic.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Theme"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Theme.qml")
-            }
+            title: qsTr("Theme")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Theme.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Typography"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Typography.qml")
-            }
+            title: qsTr("Typography")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Typography.qml"
+            onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title:"Awesome"
-            onTap:{
-                navigationView.push("qrc:/example/qml/page/T_Awesome.qml")
-            }
+            title: qsTr("Icons")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Icons.qml"
+            onTap: { navigationView.push(url) }
         }
     }
 
     FluPaneItemExpander{
-        title:lang.other
-        icon:FluentIcons.Shop
+        title: qsTr("Chart")
+        icon: FluentIcons.AreaChart
         FluPaneItem{
-            id:item_other
-            title:"RemoteLoader"
+            title: qsTr("Bar Chart")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/chart/T_BarChart.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Line Chart")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/chart/T_LineChart.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Pie Chart")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/chart/T_PieChart.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Polar Area Chart")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/chart/T_PolarAreaChart.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Bubble Chart")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/chart/T_BubbleChart.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Scatter Chart")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/chart/T_ScatterChart.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Radar Chart")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/chart/T_RadarChart.qml"
+            onTap: { navigationView.push(url) }
+        }
+    }
+
+    FluPaneItemSeparator{
+        spacing:10
+        size:1
+    }
+
+    FluPaneItemExpander{
+        title: qsTr("Other")
+        icon: FluentIcons.Shop
+        FluPaneItem{
+            title: qsTr("OpenGL")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_OpenGL.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("QCustomPlot")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_CustomPlot.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("QRCode")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_QRCode.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Tour")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Tour.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Timeline")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Timeline.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Captcha")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Captcha.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            title: qsTr("Network")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Network.qml"
+            onTap: { navigationView.push(url) }
+        }
+        FluPaneItem{
+            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)
             }
-            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"
-            tapFunc:function(){
-                 FluApp.navigate("/hotload")
+            title: qsTr("Hot Loader")
+            onTapListener: function(){
+                FluRouter.navigate("/hotload")
+            }
+        }
+        FluPaneItem{
+            title: qsTr("Test Crash")
+            onTapListener: function(){
+                AppInfo.testCrash()
+            }
+            Component.onCompleted: {
+                visible = FluTools.isWin()
             }
         }
     }
 
     function getRecentlyAddedData(){
         var arr = []
-        for(var i=0;i<children.length;i++){
-            var item = children[i]
-            if(item instanceof FluPaneItem && item.recentlyAdded){
+        var items = navigationView.getItems();
+        for(var i=0;i<items.length;i++){
+            var item = items[i]
+            if(item instanceof FluPaneItem && item.extra && item.extra.recentlyAdded){
                 arr.push(item)
             }
-            if(item instanceof FluPaneItemExpander){
-                for(var j=0;j<item.children.length;j++){
-                    var itemChild = item.children[j]
-                    if(itemChild instanceof FluPaneItem && itemChild.recentlyAdded){
-                        arr.push(itemChild)
         }
-                }
-            }
-        }
-        arr.sort(function(o1,o2){ return o2.order-o1.order })
+        arr.sort(function(o1,o2){ return o2.extra.order-o1.extra.order })
         return arr
     }
 
@@ -366,7 +518,7 @@ FluObject{
         var items = navigationView.getItems();
         for(var i=0;i<items.length;i++){
             var item = items[i]
-            if(item instanceof FluPaneItem && item.recentlyUpdated){
+            if(item instanceof FluPaneItem && item.extra && item.extra.recentlyUpdated){
                 arr.push(item)
             }
         }
@@ -374,11 +526,19 @@ FluObject{
     }
 
     function getSearchData(){
+        if(!navigationView){
+            return
+        }
         var arr = []
         var items = navigationView.getItems();
         for(var i=0;i<items.length;i++){
             var item = items[i]
             if(item instanceof FluPaneItem){
+                if (item.parent instanceof FluPaneItemExpander)
+                {
+                    arr.push({title:`${item.parent.title} -> ${item.title}`,key:item.key})
+                }
+                else
                     arr.push({title:item.title,key:item.key})
             }
         }

example/qml/global/MainEvent.qml

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

example/qml/global/qmldir

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

example/qml/page/T_Acrylic.qml

@@ -1,42 +1,91 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage{
 
-    title:"Acrylic"
+    title: qsTr("Acrylic")
 
-    FluArea{
+    RowLayout{
+        spacing: 10
+        FluText{
+            text: qsTr("tintColor:")
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluColorPicker{
+            id:color_picker
+        }
+    }
+    RowLayout{
+        spacing: 10
+        FluText{
+            text: qsTr("tintOpacity:")
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluSlider{
+            id:slider_tint_opacity
+            value: 65
+        }
+    }
+    RowLayout{
+        spacing: 10
+        FluText{
+            text: qsTr("blurRadius:")
+            Layout.alignment: Qt.AlignVCenter
+        }
+        FluSlider{
+            id:slider_blur_radius
+            value: 32
+        }
+    }
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 1200/5+20
-        paddings: 10
-
-        FluRectangle{
-            width: 1920/5
-            height: 1200/5
-            radius:[15,15,15,15]
+        Layout.preferredHeight: 1200/4+20
+        padding: 10
+        Layout.topMargin: 10
+        FluClip{
+            width: 1920/4
+            height: 1200/4
+            radius:[8,8,8,8]
             Image {
                 id:image
                 asynchronous: true
-                source: "qrc:/example/res/image/banner_3.jpg"
+                source: "qrc:/example/res/image/bg_scenic.jpg"
                 anchors.fill: parent
                 sourceSize: Qt.size(2*width,2*height)
             }
             FluAcrylic {
-                sourceItem:image
-                anchors.bottom: parent.bottom
-                anchors.right: parent.right
-                width: 100
-                height: 100
+                id:acrylic
+                target: image
+                width: 200
+                height: 200
+                tintOpacity: slider_tint_opacity.value/100
+                tintColor: color_picker.current
+                blurRadius: slider_blur_radius.value
+                x:(image.width-width)/2
+                y:(image.height-height)/2
                 FluText {
                     anchors.centerIn: parent
-                    text: "Acrylic"
+                    text: qsTr("Acrylic")
                     color: "#FFFFFF"
-                    font.bold: true
+                    font: FluTextStyle.Subtitle
+                }
+                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)
+                               }
+                    onPositionChanged: (mouse)=>{
+                                           var delta = Qt.point(mouse.x - clickPos.x,mouse.y - clickPos.y)
+                                           acrylic.x = acrylic.x + delta.x
+                                           acrylic.y = acrylic.y + delta.y
+                                       }
                 }
             }
             Layout.topMargin: 20
@@ -45,7 +94,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'Image{
     id:image
     width: 800
@@ -54,7 +103,7 @@ FluScrollablePage{
     radius: 8
     }
     FluAcrylic{
-        sourceItem:image
+        target:image
         width: 100
         height: 100
         anchors.centerIn: parent

example/qml/page/T_Awesome.qml

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

example/qml/page/T_Badge.qml

@@ -1,30 +1,31 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage{
 
-    title:"Badge"
+    title: qsTr("Badge")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 106
-        paddings: 10
+        height: 120
+        padding: 10
 
         Column{
             spacing: 15
             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{
@@ -112,7 +113,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'Rectangle{
     width: 40
     height: 40

example/qml/page/T_BreadcrumbBar.qml

@@ -1,28 +1,27 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage{
 
-    title:"BreadcurmbBar"
+    title: qsTr("BreadcurmbBar")
 
     Component.onCompleted: {
         var items = []
         for(var i=0;i<10;i++){
-            items.push({title:"Item_"+(i+1)})
+            items.push({title: qsTr("Item_%1").arg(i+1)})
         }
         breadcrumb_1.items = items
         breadcrumb_2.items = items
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 68
+        padding: 10
 
         FluBreadcrumbBar{
             id:breadcrumb_1
@@ -36,10 +35,10 @@ FluScrollablePage{
     }
 
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 100
-        paddings: 10
+        Layout.preferredHeight: 100
+        padding: 10
         Layout.topMargin: 20
 
         ColumnLayout{
@@ -48,11 +47,11 @@ FluScrollablePage{
             spacing: 10
 
             FluFilledButton{
-                text:"Reset sample"
+                text: qsTr("Reset sample")
                 onClicked:{
                     var items = []
                     for(var i=0;i<10;i++){
-                        items.push({title:"Item_"+(i+1)})
+                        items.push({title: qsTr("Item_")+(i+1)})
                     }
                      breadcrumb_2.items = items
                 }
@@ -66,7 +65,6 @@ FluScrollablePage{
                 Layout.fillWidth: true
                 onClickItem:
                     (model)=>{
-                        //不是点击最后一个item元素
                         if(model.index+1!==count()){
                             breadcrumb_2.remove(model.index+1,count()-model.index-1)
                         }
@@ -78,7 +76,7 @@ FluScrollablePage{
 
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluBreadcrumbBar{
     width:parent.width
     separator:">"

example/qml/page/T_Buttons.qml

@@ -1,30 +1,27 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import QtQuick.Controls.Basic
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage{
 
-    title:"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{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 68
+        Layout.topMargin: 10
+        padding: 10
 
         FluTextButton{
-            disabled:text_button_switch.checked
-            text:"Text Button"
-            contentDescription: "文本按钮"
+            disabled: text_button_switch.checked
+            text: qsTr("Text Button")
             onClicked: {
                 showInfo("点击Text Button")
             }
@@ -34,17 +31,17 @@ FluScrollablePage{
             }
         }
         FluToggleSwitch{
-            id:text_button_switch
+            id: text_button_switch
             anchors{
                 right: parent.right
                 verticalCenter: parent.verticalCenter
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluTextButton{
     text:"Text Button"
     onClicked: {
@@ -53,17 +50,17 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
-        paddings: 10
+        Layout.preferredHeight: 68
+        padding: 10
         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,17 +68,17 @@ FluScrollablePage{
             }
         }
         FluToggleSwitch{
-            id:button_switch
+            id: button_switch
             anchors{
                 right: parent.right
                 verticalCenter: parent.verticalCenter
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluButton{
     text:"Standard Button"
     onClicked: {
@@ -90,17 +87,17 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
+        Layout.preferredHeight: 68
         Layout.topMargin: 20
-        paddings: 10
+        padding: 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,17 +105,17 @@ FluScrollablePage{
             }
         }
         FluToggleSwitch{
-            id:filled_button_switch
+            id: filled_button_switch
             anchors{
                 right: parent.right
                 verticalCenter: parent.verticalCenter
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluFilledButton{
     text:"Filled Button"
     onClicked: {
@@ -127,32 +124,32 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
+        Layout.preferredHeight: 68
         Layout.topMargin: 20
-        paddings: 10
+        padding: 10
 
         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{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluToggleButton{
     text:"Toggle Button"
     onClicked: {
@@ -161,36 +158,171 @@ FluScrollablePage{
 }'
     }
 
+    Timer{
+        id: timer_progress
+        interval: 200
+        onTriggered: {
+            btn_progress.progress = (btn_progress.progress + 0.1).toFixed(1)
+            if(btn_progress.progress==1){
+                timer_progress.stop()
+            }else{
+                timer_progress.start()
+            }
+        }
+    }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
-        paddings: 10
+        Layout.preferredHeight: 68
         Layout.topMargin: 20
-        FluIconButton{
-            iconSource:FluentIcons.ChromeCloseContrast
-            disabled:icon_button_switch.checked
-            iconSize: 15
+        padding: 10
+
+        FluProgressButton{
+            id: btn_progress
+            disabled: progress_button_switch.checked
+            text: qsTr("Progress Button")
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
-            onClicked:{
-                showSuccess("点击IconButton")
+            onClicked: {
+                btn_progress.progress = 0
+                timer_progress.restart()
             }
         }
         FluToggleSwitch{
-            id:icon_button_switch
+            id: progress_button_switch
             anchors{
                 right: parent.right
                 verticalCenter: parent.verticalCenter
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
+        code:'FluProgressButton{
+    text:"Progress Button"
+    onClicked: {
+
+    }
+}'
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 68
+        Layout.topMargin: 20
+        padding: 10
+
+        FluLoadingButton{
+            id: btn_loading
+            loading: loading_button_switch.checked
+            text: loading_button_switch.checked ? qsTr("Loading") : qsTr("Loading Button")
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            onClicked: {
+
+            }
+        }
+        FluToggleSwitch{
+            id: loading_button_switch
+            checked: true
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: loading_button_switch.checked ? qsTr("Loading") : qsTr("Normal")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluLoadingButton{
+    text:"Loading Button"
+    onClicked: {
+
+    }
+}'
+    }
+
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: layout_icon_button.height + 30
+        padding: 10
+        Layout.topMargin: 20
+        Flow{
+            id: layout_icon_button
+            spacing: 10
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+                right: icon_button_switch.left
+            }
+            FluIconButton{
+                disabled: icon_button_switch.checked
+                iconDelegate: Image{ sourceSize: Qt.size(40,40) ; width: 20; height: 20; source: "qrc:/example/res/image/ic_home_github.png" }
+                onClicked:{
+                    showSuccess(qsTr("Click IconButton"))
+                }
+            }
+            FluIconButton{
+                iconSource: FluentIcons.ChromeCloseContrast
+                disabled: icon_button_switch.checked
+                iconSize: 15
+                text: qsTr("IconOnly")
+                display: Button.IconOnly
+                onClicked:{
+                    showSuccess(qsTr("Button.IconOnly"))
+                }
+            }
+            FluIconButton{
+                iconSource: FluentIcons.ChromeCloseContrast
+                disabled: icon_button_switch.checked
+                iconSize: 15
+                text: qsTr("TextOnly")
+                display: Button.TextOnly
+                onClicked:{
+                    showSuccess(qsTr("Button.TextOnly"))
+                }
+            }
+            FluIconButton{
+                iconSource: FluentIcons.ChromeCloseContrast
+                disabled: icon_button_switch.checked
+                iconSize: 15
+                text: qsTr("TextBesideIcon")
+                display: Button.TextBesideIcon
+                onClicked:{
+                    showSuccess(qsTr("Button.TextBesideIcon"))
+                }
+            }
+            FluIconButton{
+                iconSource: FluentIcons.ChromeCloseContrast
+                disabled: icon_button_switch.checked
+                iconSize: 15
+                text: qsTr("TextUnderIcon")
+                display: Button.TextUnderIcon
+                onClicked:{
+                    showSuccess(qsTr("Button.TextUnderIcon"))
+                }
+            }
+        }
+        FluToggleSwitch{
+            id: icon_button_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
         code:'FluIconButton{
     iconSource:FluentIcons.ChromeCloseContrast
     onClicked: {
@@ -199,46 +331,46 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
-        paddings: 10
+        Layout.preferredHeight: 68
+        padding: 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{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluDropDownButton{
     text:"DropDownButton"
     FluMenuItem{
@@ -256,10 +388,10 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 100
-        paddings: 10
+        Layout.preferredHeight: 100
+        padding: 10
         Layout.topMargin: 20
         FluRadioButtons{
             spacing: 8
@@ -267,31 +399,29 @@ FluScrollablePage{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
+            disabled: radio_button_switch.checked
             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{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluRadioButton{
     checked:true
     text:"Text Button"

example/qml/page/T_CalendarPicker.qml

@@ -1,47 +1,33 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage{
 
-    title:"CalendarPicker"
+    title: qsTr("CalendarPicker")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 350
-        paddings: 10
-        FluCalendarView{
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluCalendarView{
-
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
+        Layout.preferredHeight: 80
+        padding: 10
         ColumnLayout{
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
             FluCalendarPicker{
+                onAccepted:{
+                    showSuccess(current.toLocaleString())
+                }
             }
         }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluCalendarPicker{
 
 }'

example/qml/page/T_Captcha.qml

@@ -0,0 +1,59 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Captcha")
+
+    FluCaptcha{
+        id: captcha
+        ignoreCase:switch_case.checked
+        MouseArea{
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            onClicked: {
+                captcha.refresh()
+            }
+        }
+    }
+
+    FluButton{
+        text: qsTr("Refresh")
+        Layout.topMargin: 20
+        onClicked: {
+            captcha.refresh()
+        }
+    }
+
+    FluToggleSwitch{
+        id: switch_case
+        text: qsTr("Ignore Case")
+        checked: true
+        Layout.topMargin: 10
+    }
+
+    RowLayout{
+        spacing: 10
+        Layout.topMargin: 10
+        FluTextBox{
+            id:text_box
+            placeholderText: qsTr("Please enter a verification code")
+            Layout.preferredWidth: 240
+        }
+        FluButton{
+            text: qsTr("verify")
+            onClicked: {
+                var success =  captcha.verify(text_box.text)
+                if(success){
+                    showSuccess(qsTr("The verification code is correct"))
+                }else{
+                    showError(qsTr("Error validation, please re-enter"))
+                }
+            }
+        }
+    }
+}

example/qml/page/T_Carousel.qml

@@ -1,19 +1,31 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage{
 
-    title:"Carousel"
+    title: qsTr("Carousel")
 
-    FluArea{
+    ListModel{
+        id:data_model
+        ListElement{
+            url:"qrc:/example/res/image/banner_1.jpg"
+        }
+        ListElement{
+            url:"qrc:/example/res/image/banner_2.jpg"
+        }
+        ListElement{
+            url:"qrc:/example/res/image/banner_3.jpg"
+        }
+    }
+
+    FluFrame{
         Layout.fillWidth: true
         height: 370
-        paddings: 10
-        Layout.topMargin: 20
+        padding: 10
         Column{
             spacing: 15
             anchors{
@@ -21,26 +33,195 @@ FluScrollablePage{
                 left:parent.left
             }
             FluText{
-                text:"轮播图，支持无限轮播，无限滑动，用ListView实现的组件"
+                text: qsTr("Carousel map, support infinite carousel, infinite swipe, and components implemented with ListView")
+            }
+            Item{
+                width: 400
+                height: 300
+                FluShadow{
+                    radius: 8
                 }
                 FluCarousel{
-                id:carousel
+                    anchors.fill: parent
+                    delegate: Component{
+                        Image {
+                            anchors.fill: parent
+                            source: model.url
+                            asynchronous: true
+                            fillMode:Image.PreserveAspectCrop
+                        }
+                    }
                     Layout.topMargin: 20
                     Layout.leftMargin: 5
                     Component.onCompleted: {
-                    carousel.setData([{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}])
+                        model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
                     }
                 }
             }
         }
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        height: 340
+        padding: 10
+        Layout.topMargin: 10
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left:parent.left
+            }
+            Item{
+                width: 400
+                height: 300
+                FluShadow{
+                    radius: 8
+                }
+                FluCarousel{
+                    anchors.fill: parent
+                    loopTime:1500
+                    indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
+                    indicatorMarginTop:15
+                    delegate: Component{
+                        Item{
+                            anchors.fill: parent
+                            Image {
+                                anchors.fill: parent
+                                source: model.url
+                                asynchronous: true
+                                fillMode:Image.PreserveAspectCrop
+                            }
+                            Rectangle{
+                                height: 40
+                                width: parent.width
+                                anchors.bottom: parent.bottom
+                                color: "#33000000"
+                                FluText{
+                                    anchors.fill: parent
+                                    verticalAlignment: Qt.AlignVCenter
+                                    horizontalAlignment: Qt.AlignHCenter
+                                    text:model.title
+                                    color: FluColors.Grey10
+                                }
+                            }
+                        }
+                    }
+                    Layout.topMargin: 20
+                    Layout.leftMargin: 5
+                    Component.onCompleted: {
+                        var arr = []
+                        arr.push({url:"qrc:/example/res/image/banner_1.jpg",title:"共同应对全球性问题"})
+                        arr.push({url:"qrc:/example/res/image/banner_2.jpg",title:"三小只全程没互动"})
+                        arr.push({url:"qrc:/example/res/image/banner_3.jpg",title:"有效投资扩大 激发增长动能"})
+                        model = arr
+                    }
+                }
+            }
+
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluCarousel{
+    id:carousel
+    width: 400
+    height: 300
+    delegate: Component{
+        Image {
+            anchors.fill: parent
+            source: model.url
+            asynchronous: true
+            fillMode:Image.PreserveAspectCrop
+        }
+    }
+    Component.onCompleted: {
+        carousel.model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
+    }
+}'
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 300 + topPadding + bottomPadding
+        padding: 10
+        Layout.topMargin: 10
+        RowLayout{
+            anchors.fill: parent
+            Item{
+                Layout.preferredWidth: 400
+                Layout.fillHeight: true
+                FluShadow{
+                    radius: 8
+                }
+                FluCarousel{
+                    anchors.fill: parent
+                    orientation: Qt.Vertical
+                    autoPlay: auto_play_switch.checked
+                    loopTime:1500
+                    indicatorGravity: Qt.AlignVCenter | Qt.AlignRight
+                    indicatorMarginTop:15
+                    delegate: Component{
+                        Item{
+                            anchors.fill: parent
+                            Image {
+                                anchors.fill: parent
+                                source: model.url
+                                asynchronous: true
+                                fillMode:Image.PreserveAspectCrop
+                            }
+                            Rectangle{
+                                height: 40
+                                width: parent.width
+                                anchors.bottom: parent.bottom
+                                color: "#33000000"
+                                FluText{
+                                    anchors.fill: parent
+                                    verticalAlignment: Qt.AlignVCenter
+                                    horizontalAlignment: Qt.AlignHCenter
+                                    text:model.title
+                                    color: FluColors.Grey10
+                                }
+                            }
+                        }
+                    }
+                    Layout.topMargin: 20
+                    Layout.leftMargin: 5
+                    Component.onCompleted: {
+                        var arr = []
+                        arr.push({url:"qrc:/example/res/image/banner_1.jpg",title:"共同应对全球性问题"})
+                        arr.push({url:"qrc:/example/res/image/banner_2.jpg",title:"三小只全程没互动"})
+                        arr.push({url:"qrc:/example/res/image/banner_3.jpg",title:"有效投资扩大 激发增长动能"})
+                        model = arr
+                    }
+                }
+            }
+            FluToggleSwitch{
+                id: auto_play_switch
+                Layout.alignment: Qt.AlignRight
+                text: qsTr("Auto play")
+            }
+        }
+    }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluCarousel{
+    id:carousel
     width: 400
     height: 300
+    orientation: Qt.Vertical
+    delegate: Component{
+        Image {
+            anchors.fill: parent
+            source: model.url
+            asynchronous: true
+            fillMode:Image.PreserveAspectCrop
+        }
+    }
     Component.onCompleted: {
-        setData([{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}])
+        carousel.model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
     }
 }'
     }

example/qml/page/T_CheckBox.qml

@@ -1,50 +1,113 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage{
 
-    title:"CheckBox"
+    title: qsTr("CheckBox")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 72
+        padding: 10
+
+        FluText{
+            text: qsTr("A 2-state CheckBox")
+        }
+
         Row{
             spacing: 30
-            anchors.verticalCenter: parent.verticalCenter
-            FluCheckBox{
-                disabled: check_box_switch.checked
+            anchors{
+                top: parent.top
+                topMargin: 30
             }
             FluCheckBox{
-                disabled: check_box_switch.checked
-                text:"Right"
+                disabled: check_box_switch_two.checked
             }
             FluCheckBox{
-                disabled: check_box_switch.checked
-                text:"Left"
+                disabled: check_box_switch_two.checked
+                text: qsTr("Right")
+            }
+            FluCheckBox{
+                disabled: check_box_switch_two.checked
+                text: qsTr("Left")
                 textRight: false
             }
         }
         FluToggleSwitch{
-            id:check_box_switch
+            id:check_box_switch_two
             anchors{
                 right: parent.right
                 verticalCenter: parent.verticalCenter
             }
-            text:"Disabled"
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluCheckBox{
     text:"Text"
 }'
     }
 
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 72
+        padding: 10
+        Layout.topMargin: 20
+
+        FluText{
+            text: qsTr("A 3-state CheckBox")
+        }
+
+        Row{
+            spacing: 30
+            anchors{
+                top: parent.top
+                topMargin: 30
+            }
+            FluCheckBox{
+                property int count: 1
+                text: qsTr("Three State")
+                disabled: check_box_switch_three.checked
+                clickListener: function(){
+                    var flag = count%3
+                    if(flag === 0){
+                        checked = false
+                        indeterminate = false
+                    }
+                    if(flag === 1){
+                        checked = true
+                        indeterminate = false
+                    }
+                    if(flag === 2){
+                        checked = true
+                        indeterminate = true
+                    }
+                    count++
+                }
+            }
+        }
+        FluToggleSwitch{
+            id:  check_box_switch_three
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluCheckBox{
+    text:"Text"
+    indeterminate:true
+}'
+    }
+
 }

example/qml/page/T_Clip.qml

@@ -0,0 +1,105 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Clip")
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 380
+        padding: 10
+
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            FluText{
+                text: qsTr("Use with images (this component will have no effect under software rendering)")
+                Layout.topMargin: 20
+            }
+            RowLayout{
+                spacing: 14
+                FluClip{
+                    width: 50
+                    height: 50
+                    radius: [25,0,25,25]
+                    Image {
+                        asynchronous: true
+                        anchors.fill: parent
+                        source: "qrc:/example/res/svg/avatar_1.svg"
+                        sourceSize: Qt.size(width,height)
+                    }
+                }
+                FluClip{
+                    width: 50
+                    height: 50
+                    radius: [10,10,10,10]
+                    Image {
+                        asynchronous: true
+                        anchors.fill: parent
+                        sourceSize: Qt.size(width,height)
+                        source: "qrc:/example/res/svg/avatar_2.svg"
+                    }
+                }
+                FluClip{
+                    width: 50
+                    height: 50
+                    radius: [25,25,25,25]
+                    Image {
+                        asynchronous: true
+                        anchors.fill: parent
+                        sourceSize: Qt.size(width,height)
+                        source: "qrc:/example/res/svg/avatar_3.svg"
+                    }
+                }
+                FluClip{
+                    width: 50
+                    height: 50
+                    radius: [0,25,25,25]
+                    Image {
+                        asynchronous: true
+                        anchors.fill: parent
+                        sourceSize: Qt.size(width,height)
+                        source: "qrc:/example/res/svg/avatar_4.svg"
+                    }
+                }
+            }
+            FluClip{
+                width: 1920/5
+                height: 1200/5
+                radius: [8,8,8,8]
+                Image {
+                    asynchronous: true
+                    source: "qrc:/example/res/image/banner_1.jpg"
+                    anchors.fill: parent
+                    sourceSize: Qt.size(2*width,2*height)
+                }
+                Layout.topMargin: 20
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluClip{
+    radius: [25,25,25,25]
+    width: 50
+    height: 50
+    Image{
+        asynchronous: true
+        anchors.fill: parent
+        source: "qrc:/example/res/svg/avatar_4.svg"
+        sourceSize: Qt.size(width,height)
+    }
+}'
+    }
+
+
+}

example/qml/page/T_ColorPicker.qml

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

example/qml/page/T_ComboBox.qml

@@ -1,81 +1,105 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage{
 
-    title:"ComboBox"
+    title: qsTr("ComboBox")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 80
-        paddings: 5
-        Layout.topMargin: 20
+        Layout.preferredHeight: 80
+        padding: 5
         Column{
             spacing: 5
             anchors.verticalCenter: parent.verticalCenter
             FluText{
-                text: "editable=false"
+                text: qsTr("editable=false")
                 x:10
             }
             FluComboBox {
                 model: ListModel {
                     id: model_1
-                    ListElement { text: "Banana" }
-                    ListElement { text: "Apple" }
-                    ListElement { text: "Coconut" }
+                    ListElement { text: qsTr("Banana") }
+                    ListElement { text: qsTr("Apple") }
+                    ListElement { text: qsTr("Coconut") }
                 }
             }
         }
     }
 
-    FluArea{
+    FluFrame {
         Layout.fillWidth: true
-        height: 80
-        paddings: 10
+        Layout.preferredHeight: 80
+        padding: 5
         Layout.topMargin: 20
         Column{
             spacing: 5
             anchors.verticalCenter: parent.verticalCenter
             FluText{
-                text: "editable=true"
+                text: qsTr("disabled=true")
+                x:10
+            }
+            FluComboBox {
+                disabled: true
+                model: ListModel {
+                    id: model_2
+                    ListElement { text: qsTr("Banana") }
+                    ListElement { text: qsTr("Apple") }
+                    ListElement { text: qsTr("Coconut") }
+                }
+            }
+        }
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        height: 80
+        padding: 10
+        Layout.topMargin: 20
+        Column{
+            spacing: 5
+            anchors.verticalCenter: parent.verticalCenter
+            FluText{
+                text: qsTr("editable=true")
                 x:5
             }
             FluComboBox {
                 editable: true
-                font:FluTextStyle.BodyStrong
                 model: ListModel {
-                    id: model_2
-                    ListElement { text: "Banana" }
-                    ListElement { text: "Apple" }
-                    ListElement { text: "Coconut" }
+                    id: model_3
+                    ListElement { text: qsTr("Banana") }
+                    ListElement { text: qsTr("Apple") }
+                    ListElement { text: qsTr("Coconut") }
                 }
                 onAccepted: {
                     if (find(editText) === -1)
-                        model_2.append({text: editText})
+                        model_3.append({text: editText})
                 }
             }
         }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluComboBox{
+        Layout.topMargin: -6
+        code:qsTr('FluComboBox{
     editable: true
     model: ListModel {
         id: model
-        ListElement { text: "Banana" }
-        ListElement { text: "Apple" }
-        ListElement { text: "Coconut" }
+        ListElement { text: "%1" }
+        ListElement { text: "%2" }
+        ListElement { text: "%3" }
     }
     onAccepted: {
         if (find(editText) === -1)
             model.append({text: editText})
     }
-}'
+}').arg(qsTr("Banana"))
+   .arg(qsTr("Apple"))
+   .arg(qsTr("Coconut"))
     }
 
 }

example/qml/page/T_CustomPlot.qml

@@ -0,0 +1,49 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluPage{
+
+    title: qsTr("QCustomPlot")
+    TimePlot {
+        id: timePlot
+        anchors.fill: parent
+        plotTimeRangeInMilliseconds: 10
+        xAxis.visible: true
+        yAxis.visible: true
+        x1Axis.visible: false
+        y1Axis.visible: false
+        yAxis.ticker.tickCount: 6
+        yAxis.ticker.ticks: false
+        yAxis.ticker.subTicks: false
+        yAxis.ticker.baseColor: "transparent"
+        yAxis.grid.lineColor: "mediumaquamarine"
+        xAxis.ticker.baseColor: "midnightblue"
+        xAxis.ticker.baseWidth: 2
+        xAxis.grid.lineColor: "transparent"
+        backgroundColor: "mistyrose"
+        Component.onCompleted: {
+            yAxis.setRange(0, 100)
+            addGraph("1")
+            graphs["1"].graphColor = "slategrey"
+        }
+    }
+    Timer {
+        running: true
+        repeat: true
+        interval: 20
+        property int data: 60
+        onTriggered: {
+            data = data - 1
+            if(data == 20) {
+                data = 60
+            }
+            timePlot.addCurrentTimeValue("1", data)
+        }
+    }
+
+
+}

example/qml/page/T_DatePicker.qml

@@ -1,29 +1,29 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage{
 
-    title:"TimePicker"
+    title: qsTr("DatePicker")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
+        Layout.preferredHeight: 80
+        padding: 10
         ColumnLayout{
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
             FluText{
-                text:"showYear=true"
+                text: qsTr("showYear=true")
             }
             FluDatePicker{
-                onCurrentChanged: {
+                current: new Date()
+                onAccepted: {
                     showSuccess(current.toLocaleDateString())
                 }
             }
@@ -31,29 +31,28 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluDatePicker{
 
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 80
-        paddings: 10
+        Layout.preferredHeight: 80
+        padding: 10
         ColumnLayout{
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
             FluText{
-                text:"showYear=false"
+                text: qsTr("showYear=false")
             }
-
             FluDatePicker{
-                showYear:false
-                onCurrentChanged: {
+                showYear: false
+                onAccepted: {
                     showSuccess(current.toLocaleDateString())
                 }
             }
@@ -61,7 +60,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluDatePicker{
     showYear:false
 }'

example/qml/page/T_Dialog.qml

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

example/qml/page/T_Expander.qml

@@ -1,19 +1,18 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage{
 
-    title:"Expander"
+    title: qsTr("Expander")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         height: layout_column.height+20
-        paddings: 10
-        Layout.topMargin: 20
+        padding: 10
         Column{
             id:layout_column
             spacing: 15
@@ -23,7 +22,7 @@ FluScrollablePage{
             }
 
             FluExpander{
-                headerText:"打开一个单选框"
+                headerText: qsTr("Open a radio box")
                 Layout.topMargin: 20
                 Item{
                     anchors.fill: parent
@@ -50,7 +49,7 @@ FluScrollablePage{
 
             FluExpander{
                 Layout.topMargin: 20
-                headerText:"打开一个滑动文本框"
+                headerText: qsTr("Open a sliding text box")
                 Item{
                     anchors.fill: parent
                     Flickable{
@@ -58,6 +57,7 @@ FluScrollablePage{
                         width: parent.width
                         height: parent.height
                         contentWidth: width
+                        boundsBehavior: Flickable.StopAtBounds
                         contentHeight: text_info.height
                         ScrollBar.vertical: FluScrollBar {}
                         FluText{
@@ -65,7 +65,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.")
                         }
                     }
                 }
@@ -75,9 +82,9 @@ FluScrollablePage{
 
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluExpander{
-    headerText:"打开一个单选框"
+    headerText: qsTr("Open a radio box")
     Item{
         anchors.fill: parent
         Flickable{
@@ -91,12 +98,154 @@ 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...")
             }
         }
     }
 }'
     }
 
+    FluFrame {
+        Layout.fillWidth: true
+        padding: 10
+        Layout.topMargin: 20
+        Column {
+            spacing: 15
+            FluExpander {
+                headerHeight: 60
+                contentHeight: content_layout.implicitHeight
+                headerDelegate: Component {
+                    Item {
+                        RowLayout {
+                            anchors {
+                                verticalCenter: parent.verticalCenter
+                                left: parent.left
+                                leftMargin: 15
+                            }
+                            spacing: 15
+                            FluImage {
+                                width: 20
+                                height: 20
+                                sourceSize.width: 20
+                                sourceSize.height: 20
+                                source: "qrc:/example/res/image/favicon.ico"
+                            }
+                            ColumnLayout {
+                                spacing: 0
+                                FluText {
+                                    text: "FluentUI"
+                                }
+                                FluText {
+                                    text: "%1".arg(AppInfo.version)
+                                    textColor: FluTheme.fontSecondaryColor
+                                    font.pixelSize: 12
+                                }
+                            }
+                        }
+                        FluLoadingButton {
+                            id: btn_checkupdate
+                            anchors {
+                                verticalCenter: parent.verticalCenter
+                                right: parent.right
+                                rightMargin: 15
+                            }
+                            text: qsTr("Check for Updates")
+                            onClicked: {
+                                loading = true;
+                                FluEventBus.post("checkUpdate");
+                            }
+                        }
+                        FluEvent {
+                            name: "checkUpdateFinish"
+                            onTriggered: {
+                                btn_checkupdate.loading = false;
+                            }
+                        }
+                    }
+                }
+                content: ColumnLayout {
+                    id: content_layout
+                    spacing: 0
+                    RowLayout {
+                        Layout.topMargin: 15
+                        Layout.leftMargin: 15
+                        spacing: 0
+                        FluText {
+                            text: "GitHub: "
+                        }
+                        FluTextButton {
+                            text: "https://github.com/zhuzichu520/FluentUI"
+                            onClicked: {
+                                Qt.openUrlExternally(text);
+                            }
+                        }
+                    }
+                    RowLayout {
+                        Layout.bottomMargin: 15
+                        Layout.leftMargin: 15
+                        spacing: 0
+                        FluText {
+                            text: "bilibili: "
+                        }
+                        FluTextButton {
+                            text: "https://www.bilibili.com/video/BV1mg4y1M71w"
+                            onClicked: {
+                                Qt.openUrlExternally(text);
+                            }
+                        }
+                    }
+                }
+            }
 
+            FluExpander {
+                contentHeight: 100
+                headerHeight: 45
+                headerDelegate: Component {
+                    Item {
+                        FluToggleButton {
+                            anchors.centerIn: parent
+                            text: qsTr("This is a ToggleButton in the header")
+                        }
+                    }
+                }
+                content: Item {
+                    anchors.fill: parent
+                    FluButton {
+                        anchors.centerIn: parent
+                        text: qsTr("This is a StandardButton in the content")
+                        onClicked: {
+                            showInfo(qsTr("Click StandardButton"))
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    CodeExpander {
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code: 'FluExpander {
+    contentHeight: 100
+    headerHeight: 45
+    headerDelegate: Component {
+        Item {
+            FluToggleButton {
+                anchors.centerIn: parent
+                text: qsTr("This is a ToggleButton in the header")
+            }
+        }
+    }
+    content: Item {
+        anchors.fill: parent
+        FluButton {
+            anchors.centerIn: parent
+            text: qsTr("This is a StandardButton in the content")
+            onClicked: {
+                showInfo(qsTr("Click StandardButton"))
+            }
+        }
+    }
+}'
+    }
 }

example/qml/page/T_FlipView.qml

@@ -1,23 +1,22 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage{
 
-    title:"FlipView"
+    title: qsTr("FlipView")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 340
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 340
+        padding: 10
         ColumnLayout{
             anchors.verticalCenter: parent.verticalCenter
             FluText{
-                text:"水平方向的FlipView"
+                text: qsTr("Horizontal FlipView")
             }
             FluFlipView{
                 Image{
@@ -40,7 +39,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluFlipView{
     Image{
         source: "qrc:/example/res/image/banner_1.jpg"
@@ -61,15 +60,15 @@ FluScrollablePage{
 '
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         height: 340
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         ColumnLayout{
             anchors.verticalCenter: parent.verticalCenter
             FluText{
-                text:"垂直方向的FlipView"
+                text: qsTr("Vertical FlipView")
             }
             FluFlipView{
                 vertical:true
@@ -93,7 +92,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluFlipView{
     vertical:true
     Image{

example/qml/page/T_FluentPro.qml

@@ -0,0 +1,65 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluContentPage{
+
+    title: "FluentUI Pro"
+
+    Image{
+        id: iamge_logo
+        width: 80
+        height: 80
+        source: "qrc:/example/res/image/logo_pro.png"
+    }
+
+    Flickable{
+        anchors{
+            top: iamge_logo.bottom
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+        ScrollBar.vertical: FluScrollBar {}
+        ScrollBar.horizontal: FluScrollBar {}
+        contentWidth: text.width
+        contentHeight: text.height
+        clip: true
+        FluText{
+            id: text
+            textFormat: Text.MarkdownText
+            onLinkActivated:
+                (link)=> {
+                    Qt.openUrlExternally(link)
+                }
+            onLinkHovered:
+                (link)=> {
+                    if(link === ""){
+                        FluTools.restoreOverrideCursor()
+                    }else{
+                        FluTools.setOverrideCursor(Qt.PointingHandCursor)
+                    }
+                }
+            text:'
+基于[FluentUI](https://github.com/zhuzichu520/FluentUI)开源版本重新打造的项目,代码更加漂亮,API更加好用,界面更加细腻
+
+## 与开源版本有啥不同?
+
+1. 开源版本支持Qt6与Qt5.15.2,Pro版本仅支持Qt6
+2. 开源版本所有组件都有Flu前缀,Pro版本去掉Flu前缀,只需添加一行```qputenv("QT_QUICK_CONTROLS_STYLE", "FluentUI");```代码,就能将原有Button换成FluentUI样式
+3. 项目整体架构不同,开源版本代码都写在一个模块下,Pro版本分为FluentUI,FluentUI.Controls,FluentUI.impl三个模块
+4. 开源版本不支持热加载，Pro版本支持热加载，运行之后修改代码可实时关注QML界面变化，支持一键关闭开启
+5. 开源版不支持wasm编译，Pro版本支持wasm编译
+6. 开源版本过于臃肿，Pro版本做了减法，去其糟粕，取其精华，重新打造
+7. 开源版默认动态库依赖，Pro版本默认静态库依赖
+8. 开源版MIT协议免费，Pro版本付费，如有需要请联系作者wx购买：FluentUI
+
+## 下载Pro版本
+[下载地址](https://github.com/zhuzichu520/FluentUI-Pro-Installer/releases)'
+        }
+    }
+
+}

example/qml/page/T_GroupBox.qml

@@ -0,0 +1,80 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("GroupBox")
+
+    FluGroupBox {
+        title: qsTr("CheckBox Group")
+        ColumnLayout {
+            spacing: 10
+            anchors.fill: parent
+            FluCheckBox { text: qsTr("E-mail") }
+            FluCheckBox { text: qsTr("Calendar") }
+            FluCheckBox { text: qsTr("Contacts") }
+        }
+    }
+
+    FluGroupBox {
+        title: qsTr("RadioButton Group")
+        Layout.fillWidth: true
+        Layout.preferredHeight: 150
+        Layout.topMargin: 20
+        FluRadioButtons {
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            spacing: 10
+            disabled: radio_button_switch.checked
+            FluRadioButton { text: qsTr("E-mail") }
+            FluRadioButton { text: qsTr("Calendar") }
+            FluRadioButton { text: qsTr("Contacts") }
+        }
+        
+        FluToggleSwitch{
+            id: radio_button_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+
+
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: 4
+        code:`
+FluGroupBox {
+    title: qsTr("CheckBox Group")
+    ColumnLayout {
+        spacing: 10
+        anchors.fill: parent
+        FluCheckBox { text: qsTr("E-mail") }
+        FluCheckBox { text: qsTr("Calendar") }
+        FluCheckBox { text: qsTr("Contacts") }
+    }
+}
+
+FluGroupBox {
+    title: qsTr("RadioButton Group")
+    FluRadioButtons {
+        spacing: 10
+        disabled: true // 禁用所有FluRadioButton子组件
+        manuallyDisabled: true // 是否指定每个FluRadioButton上的disabled选项
+        FluRadioButton { text: qsTr("E-mail") }
+        FluRadioButton { text: qsTr("Calendar") }
+        FluRadioButton { text: qsTr("Contacts") }
+    }
+}
+`
+    }
+
+}

example/qml/page/T_Home.qml

@@ -1,33 +1,56 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import "qrc:///example/qml/global"
-import FluentUI
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../window"
+import "../global"
 
 FluScrollablePage{
 
-    launchMode: FluPage.SingleTask
-    animDisabled: true
+    launchMode: FluPageType.SingleTask
+    animationEnabled: false
+    header: Item{}
 
     ListModel{
-        id:model_header
+        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"
+            icon: "qrc:/example/res/image/logo_pro.png"
+            title: qsTr("FluentUI Pro")
+            desc: qsTr("The latest FluentUI Pro controls and styles for your applications.")
+            url: "https://github.com/zhuzichu520/FluentUI-Pro-Installer"
+            clicked: function(model){
+                Qt.openUrlExternally(model.url)
+            }
+        }
+        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 Initializr")
+            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_Initializr.showDialog()
+            }
         }
     }
-
     Item{
         Layout.fillWidth: true
-        height: 320
+        Layout.preferredHeight: 320
         Image {
             id: bg
             fillMode:Image.PreserveAspectCrop
             anchors.fill: parent
             verticalAlignment: Qt.AlignTop
+            sourceSize: Qt.size(960,640)
             source: "qrc:/example/res/image/bg_home_header.png"
         }
         Rectangle{
@@ -47,59 +70,42 @@ FluScrollablePage{
                 leftMargin: 20
             }
         }
-
-        ListView{
-            id: list
-            anchors{
-                left: parent.left
-                right: parent.right
-                bottom: parent.bottom
-            }
-            orientation: ListView.Horizontal
-            height: 240
-            model: model_header
-            header: Item{height: 10;width: 10}
-            footer: Item{height: 10;width: 10}
-            ScrollBar.horizontal: FluScrollBar{
-                id: scrollbar_header
-            }
-            clip: false
-            delegate:Item{
+        Component{
+            id:com_grallery
+            Item{
                 id: control
                 width: 220
                 height: 240
-                FluArea{
-                    radius: 8
+                FluShadow{
+                    radius:5
+                    anchors.fill: item_content
+                }
+                FluClip{
+                    id:item_content
+                    radius: [5,5,5,5]
                     width: 200
                     height: 220
                     anchors.centerIn: parent
-                    color: 'transparent'
-                    FluAcrylic {
-                        sourceItem:bg
+                    FluAcrylic{
                         anchors.fill: parent
-                        color: FluTheme.dark ? Window.active ?  Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
-                        rectX: list.x-list.contentX+10+(control.width)*index
-                        rectY: list.y+10
-                        acrylicOpacity:0.8
+                        tintColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+                        target: bg
+                        tintOpacity: FluTheme.dark ? 0.8 : 0.9
+                        blurRadius : 40
+                        targetRect: Qt.rect(list.x-list.contentX+10+(control.width)*index,list.y+10,width,height)
                     }
                     Rectangle{
                         anchors.fill: parent
-                        radius: 8
-                        color:{
-                            if(FluTheme.dark){
-                                if(item_mouse.containsMouse){
-                                    return Qt.rgba(1,1,1,0.03)
+                        radius: 5
+                        color:FluTheme.itemHoverColor
+                        visible: item_mouse.containsMouse
                     }
-                                return Qt.rgba(0,0,0,0)
-                            }else{
-                                if(item_mouse.containsMouse){
-                                    return Qt.rgba(0,0,0,0.03)
+                    Rectangle{
+                        anchors.fill: parent
+                        radius: 5
+                        color:Qt.rgba(0,0,0,0.0)
+                        visible: !item_mouse.containsMouse
                     }
-                                return Qt.rgba(0,0,0,0)
-                            }
-                        }
-                    }
-
                     ColumnLayout{
                         Image {
                             Layout.topMargin: 20
@@ -121,6 +127,7 @@ FluScrollablePage{
                             Layout.leftMargin: 20
                             color: FluColors.Grey120
                             font.pixelSize: 12
+                            font.family: FluTextStyle.family
                             wrapMode: Text.WrapAnywhere
                         }
                     }
@@ -138,25 +145,46 @@ FluScrollablePage{
                         id:item_mouse
                         anchors.fill: parent
                         hoverEnabled: true
-                        onWheel: (wheel)=>{
+                        onWheel:
+                            (wheel)=>{
                                 if (wheel.angleDelta.y > 0) scrollbar_header.decrease()
                                 else scrollbar_header.increase()
                             }
                         onClicked: {
-                            Qt.openUrlExternally(model.url)
-                        }
+                            model.clicked(model)
                         }
                     }
                 }
             }
         }
 
+        ListView{
+            id: list
+            anchors{
+                left: parent.left
+                right: parent.right
+                bottom: parent.bottom
+            }
+            orientation: ListView.Horizontal
+            height: 240
+            model: model_header
+            header: Item{height: 10;width: 10}
+            footer: Item{height: 10;width: 10}
+            ScrollBar.horizontal: FluScrollBar{
+                id: scrollbar_header
+            }
+            clip: false
+            delegate: com_grallery
+        }
+    }
+
     Component{
         id:com_item
         Item{
+            property string desc: modelData.extra.desc
             width: 320
             height: 120
-            FluArea{
+            FluFrame{
                 radius: 8
                 width: 300
                 height: 100
@@ -165,31 +193,23 @@ FluScrollablePage{
                     anchors.fill: parent
                     radius: 8
                     color:{
-                        if(FluTheme.dark){
                         if(item_mouse.containsMouse){
-                                return Qt.rgba(1,1,1,0.03)
-                            }
-                            return Qt.rgba(0,0,0,0)
-                        }else{
-                            if(item_mouse.containsMouse){
-                                return Qt.rgba(0,0,0,0.03)
-                            }
-                            return Qt.rgba(0,0,0,0)
+                            return FluTheme.itemHoverColor
                         }
+                        return FluTheme.itemNormalColor
                     }
                 }
                 Image{
                     id:item_icon
                     height: 40
                     width: 40
-                    source: modelData.image
+                    source: modelData.extra.image
                     anchors{
                         left: parent.left
                         leftMargin: 20
                         verticalCenter: parent.verticalCenter
                     }
                 }
-
                 FluText{
                     id:item_title
                     text:modelData.title
@@ -200,10 +220,9 @@ FluScrollablePage{
                         top: item_icon.top
                     }
                 }
-
                 FluText{
                     id:item_desc
-                    text:modelData.desc
+                    text:desc
                     color:FluColors.Grey120
                     wrapMode: Text.WrapAnywhere
                     elide: Text.ElideRight
@@ -222,7 +241,7 @@ FluScrollablePage{
                     height: 12
                     width: 12
                     radius:  6
-                    color: FluTheme.primaryColor.dark
+                    color: FluTheme.primaryColor
                     anchors{
                         right: parent.right
                         top: parent.top
@@ -252,7 +271,7 @@ FluScrollablePage{
 
     GridView{
         Layout.fillWidth: true
-        implicitHeight: contentHeight
+        Layout.preferredHeight: contentHeight
         cellHeight: 120
         cellWidth: 320
         model:ItemsOriginal.getRecentlyAddedData()
@@ -269,7 +288,7 @@ FluScrollablePage{
 
     GridView{
         Layout.fillWidth: true
-        implicitHeight: contentHeight
+        Layout.preferredHeight: contentHeight
         cellHeight: 120
         cellWidth: 320
         interactive: false
@@ -278,3 +297,4 @@ FluScrollablePage{
     }
 
 }
+

example/qml/page/T_Icons.qml

@@ -0,0 +1,75 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+
+FluContentPage {
+
+    title: qsTr("Icons")
+
+    FluTextBox{
+        id: text_box
+        placeholderText: qsTr("Please enter a keyword")
+        anchors{
+            top: parent.top
+        }
+        onTextChanged: {
+            grid_view.model = FluApp.iconData(text_box.text)
+        }
+    }
+    FluToggleSwitch{
+        id: toggle_switch
+        anchors{
+            left: text_box.right
+            verticalCenter: text_box.verticalCenter
+            leftMargin: 10
+        }
+        text: qsTr("Disabled")
+    }
+    GridView{
+        id: grid_view
+        cellWidth: 110
+        cellHeight: 110
+        clip: true
+        boundsBehavior: GridView.StopAtBounds
+        model: FluApp.iconData()
+        ScrollBar.vertical: FluScrollBar {}
+        anchors{
+            topMargin: 10
+            top: text_box.bottom
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+        delegate: Item {
+            width: 100
+            height: 100
+            FluIconButton{
+                id:item_icon
+                iconSource: modelData.icon
+                iconSize: 30
+                padding: 0
+                verticalPadding: 0
+                horizontalPadding: 0
+                bottomPadding: 30
+                anchors.fill: parent
+                disabled: toggle_switch.checked
+                onClicked: {
+                    var text  ="FluentIcons."+modelData.name;
+                    FluTools.clipText(text)
+                    showSuccess(qsTr("You Copied ")+text)
+                }
+                FluText{
+                    width: parent.width
+                    horizontalAlignment: Qt.AlignHCenter
+                    wrapMode: Text.WrapAnywhere
+                    text: modelData.name
+                    anchors.top: parent.top
+                    anchors.topMargin: 60
+                    enabled: !toggle_switch.checked
+                }
+            }
+        }
+    }
+}

example/qml/page/T_Image.qml

@@ -1,19 +1,18 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage{
 
-    title:"Image"
+    title: qsTr("Image")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 260
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 260
+        padding: 10
         Column{
             spacing: 15
             anchors{
@@ -26,7 +25,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(){
@@ -37,7 +36,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluImage{
     width: 400
     height: 300

example/qml/page/T_InfoBar.qml

@@ -1,19 +1,22 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage{
 
-    title:"InfoBar"
+    title: qsTr("InfoBar")
 
-    FluArea{
+    property var info1
+    property var info2
+    property var info3
+
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 240
-        paddings: 10
+        Layout.preferredHeight: 350
+        padding: 10
         ColumnLayout{
             spacing: 14
             anchors{
@@ -21,31 +24,83 @@ 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"
+                text: qsTr("Error")
                 onClicked: {
-                    showError("这是一个Error样式的InfoBar")
+                    showError(qsTr("This is an InfoBar in the Error Style"))
                 }
             }
             FluButton{
-                text:"Success"
+                text: qsTr("Success")
                 onClicked: {
-                    showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
+                    showSuccess(qsTr("This is an InfoBar in the Success Style"))
                 }
             }
             FluButton{
-                text:"Loading"
+                text: qsTr("InfoBar that needs to be turned off manually")
+                onClicked: {
+                    showInfo(qsTr("This is an InfoBar in the Info Style"),0,qsTr("Manual shutdown is supported"))
+                }
+            }
+            FluText{
+                wrapMode: Text.WrapAnywhere
+                width: parent.width
+                text: qsTr("Manually close the info message box")
+            }
+            Row{
+                spacing: 5
+                FluButton{
+                    text: (info1 ? qsTr("close '%1'") : qsTr("show '%1'")).arg(qsTr("info1"))
+                    onClicked: {
+                        if(info1) {
+                            info1.close()
+                            return
+                        }
+                        info1 = showInfo(qsTr("This is an '%1'").arg(qsTr("info1")), 0)
+                        info1.close()
+                    }
+                }
+                FluButton{
+                    text: (info2 ? qsTr("close '%1'") : qsTr("show '%1'")).arg(qsTr("info2"))
+                    onClicked: {
+                        if(info2) {
+                            info2.close()
+                            return
+                        }
+                        info2 = showInfo(qsTr("This is an '%1'").arg(qsTr("info2")), 0)
+                    }
+                }
+                FluButton{
+                    text: (info3 ? qsTr("close '%1'") : qsTr("show '%1'")).arg(qsTr("info3"))
+                    onClicked: {
+                        if(info3) {
+                            info3.close()
+                            return
+                        }
+                        info3 = showInfo(qsTr("This is an '%1'").arg(qsTr("info3")), 0)
+                    }
+                }
+                FluButton{
+                    text: qsTr("clear all info")
+                    onClicked: {
+                        clearAllInfo()
+                    }
+                }
+            }
+
+            FluButton{
+                text: qsTr("Loading")
                 onClicked: {
                     showLoading()
                 }
@@ -54,13 +109,18 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'showInfo("这是一个Info样式的InfoBar")
+        Layout.topMargin: -6
+        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"))
+
+var info1 = showInfo(qsTr("This is an 'Info1'"), 0)
+info1.close()
+`
     }
 }

example/qml/page/T_Menu.qml

@@ -1,13 +1,13 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage{
 
-    title:"Menu"
+    title: qsTr("Menu")
 
     FluMenu {
         id:menu
@@ -16,36 +16,43 @@ FluScrollablePage{
         Action { text: qsTr("Open...") }
         Action { text: qsTr("Save") }
         FluMenuSeparator { }
-        Action {
+        FluMenuItem{
             text: qsTr("Quit")
             onTriggered: {
                 showError("Quit")
             }
         }
+        FluMenuItem{
+            text: qsTr("Search")
+            iconSource: FluentIcons.Zoom
+            iconSpacing: 3
+            onTriggered: {
+                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") }
         }
     }
 
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 100
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 100
+        padding: 10
         Column{
-            id:layout_column
+            id: layout_column
             spacing: 15
             anchors{
                 verticalCenter: parent.verticalCenter
@@ -53,11 +60,11 @@ FluScrollablePage{
             }
 
             FluText{
-                text:"Menu"
+                text: qsTr("Menu")
             }
 
             FluButton{
-                text:"Show Menu Popup"
+                text: qsTr("Show Menu Popup")
                 Layout.topMargin: 20
                 onClicked:{
                     menu.popup()
@@ -70,7 +77,7 @@ FluScrollablePage{
 
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluMenu{
     id:menu
     FluMenuItem:{
@@ -91,10 +98,10 @@ menu.popup()
     }
 
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 100
-        paddings: 10
+        Layout.preferredHeight: 100
+        padding: 10
         Layout.topMargin: 20
         Column{
             spacing: 15
@@ -104,7 +111,7 @@ menu.popup()
             }
 
             FluText{
-                text:"MenuBar"
+                text: qsTr("MenuBar")
             }
 
             FluMenuBar {
@@ -121,7 +128,7 @@ menu.popup()
                         enabled:false
                     }
                     FluMenu{
-                        title: "Save As..."
+                        title: qsTr("Save As...")
                         Action { text: qsTr("Doc") }
                         Action { text: qsTr("PDF") }
                     }
@@ -143,7 +150,7 @@ menu.popup()
 
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluMenuBar{
     id:menu
     FluMenu:{
@@ -160,8 +167,4 @@ menu.popup()
 menu.popup()
 '
     }
-
-
-
-
 }

example/qml/page/T_MultiWindow.qml

@@ -1,30 +1,30 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage{
 
     property string password: ""
-    property var loginPageRegister: registerForWindowResult("/login")
 
-    title:"MultiWindow"
+    title: qsTr("MultiWindow")
 
-    Connections{
-        target: loginPageRegister
-        function onResult(data)
-        {
+    FluWindowResultLauncher{
+        id:loginResultLauncher
+        path: "/login"
+        onResult:
+            (data)=>{
                 password = data.password
             }
+
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 86
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 86
+        padding: 10
         Column{
             spacing: 15
             anchors{
@@ -32,21 +32,21 @@ 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")
+                    FluRouter.navigate("/standardWindow")
                 }
             }
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 86
-        paddings: 10
+        Layout.preferredHeight: 86
+        padding: 10
         Layout.topMargin: 10
         Column{
             spacing: 15
@@ -55,22 +55,22 @@ 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")
+                    FluRouter.navigate("/singleTaskWindow")
                 }
             }
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 86
-        paddings: 10
+        Layout.preferredHeight: 86
+        padding: 10
         Layout.topMargin: 10
         Column{
             spacing: 15
@@ -79,32 +79,32 @@ 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")
+                    FluRouter.navigate("/singleInstanceWindow")
                 }
             }
         }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluWindow{
-  //launchMode: FluWindow.Standard
-  //launchMode: FluWindow.SingleTask
-     launchMode: FluWindow.SingleInstance
+  //launchMode: FluWindowType.Standard
+  //launchMode: FluWindowType.SingleTask
+     launchMode: FluWindowType.SingleInstance
 }
 '
     }
 
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 100
-        paddings: 10
+        Layout.preferredHeight: 100
+        padding: 10
         Layout.topMargin: 20
         Column{
             spacing: 15
@@ -113,32 +113,32 @@ 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")
+                    FluRouter.navigate("/about")
                 }
             }
         }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluButton{
-    text:"点击跳转"
+    text: qsTr("Create Window")
     onClicked: {
-        FluApp.navigate("/about")
+        FluRouter.navigate("/about")
     }
 }
 '
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 130
-        paddings: 10
+        Layout.preferredHeight: 130
+        padding: 10
         Layout.topMargin: 20
 
         Column{
@@ -148,36 +148,35 @@ 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"})
+                    loginResultLauncher.launch({username:"zhuzichu"})
                 }
             }
             FluText{
-                text:"登录窗口返回过来的密码->"+password
+                text:qsTr("Login Window Returned Password - >")+password
             }
         }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'property var loginPageRegister: registerForWindowResult("/login")
-
-Connections{
-    target: loginPageRegister
-    function onResult(data)
-    {
+        Layout.topMargin: -6
+        code:'FluWindowResultLauncher{
+    id:loginResultLauncher
+    path: "/login"
+    onResult:
+        (data)=>{
             password = data.password
      }
 }
 
 FluButton{
-    text:"点击跳转"
+    text: qsTr("Create Window")
     onClicked: {
-        loginPageRegister.launch({username:"zhuzichu"})
+        loginResultLauncher.launch({username:"zhuzichu"})
     }
 }
 '

example/qml/page/T_Network.qml

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

example/qml/page/T_OpenGL.qml

@@ -0,0 +1,26 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import example 1.0
+import "../component"
+
+FluContentPage{
+
+    title: qsTr("OpenGL")
+
+    FluFrame{
+        anchors.fill: parent
+        OpenGLItem{
+            anchors.fill: parent
+            SequentialAnimation on t {
+                NumberAnimation { to: 1; duration: 2500; easing.type: Easing.InQuad }
+                NumberAnimation { to: 0; duration: 2500; easing.type: Easing.OutQuad }
+                loops: Animation.Infinite
+                running: true
+            }
+        }
+    }
+
+}

example/qml/page/T_Pagination.qml

@@ -1,19 +1,18 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import "qrc:///example/qml/component"
-import FluentUI
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import "../component"
+import FluentUI 1.0
 
 FluScrollablePage{
 
-    title:"Pagination"
+    title: qsTr("Pagination")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 200
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 200
+        padding: 10
         ColumnLayout{
             spacing: 20
             anchors.verticalCenter: parent.verticalCenter
@@ -37,7 +36,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluPagination{
     pageCurrent: 1
     itemCount: 1000

example/qml/page/T_Pivot.qml

@@ -1,76 +1,76 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage{
 
-    title:"Pivot"
+    title: qsTr("Pivot")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 400
-        paddings: 10
+        Layout.preferredHeight: 400
+        padding: 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.")
                 }
             }
         }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluPivot{
     anchors.fill: parent
-    FluPivotItem:{
-        text:"All"
+    FluPivotItem {
+        title: qsTr("All")
         contentItem: FluText{
-            text:"All emails go here."
+            text: qsTr("All emails go here.")
         }
     }
-    FluPivotItem:{
-        text:"Unread"
+    FluPivotItem {
+        title: qsTr("Unread")
         contentItem: FluText{
-            text:"Unread emails go here."
+            text: qsTr("Unread emails go here.")
         }
     }
-    FluPivotItem:{
-        text:"Flagged"
+    FluPivotItem {
+        title: qsTr("Flagged")
         contentItem: FluText{
-            text:"Flagged emails go here."
+            text: qsTr("Flagged emails go here.")
         }
     }
-    FluPivotItem:{
-        text:"Urgent"
+    FluPivotItem {
+        title: qsTr("Urgent")
         contentItem: FluText{
-            text:"Urgent emails go here."
+            text: qsTr("Urgent emails go here.")
         }
     }
 }

example/qml/page/T_Progress.qml

@@ -1,19 +1,18 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage{
 
-    title:"Progress"
+    title: qsTr("Progress")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 110
-        paddings: 10
+        Layout.preferredHeight: 130
+        padding: 10
 
         ColumnLayout{
             spacing: 10
@@ -32,7 +31,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluProgressBar{
 
 }
@@ -42,11 +41,11 @@ FluProgressRing{
 '
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 230
-        paddings: 10
+        Layout.preferredHeight: 286
+        padding: 10
 
         ColumnLayout{
             spacing: 10
@@ -59,21 +58,24 @@ FluProgressRing{
             }
             FluProgressBar{
                 indeterminate: false
-                progress: slider.value/100
-            }
-            FluProgressRing{
-                indeterminate: false
-                progress: slider.value/100
+                value:slider.value/100
+                Layout.topMargin: 10
             }
             FluProgressBar{
                 indeterminate: false
+                value:slider.value/100
                 progressVisible: true
-                progress: slider.value/100
+                Layout.topMargin: 10
             }
             FluProgressRing{
                 indeterminate: false
+                value: slider.value/100
+                Layout.topMargin: 10
+            }
+            FluProgressRing{
                 progressVisible: true
-                progress: slider.value/100
+                indeterminate: false
+                value: slider.value/100
             }
             FluSlider{
                 id:slider
@@ -85,7 +87,7 @@ FluProgressRing{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluProgressBar{
     indeterminate: false
 }

example/qml/page/T_QRCode.qml

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

example/qml/page/T_RadioButton.qml

@@ -1,19 +1,18 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage{
 
-    title:"RadioButton"
+    title: qsTr("RadioButton")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 68
+        padding: 10
         Row{
             spacing: 30
             anchors.verticalCenter: parent.verticalCenter
@@ -22,68 +21,67 @@ 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{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluRadioButton{
     text:"Text"
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 100
-        paddings: 10
+        Layout.preferredHeight: 100
+        padding: 10
         Layout.topMargin: 20
         FluRadioButtons{
             spacing: 8
+            disabled: radio_button_switch2.checked
             anchors.verticalCenter: parent.verticalCenter
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
+            currentIndex: 1
             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{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluRadioButtons{
     spacing: 8
     FluRadioButton{
@@ -98,4 +96,106 @@ FluScrollablePage{
 }'
     }
 
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 60
+        padding: 10
+        Layout.topMargin: 20
+        FluRadioButtons{
+            spacing: 8
+            anchors.verticalCenter: parent.verticalCenter
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            disabled: radio_button_switch3.checked
+            orientation: Qt.Horizontal
+            currentIndex: 1
+            FluRadioButton{
+                text: qsTr("Radio Button_1")
+            }
+            FluRadioButton{
+                text: qsTr("Radio Button_2")
+            }
+            FluRadioButton{
+                text: qsTr("Radio Button_3")
+            }
+        }
+        FluToggleSwitch{
+            id: radio_button_switch3
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluRadioButtons{
+    spacing: 8
+    orientation: Qt.Horizontal
+    FluRadioButton{
+        text:"Radio Button_1"
+    }
+    FluRadioButton{
+        text:"Radio Button_2"
+    }
+    FluRadioButton{
+        text:"Radio Button_3"
+    }
+}'
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 100
+        padding: 10
+        Layout.topMargin: 20
+        FluRadioButtons{
+            spacing: 8
+            anchors.verticalCenter: parent.verticalCenter
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            disabled: radio_button_switch4.checked
+            currentIndex: -1
+            FluCheckBox{
+                text: qsTr("Radio Button_1")
+            }
+            FluCheckBox{
+                text: qsTr("Radio Button_2")
+            }
+            FluCheckBox{
+                text: qsTr("Radio Button_3")
+            }
+        }
+        FluToggleSwitch{
+            id: radio_button_switch4
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluRadioButtons{
+    spacing: 8
+    FluCheckBox{
+        text:"Radio Button_1"
+    }
+    FluCheckBox{
+        text:"Radio Button_2"
+    }
+    FluCheckBox{
+        text:"Radio Button_3"
+    }
+}'
+    }
+
 }

example/qml/page/T_RatingControl.qml

@@ -1,19 +1,18 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage {
 
-    title: "RatingControl"
+    title: qsTr("RatingControl")
 
-    FluArea {
+    FluFrame {
         Layout.fillWidth: true
-        height: 100
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 100
+        padding: 10
 
         Column {
             spacing: 10
@@ -27,7 +26,7 @@ FluScrollablePage {
 
     CodeExpander {
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code: 'FluRatingControl{
 
 }'

example/qml/page/T_Rectangle.qml

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

example/qml/page/T_RemoteLoader.qml

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

example/qml/page/T_Settings.qml

@@ -1,20 +1,95 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/global"
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+import "../global"
 
 FluScrollablePage{
 
-    title:"Settings"
+    title: qsTr("Settings")
 
-    FluArea{
+    FluEvent{
+        name: "checkUpdateFinish"
+        onTriggered: {
+            btn_checkupdate.loading = false
+        }
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        Layout.preferredHeight: 60
+        padding: 10
+        Row{
+            spacing: 20
+            anchors.verticalCenter: parent.verticalCenter
+            FluText{
+                text: "%1 v%2".arg(qsTr("Current Version")).arg(AppInfo.version)
+                font: FluTextStyle.Body
+                anchors.verticalCenter: parent.verticalCenter
+            }
+            FluLoadingButton{
+                id: btn_checkupdate
+                text: qsTr("Check for Updates")
+                anchors.verticalCenter: parent.verticalCenter
+                onClicked: {
+                    loading = true
+                    FluEventBus.post("checkUpdate")
+                }
+            }
+        }
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 50
+        padding: 10
+        FluCheckBox{
+            text: qsTr("Use System AppBar")
+            checked: FluApp.useSystemAppBar
+            anchors.verticalCenter: parent.verticalCenter
+            onClicked: {
+                FluApp.useSystemAppBar = !FluApp.useSystemAppBar
+                dialog_restart.open()
+            }
+        }
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 50
+        padding: 10
+        FluCheckBox{
+            text:qsTr("Fits AppBar Windows")
+            checked: window.fitsAppBarWindows
+            anchors.verticalCenter: parent.verticalCenter
+            onClicked: {
+                window.fitsAppBarWindows = !window.fitsAppBarWindows
+            }
+        }
+    }
+
+    FluContentDialog{
+        id: dialog_restart
+        title: qsTr("Friendly Reminder")
+        message: qsTr("This action requires a restart of the program to take effect, is it restarted?")
+        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
+        negativeText: qsTr("Cancel")
+        positiveText: qsTr("OK")
+        onPositiveClicked: {
+            FluRouter.exit(931)
+        }
+    }
+
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
         height: 128
-        paddings: 10
+        padding: 10
 
         ColumnLayout{
             spacing: 5
@@ -23,12 +98,12 @@ FluScrollablePage{
                 left: parent.left
             }
             FluText{
-                text:lang.dark_mode
+                text: qsTr("Dark Mode")
                 font: FluTextStyle.BodyStrong
                 Layout.bottomMargin: 4
             }
             Repeater{
-                model: [{title:"System",mode:FluDarkMode.System},{title:"Light",mode:FluDarkMode.Light},{title:"Dark",mode:FluDarkMode.Dark}]
+                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
@@ -40,11 +115,11 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
         height: 160
-        paddings: 10
+        padding: 10
 
         ColumnLayout{
             spacing: 5
@@ -53,28 +128,38 @@ 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:FluNavigationView.Open},{title:"Compact",mode:FluNavigationView.Compact},{title:"Minimal",mode:FluNavigationView.Minimal},{title:"Auto",mode:FluNavigationView.Auto}]
+                model: [{title:qsTr("Open"),mode:FluNavigationViewType.Open},{title:qsTr("Compact"),mode:FluNavigationViewType.Compact},{title:qsTr("Minimal"),mode:FluNavigationViewType.Minimal},{title:qsTr("Auto"),mode:FluNavigationViewType.Auto}]
                 delegate: FluRadioButton{
-                    checked : MainEvent.displayMode===modelData.mode
-                    text:modelData.title
+                    text: modelData.title
+                    checked: GlobalModel.displayMode === modelData.mode
                     clickListener:function(){
-                        MainEvent.displayMode = modelData.mode
+                        GlobalModel.displayMode = modelData.mode
                     }
                 }
             }
         }
     }
 
-    FluArea{
+    ListModel{
+        id:model_language
+        ListElement{
+            name:"en"
+        }
+        ListElement{
+            name:"zh"
+        }
+    }
+
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
         height: 80
-        paddings: 10
+        padding: 10
 
         ColumnLayout{
             spacing: 10
@@ -82,27 +167,25 @@ FluScrollablePage{
                 top: parent.top
                 left: parent.left
             }
-
             FluText{
-                text:lang.locale
+                text:qsTr("Language")
                 font: FluTextStyle.BodyStrong
                 Layout.bottomMargin: 4
             }
-
             Flow{
                 spacing: 5
                 Repeater{
-                    model: ["Zh","En"]
+                    model: TranslateHelper.languages
                     delegate: FluRadioButton{
-                        checked: appInfo.lang.objectName === modelData
+                        checked: TranslateHelper.current === modelData
                         text:modelData
                         clickListener:function(){
-                            appInfo.changeLang(modelData)
+                            TranslateHelper.current = modelData
+                            dialog_restart.open()
                         }
                     }
                 }
             }
         }
     }
-
 }

example/qml/page/T_Sheet.qml

@@ -0,0 +1,90 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Sheet")
+
+    FluSheet{
+        id:sheet
+        title: qsTr("Title")
+        FluText{
+            text: qsTr("Some contents...\nSome contents...\nSome contents...")
+            anchors{
+                left: parent.left
+                leftMargin: 10
+            }
+        }
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 280
+        padding: 10
+        Column{
+            anchors.centerIn: parent
+            spacing: 10
+            Row{
+                spacing: 10
+                FluButton{
+                    width: 80
+                    height: 30
+                    text: qsTr("top")
+                    onClicked: {
+                        sheet.open(FluSheetType.Top)
+                    }
+                }
+                FluButton{
+                    width: 80
+                    height: 30
+                    text: qsTr("right")
+                    onClicked: {
+                        sheet.open(FluSheetType.Right)
+                    }
+                }
+            }
+            Row{
+                spacing: 10
+                FluButton{
+                    width: 80
+                    height: 30
+                    text: qsTr("bottom")
+                    onClicked: {
+                        sheet.open(FluSheetType.Bottom)
+                    }
+                }
+                FluButton{
+                    width: 80
+                    height: 30
+                    text: qsTr("left")
+                    onClicked: {
+                        sheet.open(FluSheetType.Left)
+                    }
+                }
+            }
+        }
+    }
+
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluSheet{
+    id:sheet
+    title: qsTr("Title")
+    FluText{
+        text: qsTr("Some contents...")
+        anchors{
+            left: parent.left
+            leftMargin: 10
+        }
+    }
+}
+sheet.open(FluSheetType.Bottom)
+'
+    }
+
+}

example/qml/page/T_ShortcutPicker.qml

@@ -0,0 +1,42 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("ShortcutPicker")
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: childrenRect.height
+        ColumnLayout{
+            anchors.verticalCenter: parent.verticalCenter
+            Item{
+                Layout.preferredHeight: 15
+            }
+            Repeater{
+                model: FluApp.launcher.hotkeys.children
+                delegate: FluShortcutPicker{
+                    text: model.name
+                    syncHotkey: FluApp.launcher.hotkeys.children[index]
+                    Layout.leftMargin: 15
+                }
+            }
+            Item{
+                Layout.preferredHeight: 15
+            }
+        }
+    }
+
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluShortcutPicker{
+
+}'
+    }
+
+}

example/qml/page/T_Slider.qml

@@ -1,50 +1,59 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import "qrc:///example/qml/component"
-import FluentUI
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage{
 
-    title:"Slider"
+    title: qsTr("Slider")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 100
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 200
+        padding: 10
+
+        Row{
+            spacing: 30
             FluSlider{
+            }
+            FluSlider{
+                orientation: Qt.Vertical
                 anchors.verticalCenter: parent.verticalCenter
             }
         }
+    }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluSlider{
     value:50
 }'
     }
 
-    FluArea{
+
+    FluFrame{
         Layout.fillWidth: true
-        height: 200
-        paddings: 10
+        Layout.preferredHeight: 200
         Layout.topMargin: 20
-        FluSlider{
+        padding: 10
+        Row{
+            spacing: 30
+            FluRangeSlider{
+            }
+            FluRangeSlider{
                 orientation: Qt.Vertical
-            anchors.left: parent.left
                 anchors.verticalCenter: parent.verticalCenter
             }
         }
+    }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluSlider{
+        Layout.topMargin: -6
+        code:'FluRangeSlider{
     orientation: Qt.Vertical
-    value:50
 }'
     }
-
-
 }
+

example/qml/page/T_SplitLayout.qml

@@ -0,0 +1,83 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluContentPage{
+
+    title: qsTr("SplitLayout")
+
+    RowLayout{
+        id:layout_dropdown
+        anchors{
+            top: parent.top
+        }
+        FluText{
+            text: qsTr("orientation:")
+        }
+        FluDropDownButton{
+            id:btn_orientation
+            Layout.preferredWidth: 120
+            text: qsTr("Horizontal")
+            FluMenuItem{
+                text: qsTr("Horizontal")
+                onClicked: {
+                    btn_orientation.text = text
+                    split_layout.orientation = Qt.Horizontal
+                }
+            }
+            FluMenuItem{
+                text: qsTr("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: qsTr("Page 1")
+                anchors.centerIn: parent
+            }
+        }
+        Item {
+            clip: true
+            id: centerItem
+            SplitView.minimumWidth: 50
+            SplitView.minimumHeight: 50
+            SplitView.fillWidth: true
+            SplitView.fillHeight: true
+            FluText {
+                text: qsTr("Page 2")
+                anchors.centerIn: parent
+            }
+        }
+        Item {
+            clip: true
+            implicitWidth: 200
+            implicitHeight: 200
+            FluText {
+                text: qsTr("Page 3")
+                anchors.centerIn: parent
+            }
+        }
+    }
+}

example/qml/page/T_StaggeredLayout.qml

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

example/qml/page/T_StatusLayout.qml

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

example/qml/page/T_TabView.qml

@@ -1,26 +1,26 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+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: {
@@ -29,73 +29,78 @@ FluScrollablePage{
         newTab()
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 50
-        paddings: 10
+        Layout.preferredHeight: 50
+        padding: 10
         RowLayout{
             spacing: 14
+            FluCopyableText{
+                text: qsTr("Tab Width Behavior:")
+            }
             FluDropDownButton{
                 id:btn_tab_width_behavior
                 Layout.preferredWidth: 140
-                text:"Equal"
+                text:  qsTr("Equal")
                 FluMenuItem{
-                    text:"Equal"
+                    text: qsTr("Equal")
                     onClicked: {
                         btn_tab_width_behavior.text = text
-                        tab_view.tabWidthBehavior = FluTabView.Equal
+                        tab_view.tabWidthBehavior = FluTabViewType.Equal
                     }
                 }
                 FluMenuItem{
-                    text:"SizeToContent"
+                    text: qsTr("SizeToContent")
                     onClicked: {
                         btn_tab_width_behavior.text = text
-                        tab_view.tabWidthBehavior = FluTabView.SizeToContent
+                        tab_view.tabWidthBehavior = FluTabViewType.SizeToContent
                     }
                 }
                 FluMenuItem{
-                    text:"Compact"
+                    text: qsTr("Compact")
                     onClicked: {
                         btn_tab_width_behavior.text = text
-                        tab_view.tabWidthBehavior = FluTabView.Compact
+                        tab_view.tabWidthBehavior = FluTabViewType.Compact
                     }
                 }
             }
+            FluCopyableText{
+                text: qsTr("Tab Close Button Visibility:")
+            }
             FluDropDownButton{
                 id:btn_close_button_visibility
-                text:"Always"
+                text: qsTr("Always")
                 Layout.preferredWidth: 120
                 FluMenuItem{
-                    text:"Nerver"
+                    text: qsTr("Never")
                     onClicked: {
                         btn_close_button_visibility.text = text
-                        tab_view.closeButtonVisibility = FluTabView.Nerver
+                        tab_view.closeButtonVisibility = FluTabViewType.Never
                     }
                 }
                 FluMenuItem{
-                    text:"Always"
+                    text: qsTr("Always")
                     onClicked: {
                         btn_close_button_visibility.text = text
-                        tab_view.closeButtonVisibility = FluTabView.Always
+                        tab_view.closeButtonVisibility = FluTabViewType.Always
                     }
                 }
                 FluMenuItem{
-                    text:"OnHover"
+                    text: qsTr("OnHover")
                     onClicked: {
                         btn_close_button_visibility.text = text
-                        tab_view.closeButtonVisibility = FluTabView.OnHover
+                        tab_view.closeButtonVisibility = FluTabViewType.OnHover
                     }
                 }
             }
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 15
-        height: 400
-        paddings: 10
+        Layout.preferredHeight: 400
+        padding: 10
         FluTabView{
             id:tab_view
             onNewPressed:{
@@ -105,7 +110,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluTabView{
     anchors.fill: parent
     Component.onCompleted: {
@@ -126,5 +131,4 @@ FluScrollablePage{
 }
 '
     }
-
 }

example/qml/page/T_TableView.qml

@@ -1,45 +1,580 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
 
 FluContentPage{
 
-    title:"TableView"
+    id:root
+    title: qsTr("TableView")
+    signal checkBoxChanged
+
+    property int sortType: 0
+    property bool selectedAll: 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.selectedAll = false
+                return
+            }
+        }
+        root.selectedAll = true
+    }
+
+    onSortTypeChanged: {
+        table_view.closeEditor()
+        if(sortType === 0){
+            table_view.sort()
+        }else if(sortType === 1){
+            table_view.sort(
+                        (l, r) =>{
+                            var lage = Number(l.age)
+                            var rage = Number(r.age)
+                            if(lage === rage){
+                                return l._key>r._key
+                            }
+                            return lage>rage
+                        });
+        }else if(sortType === 2){
+            table_view.sort(
+                        (l, r) => {
+                            var lage = Number(l.age)
+                            var rage = Number(r.age)
+                            if(lage === rage){
+                                return l._key>r._key
+                            }
+                            return lage<rage
+                        });
+        }
+    }
+
+    FluContentDialog{
+        id:custom_update_dialog
+        property var text
+        property var onAccpetListener
+        title: qsTr("Modify the column name")
+        negativeText: qsTr("Cancel")
+        contentDelegate: Component{
+            Item{
+                implicitWidth: parent.width
+                implicitHeight: 60
+                FluTextBox{
+                    id:textbox_text
+                    anchors.centerIn: parent
+                    onTextChanged: {
+                        custom_update_dialog.text = textbox_text.text
+                    }
+                }
+                Component.onCompleted: {
+                    textbox_text.text = custom_update_dialog.text
+                    textbox_text.forceActiveFocus()
+                }
+            }
+        }
+        positiveText: qsTr("OK")
+        onPositiveClicked:{
+            if(custom_update_dialog.onAccpetListener){
+                custom_update_dialog.onAccpetListener(custom_update_dialog.text)
+            }
+        }
+        function showDialog(text,listener){
+            custom_update_dialog.text = text
+            custom_update_dialog.onAccpetListener = listener
+            custom_update_dialog.open()
+        }
+    }
+
+    FluMenu{
+        id:pop_filter
+        width: 200
+        height: 89
+
+        contentItem: Item{
+
+            onVisibleChanged: {
+                if(visible){
+                    name_filter_text.text = root.nameKeyword
+                    name_filter_text.cursorPosition = name_filter_text.text.length
+                    name_filter_text.forceActiveFocus()
+                }
+            }
+
+            FluTextBox{
+                id:name_filter_text
+                anchors{
+                    left: parent.left
+                    right: parent.right
+                    top: parent.top
+                    leftMargin: 10
+                    rightMargin: 10
+                    topMargin: 10
+                }
+                iconSource: FluentIcons.Search
+            }
+
+            FluButton{
+                text: qsTr("Search")
+                anchors{
+                    bottom: parent.bottom
+                    right: parent.right
+                    bottomMargin: 10
+                    rightMargin: 10
+                }
+                onClicked: {
+                    root.nameKeyword = name_filter_text.text
+                    pop_filter.close()
+                }
+            }
+
+        }
+
+        function showPopup(){
+            table_view.closeEditor()
+            pop_filter.popup()
+        }
+
+    }
+
+    Component{
+        id:com_checbox
+        Item{
+            FluCheckBox{
+                anchors.centerIn: parent
+                checked: true === options.checked
+                animationEnabled: false
+                clickListener: function(){
+                    var obj = table_view.getRow(row)
+                    obj.checkbox = table_view.customItem(com_checbox,{checked:!options.checked})
+                    table_view.setRow(row,obj)
+                    checkBoxChanged()
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_column_filter_name
+        Item{
+            FluText{
+                text: qsTr("Name")
+                anchors.centerIn: parent
+            }
+            FluIconButton{
+                width: 20
+                height: 20
+                iconSize: 12
+                verticalPadding:0
+                horizontalPadding:0
+                iconSource: FluentIcons.Filter
+                iconColor: {
+                    if("" !== root.nameKeyword){
+                        return FluTheme.primaryColor
+                    }
+                    return FluTheme.dark ?  Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
+                }
+                anchors{
+                    right: parent.right
+                    rightMargin: 3
+                    verticalCenter: parent.verticalCenter
+                }
+                onClicked: {
+                    pop_filter.showPopup()
+                }
+            }
+        }
+    }
+
     Component{
         id:com_action
         Item{
             RowLayout{
                 anchors.centerIn: parent
                 FluButton{
-                    text:"删除"
+                    text: qsTr("Delete")
                     onClicked: {
                         table_view.closeEditor()
-                        tableModel.removeRow(row)
+                        table_view.removeRow(row)
                     }
                 }
                 FluFilledButton{
-                    text:"编辑"
+                    text: qsTr("Edit")
                     onClicked: {
-                        showSuccess(JSON.stringify(tableModel.getRow(row)))
+                        var obj = table_view.getRow(row)
+                        obj.name = "12345"
+                        table_view.setRow(row,obj)
+                        showSuccess(JSON.stringify(obj))
                     }
                 }
             }
         }
     }
 
-    function loadData(page,count){
-        var numbers = [100, 300, 500, 1000];
+
+    Component{
+        id:com_column_checbox
+        Item{
+            RowLayout{
+                anchors.centerIn: parent
+                FluText{
+                    text: qsTr("Select All")
+                    Layout.alignment: Qt.AlignVCenter
+                }
+                FluCheckBox{
+                    checked: true === root.selectedAll
+                    animationEnabled: false
+                    Layout.alignment: Qt.AlignVCenter
+                    clickListener: function(){
+                        root.selectedAll = !root.selectedAll
+                        var checked = root.selectedAll
+                        var columnModel = model.display
+                        columnModel.title = table_view.customItem(com_column_checbox,{"checked":checked})
+                        model.display = columnModel
+                        for(var i =0;i< table_view.rows ;i++){
+                            var rowData = table_view.getRow(i)
+                            rowData.checkbox = table_view.customItem(com_checbox,{"checked":checked})
+                            table_view.setRow(i,rowData)
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_combobox
+        FluComboBox {
+            anchors.fill: parent
+            focus: true
+            editText: display
+            editable: true
+            model: ListModel {
+                ListElement { text: "100" }
+                ListElement { text: "300" }
+                ListElement { text: "500" }
+                ListElement { text: "1000" }
+            }
+            Component.onCompleted: {
+                currentIndex=["100","300","500","1000"].findIndex((element) => element === display)
+                textBox.forceActiveFocus()
+                textBox.selectAll()
+            }
+            onCommit: {
+                editTextChaged(editText)
+                tableView.closeEditor()
+            }
+        }
+    }
+
+    Component{
+        id:com_auto_suggestbox
+        FluAutoSuggestBox {
+            id: textbox
+            anchors.fill: parent
+            focus: true
+            Component.onCompleted: {
+                var data = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
+                var result = data.map(function(item) {
+                    return {title: item};
+                });
+                items = result
+                textbox.text= String(display)
+                forceActiveFocus()
+                selectAll()
+            }
+            onCommit: {
+                editTextChaged(textbox.text)
+                tableView.closeEditor()
+            }
+        }
+    }
+
+    Component{
+        id:com_avatar
+        Item{
+            FluClip{
+                anchors.centerIn: parent
+                width: 40
+                height: 40
+                radius: [20,20,20,20]
+                Image{
+                    anchors.fill: parent
+                    source: options && options.avatar ? options.avatar : ""
+                    sourceSize: Qt.size(80,80)
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_column_update_title
+        Item{
+            FluText{
+                id:text_title
+                text: {
+                    if(options.title){
+                        return options.title
+                    }
+                    return ""
+                }
+                anchors.fill: parent
+                verticalAlignment: Qt.AlignVCenter
+                horizontalAlignment: Qt.AlignHCenter
+                elide: Text.ElideRight
+            }
+            MouseArea{
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    custom_update_dialog.showDialog(options.title,function(text){
+                        var columnModel = model.display
+                        columnModel.title = table_view.customItem(com_column_update_title,{"title":text})
+                        model.display = columnModel
+                    })
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_column_sort_age
+        Item{
+            FluText{
+                text: qsTr("Age")
+                anchors.centerIn: parent
+            }
+            ColumnLayout{
+                spacing: 0
+                anchors{
+                    right: parent.right
+                    verticalCenter: parent.verticalCenter
+                    rightMargin: 4
+                }
+                FluIconButton{
+                    Layout.preferredWidth: 20
+                    Layout.preferredHeight: 15
+                    iconSize: 12
+                    verticalPadding:0
+                    horizontalPadding:0
+                    iconSource: FluentIcons.ChevronUp
+                    iconColor: {
+                        if(1 === root.sortType){
+                            return FluTheme.primaryColor
+                        }
+                        return FluTheme.dark ?  Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
+                    }
+                    onClicked: {
+                        if(root.sortType === 1){
+                            root.sortType = 0
+                            return
+                        }
+                        root.sortType = 1
+                    }
+                }
+                FluIconButton{
+                    Layout.preferredWidth: 20
+                    Layout.preferredHeight: 15
+                    iconSize: 12
+                    verticalPadding:0
+                    horizontalPadding:0
+                    iconSource: FluentIcons.ChevronDown
+                    iconColor: {
+                        if(2 === root.sortType){
+                            return FluTheme.primaryColor
+                        }
+                        return FluTheme.dark ?  Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
+                    }
+                    onClicked: {
+                        if(root.sortType === 2){
+                            root.sortType = 0
+                            return
+                        }
+                        root.sortType = 2
+                    }
+                }
+            }
+        }
+    }
+
+    FluFrame{
+        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())
+                }
+            }
+            FluButton{
+                text: qsTr("Insert a Row")
+                onClicked: {
+                    var index = table_view.currentIndex()
+                    if(index !== -1){
+                        var testObj = genTestObject()
+                        table_view.insertRow(index,testObj)
+                    }else{
+                        showWarning(qsTr("Focus not acquired: Please click any item in the form as the target for insertion!"))
+                    }
+                }
+            }
+        }
+    }
+
+    FluTableView{
+        id:table_view
+        anchors{
+            left: parent.left
+            right: parent.right
+            top: layout_controls.bottom
+            bottom: gagination.top
+        }
+        anchors.topMargin: 5
+        onRowsChanged: {
+            root.checkBoxChanged()
+        }
+        columnSource:[
+            {
+                title: table_view.customItem(com_column_checbox,{checked:true}),
+                dataIndex: 'checkbox',
+                frozen: true
+            },
+            {
+                title: table_view.customItem(com_column_filter_name,{title:qsTr("Name")}),
+                dataIndex: 'name',
+                readOnly:true
+            },
+            {
+                title: table_view.customItem(com_column_update_title,{title:qsTr("Avatar")}),
+                dataIndex: 'avatar',
+                width:100,
+                frozen:true
+            },
+            {
+                title: table_view.customItem(com_column_sort_age,{sort:0}),
+                dataIndex: 'age',
+                editDelegate:com_combobox,
+                width:100,
+                minimumWidth:100,
+                maximumWidth:100
+            },
+            {
+                title: qsTr("Address"),
+                dataIndex: 'address',
+                editDelegate: com_auto_suggestbox,
+                width:200,
+                minimumWidth:100,
+                maximumWidth:250
+            },
+            {
+                title: qsTr("Nickname"),
+                dataIndex: 'nickname',
+                width:100,
+                minimumWidth:80,
+                maximumWidth:200
+            },
+            {
+                title: qsTr("Long String"),
+                dataIndex: 'longstring',
+                width:200,
+                minimumWidth:100,
+                maximumWidth:300,
+                editMultiline: true
+            },
+            {
+                title: qsTr("Options"),
+                dataIndex: 'action',
+                width:160,
+                frozen:true
+            }
+        ]
+    }
+
+    FluPagination{
+        id:gagination
+        anchors{
+            bottom: parent.bottom
+            left: parent.left
+        }
+        pageCurrent: 1
+        itemCount: 100000
+        pageButtonCount: 7
+        __itemPerPage: 1000
+        previousText: qsTr("<Previous")
+        nextText: qsTr("Next>")
+        onRequestPage:
+            (page,count)=> {
+                table_view.closeEditor()
+                loadData(page,count)
+                table_view.resetPosition()
+            }
+    }
+
+    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(){
@@ -56,122 +591,30 @@ FluContentPage{
             var randomIndex = Math.floor(Math.random() * addresses.length);
             return addresses[randomIndex];
         }
-        const dataSource = []
-        for(var i=0;i<count;i++){
-            dataSource.push({
+        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.selectedAll}),
+            avatar:table_view.customItem(com_avatar,{avatar:getAvatar()}),
             name: getRandomName(),
             age:getRandomAge(),
             address: getRandomAddresses(),
             nickname: getRandomNickname(),
             longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
-                                height:42,
-                                minimumHeight:42,
-                                maximumHeight:300,
-                                action:com_action
-                            })
+            action: table_view.customItem(com_action),
+            _minimumHeight:50,
+            _key:FluTools.uuid()
+        }
+    }
+    function loadData(page,count){
+        root.selectedAll = true
+        const dataSource = []
+        for(var i=0;i<count;i++){
+            dataSource.push(genTestObject())
         }
         table_view.dataSource = dataSource
     }
-
-    Component{
-        id:com_combobox
-        FluComboBox {
-            anchors.fill: parent
-            focus: true
-            currentIndex: display
-            editable: true
-            model: ListModel {
-                ListElement { text: 100 }
-                ListElement { text: 300 }
-                ListElement { text: 500 }
-                ListElement { text: 1000 }
-            }
-            Component.onCompleted: {
-                currentIndex=[100,300,500,1000].findIndex((element) => element === Number(display))
-                selectAll()
-            }
-            onCommit: {
-                display = editText
-                tableView.closeEditor()
-            }
-        }
-    }
-
-    FluTableView{
-        id:table_view
-        anchors{
-            left: parent.left
-            right: parent.right
-            top: parent.top
-            bottom: gagination.top
-        }
-        anchors.topMargin: 20
-        columnSource:[
-            {
-                title: '姓名',
-                dataIndex: 'name',
-                width:100,
-                minimumWidth:80,
-                maximumWidth:200,
-                readOnly:true
-            },
-            {
-                title: '年龄',
-                dataIndex: 'age',
-                editDelegate:com_combobox,
-                width:100,
-                minimumWidth:100,
-                maximumWidth:100
-            },
-            {
-                title: '住址',
-                dataIndex: 'address',
-                width:200,
-                minimumWidth:100,
-                maximumWidth:250
-            },
-            {
-                title: '别名',
-                dataIndex: 'nickname',
-                width:100,
-                minimumWidth:80,
-                maximumWidth:200
-            },
-            {
-                title: '长字符串',
-                dataIndex: 'longstring',
-                width:200,
-                minimumWidth:100,
-                maximumWidth:300
-            },
-            {
-                title: '操作',
-                dataIndex: 'action',
-                width:160,
-                minimumWidth:160,
-                maximumWidth:160
-            }
-        ]
-    }
-
-    FluPagination{
-        id:gagination
-        anchors{
-            bottom: parent.bottom
-            left: parent.left
-        }
-        pageCurrent: 1
-        itemCount: 100000
-        pageButtonCount: 7
-        __itemPerPage: 1000
-        onRequestPage:
-            (page,count)=> {
-                table_view.closeEditor()
-                loadData(page,count)
-                table_view.resetPosition()
-            }
-    }
-
-
-
 }

example/qml/page/T_Text.qml

@@ -1,31 +1,39 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage{
 
-    title:"Text"
+    title: qsTr("Text")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 60
-        paddings: 10
+        Layout.preferredHeight: 60
+        padding: 10
 
         FluCopyableText{
-            text: "这是一个可以支持复制的Text"
+            enabled: !toggle_switch.checked
+            text: qsTr("This is a text that can be copied")
             anchors.verticalCenter: parent.verticalCenter
         }
 
+        FluToggleSwitch{
+            id: toggle_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluCopyableText{
-    text:"这是一个可以支持复制的Text"
+    text: qsTr("This is a text that can be copied")
 }'
     }
 

example/qml/page/T_TextBox.qml

@@ -1,202 +1,165 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage{
 
-    launchMode: FluPage.SingleInstance
+    title: qsTr("TextBox")
 
-    title:"TextBox"
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 68
+        padding: 10
 
         FluTextBox{
-            Layout.topMargin: 20
-            placeholderText: "单行输入框"
-            Layout.preferredWidth: 300
-            disabled:text_box_switch.checked
+            placeholderText: qsTr("Single-line Input Box")
+            disabled: text_box_switch.checked
+            cleanEnabled: true
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
         }
 
-        Row{
-            spacing: 5
+        FluToggleSwitch{
+            id: text_box_switch
             anchors{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            FluToggleSwitch{
-                id:text_box_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluTextBox{
-    placeholderText:"单行输入框"
+    placeholderText: qsTr("Single-line Input Box")
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
-        paddings: 10
+        Layout.preferredHeight: 68
+        padding: 10
         Layout.topMargin: 20
 
         FluPasswordBox{
-            Layout.topMargin: 20
-            placeholderText: "请输入密码"
-            Layout.preferredWidth: 300
+            placeholderText: qsTr("Please enter your password")
             disabled:password_box_switch.checked
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
         }
-
-        Row{
-            spacing: 5
+        FluToggleSwitch{
+            id:password_box_switch
             anchors{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            FluToggleSwitch{
-                id:password_box_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluPasswordBox{
-    placeholderText:"请输入密码"
+    placeholderText: qsTr("Please enter your password")
 }'
     }
 
-
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 36+multiine_textbox.height
-        paddings: 10
+        Layout.preferredHeight: 36+multiine_textbox.height
+        padding: 10
         Layout.topMargin: 20
 
         FluMultilineTextBox{
-            id:multiine_textbox
-            Layout.topMargin: 20
-            placeholderText: "多行输入框"
-            Layout.preferredWidth: 300
-            disabled:text_box_multi_switch.checked
+            id: multiine_textbox
+            placeholderText: qsTr("Multi-line Input Box")
+            disabled: text_box_multi_switch.checked
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
         }
 
-        Row{
-            spacing: 5
+        FluToggleSwitch{
+            id:text_box_multi_switch
             anchors{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            FluToggleSwitch{
-                id:text_box_multi_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluMultilineTextBox{
-    placeholderText:"多行输入框"
+    placeholderText: qsTr("Multi-line Input Box")
 }'
     }
 
-
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
-        paddings: 10
+        Layout.preferredHeight: 68
+        padding: 10
         Layout.topMargin: 20
-
         FluAutoSuggestBox{
-            Layout.topMargin: 20
-            placeholderText: "AutoSuggestBox"
-            Layout.preferredWidth: 300
-            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
             }
         }
-
-        Row{
-            spacing: 5
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
         FluToggleSwitch{
             id:text_box_suggest_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
             }
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluAutoSuggestBox{
-    placeholderText:"AutoSuggestBox"
+    placeholderText: qsTr("AutoSuggestBox")
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
-        paddings: 10
+        Layout.preferredHeight: 68
+        padding: 10
         Layout.topMargin: 20
-
         FluSpinBox{
-            Layout.topMargin: 20
             disabled: spin_box_switch.checked
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
         }
-
-        Row{
-            spacing: 5
+        FluToggleSwitch{
+            id: spin_box_switch
             anchors{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            FluToggleSwitch{
-                id:spin_box_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
+            text: qsTr("Disabled")
         }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluSpinBox{
 
 }'

example/qml/page/T_Theme.qml

@@ -1,38 +1,45 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage{
 
-    title:"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{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 270
-        paddings: 10
+        Layout.fillHeight: true
+        padding: 10
+
         ColumnLayout{
             spacing:0
             anchors{
                 left: parent.left
             }
-            RowLayout{
+            FluText{
+                text: qsTr("Theme colors")
                 Layout.topMargin: 10
+            }
+            RowLayout{
+                Layout.topMargin: 5
                 Repeater{
-                    model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
-                    delegate:  FluRectangle{
+                    model: root.colorData
+                    delegate:  Rectangle{
                         width: 42
                         height: 42
-                        radius: [4,4,4,4]
+                        radius: 4
                         color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
+                        border.color: modelData.darker
                         FluIcon {
                             anchors.centerIn: parent
                             iconSource: FluentIcons.AcceptMedium
                             iconSize: 15
-                            visible: modelData === FluTheme.primaryColor
+                            visible: modelData === FluTheme.accentColor
                             color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
                         }
                         MouseArea{
@@ -40,14 +47,43 @@ FluScrollablePage{
                             anchors.fill: parent
                             hoverEnabled: true
                             onClicked: {
-                                FluTheme.primaryColor = modelData
+                                FluTheme.accentColor = modelData
                             }
                         }
                     }
                 }
             }
+            Row{
+                Layout.topMargin: 10
+                spacing: 10
+                FluText{
+                    text: qsTr("Customize the Theme Color")
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+                FluColorPicker{
+                    id:color_picker
+                    current: FluTheme.accentColor.normal
+                    onAccepted: {
+                       FluTheme.accentColor = FluColors.createAccentColor(current)
+                    }
+                    FluIcon {
+                        anchors.centerIn: parent
+                        iconSource: FluentIcons.AcceptMedium
+                        iconSize: 15
+                        visible: {
+                            for(var i =0 ;i< root.colorData.length; i++){
+                                if(root.colorData[i] === FluTheme.accentColor){
+                                    return false
+                                }
+                            }
+                            return true
+                        }
+                        color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+                    }
+                }
+            }
             FluText{
-                text:"夜间模式"
+                text: qsTr("Dark Mode")
                 Layout.topMargin: 20
             }
             FluToggleSwitch{
@@ -55,14 +91,14 @@ FluScrollablePage{
                 checked: FluTheme.dark
                 onClicked: {
                     if(FluTheme.dark){
-                        FluTheme.darkMode = FluDarkMode.Light
+                        FluTheme.darkMode = FluThemeType.Light
                     }else{
-                        FluTheme.darkMode = FluDarkMode.Dark
+                        FluTheme.darkMode = FluThemeType.Dark
                     }
                 }
             }
             FluText{
-                text:"native文本渲染"
+                text: qsTr("Native Text")
                 Layout.topMargin: 20
             }
             FluToggleSwitch{
@@ -73,22 +109,90 @@ FluScrollablePage{
                 }
             }
             FluText{
-                text:"开启动画效果"
+                text: qsTr("Open Animation")
                 Layout.topMargin: 20
             }
             FluToggleSwitch{
                 Layout.topMargin: 5
-                checked: FluTheme.enableAnimation
+                checked: FluTheme.animationEnabled
                 onClicked: {
-                    FluTheme.enableAnimation = !FluTheme.enableAnimation
+                    FluTheme.animationEnabled = !FluTheme.animationEnabled
+                }
+            }
+            FluText{
+                text: qsTr("Open Blur Window")
+                Layout.topMargin: 20
+            }
+            FluToggleSwitch{
+                id: toggle_blur
+                Layout.topMargin: 5
+                checked: FluTheme.blurBehindWindowEnabled
+                onClicked: {
+                    FluTheme.blurBehindWindowEnabled = !FluTheme.blurBehindWindowEnabled
+                }
+            }
+            FluText{
+                text: qsTr("window effect")
+                Layout.topMargin: 20
+            }
+            Row{
+                spacing: 10
+                Repeater{
+                    model: window.availableEffects
+                    delegate: FluRadioButton{
+                        checked: window.effect === modelData
+                        text: qsTr(`${modelData}`)
+                        clickListener:function(){
+                            window.effect = modelData
+                            if(window.effective){
+                                FluTheme.blurBehindWindowEnabled = false
+                                toggle_blur.checked = Qt.binding( function() {return FluTheme.blurBehindWindowEnabled})
+                            }
+                        }
+                    }
+
+                }
+            }
+            FluText{
+                visible: FluTheme.blurBehindWindowEnabled || window.effect === qsTr("dwm-blur")
+                text: qsTr("window tintOpacity")
+                Layout.topMargin: 20
+            }
+            FluSlider{
+                visible: FluTheme.blurBehindWindowEnabled || window.effect === qsTr("dwm-blur")
+                Layout.topMargin: 5
+                to:1
+                stepSize:0.1
+                onValueChanged: {
+                    window.tintOpacity = value
+                }
+                Component.onCompleted: {
+                    value = window.tintOpacity
+                }
+            }
+            FluText{
+                visible: FluTheme.blurBehindWindowEnabled
+                text: qsTr("window blurRadius")
+                Layout.topMargin: 20
+            }
+            FluSlider{
+                visible: FluTheme.blurBehindWindowEnabled
+                Layout.topMargin: 5
+                to:100
+                stepSize:1
+                onValueChanged: {
+                    window.blurRadius = value
+                }
+                Component.onCompleted: {
+                    value = window.blurRadius
                 }
             }
         }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluTheme.primaryColor = FluColors.Orange
+        Layout.topMargin: -6
+        code:'FluTheme.accentColor = FluColors.Orange
 
 FluTheme.dark = true
 

example/qml/page/T_TimePicker.qml

@@ -1,19 +1,18 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage{
 
-    title:"TimePicker"
-    launchMode: FluPage.SingleInstance
-    FluArea{
+    title: qsTr("TimePicker")
+    launchMode: FluPageType.SingleInstance
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
+        Layout.preferredHeight: 80
+        padding: 10
 
         ColumnLayout{
 
@@ -23,11 +22,18 @@ FluScrollablePage{
             }
 
             FluText{
-                text:"hourFormat=FluTimePicker.H"
+                text: qsTr("hourFormat=FluTimePickerType.H")
             }
 
             FluTimePicker{
-                onCurrentChanged: {
+                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")))
                 }
             }
@@ -36,17 +42,17 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluTimePicker{
 
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 80
-        paddings: 10
+        Layout.preferredHeight: 80
+        padding: 10
 
         ColumnLayout{
 
@@ -56,12 +62,18 @@ FluScrollablePage{
             }
 
             FluText{
-                text:"hourFormat=FluTimePicker.HH"
+                text: qsTr("hourFormat=FluTimePickerType.HH")
             }
 
             FluTimePicker{
-                hourFormat:FluTimePicker.HH
-                onCurrentChanged: {
+                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")))
                 }
             }
@@ -70,9 +82,9 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluTimePicker{
-    hourFormat:FluTimePicker.HH
+    hourFormat:FluTimePickerType.HH
 }'
     }
 

example/qml/page/T_Timeline.qml

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

example/qml/page/T_ToggleSwitch.qml

@@ -1,19 +1,18 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage{
 
-    title:"ToggleSwitch"
+    title: qsTr("ToggleSwitch")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 68
+        padding: 10
         Row{
             spacing: 30
             anchors.verticalCenter: parent.verticalCenter
@@ -22,26 +21,26 @@ 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{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluToggleSwitch{
     text:"Text"
 }'

example/qml/page/T_Tooltip.qml

@@ -1,24 +1,23 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+import "../component"
 
 FluScrollablePage{
 
-    title:"Tooltip"
+    title: qsTr("Tooltip")
 
     FluText{
-        Layout.topMargin: 20
-        text:"鼠标悬停不动，弹出Tooltip"
+        text: qsTr("Hover over Tultip and it pops up")
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 68
-        paddings: 10
+        Layout.preferredHeight: 68
+        padding: 10
 
         Column{
             spacing: 5
@@ -27,37 +26,37 @@ 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"))
                 }
             }
         }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluIconButton{
     iconSource:FluentIcons.ChromeCloseContrast
     iconSize: 15
-    text:"删除"
+    text: qsTr("Delete")
     onClicked:{
-        showSuccess("点击IconButton")
+        showSuccess(qsTr("Click IconButton"))
     }
 }
 '
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 68
-        paddings: 10
+        Layout.preferredHeight: 68
+        padding: 10
 
         Column{
             spacing: 5
@@ -66,13 +65,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
@@ -84,17 +83,17 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         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/page/T_Tour.qml

@@ -0,0 +1,79 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
+
+FluScrollablePage{
+
+    title: qsTr("Tour")
+
+    FluTour{
+        id:tour
+        steps:[
+            {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}
+        ]
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 130
+        padding: 10
+
+        FluFilledButton{
+            anchors{
+                top: parent.top
+                topMargin: 14
+            }
+            text: qsTr("Begin Tour")
+            onClicked: {
+                tour.open()
+            }
+        }
+
+        Row{
+            spacing: 20
+            anchors{
+                top: parent.top
+                topMargin: 60
+            }
+            FluButton{
+                id: btn_upload
+                text: qsTr("Upload")
+                onClicked: {
+                    showInfo(qsTr("Upload"))
+                }
+            }
+            FluFilledButton{
+                id: btn_save
+                text: qsTr("Save")
+                onClicked: {
+                    showInfo(qsTr("Save"))
+                }
+            }
+            FluIconButton{
+                id: btn_more
+                iconSource: FluentIcons.More
+                onClicked: {
+                    showInfo(qsTr("More"))
+                }
+            }
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluTour{
+    id:tour
+    steps:[
+        {title:"Upload File",description: "Put your files here.",target:()=>btn_upload},
+        {title:"Save",description: "Save your changes.",target:()=>btn_save},
+        {title:"Other Actions",description: "Click to see other actions.",target:()=>btn_more}
+    ]
+}'
+    }
+
+}

example/qml/page/T_TreeView.qml

@@ -1,156 +1,204 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "qrc:///example/qml/component"
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+import "../component"
 
-FluScrollablePage {
+FluContentPage {
 
-    title:"TreeView"
+    title: qsTr("TreeView")
 
-    function randomName() {
-        var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]
-        return names[Math.floor(Math.random() * names.length)]
+    function treeData(){
+        const names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"]
+        function getRandomName(){
+            var randomIndex = Math.floor(Math.random() * names.length)
+            return names[randomIndex]
+        }
+        const addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
+        function getRandomAddresses(){
+            var randomIndex = Math.floor(Math.random() * addresses.length)
+            return addresses[randomIndex]
+        }
+        const 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 getRandomAvatar(){
+            var randomIndex = Math.floor(Math.random() * avatars.length);
+            return avatars[randomIndex];
+        }
+        const dig = (path = '0', level = 5) => {
+            const list = [];
+            for (let i = 0; i < 4; i += 1) {
+                const key = `${path}-${i}`;
+                const treeNode = {
+                    title: key,
+                    _key: key,
+                    name: getRandomName(),
+                    avatar:tree_view.customItem(com_avatar,{avatar:getRandomAvatar()}),
+                    address: getRandomAddresses()
+                };
+                if (level > 0) {
+                    treeNode.children = dig(key, level - 1);
+                }
+                list.push(treeNode);
+            }
+            return list;
+        };
+        return dig();
     }
 
-    function randomCompany() {
-        var companies = ["阿里巴巴", "腾讯", "百度", "京东", "华为", "小米", "字节跳动", "美团", "滴滴"]
-        return companies[Math.floor(Math.random() * companies.length)]
+    Component{
+        id:com_avatar
+        Item{
+            FluClip{
+                anchors.centerIn: parent
+                width: height
+                height: parent.height/3*2
+                radius: [height/2,height/2,height/2,height/2]
+                Image{
+                    anchors.fill: parent
+                    source: {
+                        if(options && options.avatar){
+                            return options.avatar
                         }
-
-    function randomDepartment() {
-        var departments = ["技术部", "销售部", "市场部", "人事部", "财务部", "客服部", "产品部", "设计部", "运营部"]
-        return departments[Math.floor(Math.random() * departments.length)]
+                        return ""
                     }
-
-    function createEmployee() {
-        var name = randomName()
-        return tree_view.createItem(name, false)
+                    sourceSize: Qt.size(80,80)
                 }
-
-    function createSubtree(numEmployees) {
-        var employees = []
-        for (var i = 0; i < numEmployees; i++) {
-            employees.push(createEmployee())
             }
-        return tree_view.createItem(randomDepartment(), true, employees)
         }
-
-    function createOrg(numLevels, numSubtrees, numEmployees) {
-        if (numLevels === 0) {
-            return []
     }
-        var subtrees = []
-        for (var i = 0; i < numSubtrees; i++) {
-            subtrees.push(createSubtree(numEmployees))
+    FluFrame{
+        id:layout_controls
+        anchors{
+            left: parent.left
+            right: parent.right
+            top: parent.top
+            topMargin: 10
         }
-        return [tree_view.createItem(randomCompany(), true, subtrees)].concat(createOrg(numLevels - 1, numSubtrees, numEmployees))
+        height: 80
+        clip: true
+        Row{
+            spacing: 12
+            anchors{
+                left: parent.left
+                leftMargin: 10
+                verticalCenter: parent.verticalCenter
             }
-
-    FluArea{
-        id:layout_actions
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 50
-        paddings: 10
+            Column{
+                anchors.verticalCenter: parent.verticalCenter
                 RowLayout{
-            spacing: 14
-            FluDropDownButton{
-                id:btn_selection_model
-                Layout.preferredWidth: 140
-                text:"None"
-                FluMenuItem{
-                    text:"None"
+                    spacing: 10
+                    FluText{
+                        text: qsTr("cellHeight:")
+                        Layout.alignment: Qt.AlignVCenter
+                    }
+                    FluSlider{
+                        id: slider_cell_height
+                        value: 38
+                        from: 38
+                        to:100
+                    }
+                }
+                RowLayout{
+                    spacing: 10
+                    FluText{
+                        text: qsTr("depthPadding:")
+                        Layout.alignment: Qt.AlignVCenter
+                    }
+                    FluSlider{
+                        id: slider_depth_padding
+                        value: 15
+                        from: 15
+                        to:100
+                    }
+                }
+            }
+            Column{
+                spacing: 8
+                anchors.verticalCenter: parent.verticalCenter
+                FluToggleSwitch{
+                    id: switch_showline
+                    text: qsTr("showLine")
+                    checked: false
+                }
+                FluToggleSwitch{
+                    id: switch_checkable
+                    text: qsTr("checkable")
+                    checked: false
+                }
+            }
+            Column{
+                spacing: 8
+                anchors.verticalCenter: parent.verticalCenter
+                FluButton{
+                    text: qsTr("all expand")
                     onClicked: {
-                        btn_selection_model.text = text
-                        tree_view.selectionMode = FluTabView.Equal
+                        tree_view.allExpand()
                     }
                 }
-                FluMenuItem{
-                    text:"Single"
+                FluButton{
+                    text: qsTr("all collapse")
                     onClicked: {
-                        btn_selection_model.text = text
-                        tree_view.selectionMode = FluTabView.SizeToContent
+                        tree_view.allCollapse()
                     }
                 }
-                FluMenuItem{
-                    text:"Muiltple"
+            }
+            FluButton{
+                text: qsTr("print selection model")
                 onClicked: {
-                        btn_selection_model.text = text
-                        tree_view.selectionMode = FluTabView.Compact
+                    var printData = []
+                    var data = tree_view.selectionModel();
+                    console.debug(data.length)
+                    for(var i = 0; i <= data.length-1 ; i++){
+                        const newObj = Object.assign({}, data[i].data);
+                        delete newObj["__parent"];
+                        delete newObj["children"];
+                        printData.push(newObj)
                     }
-                }
-            }
-            FluFilledButton{
-                text:"获取选中的数据"
-                onClicked: {
-                    if(tree_view.selectionMode === FluTreeView.None){
-                        showError("当前非选择模式,没有选中的数据")
-                    }
-                    if(tree_view.selectionMode === FluTreeView.Single){
-                        if(!tree_view.signleData()){
-                            showError("没有选中数据")
-                            return
-                        }
-                        showSuccess(tree_view.signleData().text)
-                    }
-                    if(tree_view.selectionMode === FluTreeView.Multiple){
-                        if(tree_view.multipData().length===0){
-                            showError("没有选中数据")
-                            return
-                        }
-                        var info = []
-                        tree_view.multipData().map((value)=>info.push(value.text))
-                        showSuccess(info.join(","))
+                    console.debug(JSON.stringify(printData))
                 }
             }
         }
     }
-    }
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 10
-        paddings: 10
-        height: 400
+
     FluTreeView{
         id:tree_view
-            width:240
         anchors{
-                top:parent.top
-                left:parent.left
-                bottom:parent.bottom
+            left: parent.left
+            top: layout_controls.bottom
+            topMargin: 10
+            bottom: parent.bottom
+            right: parent.right
         }
-            onItemClicked:
-                (model)=>{
-                    showSuccess(model.text)
+        cellHeight: slider_cell_height.value
+        showLine: switch_showline.checked
+        checkable:switch_checkable.checked
+        depthPadding: slider_depth_padding.value
+        onCurrentChanged: {
+            showInfo(current.data.title)
         }
-
+        columnSource:[
+            {
+                title: qsTr("Title"),
+                dataIndex: 'title',
+                width: 300
+            },{
+                title: qsTr("Name"),
+                dataIndex: 'name',
+                width: 100
+            },{
+                title: qsTr("Avatar"),
+                dataIndex: 'avatar',
+                width: 100
+            },{
+                title: qsTr("Address"),
+                dataIndex: 'address',
+                width: 200
+            },
+        ]
         Component.onCompleted: {
-                var org = createOrg(3, 3, 3)
-                createItem()
-                updateData(org)
+            var data = treeData()
+            dataSource = data
         }
     }
-    }
-
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluTreeView{
-    id:tree_view
-    width:240
-    height:600
-    Component.onCompleted: {
-        var datas = []
-        datas.push(createItem("Node1",false))
-        datas.push(createItem("Node2",false))
-        datas.push(createItem("Node2",true,[createItem("Node2-1",false),createItem("Node2-2",false)]))
-        updateData(datas)
-    }
-}
-'
-    }
-
-
 }

example/qml/page/T_Typography.qml

@@ -1,67 +1,66 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Controls
-import FluentUI
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
 
 FluContentPage {
 
     property real textScale: 1
 
-    title: "Typography"
+    title: qsTr("Typography")
     rightPadding: 10
 
-    FluArea{
+    FluFrame{
         anchors{
             top:parent.top
             left: parent.left
             right: parent.right
             bottom: parent.bottom
-            topMargin: 20
         }
-        paddings: 10
+        padding: 10
         ColumnLayout{
             spacing: 0
             scale: textScale
             transformOrigin: Item.TopLeft
             FluText{
                 id:text_Display
-                text:"Display"
+                text: qsTr("Display")
                 padding: 0
                 font: FluTextStyle.Display
             }
             FluText{
                 id:text_TitleLarge
-                text:"Title Large"
+                text: qsTr("Title Large")
                 padding: 0
                 font: FluTextStyle.TitleLarge
             }
             FluText{
                 id:text_Title
-                text:"Title"
+                text: qsTr("Title")
                 padding: 0
                 font: FluTextStyle.Title
             }
             FluText{
                 id:text_Subtitle
-                text:"Subtitle"
+                text:  qsTr("Subtitle")
                 padding: 0
                 font: FluTextStyle.Subtitle
             }
             FluText{
                 id:text_BodyStrong
-                text:"Body Strong"
+                text: qsTr("Body Strong")
                 padding: 0
                 font: FluTextStyle.BodyStrong
             }
             FluText{
                 id:text_Body
-                text:"Body"
+                text: qsTr("Body")
                 padding: 0
                 font: FluTextStyle.Body
             }
             FluText{
                 id:text_Caption
-                text:"Caption"
+                text: qsTr("Caption")
                 padding: 0
                 font: FluTextStyle.Caption
             }

example/qml/page/T_Watermark.qml

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

example/qml/window/AboutWindow.qml

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

example/qml/window/CrashWindow.qml

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