update

补交漏掉的FluEditableText.qml

.cmake/GetGitRevisionDescription.cmake

@@ -0,0 +1,308 @@
+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)
+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,43 @@
+#
+# Internal file for GetGitRevisionDescription.cmake
+#
+# Requires CMake 2.6 or newer (uses the 'function' command)
+#
+# Original Author:
+# 2009-2010 Ryan Pavlik <rpavlik@iastate.edu> <abiryan@ryand.net>
+# http://academic.cleardefinition.com
+# Iowa State University HCI Graduate Program/VRAC
+#
+# Copyright 2009-2012, Iowa State University
+# Copyright 2011-2015, Contributors
+# Distributed under the Boost Software License, Version 1.0.
+# (See accompanying file LICENSE_1_0.txt or copy at
+# http://www.boost.org/LICENSE_1_0.txt)
+# SPDX-License-Identifier: BSL-1.0
+
+set(HEAD_HASH)
+
+file(READ "@HEAD_FILE@" HEAD_CONTENTS LIMIT 1024)
+
+string(STRIP "${HEAD_CONTENTS}" HEAD_CONTENTS)
+if(HEAD_CONTENTS MATCHES "ref")
+	# named branch
+	string(REPLACE "ref: " "" HEAD_REF "${HEAD_CONTENTS}")
+	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()
+	# detached HEAD
+	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/Version.h.in

@@ -0,0 +1,12 @@
+// 应用程序版本信息
+// 请勿修改此头文件，因为这个文件是自动生成的
+#ifndef VERSION_H
+#define VERSION_H
+
+#include <QtGlobal>
+
+#define APPLICATION_VERSION "${GIT_SEMVER}.${GIT_COMMIT_COUNT}"
+#define VERSION_COUNTER ${GIT_COMMIT_COUNT}
+#define COMMIT_HASH "${GIT_DESCRIBE}"
+
+#endif  // VERSION_H

.cmake/version_dll.rc.in

@@ -0,0 +1,32 @@
+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}.dll"
+            VALUE "LegalCopyright", "Copyright (C) 2023 ZhuZiChu. All rights reserved."
+            VALUE "OriginalFilename", "${PROJECT_NAME}.dll"
+            VALUE "ProductName", "${PROJECT_NAME}"
+            VALUE "ProductVersion", "${GIT_SEMVER}.0"
+        END
+    END
+    BLOCK "VarFileInfo"
+    BEGIN
+        VALUE "Translation", 0x804, 1200
+    END
+END

.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

@@ -22,7 +22,7 @@ jobs:
     strategy:
       matrix:
         os: [macos-12]
-        qt_ver: [6.4.3]
+        qt_ver: [6.5.0]
         qt_arch: [clang_64]
     env:
       targetName: example
@@ -50,7 +50,7 @@ jobs:
           cmake --version
           mkdir build
           cd build
-          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/Users/runner/work/FluentUI/Qt/6.4.3/macos -DCMAKE_C_COMPILER=clang -DCMAKE_CXX_COMPILER=clang++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/Users/runner/work/FluentUI/Qt/6.5.0/macos -DCMAKE_C_COMPILER=clang -DCMAKE_CXX_COMPILER=clang++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
           cmake --build . --target all --config Release --parallel
           
       - name: package

.github/workflows/ubuntu.yml

@@ -23,7 +23,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-20.04]
-        qt_ver: [6.4.3]
+        qt_ver: [6.5.0]
         qt_arch: [gcc_64]
     env:
       targetName: example
@@ -47,7 +47,7 @@ jobs:
           version: 1.10.2
           
       - name: ubuntu install GL library
-        run: sudo apt-get install -y 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
+        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: build ubuntu
         run: |
@@ -55,7 +55,7 @@ jobs:
           cmake --version
           mkdir build
           cd build
-          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/home/runner/work/FluentUI/Qt/6.4.3/gcc_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=/home/runner/work/FluentUI/Qt/6.5.0/gcc_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
           cmake --build . --target all --config Release --parallel
           
       - name: install QT linux deploy

.github/workflows/windows-mingw.yml

@@ -23,7 +23,7 @@ jobs:
       matrix:
         include:
           - qt_arch: win64_mingw
-            qt_ver: 6.4.3
+            qt_ver: 6.5.0
             qt_tools: "tools_mingw,9.0.0-1-202203221220,qt.tools.win64_mingw900"
             qt_tools_mingw_install: mingw900_64
     env:
@@ -62,7 +62,7 @@ jobs:
         run: |
           mkdir build
           cd build
-          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\6.4.3\mingw_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\6.5.0\mingw_64 -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ -DCMAKE_BUILD_TYPE=Release -GNinja ..
           cmake --build . --target all --config Release --parallel
       
       - name: package

.github/workflows/windows.yml

@@ -23,7 +23,7 @@ jobs:
       matrix:
         os: [windows-2019]
         include:
-          - qt_ver: 6.4.3          
+          - qt_ver: 6.5.0        
             qt_arch: win64_msvc2019_64
             msvc_arch: x64
             qt_arch_install: msvc2019_64          
@@ -42,7 +42,7 @@ jobs:
           version: ${{ matrix.qt_ver }}
           arch: ${{ matrix.qt_arch }}
           cache: ${{steps.cache-qt.outputs.cache-hit}}
-          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
+          modules: 'qt5compat qtmultimedia qtshadertools qtimageformats qtspeech'
           
       - name: msvc-build
         id: build
@@ -51,7 +51,7 @@ jobs:
           call "C:\Program Files (x86)\Microsoft Visual Studio\2019\Enterprise\VC\Auxiliary\Build\vcvarsall.bat" ${{ matrix.msvc_arch }}
           mkdir build
           cd build
-          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\6.4.3\msvc2019_64 -DCMAKE_C_COMPILER=cl -DCMAKE_CXX_COMPILER=cl -DCMAKE_BUILD_TYPE=Release -GNinja ..
+          cmake -DCMAKE_MESSAGE_LOG_LEVEL=STATUS -DCMAKE_PREFIX_PATH=D:\a\FluentUI\Qt\6.5.0\msvc2019_64 -DCMAKE_C_COMPILER=cl -DCMAKE_CXX_COMPILER=cl -DCMAKE_BUILD_TYPE=Release -GNinja ..
           cmake --build . --target all --config Release --parallel
           echo winSdkDir=%WindowsSdkDir% >> %GITHUB_ENV%
           echo winSdkVer=%WindowsSdkVersion% >> %GITHUB_ENV%

.gitignore

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

.gitmodules

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

CMakeLists.txt

@@ -1,6 +1,43 @@
-cmake_minimum_required(VERSION 3.16)
+cmake_minimum_required(VERSION 3.20)
 
 project(FluentUI VERSION 0.1 LANGUAGES CXX)
 
+set(FLUENTUI_DIRECTORY ${CMAKE_CURRENT_LIST_DIR})
+list(APPEND CMAKE_MODULE_PATH ${FLUENTUI_DIRECTORY}/.cmake/)
+
+include(GetGitRevisionDescription)
+
+option(FLUENTUI_BUILD_EXAMPLES "Build FluentUI demo applications." ON)
+option(FLUENTUI_BUILD_FRAMELESSHEPLER "Build FramelessHelper." ON)
+option(FLUENTUI_BUILD_STATIC_LIB "Build static library." OFF)
+
+find_package(Qt6 REQUIRED COMPONENTS Core Quick Qml)
+set(QT_SDK_DIR "${Qt6_DIR}")
+cmake_path(GET QT_SDK_DIR PARENT_PATH QT_SDK_DIR)
+cmake_path(GET QT_SDK_DIR PARENT_PATH QT_SDK_DIR)
+cmake_path(GET QT_SDK_DIR PARENT_PATH QT_SDK_DIR)
+
+#设置QML插件输出目录，可以通过外部设置，如果外部没有设置就默认到<QT_SDK_DIR_PATH>\qml\FluentUI目录下
+set(FLUENTUI_QML_PLUGIN_DIRECTORY "" CACHE PATH "Path to FluentUI plugin")
+if(NOT FLUENTUI_QML_PLUGIN_DIRECTORY)
+    set(FLUENTUI_QML_PLUGIN_DIRECTORY ${QT_SDK_DIR}/qml/FluentUI)
+endif()
+
 add_subdirectory(src)
-add_subdirectory(example)
+add_subdirectory(zxing-cpp)
+
+if (FLUENTUI_BUILD_EXAMPLES)
+    add_subdirectory(example)
+endif ()
+
+if (FLUENTUI_BUILD_FRAMELESSHEPLER)
+    set(FRAMELESSHELPER_BUILD_STATIC ON)
+    set(FRAMELESSHELPER_NO_DEBUG_OUTPUT ON)
+    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,99 +1,123 @@
-# FluentUI
+<div align=center>
+  <img width=64 src="doc/preview/fluent_design.svg">
+</div>
 
-## 简介
+<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>
 
-这是一个漂亮的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>
+![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>
 
-## 编译状态
-| [Windows][win-link]| [Ubuntu][ubuntu-link]|[MacOS][macos-link]|
-|---------------|---------------|-----------------|
-| ![win-badge]  | ![ubuntu-badge]      | ![macos-badge] |
 
 [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>
-|----|----|----|
+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.
-|FluApp|初始化入口|支持路由跳转|
+</p>
-|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||
 
-# 部分效果预览
+## Requirements
 
-## 首页
++ Qt Core, Qt Quick, Qt QML, Qt ShaderTool, Qt 5 Compatibility Module. (**Essential**)
++ Qt LinguistTool (optional,for translations)
++ Qt Svg (optional, however essential for Qt 5)
 
-![](doc/preview/home.png)
+Use [Qt Online Installers](https://download.qt.io/archive/online_installers/) to acquire the modules (**Recommended**) or compile them first before using the library.
 
-## 各种Button按钮
+## ⚽ Get started
 
-![](doc/preview/buttons.png)
++ Download the [pre-built release](https://github.com/zhuzichu520/FluentUI/releases). (Please pecify your platform and compilers.)
 
-## 主题颜色切换、夜间模式
++ run `example` program.
 
-![](doc/preview/theme.png)
+or 
 
-## TableView表格组件
++ Clone the repository.
 
-![](doc/preview/tableview.png)
+```SHELL
+git clone --recursive https://github.com/zhuzichu520/FluentUI.git
+```
 
-## FluTreeView树组件
++ Build
 
-![](doc/preview/treeview.png)
+```
+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 <PATH_TO_THE_REPOSITORY>
+cmake --build . --config Release --target all --parallel
+```
 
-## 轮播图组件
++ Use your IDE (`Qt Creator` or `CLion`) to open the project. (only **CMake** supported).
 
-![](doc/preview/carousel.png)
+<div align=center>
+  <img src="doc/preview/qt_creator_project.png">
+</div>
 
-### ⚡ Visitor count
++ Compile the project. Then try to execute the `example` demo program.
+
++ 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)|
+
+
+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)
+
+## Star History
+
+[![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)

README_zh_CN.md

@@ -0,0 +1,99 @@
+# 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>
+
+## 编译状态
+| [Windows][win-link]| [Ubuntu][ubuntu-link]|[MacOS][macos-link]|
+|---------------|---------------|-----------------|
+| ![win-badge]  | ![ubuntu-badge]      | ![macos-badge] |
+
+[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"
+
+## 支持的组件
+
+|目录|说明|备注|
+|----|----|----|
+|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||
+
+# 部分效果预览
+
+## 首页
+
+![](doc/preview/home.png)
+
+## 各种Button按钮
+
+![](doc/preview/buttons.png)
+
+## 主题颜色切换、夜间模式
+
+![](doc/preview/theme.png)
+
+## 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)

THIRD_PARTY_COPYRIGHT.txt

@@ -0,0 +1,265 @@
+This product use Third Party code for certain functions may include licensed under
+terms that require meeting to display the following notices:
+
+A text copy of this license is included with the download of
+this FluentUI software. You may obtain a copy of the
+source code from https://github.com/zhuzichu520/FluentUI
+
+************************************************************************************
+About Qt 6.5.0 Libraries Used in This Project:
+
+This project, "FluentUI", utilizes the Qt 6.5.0 library.
+Below is a list of the Qt modules used and their corresponding open-source licenses:
+
+Qt Core - LGPL v3 / GPL v2 / Commercial License
+Qt Quick - LGPL v3 / GPL v2 / Commercial License
+Qt Quick Controls 2 - LGPL v3 / GPL v2 / Commercial License
+Qt Gui - LGPL v3 / GPL v2 / Commercial License
+Qt Multimedia - LGPL v3 / GPL v2 / Commercial License
+Qt WebEngineQuick - LGPL v3 / GPL v3 / Commercial License
+Qt Sql - LGPL v3 / GPL v2 / Commercial License
+Qt Svg - LGPL v3 / GPL v2 / Commercial License
+Qt Core5Compat - LGPL v3 / GPL v2 / Commercial License
+
+Please note that the license information provided above is for reference only.
+For the exact licensing, refer to the official Qt documentation and source code:
+https://doc.qt.io/qt-6/licenses-used-in-qt.html
+You can choose an appropriate license based on your requirements.
+If you choose to use the LGPL or GPL licenses, please follow the relevant
+open-source license regulations, such as releasing source code,
+retaining copyright notices, etc.
+
+We would like to thank the Qt project and its contributors for
+providing powerful tools and support for this project.
+For more information about the Qt project,
+please visit the official Qt website (https://www.qt.io/).
+
+************************************************************************************
+framelesshelper
+
+MIT License
+
+Copyright (C) 2021-2023 by wangwenx190 (Yuhang Zhao)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+************************************************************************************
+zxing-cpp
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "{}"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright {yyyy} {name of copyright owner}
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

doc/md/all_components.md

@@ -0,0 +1,37 @@
+# 支持的组件
+
+|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](../preview/demo_standardbtn.png) |
+|FluFilledButton|Filled button|![filledbtn](../preview/demo_filledbtn.png)|
+|FluTextButton|Text button|![textbtn](../preview/demo_textbtn.png)|
+|FluToggleButton|Toggle buttons|![togglebtn](../preview/demo_toggle_btn.png)|
+|FluIcon|fluent icons|![icons](../preview/demo_icon.png)|
+|FluRadioButton|radio button|![radiobtn](../preview/demo_radiobtn.png)|
+|FluTextBox|Single-line input box|![textbox](../preview/demo_textbox.png)|
+|FluMultiLineTextBox|Multi-lines input area|![textarea](../preview/demo_multiline_textbox.png)|
+|FluToggleSwitch|toggle switch|![toggleswitch](../preview/demo_toggle_switch.png)|
+|FluSlider|Slider|![slider](../preview/demo_slider.png)|
+|FluInfoBar|提示Toast|![infobar](../preview/demo_infobar.png)|
+|FluContentDialog| dialog |![dialog](../preview/demo_content_dialog.png)|
+|FluProgressBar| progress bar |![progress](../preview/demo_progress_bar_ring.png)|
+|FluProgressRing|circle progress||
+|FluRectangle|reactangle| ![rect](../preview/demo_rectangle.png)</br>*partially support `round` and `clip` feature|
+|FluMenu|menu||
+|FluTooltip|tooltip|![tooltip](../preview/demo_tooltip.png)|
+|FluTreeView|tree view component|![treeview](../preview/demo_tree_view.png)|
+|FluTheme|theme settings|theme color changes, dark mode are supported|
+|FluCarousel|-||
+|FluTimePicker| time picker ||
+|FluDatePicker|date picker||
+|FluMenu|the menu popup||
+|FluNavigationView|responsive navigation view||
+|FluScrollbar|scroll bar||
+|FluPagination|||
+|FluTableView|table component||
+|FluMediaPlayer|multimedia components||
+|FluFlipView| flip view||

doc/preview/fluent_design.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 73 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" stroke="#000000">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+

example.svg

@@ -1 +1,7 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1678260749060" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11227" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M0 0m170.663111 0l682.652445 0q170.663111 0 170.663111 170.663111l0 682.652445q0 170.663111-170.663111 170.663111l-682.652445 0q-170.663111 0-170.663111-170.663111l0-682.652445q0-170.663111 170.663111-170.663111Z" fill="#EBF2FF" p-id="11228"></path><path d="M512.351993 787.674257c182.822858 0 330.926439 98.568613 331.033103 231.312514 0 1.674632-0.031999 3.338597-0.106664 5.002563H181.43622c-0.074665-1.663965-0.106664-3.327931-0.106664-5.002563 0-132.743901 148.210246-231.312514 331.022437-231.312514z" fill="#7D99C8" p-id="11229"></path><path d="M592.264994 721.158309v79.817004h-0.810649c-5.546551 30.079373-38.847191 53.204225-79.102352 53.204225-40.244495 0-73.545134-23.114185-79.091686-53.193559h-0.81065V721.158309h159.815337z" fill="#FBDBCB" p-id="11230"></path><path d="M508.213412 765.626716c-44.105748-1.226641-85.363555-19.306264-118.568196-56.916147-22.826191-25.866128-35.199267-53.054895-37.097894-81.576968l-21.610217-1.610633a59.988084 59.988084 0 0 1-55.433511-56.585488l-0.319994-5.72788a34.932606 34.932606 0 0 1 43.124435-35.839254l0.949314-9.098477a608.008666 608.008666 0 0 1 40.031166-159.015354l10.389117-25.866127H655.026354l10.389117 25.866127a608.008666 608.008666 0 0 1 40.031166 159.015354l0.95998 9.098477a34.932606 34.932606 0 0 1 43.103102 35.839254l-0.309327 5.72788a59.988084 59.988084 0 0 1-55.433512 56.585488l-21.610217 1.610633c-1.909294 28.522072-14.271703 55.710839-37.097893 81.576968-34.239287 38.793858-77.054395 56.798817-122.717444 56.980146z" fill="#FFE7DB" p-id="11231"></path><path d="M546.911273 182.822858a10.666444 10.666444 0 0 1 1.429303 4.31991c0.533322 5.055895 0.714652 9.226474 0.533322 12.501073l-0.202662 2.346618 3.221266-0.543989c21.876878-3.733256 38.452532-9.877128 49.705631-18.452949l2.197288-1.73863a10.666444 10.666444 0 0 1 16.682319 3.98925c8.767817 20.650236 11.125102 40.681819 7.039853 60.116081l-0.373325 1.578633c4.746568 1.514635 9.589134 3.199933 14.506364 5.066562 27.882086 10.581113 57.769463 26.367451 76.883732 75.65709 20.212912 52.084248 18.826274 116.562905-4.149247 193.425304l-1.855961 6.101206H701.425387c-0.47999-51.732256-8.319827-90.526114-23.540843-116.392242-15.221016-25.866128-29.716714-46.185704-43.487094-60.969396-41.513802 10.399783-79.85967 15.914335-115.037603 16.564988l-6.997188 0.063998v0.191996c-37.065894 0-77.737047-5.546551-122.024124-16.628986-13.77038 10.954438-28.266078 31.220683-43.487094 60.7774-15.221016 29.556718-23.060853 68.414575-23.540843 116.584238h-11.114435c-24.746151-79.571676-26.740776-146.076957-6.005209-199.52651 8.746484-22.548864 19.732922-38.079207 31.764672-49.321639 18.079623-20.660903 40.180496-36.009916 66.302619-46.068374a424.716485 424.716485 0 0 1 32.319326-11.029103c25.25814-9.034478 44.991063-16.767651 59.209433-23.210183a366.221704 366.221704 0 0 0 29.151393-14.869024l7.359847-4.266578a10.666444 10.666444 0 0 1 14.623695 3.733256z" fill="#7D99C8" p-id="11232"></path></svg>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 73 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" stroke="#000000">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+

example/CMakeLists.txt

@@ -1,14 +1,21 @@
-cmake_minimum_required(VERSION 3.16)
+cmake_minimum_required(VERSION 3.20)
 
 project(example VERSION 0.1 LANGUAGES CXX)
 
 #配置通用编译
-set(CMAKE_AUTOMOC ON)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
 if(APPLE)
     set(CMAKE_OSX_ARCHITECTURES "arm64;x86_64" CACHE STRING "" FORCE)
 endif()
 
+#导入exmaple的QML位置，不然import example有时候会爆红
+set(QML_IMPORT_PATH ${CMAKE_BINARY_DIR}/example CACHE STRING "Qt Creator extra QML import paths" FORCE)
+
+#判断FluentUI库类型
+if(FLUENTUI_BUILD_STATIC_LIB)
+    add_definitions(-DFLUENTUI_BUILD_STATIC_LIB)
+endif()
+
 #设置可执行文件输出目录
 if(CMAKE_BUILD_TYPE STREQUAL "Debug")
     set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/debug)
@@ -19,10 +26,22 @@ endif()
 #获取文件路径分隔符（解决执行命令的时候有些平台会报错）
 file(TO_CMAKE_PATH "/" PATH_SEPARATOR)
 
-#设置版本号
+find_package(Qt6 REQUIRED COMPONENTS Quick Svg Network)
-add_definitions(-DVERSION=1,2,9,0)
 
-find_package(Qt6 REQUIRED COMPONENTS Quick REQUIRED)
+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 ${FLUENTUI_DIRECTORY}/example/Version.h)
+configure_file(
+    ${FLUENTUI_DIRECTORY}/.cmake/Version.h.in
+    ${HEADER_FILE_VERSION_PATH}
+)
 
 #遍历所有Cpp文件
 file(GLOB_RECURSE CPP_FILES *.cpp *.h)
@@ -45,11 +64,21 @@ foreach(filepath ${RES_PATHS})
     list(APPEND resource_files ${filename})
 endforeach(filepath)
 
+#如果是Windows平台，则生成rc文件
+set(EXAMPLE_VERSION_RC_PATH "")
+if(WIN32)
+    set(EXAMPLE_VERSION_RC_PATH ${CMAKE_BINARY_DIR}/version_${PROJECT_NAME}.rc)
+    configure_file(
+        ${FLUENTUI_DIRECTORY}/.cmake/version_exe.rc.in
+        ${EXAMPLE_VERSION_RC_PATH}
+    )
+endif()
+
 #添加可执行文件
-if (CMAKE_SYSTEM_NAME STREQUAL "Windows")
+if (WIN32)
     qt_add_executable(example
         ${sources_files}
-        example.rc
+        ${EXAMPLE_VERSION_RC_PATH}
     )
 else ()
     qt_add_executable(example
@@ -75,12 +104,17 @@ endif()
 
 #添加qml模块
 qt_add_qml_module(example
-    URI example
+    URI "example"
     VERSION 1.0
     QML_FILES ${qml_files}
     RESOURCES ${resource_files}
 )
 
+#导入component头文件,不然通过QML_NAMED_ELEMENT生成的c++类会找不到头文件报错
+target_include_directories(example PRIVATE
+    ${CMAKE_CURRENT_SOURCE_DIR}/src/component
+)
+
 #设置属性
 set_target_properties(example PROPERTIES
     MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com
@@ -91,12 +125,30 @@ set_target_properties(example PROPERTIES
 )
 
 #链接库
-target_link_libraries(example PRIVATE
+if (FLUENTUI_BUILD_STATIC_LIB)
-    Qt6::Quick
+    target_link_libraries(example PRIVATE
-    fluentui
+        Qt6::Quick
-)
+        Qt6::Svg
+        Qt6::Network
+        fluentui
+        fluentuiplugin
+        FramelessHelper::Core
+        FramelessHelper::Quick
+    )
+else()
+    target_link_libraries(example PRIVATE
+        Qt6::Quick
+        Qt6::Svg
+        Qt6::Network
+        fluentuiplugin
+        FramelessHelper::Core
+        FramelessHelper::Quick
+    )
+endif()
 
 #安装
 install(TARGETS example
     BUNDLE DESTINATION .
-    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR})
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)

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,44 @@
-import QtQuick
+import QtQuick
 import QtQuick.Window
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
 
 Window {
-    id:app
+    id: app
+    flags: Qt.SplashScreen
+
+    FluHttpInterceptor{
+        id:interceptor
+        function onIntercept(request){
+            if(request.method === "get"){
+                request.params["method"] = "get"
+            }
+            if(request.method === "post"){
+                request.params["method"] = "post"
+            }
+            request.headers["token"] ="yyds"
+            request.headers["os"] ="pc"
+            console.debug(JSON.stringify(request))
+            return request
+        }
+    }
+
     Component.onCompleted: {
         FluApp.init(app)
-        FluTheme.frameless = ("windows" === Qt.platform.os)
+        FluTheme.darkMode = FluThemeType.System
-        FluTheme.darkMode = FluDarkMode.System
+        FluTheme.enableAnimation = true
         FluApp.routes = {
             "/":"qrc:/example/qml/window/MainWindow.qml",
             "/about":"qrc:/example/qml/window/AboutWindow.qml",
             "/login":"qrc:/example/qml/window/LoginWindow.qml",
-            "/chat":"qrc:/example/qml/window/ChatWindow.qml",
+            "/hotload":"qrc:/example/qml/window/HotloadWindow.qml",
-            "/media":"qrc:/example/qml/window/MediaWindow.qml",
             "/singleTaskWindow":"qrc:/example/qml/window/SingleTaskWindow.qml",
             "/standardWindow":"qrc:/example/qml/window/StandardWindow.qml",
             "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml"
         }
         FluApp.initialRoute = "/"
+        FluApp.httpInterceptor = interceptor
         FluApp.run()
     }
 }

example/qml/component/CodeExpander.qml

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

example/qml/component/CustomWindow.qml

@@ -0,0 +1,63 @@
+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.background = undefined
+            window.show()
+        }
+    }
+    Connections{
+        target: FluTheme
+        function onDarkChanged(){
+            if (FluTheme.dark)
+                FramelessUtils.systemTheme = FramelessHelperConstants.Dark
+            else
+                FramelessUtils.systemTheme = FramelessHelperConstants.Light
+        }
+    }
+    function setHitTestVisible(com){
+        framless_helper.setHitTestVisible(com)
+    }
+    function setTitleBarItem(com){
+        framless_helper.setTitleBarItem(com)
+    }
+}

example/qml/global/ItemsFooter.qml

@@ -1,14 +1,16 @@
-pragma Singleton
+pragma Singleton
 
 import QtQuick
 import FluentUI
 
 FluObject{
-    id:footer_items
 
     property var navigationView
 
+    id:footer_items
+
     FluPaneItemSeparator{}
+
     FluPaneItem{
         title:lang.about
         icon:FluentIcons.Contact
@@ -16,6 +18,7 @@ FluObject{
             FluApp.navigate("/about")
         }
     }
+
     FluPaneItem{
         title:lang.settings
         icon:FluentIcons.Settings
@@ -23,4 +26,5 @@ FluObject{
             navigationView.push("qrc:/example/qml/page/T_Settings.qml")
         }
     }
+
 }

example/qml/global/ItemsOriginal.qml

@@ -1,4 +1,4 @@
-pragma Singleton
+pragma Singleton
 
 import QtQuick
 import FluentUI
@@ -7,33 +7,92 @@ FluObject{
 
     property var navigationView
 
-    FluPaneItem{
+    function rename(item, newName){
-        title:lang.home
+        if(newName && newName.trim().length>0){
-        //        icon:FluentIcons.Home
+            item.title = newName;
-        cusIcon: Image{
-            anchors.centerIn: parent
-            source: FluTheme.dark ? "qrc:/example/res/svg/home_dark.svg" : "qrc:/example/res/svg/home.svg"
-            sourceSize: Qt.size(30,30)
-            width: 18
-            height: 18
         }
+    }
+
+    FluPaneItem{
+        id:item_home
+        count: 9
+        title:lang.home
+        infoBadge:FluBadge{
+            count: item_home.count
+        }
+        icon:FluentIcons.Home
         onTap:{
+            if(navigationView.getCurrentUrl()){
+                item_home.count = 0
+            }
             navigationView.push("qrc:/example/qml/page/T_Home.qml")
         }
+        editDelegate: FluTextBox{
+            text:item_home.title
+        }
+        menuDelegate: FluMenu{
+            id:nav_item_right_menu
+            width: 120
+            FluMenuItem{
+                text: "重命名"
+                visible: true
+                onClicked: {
+                    item_home.showEdit = true
+                }
+            }
+        }
     }
 
     FluPaneItemExpander{
+        id:item_expander_basic_input
         title:lang.basic_input
         icon:FluentIcons.CheckboxComposite
+        editDelegate: FluTextBox{
+            text:item_expander_basic_input.title
+        }
+        menuDelegate: FluMenu{
+            FluMenuItem{
+                text: "重命名"
+                visible: true
+                onClicked: {
+                    item_expander_basic_input.showEdit = true
+                }
+            }
+        }
         FluPaneItem{
+            id:item_buttons
+            count: 99
+            infoBadge:FluBadge{
+                count: item_buttons.count
+            }
             title:"Buttons"
             image:"qrc:/example/res/image/control/Button.png"
             recentlyUpdated:true
             desc:"A control that responds to user input and raisesa Click event."
             onTap:{
+                item_buttons.count = 0
                 navigationView.push("qrc:/example/qml/page/T_Buttons.qml")
             }
         }
+        FluPaneItem{
+            id:item_text
+            title:"Text"
+            count: 5
+            infoBadge:FluBadge{
+                count: item_text.count
+                color: Qt.rgba(82/255,196/255,26/255,1)
+            }
+            onTap:{
+                item_text.count = 0
+                navigationView.push("qrc:/example/qml/page/T_Text.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Image"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_Image.qml")
+            }
+        }
         FluPaneItem{
             title:"Slider"
             image:"qrc:/example/res/image/control/Slider.png"
@@ -52,6 +111,12 @@ FluObject{
                 navigationView.push("qrc:/example/qml/page/T_CheckBox.qml")
             }
         }
+        FluPaneItem{
+            title:"RadioButton"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_RadioButton.qml")
+            }
+        }
         FluPaneItem{
             title:"ToggleSwitch"
             onTap:{
@@ -149,6 +214,12 @@ FluObject{
                 navigationView.push("qrc:/example/qml/page/T_Expander.qml")
             }
         }
+        FluPaneItem{
+            title:"Watermark"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_Watermark.qml")
+            }
+        }
     }
 
     FluPaneItemExpander{
@@ -160,6 +231,19 @@ FluObject{
                 navigationView.push("qrc:/example/qml/page/T_Dialog.qml")
             }
         }
+        FluPaneItem{
+            id:item_combobox
+            title:"ComboBox"
+            count: 9
+            infoBadge:FluBadge{
+                count: item_combobox.count
+                color: Qt.rgba(250/255,173/255,20/255,1)
+            }
+            onTap:{
+                item_combobox.count = 0
+                navigationView.push("qrc:/example/qml/page/T_ComboBox.qml")
+            }
+        }
         FluPaneItem{
             title:"Tooltip"
             onTap:{
@@ -219,6 +303,12 @@ FluObject{
                 navigationView.push("qrc:/example/qml/page/T_TableView.qml")
             }
         }
+        FluPaneItem{
+            title:"Pagination"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_Pagination.qml")
+            }
+        }
         FluPaneItem{
             title:"MultiWindow"
             onTap:{
@@ -240,6 +330,12 @@ FluObject{
     FluPaneItemExpander{
         title:lang.theming
         icon:FluentIcons.Brightness
+        FluPaneItem{
+            title:"Acrylic"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_Acrylic.qml")
+            }
+        }
         FluPaneItem{
             title:"Theme"
             onTap:{
@@ -260,17 +356,73 @@ FluObject{
         }
     }
 
+    FluPaneItemSeparator{
+        spacing:20
+        size:1
+    }
+
     FluPaneItemExpander{
-        title:lang.media
+        title:lang.other
-        icon:FluentIcons.Media
+        icon:FluentIcons.Shop
         FluPaneItem{
-            title:"MediaPlayer"
+            title:"QRCode"
-            image:"qrc:/example/res/image/control/MediaPlayerElement.png"
-            recentlyAdded:true
-            order:0
-            desc:"A control to display video and image content."
             onTap:{
-                navigationView.push("qrc:/example/qml/page/T_MediaPlayer.qml")
+                navigationView.push("qrc:/example/qml/page/T_QRCode.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Tour"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_Tour.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Timeline"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_Timeline.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Screenshot"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_Screenshot.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Captcha"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_Captcha.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Chart"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_Chart.qml")
+            }
+        }
+        FluPaneItem{
+            title:"Http"
+            onTap:{
+                navigationView.push("qrc:/example/qml/page/T_Http.qml")
+            }
+        }
+        FluPaneItem{
+            id:item_other
+            title:"RemoteLoader"
+            count: 99
+            infoBadge:FluBadge{
+                count: item_other.count
+                color: Qt.rgba(82/255,196/255,26/255,1)
+            }
+            onTap:{
+                item_other.count = 0
+                navigationView.push("qrc:/example/qml/page/T_RemoteLoader.qml")
+            }
+        }
+        FluPaneItem{
+            title:"HotLoader"
+            tapFunc:function(){
+                FluApp.navigate("/hotload")
             }
         }
     }
@@ -313,7 +465,12 @@ FluObject{
         for(var i=0;i<items.length;i++){
             var item = items[i]
             if(item instanceof FluPaneItem){
-                arr.push({title:item.title,key:item.key})
+                if (item.parent instanceof FluPaneItemExpander)
+                {
+                    arr.push({title:`${item.parent.title} -> ${item.title}`,key:item.key})
+                }
+                else
+                    arr.push({title:item.title,key:item.key})
             }
         }
         return arr

example/qml/global/MainEvent.qml

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

example/qml/page/T_Acrylic.qml

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

example/qml/page/T_Awesome.qml

@@ -1,4 +1,4 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
@@ -8,10 +8,6 @@ FluContentPage {
 
     title:"Awesome"
 
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-
     FluTextBox{
         id:text_box
         placeholderText: "请输入关键字"
@@ -37,6 +33,7 @@ FluContentPage {
         cellWidth: 80
         cellHeight: 80
         clip: true
+        boundsBehavior: GridView.StopAtBounds
         model:FluApp.awesomelist()
         ScrollBar.vertical: FluScrollBar {}
         anchors{

example/qml/page/T_Badge.qml

@@ -1,19 +1,14 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
     title:"Badge"
 
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
@@ -38,6 +33,8 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
+                        topRight: true
+                        showZero: true
                         count:0
                     }
                 }
@@ -48,6 +45,8 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
+                        topRight: true
+                        showZero: true
                         count:5
                     }
                 }
@@ -57,6 +56,8 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
+                        topRight: true
+                        showZero: true
                         count:50
                     }
                 }
@@ -66,6 +67,8 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
+                        topRight: true
+                        showZero: true
                         count:100
                     }
                 }
@@ -75,6 +78,8 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
+                        topRight: true
+                        showZero: true
                         isDot:true
                     }
                 }
@@ -84,6 +89,8 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
+                        topRight: true
+                        showZero: true
                         count:99
                         color: Qt.rgba(250/255,173/255,20/255,1)
                     }
@@ -94,6 +101,8 @@ FluScrollablePage{
                     radius:  8
                     color: Qt.rgba(191/255,191/255,191/255,1)
                     FluBadge{
+                        topRight: true
+                        showZero: true
                         count:99
                         color: Qt.rgba(82/255,196/255,26/255,1)
                     }

example/qml/page/T_BreadcrumbBar.qml

@@ -1,17 +1,13 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
     title:"BreadcurmbBar"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
 
     Component.onCompleted: {
         var items = []

example/qml/page/T_Buttons.qml

@@ -1,18 +1,14 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import QtQuick.Controls.Basic
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
-    title:"Buttons"
 
-    leftPadding:10
+    title:"Buttons"
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
 
     FluText{
         Layout.topMargin: 20
@@ -26,8 +22,9 @@ FluScrollablePage{
         Layout.topMargin: 20
 
         FluTextButton{
-            disabled:text_button_switch.selected
+            disabled:text_button_switch.checked
             text:"Text Button"
+            contentDescription: "文本按钮"
             onClicked: {
                 showInfo("点击Text Button")
             }
@@ -36,18 +33,13 @@ FluScrollablePage{
                 left: parent.left
             }
         }
-
+        FluToggleSwitch{
-        Row{
+            id:text_button_switch
-            spacing: 5
             anchors{
-                verticalCenter: parent.verticalCenter
                 right: parent.right
+                verticalCenter: parent.verticalCenter
             }
-            FluToggleSwitch{
+            text:"Disabled"
-                id:text_button_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
         }
     }
     CodeExpander{
@@ -68,7 +60,7 @@ FluScrollablePage{
         Layout.topMargin: 20
 
         FluButton{
-            disabled:button_switch.selected
+            disabled:button_switch.checked
             text:"Standard Button"
             onClicked: {
                 showInfo("点击StandardButton")
@@ -78,18 +70,13 @@ FluScrollablePage{
                 left: parent.left
             }
         }
-
+        FluToggleSwitch{
-        Row{
+            id:button_switch
-            spacing: 5
             anchors{
-                verticalCenter: parent.verticalCenter
                 right: parent.right
+                verticalCenter: parent.verticalCenter
             }
-            FluToggleSwitch{
+            text:"Disabled"
-                id:button_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
         }
     }
     CodeExpander{
@@ -110,28 +97,23 @@ FluScrollablePage{
         paddings: 10
 
         FluFilledButton{
-            disabled:filled_button_switch.selected
+            disabled:filled_button_switch.checked
             text:"Filled Button"
             onClicked: {
-                showWarning("点击FilledButton")
+                showWarning("点击FilledButton"+height)
             }
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
         }
-
+        FluToggleSwitch{
-        Row{
+            id:filled_button_switch
-            spacing: 5
             anchors{
-                verticalCenter: parent.verticalCenter
                 right: parent.right
+                verticalCenter: parent.verticalCenter
             }
-            FluToggleSwitch{
+            text:"Disabled"
-                id:filled_button_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
         }
     }
     CodeExpander{
@@ -152,28 +134,20 @@ FluScrollablePage{
         paddings: 10
 
         FluToggleButton{
-            disabled:toggle_button_switch.selected
+            disabled:toggle_button_switch.checked
             text:"Toggle Button"
-            onClicked: {
-               selected = !selected
-            }
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
         }
-
+        FluToggleSwitch{
-        Row{
+            id:toggle_button_switch
-            spacing: 5
             anchors{
-                verticalCenter: parent.verticalCenter
                 right: parent.right
+                verticalCenter: parent.verticalCenter
             }
-            FluToggleSwitch{
+            text:"Disabled"
-                id:toggle_button_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
         }
     }
     CodeExpander{
@@ -182,7 +156,7 @@ FluScrollablePage{
         code:'FluToggleButton{
     text:"Toggle Button"
     onClicked: {
-        selected = !selected
+        checked = !checked
     }
 }'
     }
@@ -193,30 +167,35 @@ FluScrollablePage{
         height: 68
         paddings: 10
         Layout.topMargin: 20
-        FluIconButton{
+        Row{
-            iconSource:FluentIcons.ChromeCloseContrast
+            spacing: 20
-            disabled:icon_button_switch.selected
-            iconSize: 15
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
-            onClicked:{
+            FluIconButton{
-                showSuccess("点击IconButton")
+                iconSource:FluentIcons.ChromeCloseContrast
+                disabled:icon_button_switch.checked
+                iconSize: 15
+                onClicked:{
+                    showSuccess("点击IconButton")
+                }
+            }
+            FluIconButton{
+                disabled:icon_button_switch.checked
+                iconDelegate: Image{ width: 20; height: 20; source: "qrc:/example/res/image/ic_home_github.png" }
+                onClicked:{
+                    showSuccess("点击IconButton")
+                }
             }
         }
-
+        FluToggleSwitch{
-        Row{
+            id:icon_button_switch
-            spacing: 5
             anchors{
-                verticalCenter: parent.verticalCenter
                 right: parent.right
+                verticalCenter: parent.verticalCenter
             }
-            FluToggleSwitch{
+            text:"Disabled"
-                id:icon_button_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
         }
     }
     CodeExpander{
@@ -236,38 +215,35 @@ FluScrollablePage{
         paddings: 10
         Layout.topMargin: 20
         FluDropDownButton{
-            disabled:drop_down_button_switch.selected
+            disabled:drop_down_button_switch.checked
             text:"DropDownButton"
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
-            items:[
+            FluMenuItem{
-                FluMenuItem{
+                text:"Menu_1"
-                    text:"Menu_1"
+            }
-                },
+            FluMenuItem{
-                FluMenuItem{
+                text:"Menu_2"
-                    text:"Menu_2"
+            }
-                },
+            FluMenuItem{
-                FluMenuItem{
+                text:"Menu_3"
-                    text:"Menu_3"
+            }
-                },
+            FluMenuItem{
-                FluMenuItem{
+                text:"Menu_4"
-                    text:"Menu_4"
+                onClicked: {
+
                 }
-            ]
+            }
         }
-        Row{
+        FluToggleSwitch{
-            spacing: 5
+            id:drop_down_button_switch
             anchors{
-                verticalCenter: parent.verticalCenter
                 right: parent.right
+                verticalCenter: parent.verticalCenter
             }
-            FluToggleSwitch{
+            text:"Disabled"
-                id:drop_down_button_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
         }
     }
     CodeExpander{
@@ -275,20 +251,18 @@ FluScrollablePage{
         Layout.topMargin: -1
         code:'FluDropDownButton{
     text:"DropDownButton"
-    items:[
+    FluMenuItem{
-        FluMenuItem{
+        text:"Menu_1"
-            text:"Menu_1"
+    },
-        },
+    FluMenuItem{
-        FluMenuItem{
+        text:"Menu_2"
-            text:"Menu_2"
+    },
-        },
+    FluMenuItem{
-        FluMenuItem{
+        text:"Menu_3"
-            text:"Menu_3"
+    },
-        },
+    FluMenuItem{
-        FluMenuItem{
+        text:"Menu_4"
-            text:"Menu_4"
+    }
-        }
-    ]
 }'
     }
 
@@ -297,46 +271,39 @@ FluScrollablePage{
         height: 100
         paddings: 10
         Layout.topMargin: 20
-        ColumnLayout{
+        FluRadioButtons{
             spacing: 8
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
-            Repeater{
+            FluRadioButton{
-                id:repeater
+                disabled:radio_button_switch.checked
-                property int selecIndex : 0
+                text:"Radio Button_1"
-                model: 3
+            }
-                delegate:  FluRadioButton{
+            FluRadioButton{
-                    selected : repeater.selecIndex===index
+                disabled:radio_button_switch.checked
-                    disabled:radio_button_switch.selected
+                text:"Radio Button_2"
-                    text:"Radio Button_"+index
+            }
-                    onClicked:{
+            FluRadioButton{
-                        repeater.selecIndex = index
+                disabled:radio_button_switch.checked
-                    }
+                text:"Radio Button_3"
-                }
             }
         }
-
+        FluToggleSwitch{
-
+            id:radio_button_switch
-        Row{
-            spacing: 5
             anchors{
-                verticalCenter: parent.verticalCenter
                 right: parent.right
+                verticalCenter: parent.verticalCenter
             }
-            FluToggleSwitch{
+            text:"Disabled"
-                id:radio_button_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
         }
     }
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluRadioButton{
-    selected:true
+    checked:true
     text:"Text Button"
     onClicked: {
 
@@ -344,38 +311,4 @@ FluScrollablePage{
 }'
     }
 
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-        FluCheckBox{
-            disabled:check_box_switch.selected
-            text:"Check Box"
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-        Row{
-            spacing: 5
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
-            FluToggleSwitch{
-                id:check_box_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluCheckBox{
-    text:"Check Box"
-}'
-    }
 }

example/qml/page/T_CalendarPicker.qml

@@ -1,17 +1,13 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
     title:"CalendarPicker"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
 
     FluArea{
         Layout.fillWidth: true

example/qml/page/T_Captcha.qml

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

example/qml/page/T_Carousel.qml

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

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

example/qml/page/T_CheckBox.qml

@@ -1,17 +1,13 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
     title:"CheckBox"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
 
     FluArea{
         Layout.fillWidth: true
@@ -22,10 +18,25 @@ FluScrollablePage{
             spacing: 30
             anchors.verticalCenter: parent.verticalCenter
             FluCheckBox{
+                disabled: check_box_switch.checked
             }
             FluCheckBox{
-                text:"Text"
+                disabled: check_box_switch.checked
+                text:"Right"
             }
+            FluCheckBox{
+                disabled: check_box_switch.checked
+                text:"Left"
+                textRight: false
+            }
+        }
+        FluToggleSwitch{
+            id:check_box_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text:"Disabled"
         }
     }
     CodeExpander{

example/qml/page/T_ColorPicker.qml

@@ -1,17 +1,13 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
     title:"ColorPicker"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
 
     FluArea{
         Layout.fillWidth: true
@@ -27,8 +23,6 @@ FluScrollablePage{
                 text:"此颜色组件是Github上的开源项目"
             }
             FluTextButton{
-                leftPadding: 0
-                rightPadding: 0
                 text:"https://github.com/rshest/qml-colorpicker"
                 onClicked: {
                     Qt.openUrlExternally(text)

example/qml/page/T_ComboBox.qml

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

example/qml/page/T_DatePicker.qml

@@ -1,17 +1,13 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
     title:"TimePicker"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
 
     FluArea{
         Layout.fillWidth: true
@@ -27,6 +23,9 @@ FluScrollablePage{
                 text:"showYear=true"
             }
             FluDatePicker{
+                onCurrentChanged: {
+                    showSuccess(current.toLocaleDateString())
+                }
             }
         }
     }
@@ -54,7 +53,9 @@ FluScrollablePage{
 
             FluDatePicker{
                 showYear:false
-
+                onCurrentChanged: {
+                    showSuccess(current.toLocaleDateString())
+                }
             }
         }
     }

example/qml/page/T_Dialog.qml

@@ -1,17 +1,13 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
     title:"Dialog"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
 
     FluArea{
         Layout.fillWidth: true
@@ -35,7 +31,7 @@ FluScrollablePage{
     title:"友情提示"
     message:"确定要退出程序么？"
     negativeText:"取消"
-    buttonFlags: FluContentDialog.NegativeButton | FluContentDialog.PositiveButton
+    buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
     onNegativeClicked:{
         showSuccess("点击取消按钮")
     }
@@ -51,7 +47,7 @@ FluScrollablePage{
         id:double_btn_dialog
         title:"友情提示"
         message:"确定要退出程序么？"
-        buttonFlags: FluContentDialog.NegativeButton | FluContentDialog.PositiveButton
+        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
         negativeText:"取消"
         onNegativeClicked:{
             showSuccess("点击取消按钮")
@@ -84,7 +80,7 @@ FluScrollablePage{
     title:"友情提示"
     message:"确定要退出程序么？"
     negativeText:"取消"
-    buttonFlags: FluContentDialog.NeutralButton | FluContentDialog.NegativeButton | FluContentDialog.PositiveButton
+    buttonFlags: FluContentDialogType.NeutralButton | FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
     negativeText:"取消"
     onNegativeClicked:{
         showSuccess("点击取消按钮")
@@ -105,7 +101,7 @@ FluScrollablePage{
         id:triple_btn_dialog
         title:"友情提示"
         message:"确定要退出程序么？"
-        buttonFlags: FluContentDialog.NeutralButton | FluContentDialog.NegativeButton | FluContentDialog.PositiveButton
+        buttonFlags: FluContentDialogType.NeutralButton | FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
         negativeText:"取消"
         onNegativeClicked:{
             showSuccess("点击取消按钮")

example/qml/page/T_Expander.qml

@@ -1,17 +1,13 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
     title:"Expander"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
 
     FluArea{
         Layout.fillWidth: true
@@ -31,7 +27,7 @@ FluScrollablePage{
                 Layout.topMargin: 20
                 Item{
                     anchors.fill: parent
-                    ColumnLayout{
+                    FluRadioButtons{
                         spacing: 8
                         anchors{
                             top: parent.top
@@ -39,17 +35,14 @@ FluScrollablePage{
                             topMargin: 15
                             leftMargin: 15
                         }
-                        Repeater{
+                        FluRadioButton{
-                            id:repeater
+                            text:"Radio Button_1"
-                            property int selecIndex : 0
+                        }
-                            model: 3
+                        FluRadioButton{
-                            delegate:  FluRadioButton{
+                            text:"Radio Button_2"
-                                selected : repeater.selecIndex===index
+                        }
-                                text:"Radio Button_"+index
+                        FluRadioButton{
-                                onClicked:{
+                            text:"Radio Button_3"
-                                    repeater.selecIndex = index
-                                }
-                            }
                         }
                     }
                 }

example/qml/page/T_FlipView.qml

@@ -1,17 +1,13 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
     title:"FlipView"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
 
     FluArea{
         Layout.fillWidth: true
@@ -80,7 +76,6 @@ FluScrollablePage{
                 Image{
                     source: "qrc:/example/res/image/banner_1.jpg"
                     asynchronous: true
-                    sourceSize: Qt.size(400,300)
                     fillMode:Image.PreserveAspectCrop
                 }
                 Image{

example/qml/page/T_Home.qml

@@ -1,16 +1,14 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
-import "qrc:///example/qml/global/"
+import "qrc:///example/qml/global"
 import FluentUI
 
 FluScrollablePage{
 
-
+    launchMode: FluPageType.SingleTask
-    leftPadding:10
+    animDisabled: true
-    rightPadding:0
-    bottomPadding:20
 
     ListModel{
         id:model_header
@@ -20,13 +18,13 @@ FluScrollablePage{
             desc:"The latest FluentUI controls and styles for your applications."
             url:"https://github.com/zhuzichu520/FluentUI"
         }
-
     }
 
     Item{
         Layout.fillWidth: true
-        height: 320
+        Layout.preferredHeight: 320
         Image {
+            id: bg
             fillMode:Image.PreserveAspectCrop
             anchors.fill: parent
             verticalAlignment: Qt.AlignTop
@@ -41,7 +39,7 @@ FluScrollablePage{
         }
         FluText{
             text:"FluentUI Gallery"
-            fontStyle: FluText.TitleLarge
+            font: FluTextStyle.TitleLarge
             anchors{
                 top: parent.top
                 left: parent.left
@@ -51,6 +49,7 @@ FluScrollablePage{
         }
 
         ListView{
+            id: list
             anchors{
                 left: parent.left
                 right: parent.right
@@ -66,13 +65,27 @@ FluScrollablePage{
             }
             clip: false
             delegate:Item{
+                id: control
                 width: 220
                 height: 240
-                FluArea{
+                FluShadow{
-                    radius: 8
+                    radius:8
+                    anchors.fill: item_content
+                }
+                FluItem{
+                    id:item_content
+                    radius: [8,8,8,8]
                     width: 200
                     height: 220
                     anchors.centerIn: parent
+                    FluAcrylic{
+                        anchors.fill: parent
+                        tintColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+                        target: bg
+                        tintOpacity: FluTheme.dark ? 0.8 : 0.9
+                        blurRadius : 40
+                        targetRect: Qt.rect(list.x-list.contentX+10+(control.width)*index,list.y+10,width,height)
+                    }
                     Rectangle{
                         anchors.fill: parent
                         radius: 8
@@ -81,16 +94,15 @@ FluScrollablePage{
                                 if(item_mouse.containsMouse){
                                     return Qt.rgba(1,1,1,0.03)
                                 }
-                                return Qt.rgba(0,0,0,0)
+                                return Qt.rgba(0,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 Qt.rgba(0,0,0,0.0)
                             }
                         }
                     }
-
                     ColumnLayout{
                         Image {
                             Layout.topMargin: 20
@@ -101,7 +113,7 @@ FluScrollablePage{
                         }
                         FluText{
                             text: model.title
-                            fontStyle: FluText.Body
+                            font: FluTextStyle.Body
                             Layout.topMargin: 20
                             Layout.leftMargin: 20
                         }
@@ -129,10 +141,11 @@ FluScrollablePage{
                         id:item_mouse
                         anchors.fill: parent
                         hoverEnabled: true
-                        onWheel: (wheel)=>{
+                        onWheel:
-                            if (wheel.angleDelta.y > 0) scrollbar_header.decrease()
+                            (wheel)=>{
-                            else scrollbar_header.increase()
+                                if (wheel.angleDelta.y > 0) scrollbar_header.decrease()
-                        }
+                                else scrollbar_header.increase()
+                            }
                         onClicked: {
                             Qt.openUrlExternally(model.url)
                         }
@@ -184,7 +197,7 @@ FluScrollablePage{
                 FluText{
                     id:item_title
                     text:modelData.title
-                    fontStyle: FluText.BodyStrong
+                    font: FluTextStyle.BodyStrong
                     anchors{
                         left: item_icon.right
                         leftMargin: 20
@@ -198,7 +211,7 @@ FluScrollablePage{
                     color:FluColors.Grey120
                     wrapMode: Text.WrapAnywhere
                     elide: Text.ElideRight
-                    fontStyle: FluText.Caption
+                    font: FluTextStyle.Caption
                     maximumLineCount: 2
                     anchors{
                         left: item_title.left
@@ -236,14 +249,14 @@ FluScrollablePage{
 
     FluText{
         text: "Recently added samples"
-        fontStyle: FluText.Title
+        font: FluTextStyle.Title
         Layout.topMargin: 20
         Layout.leftMargin: 20
     }
 
     GridView{
         Layout.fillWidth: true
-        implicitHeight: contentHeight
+        Layout.preferredHeight: contentHeight
         cellHeight: 120
         cellWidth: 320
         model:ItemsOriginal.getRecentlyAddedData()
@@ -253,14 +266,14 @@ FluScrollablePage{
 
     FluText{
         text: "Recently updated samples"
-        fontStyle: FluText.Title
+        font: FluTextStyle.Title
         Layout.topMargin: 20
         Layout.leftMargin: 20
     }
 
     GridView{
         Layout.fillWidth: true
-        implicitHeight: contentHeight
+        Layout.preferredHeight: contentHeight
         cellHeight: 120
         cellWidth: 320
         interactive: false

example/qml/page/T_Http.qml

@@ -0,0 +1,279 @@
+import QtQuick
+import Qt.labs.platform
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import QtQuick.Dialogs
+import FluentUI
+import "qrc:///example/qml/component"
+
+FluContentPage{
+
+    title:"Http"
+
+    FluHttp{
+        id:http
+    }
+
+    Flickable{
+        id:layout_flick
+        width: 160
+        clip: true
+        anchors{
+            top: parent.top
+            topMargin: 20
+            bottom: parent.bottom
+            left: parent.left
+        }
+        ScrollBar.vertical: FluScrollBar {}
+        contentHeight:layout_column.height
+        Column{
+            spacing: 2
+            id:layout_column
+            width: parent.width
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Get请求"
+                onClicked: {
+                    var callable = {}
+                    callable.onStart = function(){
+                        showLoading()
+                    }
+                    callable.onFinish = function(){
+                        hideLoading()
+                    }
+                    callable.onSuccess = function(result){
+                        text_info.text = result
+                        console.debug(result)
+                    }
+                    callable.onError = function(status,errorString){
+                        console.debug(status+";"+errorString)
+                    }
+                    http.get("https://httpbingo.org/get",callable)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Post表单请求"
+                onClicked: {
+                    var callable = {}
+                    callable.onStart = function(){
+                        showLoading()
+                    }
+                    callable.onFinish = function(){
+                        hideLoading()
+                    }
+                    callable.onSuccess = function(result){
+                        text_info.text = result
+                        console.debug(result)
+                    }
+                    callable.onError = function(status,errorString){
+                        console.debug(status+";"+errorString)
+                    }
+                    var param = {}
+                    param.custname = "朱子楚"
+                    param.custtel = "1234567890"
+                    param.custemail = "zhuzichu520@gmail.com"
+                    http.post("https://httpbingo.org/post",callable,param)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Post Json请求"
+                onClicked: {
+                    var callable = {}
+                    callable.onStart = function(){
+                        showLoading()
+                    }
+                    callable.onFinish = function(){
+                        hideLoading()
+                    }
+                    callable.onSuccess = function(result){
+                        text_info.text = result
+                        console.debug(result)
+                    }
+                    callable.onError = function(status,errorString){
+                        console.debug(status+";"+errorString)
+                    }
+                    var param = {}
+                    param.custname = "朱子楚"
+                    param.custtel = "1234567890"
+                    param.custemail = "zhuzichu520@gmail.com"
+                    http.postJson("https://httpbingo.org/post",callable,param)
+                }
+            }
+            FluButton{
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "Post String请求"
+                onClicked: {
+                    var callable = {}
+                    callable.onStart = function(){
+                        showLoading()
+                    }
+                    callable.onFinish = function(){
+                        hideLoading()
+                    }
+                    callable.onSuccess = function(result){
+                        text_info.text = result
+                        console.debug(result)
+                    }
+                    callable.onError = function(status,errorString){
+                        console.debug(status+";"+errorString)
+                    }
+                    var param = "我命由我不由天"
+                    http.postString("https://httpbingo.org/post",callable,param)
+                }
+            }
+            FluButton{
+                id:btn_download
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "下载文件"
+                onClicked: {
+                    folder_dialog.open()
+                }
+            }
+            FluButton{
+                id:btn_upload
+                implicitWidth: parent.width
+                implicitHeight: 36
+                text: "文件上传"
+                onClicked: {
+                    file_dialog.open()
+                }
+            }
+        }
+    }
+
+    FileDialog {
+        id: file_dialog
+        onAccepted: {
+            var param = {}
+            for(var i=0;i<selectedFiles.length;i++){
+                var fileUrl = selectedFiles[i]
+                var fileName = FluTools.getFileNameByUrl(fileUrl)
+                var filePath = FluTools.toLocalPath(fileUrl)
+                param[fileName] = filePath
+            }
+            console.debug(JSON.stringify(param))
+            var callable = {}
+            callable.onStart = function(){
+                btn_upload.disabled = true
+            }
+            callable.onFinish = function(){
+                btn_upload.disabled = false
+                btn_upload.text = "上传文件"
+                layout_upload_file_size.visible = false
+                text_upload_file_size.text = ""
+            }
+            callable.onSuccess = function(result){
+                text_info.text = result
+                console.debug(result)
+            }
+            callable.onError = function(status,errorString,result){
+                text_info.text = result
+                console.debug(result)
+            }
+            callable.onUploadProgress = function(sent,total){
+                var locale = Qt.locale()
+                var precent = (sent/total * 100).toFixed(0) + "%"
+                btn_upload.text = "上传中..."+precent
+                text_upload_file_size.text =  "%1/%2".arg(locale.formattedDataSize(sent)).arg(locale.formattedDataSize(total))
+                layout_upload_file_size.visible = true
+            }
+            http.upload("https://httpbingo.org/post",callable,param)
+        }
+    }
+
+    FolderDialog {
+        id: folder_dialog
+        currentFolder: StandardPaths.standardLocations(StandardPaths.DownloadLocation)[0]
+        onAccepted: {
+            var callable = {}
+            callable.onStart = function(){
+                btn_download.disabled = true
+            }
+            callable.onFinish = function(){
+                btn_download.disabled = false
+                btn_download.text = "下载文件"
+                layout_download_file_size.visible = false
+                text_download_file_size.text = ""
+            }
+            callable.onSuccess = function(result){
+                showSuccess(result)
+            }
+            callable.onError = function(status,errorString){
+                showError(errorString)
+            }
+            callable.onDownloadProgress = function(recv,total){
+                var locale = Qt.locale()
+                var precent = (recv/total * 100).toFixed(0) + "%"
+                btn_download.text = "下载中..."+precent
+                text_download_file_size.text =  "%1/%2".arg(locale.formattedDataSize(recv)).arg(locale.formattedDataSize(total))
+                layout_download_file_size.visible = true
+            }
+            var path = FluTools.toLocalPath(currentFolder)+ "/big_buck_bunny.mp4"
+            http.download("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",callable,path)
+        }
+    }
+
+    FluArea{
+        anchors{
+            top: layout_flick.top
+            bottom: layout_flick.bottom
+            left: layout_flick.right
+            right: parent.right
+            leftMargin: 8
+        }
+        Flickable{
+            clip: true
+            id:scrollview
+            boundsBehavior:Flickable.StopAtBounds
+            width: parent.width
+            height: parent.height
+            contentWidth: width
+            contentHeight: text_info.height
+            ScrollBar.vertical: FluScrollBar {}
+            FluText{
+                id:text_info
+                width: scrollview.width
+                wrapMode: Text.WrapAnywhere
+                padding: 14
+            }
+        }
+    }
+
+    FluRectangle{
+        id:layout_download_file_size
+        radius: [4,4,4,4]
+        height: 36
+        width: 160
+        visible: false
+        x:layout_flick.width
+        y: 173 - layout_flick.contentY
+        FluText{
+            id:text_download_file_size
+            anchors.centerIn: parent
+        }
+    }
+
+
+    FluRectangle{
+        id:layout_upload_file_size
+        radius: [4,4,4,4]
+        height: 36
+        width: 160
+        visible: false
+        x:layout_flick.width
+        y: 210 - layout_flick.contentY
+        FluText{
+            id:text_upload_file_size
+            anchors.centerIn: parent
+        }
+    }
+
+}

example/qml/page/T_Image.qml

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

example/qml/page/T_InfoBar.qml

@@ -1,22 +1,18 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
     title:"InfoBar"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
 
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 200
+        height: 240
         paddings: 10
         ColumnLayout{
             spacing: 14
@@ -48,6 +44,12 @@ FluScrollablePage{
                     showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
                 }
             }
+            FluButton{
+                text:"Loading"
+                onClicked: {
+                    showLoading()
+                }
+            }
         }
     }
     CodeExpander{

example/qml/page/T_MediaPlayer.qml

@@ -1,66 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    title:"MediaPlayer"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
-    onVisibleChanged: {
-        if(visible){
-            player.play()
-        }else{
-            player.pause()
-        }
-    }
-    FluArea{
-        Layout.fillWidth: true
-        height: 320
-        Layout.topMargin: 20
-        paddings: 10
-        ColumnLayout{
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left:parent.left
-            }
-            FluMediaPlayer{
-                id:player
-                source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluMediaPlayer{
-    id:player
-    source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
-}
-'
-    }
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        Layout.topMargin: 20
-        paddings: 10
-        FluButton{
-            text:"跳转到视频播放器窗口"
-            anchors.verticalCenter: parent.verticalCenter
-            onClicked:{
-                FluApp.navigate("/media",{source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"})
-            }
-        }
-    }
-
-
-
-
-}
-

example/qml/page/T_Menu.qml

@@ -1,17 +1,43 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
     title:"Menu"
-    leftPadding:10
+
-    rightPadding:10
+    FluMenu {
-    bottomPadding:20
+        id:menu
-    spacing: 0
+        title: qsTr("File")
+        Action { text: qsTr("New...")}
+        Action { text: qsTr("Open...") }
+        Action { text: qsTr("Save") }
+        FluMenuSeparator { }
+        Action {
+            text: qsTr("Quit")
+            onTriggered: {
+                showError("Quit")
+            }
+        }
+        Action {
+            text: qsTr("Disable")
+            enabled:false
+            onTriggered: {
+                showError("Disable")
+            }
+        }
+        FluMenuSeparator { }
+        Action { text: qsTr("Check");checkable: true;checked: true}
+        FluMenu{
+            title: "Save As..."
+            Action { text: qsTr("Doc") }
+            Action { text: qsTr("PDF") }
+        }
+    }
+
 
     FluArea{
         Layout.fillWidth: true
@@ -26,28 +52,19 @@ FluScrollablePage{
                 left:parent.left
             }
 
+            FluText{
+                text:"Menu"
+            }
+
             FluButton{
-                text:"左击菜单"
+                text:"Show Menu Popup"
                 Layout.topMargin: 20
                 onClicked:{
                     menu.popup()
                 }
             }
 
-            FluButton{
+
-                text:"右击菜单"
-                Layout.topMargin: 20
-                onClicked: {
-                    showSuccess("请按鼠标右击")
-                }
-                MouseArea{
-                    anchors.fill: parent
-                    acceptedButtons: Qt.RightButton
-                    onClicked: {
-                        menu.popup()
-                    }
-                }
-            }
         }
     }
 
@@ -65,7 +82,7 @@ FluScrollablePage{
     FluMenuItem:{
         text:"修改"
         onClicked: {
-            showInfo"修改")
+            showInfo("修改")
         }
     }
 }
@@ -73,20 +90,78 @@ menu.popup()
 '
     }
 
-    FluMenu{
+
-        id:menu
+    FluArea{
-        FluMenuItem{
+        Layout.fillWidth: true
-            text:"删除"
+        height: 100
-            onClicked: {
+        paddings: 10
-                showError("删除")
+        Layout.topMargin: 20
+        Column{
+            spacing: 15
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left:parent.left
             }
-        }
+
-        FluMenuItem{
+            FluText{
-            text:"修改"
+                text:"MenuBar"
-            onClicked: {
-                showInfo("修改")
             }
+
+            FluMenuBar {
+                id:menu_bar
+                FluMenu {
+                    title: qsTr("File")
+                    Action { text: qsTr("New...") }
+                    Action { text: qsTr("Open...") }
+                    Action { text: qsTr("Save") }
+                    FluMenuSeparator { }
+                    Action { text: qsTr("Quit") }
+                    Action {
+                        text: qsTr("Disable")
+                        enabled:false
+                    }
+                    FluMenu{
+                        title: "Save As..."
+                        Action { text: qsTr("Doc") }
+                        Action { text: qsTr("PDF") }
+                    }
+                }
+                FluMenu {
+                    title: qsTr("Edit")
+                    Action { text: qsTr("Cut") }
+                    Action { text: qsTr("Copy") }
+                    Action { text: qsTr("Paste") }
+                }
+                FluMenu {
+                    title: qsTr("Help")
+                    Action { text: qsTr("About") }
+                }
+            }
+
         }
     }
 
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluMenuBar{
+    id:menu
+    FluMenu:{
+        title:"File"
+        Action { text: qsTr("New...") }
+    }
+    FluMenu:{
+        title:"Edit"
+        Action { text: qsTr("Cut") }
+        Action { text: qsTr("Copy") }
+        Action { text: qsTr("Paste") }
+    }
+}
+menu.popup()
+'
+    }
+
+
+
+
 }

example/qml/page/T_MultiWindow.qml

@@ -1,9 +1,9 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
@@ -11,10 +11,6 @@ FluScrollablePage{
     property var loginPageRegister: registerForWindowResult("/login")
 
     title:"MultiWindow"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
 
     Connections{
         target: loginPageRegister
@@ -97,9 +93,9 @@ FluScrollablePage{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluWindow{
-  //launchMode: FluWindow.Standard
+  //launchMode: FluWindowType.Standard
-  //launchMode: FluWindow.SingleTask
+  //launchMode: FluWindowType.SingleTask
-     launchMode: FluWindow.SingleInstance
+     launchMode: FluWindowType.SingleInstance
 }
 '
     }

example/qml/page/T_Pagination.qml

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

example/qml/page/T_Pivot.qml

@@ -1,17 +1,13 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
     title:"Pivot"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
 
     FluArea{
         Layout.fillWidth: true
@@ -80,5 +76,4 @@ FluScrollablePage{
 }
 '
     }
-
 }

example/qml/page/T_Progress.qml

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

example/qml/page/T_QRCode.qml

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

example/qml/page/T_RadioButton.qml

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

example/qml/page/T_RatingControl.qml

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

example/qml/page/T_Rectangle.qml

@@ -1,22 +1,18 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
     title:"Rectangle"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
 
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 480
+        height: 460
         paddings: 10
 
         Column{
@@ -67,7 +63,7 @@ FluScrollablePage{
             }
             FluText{
                 text:"配合图片使用"
-                fontStyle: FluText.SubTitle
+                font: FluTextStyle.Subtitle
                 Layout.topMargin: 20
             }
             RowLayout{
@@ -118,18 +114,17 @@ FluScrollablePage{
                 }
             }
             FluRectangle{
-                width: 1080/5
+                width: 1920/5
-                height: 1439/5
+                height: 1200/5
-                radius:[25,25,25,25]
+                radius:[15,15,15,15]
                 Image {
                     asynchronous: true
-                    source: "qrc:/example/res/image/image_huoyin.webp"
+                    source: "qrc:/example/res/image/banner_1.jpg"
                     anchors.fill: parent
-                    sourceSize: Qt.size(width,height)
+                    sourceSize: Qt.size(2*width,2*height)
                 }
-                Layout.topMargin: 10
+                Layout.topMargin: 20
             }
-
         }
     }
     CodeExpander{

example/qml/page/T_RemoteLoader.qml

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

example/qml/page/T_Screenshot.qml

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

example/qml/page/T_Settings.qml

@@ -1,76 +1,68 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "qrc:///example/qml/global/"
+import "qrc:///example/qml/global"
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
     title:"Settings"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
 
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 136
+        height: 128
         paddings: 10
 
         ColumnLayout{
-            spacing: 10
+            spacing: 5
             anchors{
                 top: parent.top
                 left: parent.left
             }
             FluText{
                 text:lang.dark_mode
-                fontStyle: FluText.BodyStrong
+                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:"System",mode:FluThemeType.System},{title:"Light",mode:FluThemeType.Light},{title:"Dark",mode:FluThemeType.Dark}]
                 delegate:  FluRadioButton{
-                    selected : FluTheme.darkMode === modelData.mode
+                    checked : FluTheme.darkMode === modelData.mode
                     text:modelData.title
-                    onClicked:{
+                    clickListener:function(){
                         FluTheme.darkMode = modelData.mode
                     }
                 }
             }
-
-
         }
-
     }
 
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 168
+        height: 160
         paddings: 10
 
         ColumnLayout{
-            spacing: 10
+            spacing: 5
             anchors{
                 top: parent.top
                 left: parent.left
             }
-
             FluText{
                 text:lang.navigation_view_display_mode
-                fontStyle: FluText.BodyStrong
+                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:"Open",mode:FluNavigationViewType.Open},{title:"Compact",mode:FluNavigationViewType.Compact},{title:"Minimal",mode:FluNavigationViewType.Minimal},{title:"Auto",mode:FluNavigationViewType.Auto}]
-                delegate:  FluRadioButton{
+                delegate: FluRadioButton{
-                    selected : MainEvent.displayMode===modelData.mode
+                    checked : MainEvent.displayMode===modelData.mode
                     text:modelData.title
-                    onClicked:{
+                    clickListener:function(){
                         MainEvent.displayMode = modelData.mode
                     }
                 }
@@ -93,7 +85,7 @@ FluScrollablePage{
 
             FluText{
                 text:lang.locale
-                fontStyle: FluText.BodyStrong
+                font: FluTextStyle.BodyStrong
                 Layout.bottomMargin: 4
             }
 
@@ -101,11 +93,10 @@ FluScrollablePage{
                 spacing: 5
                 Repeater{
                     model: ["Zh","En"]
-                    delegate:  FluRadioButton{
+                    delegate: FluRadioButton{
-                        selected : appInfo.lang.objectName === modelData
+                        checked: appInfo.lang.objectName === modelData
                         text:modelData
-                        onClicked:{
+                        clickListener:function(){
-                            console.debug(modelData)
                             appInfo.changeLang(modelData)
                         }
                     }

example/qml/page/T_Slider.qml

@@ -1,17 +1,13 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
-import "../component"
+import "qrc:///example/qml/component"
 import FluentUI
 
 FluScrollablePage{
 
     title:"Slider"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
 
     FluArea{
         Layout.fillWidth: true
@@ -19,7 +15,6 @@ FluScrollablePage{
         paddings: 10
         Layout.topMargin: 20
         FluSlider{
-            value: 50
             anchors.verticalCenter: parent.verticalCenter
         }
     }
@@ -31,17 +26,14 @@ FluScrollablePage{
 }'
     }
 
-
     FluArea{
         Layout.fillWidth: true
         height: 200
         paddings: 10
         Layout.topMargin: 20
         FluSlider{
-            value: 50
+            orientation: Qt.Vertical
-            vertical:true
             anchors.left: parent.left
-            anchors.leftMargin: 20
             anchors.verticalCenter: parent.verticalCenter
         }
     }
@@ -49,7 +41,7 @@ FluScrollablePage{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluSlider{
-    vertical:true
+    orientation: Qt.Vertical
     value:50
 }'
     }

example/qml/page/T_StatusView.qml

@@ -1,17 +1,13 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
     title:"StatusView"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
 
     FluArea{
         id:layout_actions
@@ -25,36 +21,34 @@ FluScrollablePage{
                 id:btn_status_mode
                 Layout.preferredWidth: 140
                 text:"Loading"
-                items:[
+                FluMenuItem{
-                    FluMenuItem{
+                    text:"Loading"
-                        text:"Loading"
+                    onClicked: {
-                        onClicked: {
+                        btn_status_mode.text = text
-                            btn_status_mode.text = text
+                        status_view.statusMode = FluStatusViewType.Loading
-                            status_view.statusMode = FluStatusView.Loading
-                        }
-                    },
-                    FluMenuItem{
-                        text:"Empty"
-                        onClicked: {
-                            btn_status_mode.text = text
-                            status_view.statusMode = FluStatusView.Empty
-                        }
-                    },
-                    FluMenuItem{
-                        text:"Error"
-                        onClicked: {
-                            btn_status_mode.text = text
-                            status_view.statusMode = FluStatusView.Error
-                        }
-                    },
-                    FluMenuItem{
-                        text:"Success"
-                        onClicked: {
-                            btn_status_mode.text = text
-                            status_view.statusMode = FluStatusView.Success
-                        }
                     }
-                ]
+                }
+                FluMenuItem{
+                    text:"Empty"
+                    onClicked: {
+                        btn_status_mode.text = text
+                        status_view.statusMode = FluStatusViewType.Empty
+                    }
+                }
+                FluMenuItem{
+                    text:"Error"
+                    onClicked: {
+                        btn_status_mode.text = text
+                        status_view.statusMode = FluStatusViewType.Error
+                    }
+                }
+                FluMenuItem{
+                    text:"Success"
+                    onClicked: {
+                        btn_status_mode.text = text
+                        status_view.statusMode = FluStatusViewType.Success
+                    }
+                }
             }
         }
     }
@@ -81,7 +75,7 @@ FluScrollablePage{
         Layout.topMargin: -1
         code:'FluStatusView{
     anchors.fill: parent
-    statusMode: FluStatusView.Loading
+    statusMode: FluStatusViewType.Loading
     Rectangle{
         anchors.fill: parent
         color:FluTheme.primaryColor.dark

example/qml/page/T_TabView.qml

@@ -1,20 +1,16 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
-    title:"TabView"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
     property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
 
+    title:"TabView"
+
     Component{
         id:com_page
         Rectangle{
@@ -44,57 +40,53 @@ FluScrollablePage{
                 id:btn_tab_width_behavior
                 Layout.preferredWidth: 140
                 text:"Equal"
-                items:[
+                FluMenuItem{
-                    FluMenuItem{
+                    text:"Equal"
-                        text:"Equal"
+                    onClicked: {
-                        onClicked: {
+                        btn_tab_width_behavior.text = text
-                            btn_tab_width_behavior.text = text
+                        tab_view.tabWidthBehavior = FluTabViewType.Equal
-                            tab_view.tabWidthBehavior = FluTabView.Equal
-                        }
-                    },
-                    FluMenuItem{
-                        text:"SizeToContent"
-                        onClicked: {
-                            btn_tab_width_behavior.text = text
-                            tab_view.tabWidthBehavior = FluTabView.SizeToContent
-                        }
-                    },
-                    FluMenuItem{
-                        text:"Compact"
-                        onClicked: {
-                            btn_tab_width_behavior.text = text
-                            tab_view.tabWidthBehavior = FluTabView.Compact
-                        }
                     }
-                ]
+                }
+                FluMenuItem{
+                    text:"SizeToContent"
+                    onClicked: {
+                        btn_tab_width_behavior.text = text
+                        tab_view.tabWidthBehavior = FluTabViewType.SizeToContent
+                    }
+                }
+                FluMenuItem{
+                    text:"Compact"
+                    onClicked: {
+                        btn_tab_width_behavior.text = text
+                        tab_view.tabWidthBehavior = FluTabViewType.Compact
+                    }
+                }
             }
             FluDropDownButton{
                 id:btn_close_button_visibility
                 text:"Always"
                 Layout.preferredWidth: 120
-                items:[
+                FluMenuItem{
-                    FluMenuItem{
+                    text:"Nerver"
-                        text:"Nerver"
+                    onClicked: {
-                        onClicked: {
+                        btn_close_button_visibility.text = text
-                            btn_close_button_visibility.text = text
+                        tab_view.closeButtonVisibility = FluTabViewType.Nerver
-                            tab_view.closeButtonVisibility = FluTabView.Nerver
-                        }
-                    },
-                    FluMenuItem{
-                        text:"Always"
-                        onClicked: {
-                            btn_close_button_visibility.text = text
-                            tab_view.closeButtonVisibility = FluTabView.Always
-                        }
-                    },
-                    FluMenuItem{
-                        text:"OnHover"
-                        onClicked: {
-                            btn_close_button_visibility.text = text
-                            tab_view.closeButtonVisibility = FluTabView.OnHover
-                        }
                     }
-                ]
+                }
+                FluMenuItem{
+                    text:"Always"
+                    onClicked: {
+                        btn_close_button_visibility.text = text
+                        tab_view.closeButtonVisibility = FluTabViewType.Always
+                    }
+                }
+                FluMenuItem{
+                    text:"OnHover"
+                    onClicked: {
+                        btn_close_button_visibility.text = text
+                        tab_view.closeButtonVisibility = FluTabViewType.OnHover
+                    }
+                }
             }
         }
     }

example/qml/page/T_TableView.qml

@@ -1,88 +1,34 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
-FluScrollablePage{
+FluContentPage{
 
     title:"TableView"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
 
     Component.onCompleted: {
-        const columns = [
+        loadData(1,1000)
-                          {
-                              title: '姓名',
-                              dataIndex: 'name',
-                              width:100
-                          },
-                          {
-                              title: '年龄',
-                              dataIndex: 'age',
-                              width:100
-                          },
-                          {
-                              title: '住址',
-                              dataIndex: 'address',
-                              width:200
-                          },
-                          {
-                              title: '别名',
-                              dataIndex: 'nickname',
-                              width:100
-                          },
-                          {
-                              title: '操作',
-                              dataIndex: 'action',
-                              width:100
-                          },
-                      ];
-        table_view.columns = columns
-        loadData(1,10)
-    }
-
-    FluTableView{
-        id:table_view
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        pageCurrent:1
-        pageCount:10
-        itemCount: 1000
-        onRequestPage:
-            (page,count)=> {
-                loadData(page,count)
-            }
     }
 
     Component{
         id:com_action
         Item{
-            Row{
+            RowLayout{
                 anchors.centerIn: parent
-                spacing: 10
+                FluButton{
-                FluFilledButton{
+                    text:"删除"
-                    text:"编辑"
+                    onClicked: {
-                    topPadding:3
+                        table_view.closeEditor()
-                    bottomPadding:3
+                        tableModel.removeRow(row)
-                    leftPadding:6
-                    rightPadding:6
-                    onClicked:{
-                        console.debug(dataModel.index)
-                        showSuccess(JSON.stringify(dataObject))
                     }
                 }
                 FluFilledButton{
-                    text:"删除"
+                    text:"编辑"
-                    topPadding:3
+                    onClicked: {
-                    bottomPadding:3
+                        showSuccess(JSON.stringify(tableModel.getRow(row)))
-                    leftPadding:6
-                    rightPadding:6
-                    onClicked:{
-                        showError(JSON.stringify(dataObject))
                     }
                 }
             }
@@ -90,68 +36,134 @@ FluScrollablePage{
     }
 
     function loadData(page,count){
+        var numbers = [100, 300, 500, 1000];
+        function getRandomAge() {
+            var randomIndex = Math.floor(Math.random() * numbers.length);
+            return numbers[randomIndex];
+        }
+        var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"];
+        function getRandomName(){
+            var randomIndex = Math.floor(Math.random() * names.length);
+            return names[randomIndex];
+        }
+        var nicknames = ["复海大圣","混天大圣","移山大圣","通风大圣","驱神大圣","齐天大圣","平天大圣"]
+        function getRandomNickname(){
+            var randomIndex = Math.floor(Math.random() * nicknames.length);
+            return nicknames[randomIndex];
+        }
+        var addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
+        function getRandomAddresses(){
+            var randomIndex = Math.floor(Math.random() * addresses.length);
+            return addresses[randomIndex];
+        }
         const dataSource = []
         for(var i=0;i<count;i++){
             dataSource.push({
-                                name: "孙悟空%1".arg(((page-1)*count+i)),
+                                name: getRandomName(),
-                                age: 500,
+                                age:getRandomAge(),
-                                address: "钟灵毓秀的花果山,如神仙仙境的水帘洞",
+                                address: getRandomAddresses(),
-                                nickname: "齐天大圣",
+                                nickname: getRandomNickname(),
+                                longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
                                 action:com_action
                             })
         }
         table_view.dataSource = dataSource
     }
 
-    CodeExpander{
+    Component{
-        Layout.fillWidth: true
+        id:com_combobox
-        Layout.topMargin: 10
+        FluComboBox {
-        code:'FluTableView{
+            anchors.fill: parent
-    id:table_view
+            focus: true
-    Layout.fillWidth: true
+            currentIndex: display
-    Layout.topMargin: 20
+            editable: true
-    pageCurrent:1
+            model: ListModel {
-    pageCount:10
+                ListElement { text: 100 }
-    itemCount: 1000
+                ListElement { text: 300 }
-    onRequestPage:
+                ListElement { text: 500 }
-            (page,count)=> {
+                ListElement { text: 1000 }
-                loadData(page,count)
             }
-    Component.onCompleted: {
+            Component.onCompleted: {
-        const columns = [
+                currentIndex=[100,300,500,1000].findIndex((element) => element === Number(display))
-                          {
+                selectAll()
-                              title: "姓名",
+            }
-                              dataIndex: "name",
+            onCommit: {
-                              width:100
+                display = editText
-                          },
+                tableView.closeEditor()
-                          {
+            }
-                              title: "年龄",
+        }
-                              dataIndex: "age",
-                              width:100
-                          },
-                          {
-                              title: "住址",
-                              dataIndex: "address",
-                              width:200
-                          },
-                          {
-                              title: "别名",
-                              dataIndex: "nickname",
-                              width:100
-                          }
-                      ];
-        table_view.columns = columns
-        const dataSource = [
-                {
-                    name: "孙悟空”,
-                    age: 500,
-                    address:"钟灵毓秀的花果山,如神仙仙境的水帘洞",
-                    nickname:"齐天大圣"
-                }
-        ];
-        table_view.dataSource = columns
     }
-}'
+
+    FluTableView{
+        id:table_view
+        anchors{
+            left: parent.left
+            right: parent.right
+            top: parent.top
+            bottom: gagination.top
+        }
+        anchors.topMargin: 20
+        columnSource:[
+            {
+                title: '姓名',
+                dataIndex: 'name',
+                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

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

example/qml/page/T_TextBox.qml

@@ -1,18 +1,15 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
-    title:"TextBox"
+    launchMode: FluPageType.SingleInstance
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
 
+    title:"TextBox"
     FluArea{
         Layout.fillWidth: true
         height: 68
@@ -20,27 +17,22 @@ FluScrollablePage{
         Layout.topMargin: 20
 
         FluTextBox{
-            Layout.topMargin: 20
             placeholderText: "单行输入框"
-            Layout.preferredWidth: 300
+            disabled:text_box_switch.checked
-            disabled:text_box_switch.selected
+            cleanEnabled: true
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
         }
 
-        Row{
+        FluToggleSwitch{
-            spacing: 5
+            id:text_box_switch
             anchors{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            FluToggleSwitch{
+            text:"Disabled"
-                id:text_box_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
         }
     }
     CodeExpander{
@@ -58,27 +50,20 @@ FluScrollablePage{
         Layout.topMargin: 20
 
         FluPasswordBox{
-            Layout.topMargin: 20
             placeholderText: "请输入密码"
-            Layout.preferredWidth: 300
+            disabled:password_box_switch.checked
-            disabled:password_box_switch.selected
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
         }
-
+        FluToggleSwitch{
-        Row{
+            id:password_box_switch
-            spacing: 5
             anchors{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            FluToggleSwitch{
+            text:"Disabled"
-                id:password_box_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
         }
     }
     CodeExpander{
@@ -98,27 +83,21 @@ FluScrollablePage{
 
         FluMultilineTextBox{
             id:multiine_textbox
-            Layout.topMargin: 20
             placeholderText: "多行输入框"
-            Layout.preferredWidth: 300
+            disabled:text_box_multi_switch.checked
-            disabled:text_box_multi_switch.selected
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
         }
 
-        Row{
+        FluToggleSwitch{
-            spacing: 5
+            id:text_box_multi_switch
             anchors{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            FluToggleSwitch{
+            text:"Disabled"
-                id:text_box_multi_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
         }
     }
     CodeExpander{
@@ -129,36 +108,27 @@ FluScrollablePage{
 }'
     }
 
-
     FluArea{
         Layout.fillWidth: true
         height: 68
         paddings: 10
         Layout.topMargin: 20
-
         FluAutoSuggestBox{
-            Layout.topMargin: 20
             placeholderText: "AutoSuggestBox"
-            Layout.preferredWidth: 300
             items:generateRandomNames(100)
-            disabled:text_box_suggest_switch.selected
+            disabled:text_box_suggest_switch.checked
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
         }
-
+        FluToggleSwitch{
-        Row{
+            id:text_box_suggest_switch
-            spacing: 5
             anchors{
                 verticalCenter: parent.verticalCenter
                 right: parent.right
             }
-            FluToggleSwitch{
+            text:"Disabled"
-                id:text_box_suggest_switch
-                Layout.alignment: Qt.AlignRight
-                text:"Disabled"
-            }
         }
     }
     CodeExpander{
@@ -169,6 +139,34 @@ FluScrollablePage{
 }'
     }
 
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        paddings: 10
+        Layout.topMargin: 20
+        FluSpinBox{
+            disabled: spin_box_switch.checked
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+        }
+        FluToggleSwitch{
+            id:spin_box_switch
+            anchors{
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            text:"Disabled"
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluSpinBox{
+
+}'
+    }
 
     function generateRandomNames(numNames) {
         const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

example/qml/page/T_Theme.qml

@@ -1,22 +1,18 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
     title:"Theme"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
 
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 210
+        height: 270
         paddings: 10
         ColumnLayout{
             spacing:0
@@ -56,12 +52,12 @@ FluScrollablePage{
             }
             FluToggleSwitch{
                 Layout.topMargin: 5
-                selected: FluTheme.dark
+                checked: FluTheme.dark
-                clickFunc:function(){
+                onClicked: {
                     if(FluTheme.dark){
-                        FluTheme.darkMode = FluDarkMode.Light
+                        FluTheme.darkMode = FluThemeType.Light
                     }else{
-                        FluTheme.darkMode = FluDarkMode.Dark
+                        FluTheme.darkMode = FluThemeType.Dark
                     }
                 }
             }
@@ -71,11 +67,22 @@ FluScrollablePage{
             }
             FluToggleSwitch{
                 Layout.topMargin: 5
-                selected: FluTheme.nativeText
+                checked: FluTheme.nativeText
-                clickFunc:function(){
+                onClicked: {
                     FluTheme.nativeText = !FluTheme.nativeText
                 }
             }
+            FluText{
+                text:"开启动画效果"
+                Layout.topMargin: 20
+            }
+            FluToggleSwitch{
+                Layout.topMargin: 5
+                checked: FluTheme.enableAnimation
+                onClicked: {
+                    FluTheme.enableAnimation = !FluTheme.enableAnimation
+                }
+            }
         }
     }
     CodeExpander{

example/qml/page/T_TimePicker.qml

@@ -1,18 +1,14 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
     title:"TimePicker"
-    leftPadding:10
+    launchMode: FluPageType.SingleInstance
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
-
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
@@ -27,10 +23,13 @@ FluScrollablePage{
             }
 
             FluText{
-                text:"hourFormat=FluTimePicker.H"
+                text:"hourFormat=FluTimePickerType.H"
             }
 
             FluTimePicker{
+                onCurrentChanged: {
+                    showSuccess(current.toLocaleTimeString(Qt.locale("de_DE")))
+                }
             }
 
         }
@@ -57,11 +56,14 @@ FluScrollablePage{
             }
 
             FluText{
-                text:"hourFormat=FluTimePicker.H"
+                text:"hourFormat=FluTimePickerType.HH"
             }
 
             FluTimePicker{
-                 hourFormat:FluTimePicker.HH
+                hourFormat:FluTimePickerType.HH
+                onCurrentChanged: {
+                    showSuccess(current.toLocaleTimeString(Qt.locale("de_DE")))
+                }
             }
 
         }
@@ -70,7 +72,7 @@ FluScrollablePage{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'FluTimePicker{
-    hourFormat:FluTimePicker.HH
+    hourFormat:FluTimePickerType.HH
 }'
     }
 

example/qml/page/T_Timeline.qml

@@ -0,0 +1,170 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import FluentUI
+import "qrc:///example/qml/component"
+
+FluScrollablePage{
+
+    title:"Timeline"
+
+    Component{
+        id:com_dot
+        Rectangle{
+            width: 16
+            height: 16
+            radius: 8
+            border.width: 4
+            border.color: FluTheme.dark ? FluColors.Teal.lighter : FluColors.Teal.dark
+        }
+    }
+
+    Component{
+        id:com_lable
+        FluText{
+            wrapMode: Text.WrapAnywhere
+            font.bold: true
+            horizontalAlignment: isRight ? Qt.AlignRight : Qt.AlignLeft
+            text: modelData.lable
+            color: FluTheme.dark ? FluColors.Teal.lighter : FluColors.Teal.dark
+            MouseArea{
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    showSuccess(modelData.lable)
+                }
+            }
+        }
+    }
+
+    Component{
+        id:com_text
+        FluText{
+            wrapMode: Text.WrapAnywhere
+            horizontalAlignment: isRight ? Qt.AlignRight : Qt.AlignLeft
+            text: modelData.text
+            font.bold: true
+            linkColor: FluTheme.dark ? FluColors.Teal.lighter : FluColors.Teal.dark
+            onLinkActivated:
+                (link)=> {
+                    Qt.openUrlExternally(link)
+                }
+            onLinkHovered:
+                (link)=> {
+                    if(link === ""){
+                        FluTools.restoreOverrideCursor()
+                    }else{
+                        FluTools.setOverrideCursor(Qt.PointingHandCursor)
+                    }
+                }
+        }
+    }
+
+    ListModel{
+        id:list_model
+        ListElement{
+            lable:"2013-09-01"
+            text:"考上中国皮城大学，杰斯武器工坊专业"
+        }
+        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:"2020-06-01"
+            text:"由于某个项目紧急，临时加入Qt项目组（就因为大学学了点C++），本来是想进去打个酱油，到后面竟然成开发主力，坑啊"
+        }
+        ListElement{
+            lable:"2022-08-01"
+            text:"额，被老板卖到甲方公司，走时老板还问我想不想去，我说：'哪里工资高就去哪里'，老板：'无语'"
+        }
+        ListElement{
+            lable:"2023-02-28"
+            text:"开发FluentUI组件库"
+        }
+        ListElement{
+            lable:"2023-03-28（富文本展示）"
+            text:'将FluentUI源码开源到<a href="https://github.com/zhuzichu520/FluentUI">github</a>，并发布视频到<a href="https://www.bilibili.com/video/BV1mg4y1M71w">B站</a>'
+            lableDelegate:()=>com_lable
+            textDelegate:()=>com_text
+            dot:()=>com_dot
+        }
+    }
+
+    RowLayout{
+        spacing: 20
+        Layout.topMargin: 20
+        FluTextBox{
+            id:text_box
+            text:"Technical testing 2015-09-01"
+        }
+        FluFilledButton{
+            text:"Append"
+            onClicked: {
+                list_model.append({text:text_box.text})
+            }
+        }
+        FluFilledButton{
+            text:"clear"
+            onClicked: {
+                list_model.clear()
+            }
+        }
+    }
+
+    RowLayout{
+        Layout.topMargin: 10
+        FluText{
+            text:"mode:"
+        }
+        FluDropDownButton{
+            id:btn_mode
+            Layout.preferredWidth: 100
+            text:"Alternate"
+            FluMenuItem{
+                text:"Left"
+                onClicked: {
+                    btn_mode.text = text
+                    time_line.mode = FluTimelineType.Left
+                }
+            }
+            FluMenuItem{
+                text:"Right"
+                onClicked: {
+                    btn_mode.text = text
+                    time_line.mode = FluTimelineType.Right
+                }
+            }
+            FluMenuItem{
+                text:"Alternate"
+                onClicked: {
+                    btn_mode.text = text
+                    time_line.mode = FluTimelineType.Alternate
+                }
+            }
+        }
+    }
+
+    FluTimeline{
+        id:time_line
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        Layout.bottomMargin: 20
+        mode: FluTimelineType.Alternate
+        model:list_model
+    }
+
+}

example/qml/page/T_ToggleSwitch.qml

@@ -1,17 +1,13 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
     title:"ToggleSwitch"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
 
     FluArea{
         Layout.fillWidth: true
@@ -22,10 +18,25 @@ FluScrollablePage{
             spacing: 30
             anchors.verticalCenter: parent.verticalCenter
             FluToggleSwitch{
+                disabled: toggle_switch.checked
             }
             FluToggleSwitch{
-                text:"Text"
+                disabled: toggle_switch.checked
+                text:"Right"
             }
+            FluToggleSwitch{
+                disabled: toggle_switch.checked
+                text:"Left"
+                textRight: false
+            }
+        }
+        FluToggleSwitch{
+            id:toggle_switch
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text:"Disabled"
         }
     }
     CodeExpander{

example/qml/page/T_Tooltip.qml

@@ -1,17 +1,13 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
     title:"Tooltip"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
 
     FluText{
         Layout.topMargin: 20

example/qml/page/T_Tour.qml

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

example/qml/page/T_TreeView.qml

@@ -1,17 +1,13 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage {
 
     title:"TreeView"
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
-    spacing: 0
 
     function randomName() {
         var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]
@@ -64,44 +60,42 @@ FluScrollablePage {
                 id:btn_selection_model
                 Layout.preferredWidth: 140
                 text:"None"
-                items:[
+                FluMenuItem{
-                    FluMenuItem{
+                    text:"None"
-                        text:"None"
+                    onClicked: {
-                        onClicked: {
+                        btn_selection_model.text = text
-                            btn_selection_model.text = text
+                        tree_view.selectionMode = FluTabViewType.Equal
-                            tree_view.selectionMode = FluTabView.Equal
-                        }
-                    },
-                    FluMenuItem{
-                        text:"Single"
-                        onClicked: {
-                            btn_selection_model.text = text
-                            tree_view.selectionMode = FluTabView.SizeToContent
-                        }
-                    },
-                    FluMenuItem{
-                        text:"Muiltple"
-                        onClicked: {
-                            btn_selection_model.text = text
-                            tree_view.selectionMode = FluTabView.Compact
-                        }
                     }
-                ]
+                }
+                FluMenuItem{
+                    text:"Single"
+                    onClicked: {
+                        btn_selection_model.text = text
+                        tree_view.selectionMode = FluTabViewType.SizeToContent
+                    }
+                }
+                FluMenuItem{
+                    text:"Muiltple"
+                    onClicked: {
+                        btn_selection_model.text = text
+                        tree_view.selectionMode = FluTabViewType.Compact
+                    }
+                }
             }
             FluFilledButton{
                 text:"获取选中的数据"
                 onClicked: {
-                    if(tree_view.selectionMode === FluTreeView.None){
+                    if(tree_view.selectionMode === FluTreeViewType.None){
                         showError("当前非选择模式,没有选中的数据")
                     }
-                    if(tree_view.selectionMode === FluTreeView.Single){
+                    if(tree_view.selectionMode === FluTreeViewType.Single){
                         if(!tree_view.signleData()){
                             showError("没有选中数据")
                             return
                         }
                         showSuccess(tree_view.signleData().text)
                     }
-                    if(tree_view.selectionMode === FluTreeView.Multiple){
+                    if(tree_view.selectionMode === FluTreeViewType.Multiple){
                         if(tree_view.multipData().length===0){
                             showError("没有选中数据")
                             return

example/qml/page/T_Typography.qml

@@ -1,19 +1,14 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
 import FluentUI
 
 FluContentPage {
 
-    title: "Typography"
+    property real textScale: 1
-    property int textSize: FluTheme.textSize
-    leftPadding:10
-    rightPadding:10
-    bottomPadding:20
 
-    Component.onCompleted: {
+    title: "Typography"
-        slider.seek(0)
+    rightPadding: 10
-    }
 
     FluArea{
         anchors{
@@ -26,53 +21,55 @@ FluContentPage {
         paddings: 10
         ColumnLayout{
             spacing: 0
+            scale: textScale
+            transformOrigin: Item.TopLeft
             FluText{
+                id:text_Display
                 text:"Display"
                 padding: 0
-                pixelSize: textSize
+                font: FluTextStyle.Display
-                fontStyle: FluText.Display
             }
             FluText{
+                id:text_TitleLarge
                 text:"Title Large"
                 padding: 0
-                pixelSize: textSize
+                font: FluTextStyle.TitleLarge
-                fontStyle: FluText.TitleLarge
             }
             FluText{
+                id:text_Title
                 text:"Title"
                 padding: 0
-                pixelSize: textSize
+                font: FluTextStyle.Title
-                fontStyle: FluText.Title
             }
             FluText{
+                id:text_Subtitle
                 text:"Subtitle"
                 padding: 0
-                pixelSize: textSize
+                font: FluTextStyle.Subtitle
-                fontStyle: FluText.SubTitle
             }
             FluText{
+                id:text_BodyStrong
                 text:"Body Strong"
                 padding: 0
-                pixelSize: textSize
+                font: FluTextStyle.BodyStrong
-                fontStyle: FluText.BodyStrong
             }
             FluText{
+                id:text_Body
                 text:"Body"
                 padding: 0
-                pixelSize: textSize
+                font: FluTextStyle.Body
-                fontStyle: FluText.Body
             }
             FluText{
+                id:text_Caption
                 text:"Caption"
                 padding: 0
-                pixelSize: textSize
+                font: FluTextStyle.Caption
-                fontStyle: FluText.Caption
             }
         }
 
         FluSlider{
             id:slider
-            vertical:true
+            orientation: Qt.Vertical
             anchors{
                 right: parent.right
                 rightMargin: 45
@@ -80,7 +77,7 @@ FluContentPage {
                 topMargin: 30
             }
             onValueChanged:{
-                textSize = value/100*6+FluTheme.textSize
+                textScale = 1+value/100
             }
         }
     }

example/qml/page/T_Watermark.qml

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

example/qml/window/AboutWindow.qml

@@ -1,29 +1,21 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
+import "qrc:///example/qml/component"
 
-FluWindow {
+CustomWindow {
 
     id:window
     title:"关于"
     width: 600
     height: 600
-    minimumWidth: 600
+    fixSize: true
-    minimumHeight: 600
+    launchMode: FluWindowType.SingleTask
-    maximumWidth: 600
-    maximumHeight: 600
-    launchMode: FluWindow.SingleTask
-
-    FluAppBar{
-        id:appbar
-        title:"关于"
-        width:parent.width
-    }
 
     ColumnLayout{
         anchors{
-            top: appbar.bottom
+            top: parent.top
             left: parent.left
             right: parent.right
         }
@@ -34,11 +26,17 @@ FluWindow {
             spacing: 14
             FluText{
                 text:"FluentUI"
-                fontStyle: FluText.Title
+                font: FluTextStyle.Title
+                MouseArea{
+                    anchors.fill: parent
+                    onClicked: {
+                        FluApp.navigate("/")
+                    }
+                }
             }
             FluText{
                 text:"v%1".arg(appInfo.version)
-                fontStyle: FluText.Body
+                font: FluTextStyle.Body
                 Layout.alignment: Qt.AlignBottom
             }
         }
@@ -113,6 +111,7 @@ FluWindow {
 
         RowLayout{
             spacing: 14
+            Layout.topMargin: 20
             Layout.leftMargin: 15
             FluText{
                 text:"捐赠："
@@ -124,15 +123,15 @@ FluWindow {
             Layout.preferredHeight: 252
             Row{
                 anchors.horizontalCenter: parent.horizontalCenter
-                spacing: 60
+                spacing: 30
                 Image{
-                    width: 164.55
+                    width: 250
-                    height: 224.25
+                    height: 250
                     source: "qrc:/example/res/image/qrcode_wx.jpg"
                 }
                 Image{
-                    width: 162
+                    width: 250
-                    height: 252
+                    height: 250
                     source: "qrc:/example/res/image/qrcode_zfb.jpg"
                 }
             }
@@ -141,12 +140,11 @@ FluWindow {
         RowLayout{
             spacing: 14
             Layout.leftMargin: 15
+            Layout.topMargin: 20
             FluText{
                 id:text_desc
                 text:"个人开发，维护不易，你们的捐赠就是我继续更新的动力！\n有什么问题提Issues，只要时间充足我就会解决的！！"
             }
         }
-
-
     }
 }

example/qml/window/ChatWindow.qml

@@ -1,261 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Controls
-import FluentUI
-import Controller
-import QtQuick.Dialogs
-
-FluWindow {
-
-    title:"ChatGPT"
-    width: 680
-    height: 600
-    minimumWidth: 500
-    minimumHeight: 600
-
-    onInitArgument:
-        (argument)=>{
-            scrollview.focus = true
-        }
-
-    ChatController{
-        id:controller
-
-        onResponseDataChanged: {
-            appendMessage(false,responseData)
-        }
-
-    }
-
-    ListModel{
-        id:model_message
-        ListElement{
-            isMy:false
-            text:"欢迎使用ChatGPT"
-        }
-        ListElement{
-            isMy:true
-            text:"好的，3Q"
-        }
-    }
-
-    FluAppBar{
-        id:appbar
-        title:"ChatGPT"
-        width:parent.width
-    }
-
-    Component{
-        id:com_text
-        TextEdit {
-            id:item_text
-            text: message
-            wrapMode: Text.WrapAnywhere
-            readOnly: true
-            selectByMouse: true
-            selectByKeyboard: true
-            selectedTextColor: Qt.rgba(51,153,255,1)
-            color:FluColors.Black
-            selectionColor: {
-                if(FluTheme.dark){
-                    return FluTheme.primaryColor.lighter
-                }else{
-                    return FluTheme.primaryColor.dark
-                }
-            }
-            width: Math.min(list_message.width-200,600,implicitWidth)
-            TapHandler{
-                acceptedButtons: Qt.RightButton
-                onTapped: {
-                    menu_item.showMenu(item_text.selectedText)
-                }
-            }
-        }
-    }
-
-    FluArea{
-        id:layout_content
-        anchors{
-            top: appbar.bottom
-            left: parent.left
-            right: parent.right
-            bottom: layout_bottom.top
-            margins: 10
-        }
-        color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(245/255,245/255,245/255,1)
-        ListView{
-            id:list_message
-            anchors.fill: parent
-            model:model_message
-            clip: true
-            ScrollBar.vertical: FluScrollBar {}
-            preferredHighlightBegin: 0
-            preferredHighlightEnd: 0
-            highlightMoveDuration: 0
-            header:Item{
-                width: list_message.width
-                height:20
-            }
-            footer:Item{
-                width: list_message.width
-                height:20
-            }
-            delegate: Item{
-                width: ListView.view.width
-                height: childrenRect.height
-
-                FluRectangle{
-                    id:item_avatar
-                    width: 30
-                    height: 30
-                    radius:[15,15,15,15]
-                    anchors{
-                        right: isMy ? parent.right : undefined
-                        rightMargin: isMy ? 20 : undefined
-                        left: isMy ? undefined : parent.left
-                        leftMargin: isMy ? undefined : 20
-                        top:parent.top
-                    }
-                    Image {
-                        asynchronous: true
-                        anchors.fill: parent
-                        sourceSize: Qt.size(100,100)
-                        source: isMy ? "qrc:/example/res/svg/avatar_2.svg" : "qrc:/example/res/image/logo_openai.png"
-                    }
-                }
-
-                Rectangle{
-                    id:item_layout_content
-                    color: isMy ? "#FF95EC69" : "#FFFFFF"
-                    width: item_msg_loader.width+10
-                    height: item_msg_loader.height+10
-                    radius: 3
-                    anchors{
-                        top: item_avatar.top
-                        right: isMy ? item_avatar.left : undefined
-                        rightMargin: isMy ? 10 : undefined
-                        left: isMy ? undefined : item_avatar.right
-                        leftMargin: isMy ? undefined : 10
-
-                    }
-
-                    Loader{
-                        id:item_msg_loader
-                        property var message: model.text
-                        anchors.centerIn: parent
-                        sourceComponent: com_text
-                    }
-                }
-
-
-                Item{
-                    id:item_layout_bottom
-                    width: parent.width
-                    anchors.top: item_layout_content.bottom
-                    height: 20
-                }
-            }
-        }
-    }
-
-    FluArea{
-        id:layout_bottom
-        height: 90
-        anchors{
-            bottom: parent.bottom
-            bottomMargin: 10
-            left: parent.left
-            right: parent.right
-            leftMargin: 10
-            rightMargin: 10
-        }
-
-
-        ScrollView{
-            id:scrollview
-            anchors{
-                bottom: parent.bottom
-                left: parent.left
-                right: button_send.left
-                bottomMargin: 10
-                leftMargin: 10
-                rightMargin: 10
-            }
-            height: Math.min(textbox.implicitHeight,64)
-            FluMultilineTextBox{
-                id:textbox
-                focus:true
-                placeholderText: "请输入消息"
-            }
-        }
-
-        FluFilledButton{
-            id:button_send
-            text:controller.isLoading ? timer_loading.loadingText :"发送"
-            anchors{
-                bottom: parent.bottom
-                right: parent.right
-                bottomMargin: 10
-                rightMargin: 10
-            }
-            width: 60
-            disabled: controller.isLoading
-            onClicked:{
-                var text = textbox.text
-                appendMessage(true,text)
-                controller.sendMessage(text)
-                textbox.clear()
-            }
-
-            Timer{
-                id:timer_loading
-                property int count : 0
-                property string loadingText : ""
-                interval: 500
-                running: controller.isLoading
-                repeat: true
-                onTriggered: {
-                    switch(count%3){
-                    case 0:
-                        loadingText = "."
-                        break
-                    case 1:
-                        loadingText = ".."
-                        break
-                    case 2:
-                        loadingText = "..."
-                        break
-                    default:
-                        loadingText = ""
-                        break
-                    }
-                    count++
-                }
-            }
-
-        }
-    }
-
-    FluMenu{
-        id:menu_item
-        focus: false
-        property string selectedText: ""
-        FluMenuItem{
-            text:"复制"
-            onClicked: {
-                controller.clipText(menu_item.selectedText)
-                showSuccess("复制成功")
-            }
-        }
-        function showMenu(text){
-            menu_item.selectedText = text
-            menu_item.popup()
-        }
-    }
-
-    function appendMessage(isMy,text){
-        model_message.append({isMy:isMy,text:text})
-        list_message.positionViewAtEnd()
-    }
-
-}

example/qml/window/HotloadWindow.qml

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

example/qml/window/LoginWindow.qml

@@ -1,18 +1,16 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
 import FluentUI
+import "qrc:///example/qml/component"
 
-FluWindow {
+CustomWindow {
 
     id:window
     title:"登录"
     width: 400
     height: 400
-    minimumWidth: 400
+    fixSize: true
-    minimumHeight: 400
-    maximumWidth: 400
-    maximumHeight: 400
 
     onInitArgument:
         (argument)=>{
@@ -20,12 +18,6 @@ FluWindow {
             textbox_password.focus =  true
         }
 
-    FluAppBar{
-        id:appbar
-        title:"登录"
-        width:parent.width
-    }
-
     ColumnLayout{
         anchors{
             left: parent.left

example/qml/window/MainWindow.qml

@@ -1,12 +1,14 @@
-import QtQuick
+import QtQuick
 import QtQuick.Window
 import QtQuick.Controls
 import QtQuick.Layouts
 import Qt.labs.platform
 import FluentUI
-import "qrc:///example/qml/global/"
+import example
+import "qrc:///example/qml/component"
+import "qrc:///example/qml/global"
 
-FluWindow {
+CustomWindow {
 
     id:window
     title: "FluentUI"
@@ -14,28 +16,18 @@ FluWindow {
     height: 640
     closeDestory:false
     minimumWidth: 520
-    minimumHeight: 460
+    minimumHeight: 200
+    appBarVisible: false
+    launchMode: FluWindowType.SingleTask
 
     closeFunc:function(event){
-        close_app.open()
+        dialog_close.open()
         event.accepted = false
     }
 
-    Connections{
+    Component.onCompleted: {
-        target: appInfo
+        FluTools.setQuitOnLastWindowClosed(false)
-        function onActiveWindow(){
+        tour.open()
-            window.show()
-            window.raise()
-            window.requestActivate()
-        }
-    }
-
-    FluAppBar{
-        id:appbar
-        z:9
-        showDark: true
-        width:parent.width
-        darkText: lang.dark_mode
     }
 
     SystemTrayIcon {
@@ -47,7 +39,7 @@ FluWindow {
             MenuItem {
                 text: "退出"
                 onTriggered: {
-                    window.destoryWindow()
+                    window.deleteWindow()
                     FluApp.closeApp()
                 }
             }
@@ -63,49 +55,226 @@ FluWindow {
     }
 
     FluContentDialog{
-        id:close_app
+        id:dialog_close
         title:"退出"
         message:"确定要退出程序吗？"
         negativeText:"最小化"
-        buttonFlags: FluContentDialog.NeutralButton | FluContentDialog.NegativeButton | FluContentDialog.PositiveButton
+        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.NeutralButton | FluContentDialogType.PositiveButton
         onNegativeClicked:{
-            system_tray.showMessage("友情提示","FluentUI已隐藏至托盘,点击托盘可再次激活窗口");
             window.hide()
+            system_tray.showMessage("友情提示","FluentUI已隐藏至托盘,点击托盘可再次激活窗口");
         }
         positiveText:"退出"
         neutralText:"取消"
         onPositiveClicked:{
-            window.destoryWindow()
+            window.deleteWindow()
             FluApp.closeApp()
         }
-
     }
 
-    FluNavigationView{
+    Flipable{
-        id:nav_view
+        id:flipable
         anchors.fill: parent
-        items: ItemsOriginal
+        property bool flipped: false
-        footerItems:ItemsFooter
+        property real flipAngle: 0
-        z:11
+        transform: Rotation {
-        displayMode:MainEvent.displayMode
+            id: rotation
-        logo: "qrc:/example/res/image/favicon.ico"
+            origin.x: flipable.width/2
-        title:"FluentUI"
+            origin.y: flipable.height/2
-        autoSuggestBox:FluAutoSuggestBox{
+            axis { x: 0; y: 1; z: 0 }
-            width: 280
+            angle: flipable.flipAngle
-            anchors.centerIn: parent
+
-            iconSource: FluentIcons.Search
+        }
-            items: ItemsOriginal.getSearchData()
+        states: State {
-            placeholderText: lang.search
+            PropertyChanges { target: flipable; flipAngle: 180 }
-            onItemClicked:
+            when: flipable.flipped
-                (data)=>{
+        }
-                    ItemsOriginal.startPageByItem(data)
+        transitions: Transition {
+            NumberAnimation { target: flipable; property: "flipAngle"; duration: 1000 ; easing.type: Easing.OutCubic}
+        }
+        back: Item{
+            anchors.fill: flipable
+            visible: flipable.flipAngle !== 0
+            FluAppBar {
+                anchors {
+                    top: parent.top
+                    left: parent.left
+                    right: parent.right
                 }
+                darkText: lang.dark_mode
+                showDark: true
+                z:7
+                darkClickListener:(button)=>handleDarkChanged(button)
+            }
+            Row{
+                z:8
+                anchors{
+                    top: parent.top
+                    left: parent.left
+                    topMargin: FluTools.isMacos() ? 20 : 5
+                    leftMargin: 5
+                }
+                FluIconButton{
+                    iconSource: FluentIcons.ChromeBack
+                    width: 30
+                    height: 30
+                    iconSize: 13
+                    onClicked: {
+                        flipable.flipped = false
+                    }
+                }
+                FluIconButton{
+                    iconSource: FluentIcons.Sync
+                    width: 30
+                    height: 30
+                    iconSize: 13
+                    onClicked: {
+                        loader.reload()
+                    }
+                }
+            }
+
+            FluRemoteLoader{
+                id:loader
+                lazy: true
+                anchors.fill: parent
+                //                source: "http://localhost:9000/RemoteComponent.qml"
+                source: "https://zhu-zichu.gitee.io/RemoteComponent.qml"
+            }
         }
-        Component.onCompleted: {
+        front: Item{
-            ItemsOriginal.navigationView = nav_view
+            id:page_front
-            ItemsFooter.navigationView = nav_view
+            visible: flipable.flipAngle !== 180
-            nav_view.setCurrentIndex(0)
+            anchors.fill: flipable
+            FluAppBar {
+                id:app_bar_front
+                anchors {
+                    top: parent.top
+                    left: parent.left
+                    right: parent.right
+                }
+                darkText: lang.dark_mode
+                showDark: true
+                darkClickListener:(button)=>handleDarkChanged(button)
+                z:7
+            }
+            FluNavigationView{
+                property int clickCount: 0
+                id:nav_view
+                width: parent.width
+                height: parent.height
+                z:999
+                //Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式
+                pageMode: FluNavigationViewType.Stack
+                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存（推荐）
+                //                pageMode: FluNavigationViewType.NoStack
+                items: ItemsOriginal
+                footerItems:ItemsFooter
+                topPadding:FluTools.isMacos() ? 20 : 0
+                displayMode:MainEvent.displayMode
+                logo: "qrc:/example/res/image/favicon.ico"
+                title:"FluentUI"
+                onLogoClicked:{
+                    clickCount += 1
+                    showSuccess("点击%1次".arg(clickCount))
+                    if(clickCount === 5){
+                        loader.reload()
+                        flipable.flipped = true
+                        clickCount = 0
+                    }
+                }
+                autoSuggestBox:FluAutoSuggestBox{
+                    width: 280
+                    anchors.centerIn: parent
+                    iconSource: FluentIcons.Search
+                    items: ItemsOriginal.getSearchData()
+                    placeholderText: lang.search
+                    onItemClicked:
+                        (data)=>{
+                            ItemsOriginal.startPageByItem(data)
+                        }
+                }
+                Component.onCompleted: {
+                    ItemsOriginal.navigationView = nav_view
+                    ItemsFooter.navigationView = nav_view
+                    setCurrentIndex(0)
+                }
+            }
         }
     }
 
+    Component{
+        id:com_reveal
+        CircularReveal{
+            id:reveal
+            target:window.contentItem
+            anchors.fill: parent
+            onAnimationFinished:{
+                //动画结束后释放资源
+                loader_reveal.sourceComponent = undefined
+            }
+            onImageChanged: {
+                changeDark()
+            }
+        }
+    }
+
+    Loader{
+        id:loader_reveal
+        anchors.fill: parent
+    }
+
+    function distance(x1,y1,x2,y2){
+        return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2))
+    }
+
+    function handleDarkChanged(button){
+        if(FluTools.isMacos() || !FluTheme.enableAnimation){
+            changeDark()
+        }else{
+            loader_reveal.sourceComponent = com_reveal
+            var target = window.contentItem
+            var pos = button.mapToItem(target,0,0)
+            var mouseX = pos.x
+            var mouseY = pos.y
+            var radius = Math.max(distance(mouseX,mouseY,0,0),distance(mouseX,mouseY,target.width,0),distance(mouseX,mouseY,0,target.height),distance(mouseX,mouseY,target.width,target.height))
+            var reveal = loader_reveal.item
+            reveal.start(reveal.width*Screen.devicePixelRatio,reveal.height*Screen.devicePixelRatio,Qt.point(mouseX,mouseY),radius)
+        }
+    }
+
+    function changeDark(){
+        if(FluTheme.dark){
+            FluTheme.darkMode = FluThemeType.Light
+        }else{
+            FluTheme.darkMode = FluThemeType.Dark
+        }
+    }
+
+    Shortcut {
+        sequence: "F5"
+        context: Qt.WindowShortcut
+        onActivated: {
+            if(flipable.flipped){
+                loader.reload()
+            }
+        }
+    }
+
+    Shortcut {
+        sequence: "F6"
+        context: Qt.WindowShortcut
+        onActivated: {
+            tour.open()
+        }
+    }
+
+    FluTour{
+        id:tour
+        steps:[
+            {title:"夜间模式",description: "这里可以切换夜间模式.",target:()=>app_bar_front.darkButton()},
+            {title:"隐藏彩蛋",description: "多点几下试试！！",target:()=>nav_view.logoButton()}
+        ]
+    }
+
 }

example/qml/window/MediaWindow.qml

@@ -1,35 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import FluentUI
-
-FluWindow {
-
-    title:"视频播放器"
-    width: 640
-    height: 480
-    minimumWidth: 640
-    minimumHeight: 480
-
-    onInitArgument:
-        (argument)=>{
-            player.source = argument.source
-        }
-
-    FluAppBar{
-        id:appbar
-        title:"视频播放器"
-        width:parent.width
-    }
-
-    FluMediaPlayer{
-        id:player
-        anchors{
-            left: parent.left
-            right: parent.right
-            top: appbar.bottom
-            bottom: parent.bottom
-        }
-    }
-
-}

example/qml/window/SingleInstanceWindow.qml

@@ -1,25 +1,17 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
+import "qrc:///example/qml/component"
 
-FluWindow {
+CustomWindow {
 
     id:window
     title:"SingleInstance"
     width: 500
     height: 600
-    minimumWidth: 500
+    fixSize: true
-    minimumHeight: 600
+    launchMode: FluWindowType.SingleInstance
-    maximumWidth: 500
-    maximumHeight: 600
-    launchMode: FluWindow.SingleInstance
-
-    FluAppBar{
-        id:appbar
-        title:"SingleInstance"
-        width:parent.width
-    }
 
     FluTextBox{
         anchors{
@@ -40,5 +32,4 @@ FluWindow {
         }
         text:"我是一个SingleInstance模式的窗口，如果我存在，我会销毁之前的窗口，并创建一个新窗口"
     }
-
 }

example/qml/window/SingleTaskWindow.qml

@@ -1,25 +1,17 @@
-import QtQuick
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
+import "qrc:///example/qml/component"
 
-FluWindow {
+CustomWindow {
 
     id:window
     title:"SingleTask"
     width: 500
     height: 600
-    minimumWidth: 500
+    fixSize: true
-    minimumHeight: 600
+    launchMode: FluWindowType.SingleTask
-    maximumWidth: 500
-    maximumHeight: 600
-    launchMode: FluWindow.SingleTask
-
-    FluAppBar{
-        id:appbar
-        title:"SingleTask"
-        width:parent.width
-    }
 
     FluText{
         anchors.centerIn: parent