update

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

.github/workflows/windows-mingw.yml

@@ -91,14 +91,14 @@ jobs:
         if: startsWith(github.event.ref, 'refs/tags/')
         uses: zhuzichu520/inno-setup-action@v1.0.1
         with:
-          filepath: ./action-cli/InstallerScript.iss
+          filepath: ./package/InstallerScript.iss
           
       - name: uploadRelease
         if: startsWith(github.event.ref, 'refs/tags/')
         uses: svenstaro/upload-release-action@v2
         with:
           repo_token: ${{ secrets.GITHUB_TOKEN }}
-          file: ./action-cli/installer.exe
+          file: ./package/installer.exe
           asset_name: ${{ env.fileName }}_${{ github.ref_name }}_${{ matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.exe
           tag: ${{ github.ref }}
           overwrite: true

.github/workflows/windows-qt5.yml

@@ -78,14 +78,14 @@ jobs:
         if: startsWith(github.event.ref, 'refs/tags/')
         uses: zhuzichu520/inno-setup-action@v1.0.1
         with:
-          filepath: ./action-cli/InstallerScript.iss
+          filepath: ./package/InstallerScript.iss
           
       - name: uploadRelease
         if: startsWith(github.event.ref, 'refs/tags/')
         uses: svenstaro/upload-release-action@v2
         with:
           repo_token: ${{ secrets.GITHUB_TOKEN }}
-          file: ./action-cli/installer.exe
+          file: ./package/installer.exe
           asset_name: ${{ env.fileName }}_${{ github.ref_name }}_${{ matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.exe
           tag: ${{ github.ref }}
           overwrite: true

.github/workflows/windows.yml

@@ -85,14 +85,14 @@ jobs:
         if: startsWith(github.event.ref, 'refs/tags/')
         uses: zhuzichu520/inno-setup-action@v1.0.1
         with:
-          filepath: ./action-cli/InstallerScript.iss
+          filepath: ./package/InstallerScript.iss
           
       - name: uploadRelease
         if: startsWith(github.event.ref, 'refs/tags/')
         uses: svenstaro/upload-release-action@v2
         with:
           repo_token: ${{ secrets.GITHUB_TOKEN }}
-          file: ./action-cli/installer.exe
+          file: ./package/installer.exe
           asset_name: ${{ env.fileName }}_${{ github.ref_name }}_${{ matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.exe
           tag: ${{ github.ref }}
           overwrite: true 

.gitignore

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

CMakeLists.txt

@@ -2,13 +2,13 @@ cmake_minimum_required(VERSION 3.20)
 
 project(FluentUI VERSION 1.0)
 
-if(MSVC)
+if (MSVC)
     #让Release也生成pdb文件
     set(CMAKE_SHARED_LINKER_FLAGS_RELEASE "${CMAKE_SHARED_LINKER_FLAGS_RELEASE} /DEBUG /OPT:REF /OPT:ICF")
     set(CMAKE_EXE_LINKER_FLAGS_RELEASE "${CMAKE_EXE_LINKER_FLAGS_RELEASE} /DEBUG /OPT:REF /OPT:ICF")
-endif()
+endif ()
 
-list(APPEND CMAKE_MODULE_PATH ${CMAKE_SOURCE_DIR}/.cmake/)
+list(APPEND CMAKE_MODULE_PATH ${CMAKE_CURRENT_LIST_DIR}/.cmake/)
 
 include(GetGitRevisionDescription)
 
@@ -22,8 +22,8 @@ add_subdirectory(src)
 
 #Release也支持日志打印代码位置
 target_compile_definitions(fluentuiplugin
-    PRIVATE
-    QT_MESSAGELOGCONTEXT
+        PRIVATE
+        QT_MESSAGELOGCONTEXT
 )
 
 if (FLUENTUI_BUILD_EXAMPLES)

example/CMakeLists.txt

@@ -1,6 +1,6 @@
 cmake_minimum_required(VERSION 3.20)
 
-project(example VERSION 1.0 LANGUAGES CXX)
+project(example VERSION 1.0)
 
 #配置通用编译
 set(CMAKE_CXX_STANDARD 17)
@@ -10,68 +10,68 @@ set(CMAKE_AUTORCC ON)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
 
 #判断FluentUI库类型
-if(FLUENTUI_BUILD_STATIC_LIB)
+if (FLUENTUI_BUILD_STATIC_LIB)
     add_definitions(-DFLUENTUI_BUILD_STATIC_LIB)
-endif()
+endif ()
 
 #设置可执行文件输出目录
 set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/${CMAKE_BUILD_TYPE})
 
-if(APPLE)
+if (APPLE)
     set(APPLICATION_DIR_PATH ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/${PROJECT_NAME}.app/Contents/MacOS)
-else()
+else ()
     set(APPLICATION_DIR_PATH ${CMAKE_RUNTIME_OUTPUT_DIRECTORY})
-endif()
+endif ()
 
 #导入Qt相关依赖包
 find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Quick Svg Network)
 find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Quick Svg Network)
 
 #添加国际化脚本
-find_program(QT_LUPDATE NAMES lupdate)
-find_program(QT_LRELEASE NAMES lrelease)
+find_program(QT_LUPDATE NAMES lupdate lupdate-qt6)
+find_program(QT_LRELEASE NAMES lrelease lrelease-qt6)
 file(GLOB TS_FILE_PATHS ${CMAKE_CURRENT_LIST_DIR}/ *.ts)
 add_custom_target(Script-UpdateTranslations
-    COMMAND ${QT_LUPDATE} ${CMAKE_CURRENT_LIST_DIR} -ts ${PROJECT_NAME}_en_US.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
-    COMMAND ${QT_LUPDATE} ${CMAKE_CURRENT_LIST_DIR} -ts ${PROJECT_NAME}_zh_CN.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
-    COMMAND ${QT_LRELEASE} ${PROJECT_NAME}_en_US.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
-    COMMAND ${QT_LRELEASE} ${PROJECT_NAME}_zh_CN.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
-    COMMAND ${CMAKE_COMMAND} -E make_directory ${APPLICATION_DIR_PATH}/i18n
-    COMMAND ${CMAKE_COMMAND} -E copy ${PROJECT_NAME}_en_US.qm ${PROJECT_NAME}_zh_CN.qm ${APPLICATION_DIR_PATH}/i18n
-    SOURCES ${TS_FILE_PATHS}
+        COMMAND ${QT_LUPDATE} ${CMAKE_CURRENT_LIST_DIR} -ts ${PROJECT_NAME}_en_US.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
+        COMMAND ${QT_LUPDATE} ${CMAKE_CURRENT_LIST_DIR} -ts ${PROJECT_NAME}_zh_CN.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
+        COMMAND ${QT_LRELEASE} ${PROJECT_NAME}_en_US.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
+        COMMAND ${QT_LRELEASE} ${PROJECT_NAME}_zh_CN.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
+        COMMAND ${CMAKE_COMMAND} -E make_directory ${APPLICATION_DIR_PATH}/i18n
+        COMMAND ${CMAKE_COMMAND} -E copy ${PROJECT_NAME}_en_US.qm ${PROJECT_NAME}_zh_CN.qm ${APPLICATION_DIR_PATH}/i18n
+        SOURCES ${TS_FILE_PATHS}
 )
 
 ##生成版本信息头文件
 set(HEADER_FILE_VERSION_PATH ${CMAKE_SOURCE_DIR}/${PROJECT_NAME}/Version.h)
 configure_file(
-    ${CMAKE_SOURCE_DIR}/.cmake/Version.h.in
-    ${HEADER_FILE_VERSION_PATH}
+        ${CMAKE_SOURCE_DIR}/.cmake/Version.h.in
+        ${HEADER_FILE_VERSION_PATH}
 )
 
 #遍历所有Cpp文件
 file(GLOB_RECURSE CPP_FILES *.cpp *.h)
-foreach(filepath ${CPP_FILES})
+foreach (filepath ${CPP_FILES})
     string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
     list(APPEND sources_files ${filename})
-endforeach(filepath)
+endforeach (filepath)
 
-if(WIN32)
+if (WIN32)
     list(APPEND sources_files "src/app_dmp.h")
-endif()
+endif ()
 
 #如果是Windows平台，则生成rc文件，还有inno setup脚本文件
 set(EXAMPLE_VERSION_RC_PATH "")
-if(WIN32)
+if (WIN32)
     set(EXAMPLE_VERSION_RC_PATH ${CMAKE_CURRENT_BINARY_DIR}/version_${PROJECT_NAME}.rc)
     configure_file(
-        ${CMAKE_SOURCE_DIR}/.cmake/version_exe.rc.in
-        ${EXAMPLE_VERSION_RC_PATH}
+            ${CMAKE_SOURCE_DIR}/.cmake/version_exe.rc.in
+            ${EXAMPLE_VERSION_RC_PATH}
     )
-configure_file(
-    ${CMAKE_SOURCE_DIR}/.cmake/InstallerScript.iss.in
-    ${CMAKE_SOURCE_DIR}/action-cli/InstallerScript.iss
-)
-endif()
+    configure_file(
+            ${CMAKE_SOURCE_DIR}/.cmake/InstallerScript.iss.in
+            ${CMAKE_SOURCE_DIR}/package/InstallerScript.iss
+    )
+endif ()
 
 #加快qrc编译
 qt_add_big_resources(QRC_RESOURCES ${PROJECT_NAME}.qrc)
@@ -80,34 +80,34 @@ set_property(SOURCE ${PROJECT_NAME}.qrc PROPERTY SKIP_AUTORCC ON)
 list(APPEND sources_files ${QRC_RESOURCES})
 
 #添加可执行文件
-if(WIN32)
+if (WIN32)
     list(APPEND sources_files ${EXAMPLE_VERSION_RC_PATH})
-endif()
-if(${QT_VERSION_MAJOR} GREATER_EQUAL 6)
+endif ()
+if (${QT_VERSION_MAJOR} GREATER_EQUAL 6)
     qt_add_executable(${PROJECT_NAME}
-        MANUAL_FINALIZATION
-        ${sources_files}
+            MANUAL_FINALIZATION
+            ${sources_files}
     )
-else()
+else ()
     add_executable(${PROJECT_NAME}
-        ${sources_files}
+            ${sources_files}
     )
-endif()
+endif ()
 add_dependencies(${PROJECT_NAME} Script-UpdateTranslations)
 
 #复制程序运行所需要的动态库
-if(WIN32)
-    if(MSVC)
-        if(CMAKE_SIZEOF_VOID_P EQUAL 4)
+if (WIN32)
+    if (MSVC)
+        if (CMAKE_SIZEOF_VOID_P EQUAL 4)
             file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x86/*.dll)
-        elseif(CMAKE_SIZEOF_VOID_P EQUAL 8)
+        elseif (CMAKE_SIZEOF_VOID_P EQUAL 8)
             file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x64/*.dll)
-        endif()
-    elseif(MINGW)
+        endif ()
+    elseif (MINGW)
         file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/mingw/*.dll)
-    endif()
+    endif ()
     file(COPY ${3RDPARTY_DLL_DIR} DESTINATION ${CMAKE_RUNTIME_OUTPUT_DIRECTORY})
-endif()
+endif ()
 
 #复制FluentUI源码到运行目录下，用于脚手架生成
 file(MAKE_DIRECTORY ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/source/)
@@ -115,37 +115,37 @@ file(COPY ${CMAKE_SOURCE_DIR}/src/ DESTINATION ${APPLICATION_DIR_PATH}/source/)
 
 #导入component头文件,不然通过QML_NAMED_ELEMENT生成的c++类会找不到头文件报错
 target_include_directories(${PROJECT_NAME} PRIVATE
-    ${CMAKE_CURRENT_SOURCE_DIR}/src/component
+        ${CMAKE_CURRENT_SOURCE_DIR}/src/component
 )
 
 #如果是静态库则需要手动注册插件，导入FluentUI.h头文件
-if(FLUENTUI_BUILD_STATIC_LIB)
+if (FLUENTUI_BUILD_STATIC_LIB)
     target_include_directories(${PROJECT_NAME} PRIVATE
-        ${CMAKE_SOURCE_DIR}/src
+            ${CMAKE_SOURCE_DIR}/src
     )
-endif()
+endif ()
 
 #设置属性
 set_target_properties(${PROJECT_NAME} PROPERTIES
-    MACOSX_BUNDLE_GUI_IDENTIFIER my.${PROJECT_NAME}.com
-    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
-    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
-    MACOSX_BUNDLE TRUE
-    WIN32_EXECUTABLE TRUE
+        MACOSX_BUNDLE_GUI_IDENTIFIER my.${PROJECT_NAME}.com
+        MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
+        MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
+        MACOSX_BUNDLE TRUE
+        WIN32_EXECUTABLE TRUE
 )
 
 #Release也支持日志打印代码位置
 target_compile_definitions(${PROJECT_NAME}
-    PRIVATE
-    QT_MESSAGELOGCONTEXT
+        PRIVATE
+        QT_MESSAGELOGCONTEXT
 )
 
 #目标文件链接库
 target_link_libraries(${PROJECT_NAME} PRIVATE
-    Qt${QT_VERSION_MAJOR}::Quick
-    Qt${QT_VERSION_MAJOR}::Svg
-    Qt${QT_VERSION_MAJOR}::Network
-    fluentuiplugin
+        Qt${QT_VERSION_MAJOR}::Quick
+        Qt${QT_VERSION_MAJOR}::Svg
+        Qt${QT_VERSION_MAJOR}::Network
+        fluentuiplugin
 )
 
 #添加部署脚本
@@ -153,23 +153,23 @@ if (CMAKE_BUILD_TYPE MATCHES "Release")
     if (APPLE)
         find_program(QT_DEPLOY_QT NAMES macdeployqt)
         add_custom_target(Script-DeployRelease
-            COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_SOURCE_DIR}/dist
-            COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} ${CMAKE_SOURCE_DIR}/dist
-            COMMAND ${QT_DEPLOY_QT} ${CMAKE_SOURCE_DIR}/dist/${PROJECT_NAME}.app -qmldir=${CMAKE_CURRENT_LIST_DIR}
-            COMMENT "MacOs Deploying Qt Dependencies After Build........."
-            SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
-            WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
+                COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_SOURCE_DIR}/dist
+                COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} ${CMAKE_SOURCE_DIR}/dist
+                COMMAND ${QT_DEPLOY_QT} ${CMAKE_SOURCE_DIR}/dist/${PROJECT_NAME}.app -qmldir=${CMAKE_CURRENT_LIST_DIR}
+                COMMENT "MacOs Deploying Qt Dependencies After Build........."
+                SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
+                WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
         )
-    endif()
-    if(WIN32)
+    endif ()
+    if (WIN32)
         find_program(QT_DEPLOY_QT NAMES windeployqt)
         add_custom_target(Script-DeployRelease
-            COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_SOURCE_DIR}/dist
-            COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} ${CMAKE_SOURCE_DIR}/dist
-            COMMAND ${QT_DEPLOY_QT} ${CMAKE_SOURCE_DIR}/dist/${PROJECT_NAME}.exe -qmldir=${CMAKE_CURRENT_LIST_DIR}
-            COMMENT "Windows Deploying Qt Dependencies After Build........."
-            SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
-            WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
+                COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_SOURCE_DIR}/dist
+                COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} ${CMAKE_SOURCE_DIR}/dist
+                COMMAND ${QT_DEPLOY_QT} --qmldir=${CMAKE_CURRENT_LIST_DIR} --plugindir ${CMAKE_SOURCE_DIR}/dist/plugins --no-translations --compiler-runtime ${CMAKE_SOURCE_DIR}/dist/${PROJECT_NAME}.exe
+                COMMENT "Windows Deploying Qt Dependencies After Build........."
+                SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
+                WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
         )
-endif()
-endif()
+    endif ()
+endif ()

example/example.qrc

@@ -127,7 +127,6 @@
         <file>qml/global/ItemsOriginal.qml</file>
         <file>qml/global/qmldir</file>
         <file>qml/page/T_Acrylic.qml</file>
-        <file>qml/page/T_Awesome.qml</file>
         <file>qml/page/T_Badge.qml</file>
         <file>qml/page/T_BreadcrumbBar.qml</file>
         <file>qml/page/T_Buttons.qml</file>
@@ -177,14 +176,10 @@
         <file>qml/window/SingleInstanceWindow.qml</file>
         <file>qml/window/SingleTaskWindow.qml</file>
         <file>qml/window/StandardWindow.qml</file>
-        <file>res/image/bg_scenic.png</file>
         <file>res/image/image_1.jpg</file>
         <file>qml/window/PageWindow.qml</file>
         <file>qml/page/T_StaggeredLayout.qml</file>
-        <file>qml/viewmodel/SettingsViewModel.qml</file>
-        <file>qml/viewmodel/TextBoxViewModel.qml</file>
         <file>qml/page/T_Clip.qml</file>
-        <file>qml/page/T_3D.qml</file>
         <file>qml/page/T_Network.qml</file>
         <file>qml/page/T_ShortcutPicker.qml</file>
         <file>qml/chart/T_BarChart.qml</file>
@@ -197,7 +192,6 @@
         <file>res/image/ic_crash.png</file>
         <file>qml/window/CrashWindow.qml</file>
         <file>qml/page/T_SplitLayout.qml</file>
-        <file>qml/window/FluentInitalizrWindow.qml</file>
         <file>res/template/CMakeLists.txt.in</file>
         <file>res/template/src/App.qml.in</file>
         <file>res/template/src/CMakeLists.txt.in</file>
@@ -208,5 +202,13 @@
         <file>res/template/src/qml.qrc.in</file>
         <file>res/template/src/zh_CN.ts.in</file>
         <file>res/template/src/README.md.in</file>
+        <file>qml/global/GlobalModel.qml</file>
+        <file>qml/page/T_Sheet.qml</file>
+        <file>qml/page/T_GroupBox.qml</file>
+        <file>res/image/bg_scenic.jpg</file>
+        <file>qml/window/FluentInitializrWindow.qml</file>
+        <file>qml/page/T_OpenGL.qml</file>
+        <file>qml/page/T_Icons.qml</file>
     </qresource>
+    <qresource prefix="/"/>
 </RCC>

example/qml/App.qml

@@ -4,41 +4,37 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import FluentUI 1.0
 
-Item {
+FluLauncher {
     id: app
-
     Connections{
         target: FluTheme
         function onDarkModeChanged(){
             SettingsHelper.saveDarkMode(FluTheme.darkMode)
         }
     }
-
     Connections{
         target: FluApp
         function onUseSystemAppBarChanged(){
             SettingsHelper.saveUseSystemAppBar(FluApp.useSystemAppBar)
         }
     }
-
     Connections{
         target: TranslateHelper
         function onCurrentChanged(){
             SettingsHelper.saveLanguage(TranslateHelper.current)
         }
     }
-
     Component.onCompleted: {
-        FluNetwork.openLog = false
-        FluNetwork.setInterceptor(function(param){
+        Network.openLog = false
+        Network.setInterceptor(function(param){
             param.addHeader("Token","000000000000000000000")
         })
         FluApp.init(app,Qt.locale(TranslateHelper.current))
         FluApp.windowIcon = "qrc:/example/res/image/favicon.ico"
         FluApp.useSystemAppBar = SettingsHelper.getUseSystemAppBar()
         FluTheme.darkMode = SettingsHelper.getDarkMode()
-        FluTheme.enableAnimation = true
-        FluApp.routes = {
+        FluTheme.animationEnabled = true
+        FluRouter.routes = {
             "/":"qrc:/example/qml/window/MainWindow.qml",
             "/about":"qrc:/example/qml/window/AboutWindow.qml",
             "/login":"qrc:/example/qml/window/LoginWindow.qml",
@@ -51,9 +47,9 @@ Item {
         }
         var args = Qt.application.arguments
         if(args.length>=2 && args[1].startsWith("-crashed=")){
-            FluApp.navigate("/crash",{crashFilePath:args[1].replace("-crashed=","")})
+            FluRouter.navigate("/crash",{crashFilePath:args[1].replace("-crashed=","")})
         }else{
-            FluApp.navigate("/")
+            FluRouter.navigate("/")
         }
     }
 }

example/qml/chart/T_BarChart.qml

@@ -9,10 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Bar Chart")
 
-    FluArea{
-        width: 500
-        height: 370
-        paddings: 10
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
         Layout.topMargin: 20
         FluChart{
             anchors.fill: parent
@@ -69,10 +69,10 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
-        width: 500
-        height: 370
-        paddings: 10
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
         Layout.topMargin: 20
         FluChart{
             anchors.fill: parent

example/qml/chart/T_BubbleChart.qml

@@ -13,10 +13,10 @@ FluScrollablePage{
         return Math.random().toFixed(1);
     }
 
-    FluArea{
-        height: 370
-        width: 500
-        paddings: 10
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
         Layout.topMargin: 20
         FluChart{
             anchors.fill: parent

example/qml/chart/T_LineChart.qml

@@ -7,21 +7,24 @@ import "../component"
 
 FluScrollablePage{
 
+    id: root
     title: qsTr("Line Chart")
+    property var data : []
 
-    FluArea{
-        width: 500
-        height: 370
-        paddings: 10
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
         Layout.topMargin: 20
         FluChart{
+            id: chart
             anchors.fill: parent
             chartType: 'line'
             chartData: { return {
                     labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                     datasets: [{
                             label: 'My First Dataset',
-                            data: [65, 59, 80, 81, 56, 55, 40],
+                            data: root.data,
                             fill: false,
                             borderColor: 'rgb(75, 192, 192)',
                             tension: 0.1
@@ -41,5 +44,20 @@ FluScrollablePage{
                 }
             }
         }
+        Timer{
+            id: timer
+            interval: 300
+            repeat: true
+            onTriggered: {
+                root.data.push(Math.random()*100)
+                if(root.data.length>7){
+                    root.data.shift()
+                }
+                chart.animateToNewData()
+            }
+        }
+        Component.onCompleted: {
+            timer.restart()
+        }
     }
 }

example/qml/chart/T_PieChart.qml

@@ -9,10 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Pie Chart")
 
-    FluArea{
-        width: 500
-        height: 370
-        paddings: 10
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
         Layout.topMargin: 20
         FluChart{
             anchors.fill: parent
@@ -50,10 +50,10 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
-        width: 500
-        height: 370
-        paddings: 10
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
         Layout.topMargin: 20
         FluChart{
             anchors.fill: parent

example/qml/chart/T_PolarAreaChart.qml

@@ -9,10 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Polar Area Chart")
 
-    FluArea{
-        width: 500
-        height: 370
-        paddings: 10
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
         Layout.topMargin: 20
         FluChart{
             anchors.fill: parent

example/qml/chart/T_RadarChart.qml

@@ -9,10 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Radar Chart")
 
-    FluArea{
-        width: 500
-        height: 370
-        paddings: 10
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
         Layout.topMargin: 20
         FluChart{
             anchors.fill: parent

example/qml/chart/T_ScatterChart.qml

@@ -13,10 +13,10 @@ FluScrollablePage{
         return Math.random().toFixed(1);
     }
 
-    FluArea{
-        height: 370
-        width: 500
-        paddings: 10
+    FluFrame{
+        Layout.preferredWidth: 500
+        Layout.preferredHeight: 370
+        padding: 10
         Layout.topMargin: 20
         FluChart{
             anchors.fill: parent
@@ -119,5 +119,4 @@ FluScrollablePage{
             }
         }
     }
-
 }

example/qml/component/CodeExpander.qml

@@ -135,7 +135,11 @@ FluExpander{
                     "FluLoadingButton",
                     "FluClip",
                     "FluNetwork",
-                    "FluShortcutPicker"
+                    "FluShortcutPicker",
+                    "FluWindowResultLauncher",
+                    "FluRouter",
+                    "FluGroupBox",
+                    "FluSheet",
                 ];
         code = code.replace(/\n/g, "<br>");
         code = code.replace(/ /g, "&nbsp;");

example/qml/global/GlobalModel.qml

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

example/qml/global/ItemsFooter.qml

@@ -16,7 +16,7 @@ FluObject{
         title:qsTr("About")
         icon:FluentIcons.Contact
         onTapListener:function(){
-            FluApp.navigate("/about")
+            FluRouter.navigate("/about")
         }
     }
 

example/qml/global/ItemsOriginal.qml

@@ -104,6 +104,12 @@ FluObject{
             url: "qrc:/example/qml/page/T_ToggleSwitch.qml"
             onTap: { navigationView.push(url) }
         }
+        FluPaneItem{
+            title: qsTr("GroupBox")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_GroupBox.qml"
+            onTap: { navigationView.push(url) }
+        }
         FluPaneItem{
             title: qsTr("PaneItem Disabled")
             disabled: true
@@ -271,6 +277,12 @@ FluObject{
             url: "qrc:/example/qml/page/T_Menu.qml"
             onTap: { navigationView.push(url) }
         }
+        FluPaneItem{
+            title: qsTr("Sheet")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Sheet.qml"
+            onTap: { navigationView.push(url) }
+        }
     }
 
     FluPaneItemExpander{
@@ -352,9 +364,9 @@ FluObject{
             onTap: { navigationView.push(url) }
         }
         FluPaneItem{
-            title: qsTr("Awesome")
+            title: qsTr("Icons")
             menuDelegate: paneItemMenu
-            url: "qrc:/example/qml/page/T_Awesome.qml"
+            url: "qrc:/example/qml/page/T_Icons.qml"
             onTap: { navigationView.push(url) }
         }
     }
@@ -414,6 +426,12 @@ FluObject{
     FluPaneItemExpander{
         title: qsTr("Other")
         icon: FluentIcons.Shop
+        FluPaneItem{
+            title: qsTr("OpenGL")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_OpenGL.qml"
+            onTap: { navigationView.push(url) }
+        }
         FluPaneItem{
             title: qsTr("QRCode")
             menuDelegate: paneItemMenu
@@ -462,21 +480,17 @@ FluObject{
         FluPaneItem{
             title: qsTr("Hot Loader")
             onTapListener: function(){
-                FluApp.navigate("/hotload")
+                FluRouter.navigate("/hotload")
             }
         }
-        FluPaneItem{
-            title: qsTr("3D")
-            menuDelegate: paneItemMenu
-            url: "qrc:/example/qml/page/T_3D.qml"
-            onTap: { navigationView.push(url) }
-        }
         FluPaneItem{
             title: qsTr("Test Crash")
-            visible: FluTools.isWin()
             onTapListener: function(){
                 AppInfo.testCrash()
             }
+            Component.onCompleted: {
+                visible = FluTools.isWin()
+            }
         }
     }
 

example/qml/global/qmldir

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

example/qml/page/T_3D.qml

@@ -1,116 +0,0 @@
-import QtQuick 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Controls 2.15
-import QtQuick.Window 2.15
-import Qt3D.Core 2.15
-import Qt3D.Render 2.15
-import Qt3D.Input 2.12
-import Qt3D.Extras 2.15
-import QtQuick.Scene3D 2.15
-import Qt.labs.platform 1.1
-import FluentUI 1.0
-import "../component"
-
-FluContentPage{
-
-    id:root
-    title:"3D"
-
-    Scene3D{
-        id:scene_3d
-        anchors.fill: parent
-        focus: true
-        aspects: ["input", "logic"]
-        cameraAspectRatioMode: Scene3D.AutomaticAspectRatio
-        Entity {
-            Camera {
-                id: camera
-                projectionType: CameraLens.PerspectiveProjection
-                fieldOfView: 22.5
-                aspectRatio: scene_3d.width / scene_3d.height
-                nearPlane: 1
-                farPlane: 1000.0
-                viewCenter: Qt.vector3d( 0.0, 0.0, 0.0 )
-                upVector: Qt.vector3d( 0.0, 1.0, 0.0 )
-                position: Qt.vector3d( 0.0, 0.0, 15.0 )
-            }
-            FirstPersonCameraController {
-                linearSpeed: 100
-                lookSpeed: 50
-                camera: camera
-            }
-            components: [
-                RenderSettings{
-                    activeFrameGraph: ForwardRenderer{
-                        clearColor: Qt.rgba(0,0,0,0);
-                        camera: camera
-                    }
-                },
-                InputSettings{}
-            ]
-            Mesh {
-                id: mesh
-                source: "https://zhu-zichu.gitee.io/test.obj"
-            }
-            PhongMaterial {
-                id: material
-                ambient: color_picker.current
-            }
-            Transform{
-                id:transform
-                scale: 1.0
-                translation: Qt.vector3d(0, 0, 0)
-                rotation: fromEulerAngles(0, 0, 0)
-                property real hAngle:0.0
-                NumberAnimation on hAngle{
-                    from:0
-                    to:360.0
-                    duration: 5000
-                    loops: Animation.Infinite
-                }
-                matrix:{
-                    var m=Qt.matrix4x4();
-                    m.rotate(hAngle,Qt.vector3d(0,1,0));
-                    m.translate(Qt.vector3d(0,0,0));
-                    return m;
-                }
-            }
-            Entity {
-                id: entity
-                components: [mesh, material,transform]
-            }
-        }
-    }
-    ColumnLayout{
-        RowLayout{
-            spacing: 10
-            Layout.topMargin: 20
-            FluText{
-                text:"tintColor:"
-                Layout.alignment: Qt.AlignVCenter
-            }
-            FluColorPicker{
-                id:color_picker
-                current: "gray"
-            }
-        }
-
-        FluButton{
-            text:"选择obj资源"
-            onClicked: {
-                file_dialog.open()
-            }
-        }
-    }
-
-    FileDialog {
-        id: file_dialog
-        nameFilters: ["Obj files (*.obj)"]
-        folder: StandardPaths.writableLocation(StandardPaths.DocumentsLocation)
-        onAccepted: {
-            var fileUrl =  file_dialog.currentFile
-            mesh.source = fileUrl
-        }
-    }
-
-}

example/qml/page/T_Acrylic.qml

@@ -11,7 +11,6 @@ FluScrollablePage{
 
     RowLayout{
         spacing: 10
-        Layout.topMargin: 20
         FluText{
             text:"tintColor:"
             Layout.alignment: Qt.AlignVCenter
@@ -42,10 +41,10 @@ FluScrollablePage{
             value: 32
         }
     }
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 1200/4+20
-        paddings: 10
+        Layout.preferredHeight: 1200/4+20
+        padding: 10
         Layout.topMargin: 10
         FluClip{
             width: 1920/4
@@ -54,7 +53,7 @@ FluScrollablePage{
             Image {
                 id:image
                 asynchronous: true
-                source: "qrc:/example/res/image/bg_scenic.png"
+                source: "qrc:/example/res/image/bg_scenic.jpg"
                 anchors.fill: parent
                 sourceSize: Qt.size(2*width,2*height)
             }
@@ -72,7 +71,7 @@ FluScrollablePage{
                     anchors.centerIn: parent
                     text: "Acrylic"
                     color: "#FFFFFF"
-                    font.bold: true
+                    font: FluTextStyle.Subtitle
                 }
                 MouseArea {
                     property point clickPos: Qt.point(0,0)
@@ -95,7 +94,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'Image{
     id:image
     width: 800

example/qml/page/T_Awesome.qml

@@ -1,71 +0,0 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
-import FluentUI 1.0
-
-FluContentPage {
-
-    title: qsTr("Awesome")
-
-    FluTextBox{
-        id:text_box
-        placeholderText: qsTr("Please enter a keyword")
-        anchors{
-            topMargin: 20
-            top:parent.top
-        }
-    }
-
-    FluFilledButton{
-        text: qsTr("Search")
-        anchors{
-            left: text_box.right
-            verticalCenter: text_box.verticalCenter
-            leftMargin: 14
-        }
-        onClicked: {
-            grid_view.model = FluTheme.awesomeList(text_box.text)
-        }
-    }
-    GridView{
-        id:grid_view
-        cellWidth: 80
-        cellHeight: 80
-        clip: true
-        boundsBehavior: GridView.StopAtBounds
-        model:FluTheme.awesomeList()
-        ScrollBar.vertical: FluScrollBar {}
-        anchors{
-            topMargin: 10
-            top:text_box.bottom
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-        }
-        delegate: Item {
-            width: 68
-            height: 80
-            FluIconButton{
-                id:item_icon
-                iconSource:modelData.icon
-                anchors.horizontalCenter: parent.horizontalCenter
-                onClicked: {
-                    var text  ="FluentIcons."+modelData.name;
-                    FluTools.clipText(text)
-                    showSuccess(qsTr("You Copied ")+text)
-                }
-            }
-            FluText {
-                id:item_name
-                font.pixelSize: 10
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.top: item_icon.bottom
-                width:parent.width
-                wrapMode: Text.WrapAnywhere
-                text: modelData.name
-                horizontalAlignment: Text.AlignHCenter
-            }
-        }
-    }
-}

example/qml/page/T_Badge.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Badge")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
         height: 120
-        paddings: 10
+        padding: 10
 
         Column{
             spacing: 15
@@ -114,7 +113,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'Rectangle{
     width: 40
     height: 40

example/qml/page/T_BreadcrumbBar.qml

@@ -18,11 +18,10 @@ FluScrollablePage{
         breadcrumb_2.items = items
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 68
+        padding: 10
 
         FluBreadcrumbBar{
             id:breadcrumb_1
@@ -36,10 +35,10 @@ FluScrollablePage{
     }
 
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 100
-        paddings: 10
+        Layout.preferredHeight: 100
+        padding: 10
         Layout.topMargin: 20
 
         ColumnLayout{
@@ -77,7 +76,7 @@ FluScrollablePage{
 
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluBreadcrumbBar{
     width:parent.width
     separator:">"

example/qml/page/T_Buttons.qml

@@ -10,15 +10,14 @@ FluScrollablePage{
     title: qsTr("Buttons")
 
     FluText{
-        Layout.topMargin: 20
         text: qsTr("Support the Tab key to switch focus, and the Space key to perform click events")
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 68
+        Layout.topMargin: 10
+        padding: 10
 
         FluTextButton{
             disabled: text_button_switch.checked
@@ -42,7 +41,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluTextButton{
     text:"Text Button"
     onClicked: {
@@ -51,10 +50,10 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
-        paddings: 10
+        Layout.preferredHeight: 68
+        padding: 10
         Layout.topMargin: 20
 
         FluButton{
@@ -79,7 +78,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluButton{
     text:"Standard Button"
     onClicked: {
@@ -88,11 +87,11 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
+        Layout.preferredHeight: 68
         Layout.topMargin: 20
-        paddings: 10
+        padding: 10
 
         FluFilledButton{
             disabled: filled_button_switch.checked
@@ -116,7 +115,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluFilledButton{
     text:"Filled Button"
     onClicked: {
@@ -125,11 +124,11 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
+        Layout.preferredHeight: 68
         Layout.topMargin: 20
-        paddings: 10
+        padding: 10
 
         FluToggleButton{
             disabled:toggle_button_switch.checked
@@ -150,7 +149,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluToggleButton{
     text:"Toggle Button"
     onClicked: {
@@ -172,11 +171,11 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
+        Layout.preferredHeight: 68
         Layout.topMargin: 20
-        paddings: 10
+        padding: 10
 
         FluProgressButton{
             id: btn_progress
@@ -202,7 +201,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluProgressButton{
     text:"Progress Button"
     onClicked: {
@@ -211,11 +210,11 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
+        Layout.preferredHeight: 68
         Layout.topMargin: 20
-        paddings: 10
+        padding: 10
 
         FluLoadingButton{
             id: btn_loading
@@ -241,7 +240,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluLoadingButton{
     text:"Loading Button"
     onClicked: {
@@ -251,10 +250,10 @@ FluScrollablePage{
     }
 
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: layout_icon_button.height + 30
-        paddings: 10
+        Layout.preferredHeight: layout_icon_button.height + 30
+        padding: 10
         Layout.topMargin: 20
         Flow{
             id: layout_icon_button
@@ -323,7 +322,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluIconButton{
     iconSource:FluentIcons.ChromeCloseContrast
     onClicked: {
@@ -332,10 +331,10 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
-        paddings: 10
+        Layout.preferredHeight: 68
+        padding: 10
         Layout.topMargin: 20
         FluDropDownButton{
             disabled: drop_down_button_switch.checked
@@ -371,7 +370,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluDropDownButton{
     text:"DropDownButton"
     FluMenuItem{
@@ -389,10 +388,10 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 100
-        paddings: 10
+        Layout.preferredHeight: 100
+        padding: 10
         Layout.topMargin: 20
         FluRadioButtons{
             spacing: 8
@@ -424,7 +423,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluRadioButton{
     checked:true
     text:"Text Button"

example/qml/page/T_CalendarPicker.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("CalendarPicker")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
+        Layout.preferredHeight: 80
+        padding: 10
         ColumnLayout{
             anchors{
                 verticalCenter: parent.verticalCenter
@@ -28,7 +27,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluCalendarPicker{
 
 }'

example/qml/page/T_Captcha.qml

@@ -11,7 +11,6 @@ FluScrollablePage{
 
     FluCaptcha{
         id: captcha
-        Layout.topMargin: 20
         ignoreCase:switch_case.checked
         MouseArea{
             anchors.fill: parent

example/qml/page/T_Carousel.qml

@@ -22,11 +22,10 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         height: 370
-        paddings: 10
-        Layout.topMargin: 20
+        padding: 10
         Column{
             spacing: 15
             anchors{
@@ -62,10 +61,10 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         height: 340
-        paddings: 10
+        padding: 10
         Layout.topMargin: 10
         Column{
             spacing: 15
@@ -104,7 +103,6 @@ FluScrollablePage{
                                     horizontalAlignment: Qt.AlignHCenter
                                     text:model.title
                                     color: FluColors.Grey10
-                                    font.pixelSize: 15
                                 }
                             }
                         }
@@ -126,7 +124,7 @@ FluScrollablePage{
 
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluCarousel{
     id:carousel
     width: 400

example/qml/page/T_CheckBox.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("CheckBox")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 72
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 72
+        padding: 10
 
         FluText{
             text: qsTr("A 2-state CheckBox")
@@ -49,16 +48,16 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluCheckBox{
     text:"Text"
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 72
-        paddings: 10
+        Layout.preferredHeight: 72
+        padding: 10
         Layout.topMargin: 20
 
         FluText{
@@ -104,7 +103,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluCheckBox{
     text:"Text"
     indeterminate:true

example/qml/page/T_Clip.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Clip")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 380
-        paddings: 10
+        Layout.preferredHeight: 380
+        padding: 10
 
         Column{
             spacing: 15
@@ -88,7 +87,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluClip{
     radius: [25,25,25,25]
     width: 50

example/qml/page/T_ColorPicker.qml

@@ -9,31 +9,21 @@ FluScrollablePage{
 
     title: qsTr("ColorPicker")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 60
-        paddings: 10
+        Layout.preferredHeight: 60
+        padding: 10
         RowLayout{
             FluText{
                 text: qsTr("Click to Select a Color - >")
                 Layout.alignment: Qt.AlignVCenter
             }
-            FluColorPicker{
-                cancelText: qsTr("Cancel")
-                okText: qsTr("OK")
-                titleText: qsTr("Color Picker")
-                editText: qsTr("Edit Color")
-                redText: qsTr("Red")
-                greenText: qsTr("Green")
-                blueText: qsTr("Blue")
-                opacityText: qsTr("Opacity")
-            }
+            FluColorPicker{}
         }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluColorPicker{
 
 }'

example/qml/page/T_ComboBox.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("ComboBox")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 80
-        paddings: 5
-        Layout.topMargin: 20
+        Layout.preferredHeight: 80
+        padding: 5
         Column{
             spacing: 5
             anchors.verticalCenter: parent.verticalCenter
@@ -32,10 +31,10 @@ FluScrollablePage{
         }
     }
 
-    FluArea {
+    FluFrame {
         Layout.fillWidth: true
-        height: 80
-        paddings: 5
+        Layout.preferredHeight: 80
+        padding: 5
         Layout.topMargin: 20
         Column{
             spacing: 5
@@ -56,10 +55,10 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         height: 80
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         Column{
             spacing: 5
@@ -85,7 +84,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluComboBox{
     editable: true
     model: ListModel {

example/qml/page/T_DatePicker.qml

@@ -7,13 +7,12 @@ import "../component"
 
 FluScrollablePage{
 
-    title: qsTr("TimePicker")
+    title: qsTr("DatePicker")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
+        Layout.preferredHeight: 80
+        padding: 10
         ColumnLayout{
             anchors{
                 verticalCenter: parent.verticalCenter
@@ -32,17 +31,17 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluDatePicker{
 
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 80
-        paddings: 10
+        Layout.preferredHeight: 80
+        padding: 10
         ColumnLayout{
             anchors{
                 verticalCenter: parent.verticalCenter
@@ -61,7 +60,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluDatePicker{
     showYear:false
 }'

example/qml/page/T_Dialog.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Dialog")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 68
+        padding: 10
         FluButton{
             anchors.verticalCenter: parent.verticalCenter
             text: qsTr("Show Double Button Dialog")
@@ -24,7 +23,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluContentDialog{
     id:dialog
     title: qsTr("Friendly Reminder")
@@ -57,10 +56,10 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
-        paddings: 10
+        Layout.preferredHeight: 68
+        padding: 10
         Layout.topMargin: 20
         FluButton{
             anchors.verticalCenter: parent.verticalCenter
@@ -72,7 +71,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluContentDialog{
     id: dialog
     title: qsTr("Friendly Reminder")
@@ -114,10 +113,10 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 100
-        paddings: 10
+        Layout.preferredHeight: 100
+        padding: 10
         Layout.topMargin: 20
         FluButton{
             anchors.top: parent.top
@@ -138,7 +137,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluContentDialog{
     id: dialog
     title: qsTr("Friendly Reminder")

example/qml/page/T_Expander.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Expander")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         height: layout_column.height+20
-        paddings: 10
-        Layout.topMargin: 20
+        padding: 10
         Column{
             id:layout_column
             spacing: 15
@@ -83,7 +82,7 @@ My only desire is to be permitted to drive out the traitors and restore the Han.
 
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluExpander{
     headerText: qsTr("Open a radio box")
     Item{

example/qml/page/T_FlipView.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("FlipView")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 340
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 340
+        padding: 10
         ColumnLayout{
             anchors.verticalCenter: parent.verticalCenter
             FluText{
@@ -40,7 +39,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluFlipView{
     Image{
         source: "qrc:/example/res/image/banner_1.jpg"
@@ -61,10 +60,10 @@ FluScrollablePage{
 '
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         height: 340
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         ColumnLayout{
             anchors.verticalCenter: parent.verticalCenter
@@ -93,7 +92,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluFlipView{
     vertical:true
     Image{

example/qml/page/T_GroupBox.qml

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

example/qml/page/T_Home.qml

@@ -9,11 +9,8 @@ import "../global"
 FluScrollablePage{
 
     launchMode: FluPageType.SingleTask
-    animDisabled: true
-
-    FluentInitalizrWindow{
-        id:fluent_initalizr
-    }
+    animationEnabled: false
+    header: Item{}
 
     ListModel{
         id: model_header
@@ -28,11 +25,11 @@ FluScrollablePage{
         }
         ListElement{
             icon: "qrc:/example/res/image/favicon.ico"
-            title: qsTr("FluentUI Initalizr")
+            title: qsTr("FluentUI Initializr")
             desc: qsTr("FluentUI Initializr is a Tool that helps you create and customize Fluent UI projects with various options.")
             url: "https://github.com/zhuzichu520/FluentUI"
             clicked: function(model){
-                fluent_initalizr.showDialog()
+                fluent_Initializr.showDialog()
             }
         }
     }
@@ -121,6 +118,7 @@ FluScrollablePage{
                             Layout.leftMargin: 20
                             color: FluColors.Grey120
                             font.pixelSize: 12
+                            font.family: FluTextStyle.family
                             wrapMode: Text.WrapAnywhere
                         }
                     }
@@ -177,7 +175,7 @@ FluScrollablePage{
             property string desc: modelData.extra.desc
             width: 320
             height: 120
-            FluArea{
+            FluFrame{
                 radius: 8
                 width: 300
                 height: 100

example/qml/page/T_Icons.qml

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

example/qml/page/T_Image.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Image")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 260
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 260
+        padding: 10
         Column{
             spacing: 15
             anchors{
@@ -37,7 +36,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluImage{
     width: 400
     height: 300

example/qml/page/T_InfoBar.qml

@@ -9,11 +9,14 @@ FluScrollablePage{
 
     title: qsTr("InfoBar")
 
-    FluArea{
+    property var info1
+    property var info2
+    property var info3
+
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 270
-        paddings: 10
+        Layout.preferredHeight: 350
+        padding: 10
         ColumnLayout{
             spacing: 14
             anchors{
@@ -50,6 +53,51 @@ FluScrollablePage{
                     showInfo(qsTr("This is an InfoBar in the Info Style"),0,qsTr("Manual shutdown is supported"))
                 }
             }
+            FluText{
+                wrapMode: Text.WrapAnywhere
+                width: parent.width
+                text: qsTr("Manually close the info message box")
+            }
+            Row{
+                spacing: 5
+                FluButton{
+                    text: (info1 ? qsTr("close '%1'") : qsTr("show '%1")).arg("info1")
+                    onClicked: {
+                        if(info1) {
+                            info1.close()
+                            return
+                        }
+                        info1 = showInfo(qsTr("This is an '%1'").arg("info1"), 0)
+                    }
+                }
+                FluButton{
+                    text: (info2 ? qsTr("close '%1'") : qsTr("show '%1")).arg("info2")
+                    onClicked: {
+                        if(info2) {
+                            info2.close()
+                            return
+                        }
+                        info2 = showInfo(qsTr("This is an '%1'").arg("info2"), 0)
+                    }
+                }
+                FluButton{
+                    text: (info3 ? qsTr("close '%1'") : qsTr("show '%1")).arg("info3")
+                    onClicked: {
+                        if(info3) {
+                            info3.close()
+                            return
+                        }
+                        info3 = showInfo(qsTr("This is an '%1'").arg("info3"), 0)
+                    }
+                }
+                FluButton{
+                    text: qsTr("clear all info")
+                    onClicked: {
+                        clearAllInfo()
+                    }
+                }
+            }
+
             FluButton{
                 text:"Loading"
                 onClicked: {
@@ -60,13 +108,18 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'showInfo(qsTr("This is an InfoBar in the Info Style"))
+        Layout.topMargin: -6
+        code:`
+showInfo(qsTr("This is an InfoBar in the Info Style"))
 
 showWarning(qsTr("This is an InfoBar in the Warning Style"))
 
 showError(qsTr("This is an InfoBar in the Error Style"))
 
-showSuccess(qsTr("This is an InfoBar in the Success Style"))'
+showSuccess(qsTr("This is an InfoBar in the Success Style"))
+
+var info1 = showInfo(qsTr("This is an 'Info1'"), 0)
+info1.close()
+`
     }
 }

example/qml/page/T_Menu.qml

@@ -47,11 +47,10 @@ FluScrollablePage{
     }
 
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 100
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 100
+        padding: 10
         Column{
             id: layout_column
             spacing: 15
@@ -78,7 +77,7 @@ FluScrollablePage{
 
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluMenu{
     id:menu
     FluMenuItem:{
@@ -99,10 +98,10 @@ menu.popup()
     }
 
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 100
-        paddings: 10
+        Layout.preferredHeight: 100
+        padding: 10
         Layout.topMargin: 20
         Column{
             spacing: 15
@@ -151,7 +150,7 @@ menu.popup()
 
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluMenuBar{
     id:menu
     FluMenu:{

example/qml/page/T_MultiWindow.qml

@@ -8,23 +8,23 @@ import "../component"
 FluScrollablePage{
 
     property string password: ""
-    property var loginPageRegister: registerForWindowResult("/login")
 
     title: qsTr("MultiWindow")
 
-    Connections{
-        target: loginPageRegister
-        function onResult(data)
-        {
-            password = data.password
-        }
+    FluWindowResultLauncher{
+        id:loginResultLauncher
+        path: "/login"
+        onResult:
+            (data)=>{
+                password = data.password
+            }
+
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 86
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 86
+        padding: 10
         Column{
             spacing: 15
             anchors{
@@ -37,16 +37,16 @@ FluScrollablePage{
             FluButton{
                 text: qsTr("Create Window")
                 onClicked: {
-                    FluApp.navigate("/standardWindow")
+                    FluRouter.navigate("/standardWindow")
                 }
             }
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 86
-        paddings: 10
+        Layout.preferredHeight: 86
+        padding: 10
         Layout.topMargin: 10
         Column{
             spacing: 15
@@ -61,16 +61,16 @@ FluScrollablePage{
             FluButton{
                 text: qsTr("Create Window")
                 onClicked: {
-                    FluApp.navigate("/singleTaskWindow")
+                    FluRouter.navigate("/singleTaskWindow")
                 }
             }
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 86
-        paddings: 10
+        Layout.preferredHeight: 86
+        padding: 10
         Layout.topMargin: 10
         Column{
             spacing: 15
@@ -84,14 +84,14 @@ FluScrollablePage{
             FluButton{
                 text: qsTr("Create Window")
                 onClicked: {
-                    FluApp.navigate("/singleInstanceWindow")
+                    FluRouter.navigate("/singleInstanceWindow")
                 }
             }
         }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluWindow{
   //launchMode: FluWindowType.Standard
   //launchMode: FluWindowType.SingleTask
@@ -101,10 +101,10 @@ FluScrollablePage{
     }
 
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 100
-        paddings: 10
+        Layout.preferredHeight: 100
+        padding: 10
         Layout.topMargin: 20
         Column{
             spacing: 15
@@ -118,27 +118,27 @@ FluScrollablePage{
             FluButton{
                 text: qsTr("Create Window")
                 onClicked: {
-                    FluApp.navigate("/about")
+                    FluRouter.navigate("/about")
                 }
             }
         }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluButton{
     text: qsTr("Create Window")
     onClicked: {
-        FluApp.navigate("/about")
+        FluRouter.navigate("/about")
     }
 }
 '
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 130
-        paddings: 10
+        Layout.preferredHeight: 130
+        padding: 10
         Layout.topMargin: 20
 
         Column{
@@ -153,7 +153,7 @@ FluScrollablePage{
             FluButton{
                 text: qsTr("Create Window")
                 onClicked: {
-                    loginPageRegister.launch({username:"zhuzichu"})
+                    loginResultLauncher.launch({username:"zhuzichu"})
                 }
             }
             FluText{
@@ -163,21 +163,20 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'property var loginPageRegister: registerForWindowResult("/login")
-
-Connections{
-    target: loginPageRegister
-    function onResult(data)
-    {
-        password = data.password
-    }
+        Layout.topMargin: -6
+        code:'FluWindowResultLauncher{
+    id:loginResultLauncher
+    path: "/login"
+    onResult:
+        (data)=>{
+            password = data.password
+     }
 }
 
 FluButton{
     text: qsTr("Create Window")
     onClicked: {
-        loginPageRegister.launch({username:"zhuzichu"})
+        loginResultLauncher.launch({username:"zhuzichu"})
     }
 }
 '

example/qml/page/T_Network.qml

@@ -4,6 +4,7 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import Qt.labs.platform 1.0
+import example 1.0
 import "../component"
 
 FluContentPage{
@@ -11,7 +12,7 @@ FluContentPage{
     id:root
     title: qsTr("Network")
 
-    FluNetworkCallable{
+    NetworkCallable{
         id:callable
         onStart: {
             showLoading()
@@ -39,7 +40,6 @@ FluContentPage{
         clip: true
         anchors{
             top: parent.top
-            topMargin: 20
             bottom: parent.bottom
             left: parent.left
         }
@@ -56,7 +56,7 @@ FluContentPage{
                 text: "Get"
                 onClicked: {
                     text_info.text = ""
-                    FluNetwork.get("https://httpbingo.org/get")
+                    Network.get("https://httpbingo.org/get")
                     .addQuery("name","孙悟空")
                     .addQuery("age",500)
                     .addQuery("address","花果山水帘洞")
@@ -70,7 +70,7 @@ FluContentPage{
                 text: "Head"
                 onClicked: {
                     text_info.text = ""
-                    FluNetwork.head("https://httpbingo.org/head")
+                    Network.head("https://httpbingo.org/head")
                     .addQuery("name","孙悟空")
                     .addQuery("age",500)
                     .addQuery("address","花果山水帘洞")
@@ -84,7 +84,7 @@ FluContentPage{
                 text: "Post Body"
                 onClicked: {
                     text_info.text = ""
-                    FluNetwork.postBody("https://httpbingo.org/post")
+                    Network.postBody("https://httpbingo.org/post")
                     .setBody("花果山水帘洞美猴王齐天大圣孙悟空")
                     .bind(root)
                     .go(callable)
@@ -96,7 +96,7 @@ FluContentPage{
                 text: "Post Form"
                 onClicked: {
                     text_info.text = ""
-                    FluNetwork.postForm("https://httpbingo.org/post")
+                    Network.postForm("https://httpbingo.org/post")
                     .add("name","孙悟空")
                     .add("age",500)
                     .add("address","花果山水帘洞")
@@ -110,7 +110,7 @@ FluContentPage{
                 text: "Post JSON"
                 onClicked: {
                     text_info.text = ""
-                    FluNetwork.postJson("https://httpbingo.org/post")
+                    Network.postJson("https://httpbingo.org/post")
                     .add("name","孙悟空")
                     .add("age",500)
                     .add("address","花果山水帘洞")
@@ -124,7 +124,7 @@ FluContentPage{
                 text: "Post JSON Array"
                 onClicked: {
                     text_info.text = ""
-                    FluNetwork.postJsonArray("https://httpbingo.org/post")
+                    Network.postJsonArray("https://httpbingo.org/post")
                     .add("name","孙悟空")
                     .add("age",500)
                     .add("address","花果山水帘洞")
@@ -138,7 +138,7 @@ FluContentPage{
                 text: "Put Body"
                 onClicked: {
                     text_info.text = ""
-                    FluNetwork.putBody("https://httpbingo.org/put")
+                    Network.putBody("https://httpbingo.org/put")
                     .setBody("花果山水帘洞美猴王齐天大圣孙悟空")
                     .bind(root)
                     .go(callable)
@@ -150,7 +150,7 @@ FluContentPage{
                 text: "Put Form"
                 onClicked: {
                     text_info.text = ""
-                    FluNetwork.putForm("https://httpbingo.org/put")
+                    Network.putForm("https://httpbingo.org/put")
                     .add("name","孙悟空")
                     .add("age",500)
                     .add("address","花果山水帘洞")
@@ -164,7 +164,7 @@ FluContentPage{
                 text: "Put JSON"
                 onClicked: {
                     text_info.text = ""
-                    FluNetwork.putJson("https://httpbingo.org/put")
+                    Network.putJson("https://httpbingo.org/put")
                     .add("name","孙悟空")
                     .add("age",500)
                     .add("address","花果山水帘洞")
@@ -178,7 +178,7 @@ FluContentPage{
                 text: "Put JSON Array"
                 onClicked: {
                     text_info.text = ""
-                    FluNetwork.putJsonArray("https://httpbingo.org/put")
+                    Network.putJsonArray("https://httpbingo.org/put")
                     .add("name","孙悟空")
                     .add("age",500)
                     .add("address","花果山水帘洞")
@@ -192,7 +192,7 @@ FluContentPage{
                 text: "Patch Body"
                 onClicked: {
                     text_info.text = ""
-                    FluNetwork.patchBody("https://httpbingo.org/patch")
+                    Network.patchBody("https://httpbingo.org/patch")
                     .setBody("花果山水帘洞美猴王齐天大圣孙悟空")
                     .bind(root)
                     .go(callable)
@@ -204,7 +204,7 @@ FluContentPage{
                 text: "Patch Form"
                 onClicked: {
                     text_info.text = ""
-                    FluNetwork.patchForm("https://httpbingo.org/patch")
+                    Network.patchForm("https://httpbingo.org/patch")
                     .add("name","孙悟空")
                     .add("age",500)
                     .add("address","花果山水帘洞")
@@ -218,7 +218,7 @@ FluContentPage{
                 text: "Patch JSON"
                 onClicked: {
                     text_info.text = ""
-                    FluNetwork.patchJson("https://httpbingo.org/patch")
+                    Network.patchJson("https://httpbingo.org/patch")
                     .add("name","孙悟空")
                     .add("age",500)
                     .add("address","花果山水帘洞")
@@ -232,7 +232,7 @@ FluContentPage{
                 text: "Patch JSON Array"
                 onClicked: {
                     text_info.text = ""
-                    FluNetwork.patchJsonArray("https://httpbingo.org/patch")
+                    Network.patchJsonArray("https://httpbingo.org/patch")
                     .add("name","孙悟空")
                     .add("age",500)
                     .add("address","花果山水帘洞")
@@ -246,7 +246,7 @@ FluContentPage{
                 text: "Delete Body"
                 onClicked: {
                     text_info.text = ""
-                    FluNetwork.deleteBody("https://httpbingo.org/delete")
+                    Network.deleteBody("https://httpbingo.org/delete")
                     .setBody("花果山水帘洞美猴王齐天大圣孙悟空")
                     .bind(root)
                     .go(callable)
@@ -258,7 +258,7 @@ FluContentPage{
                 text: "Delete Form"
                 onClicked: {
                     text_info.text = ""
-                    FluNetwork.deleteForm("https://httpbingo.org/delete")
+                    Network.deleteForm("https://httpbingo.org/delete")
                     .add("name","孙悟空")
                     .add("age",500)
                     .add("address","花果山水帘洞")
@@ -272,7 +272,7 @@ FluContentPage{
                 text: "Delete JSON"
                 onClicked: {
                     text_info.text = ""
-                    FluNetwork.deleteJson("https://httpbingo.org/delete")
+                    Network.deleteJson("https://httpbingo.org/delete")
                     .add("name","孙悟空")
                     .add("age",500)
                     .add("address","花果山水帘洞")
@@ -286,7 +286,7 @@ FluContentPage{
                 text: "Delete JSON Array"
                 onClicked: {
                     text_info.text = ""
-                    FluNetwork.deleteJsonArray("https://httpbingo.org/delete")
+                    Network.deleteJsonArray("https://httpbingo.org/delete")
                     .add("name","孙悟空")
                     .add("age",500)
                     .add("address","花果山水帘洞")
@@ -300,7 +300,7 @@ FluContentPage{
                 text: "Open Log"
                 onClicked: {
                     text_info.text = ""
-                    FluNetwork.postJson("https://httpbingo.org/post")
+                    Network.postJson("https://httpbingo.org/post")
                     .add("name","孙悟空")
                     .add("age",500)
                     .add("address","花果山水帘洞")
@@ -315,7 +315,7 @@ FluContentPage{
                 text: "Custom Header"
                 onClicked: {
                     text_info.text = ""
-                    FluNetwork.postJson("https://httpbingo.org/post")
+                    Network.postJson("https://httpbingo.org/post")
                     .addHeader("os","PC")
                     .addHeader("version","1.0.0")
                     .add("name","孙悟空")
@@ -331,8 +331,8 @@ FluContentPage{
                 text: "RequestFailedReadCache"
                 onClicked: {
                     text_info.text = ""
-                    FluNetwork.postJson("https://httpbingo.org/post")
-                    .setCacheMode(FluNetworkType.RequestFailedReadCache)
+                    Network.postJson("https://httpbingo.org/post")
+                    .setCacheMode(NetworkType.RequestFailedReadCache)
                     .add("name","孙悟空")
                     .add("age",500)
                     .add("address","花果山水帘洞")
@@ -347,8 +347,8 @@ FluContentPage{
                 text: "IfNoneCacheRequest"
                 onClicked: {
                     text_info.text = ""
-                    FluNetwork.postJson("https://httpbingo.org/post")
-                    .setCacheMode(FluNetworkType.IfNoneCacheRequest)
+                    Network.postJson("https://httpbingo.org/post")
+                    .setCacheMode(NetworkType.IfNoneCacheRequest)
                     .add("name","孙悟空")
                     .add("age",500)
                     .add("address","花果山水帘洞")
@@ -363,8 +363,8 @@ FluContentPage{
                 text: "FirstCacheThenRequest"
                 onClicked: {
                     text_info.text = ""
-                    FluNetwork.postJson("https://httpbingo.org/post")
-                    .setCacheMode(FluNetworkType.FirstCacheThenRequest)
+                    Network.postJson("https://httpbingo.org/post")
+                    .setCacheMode(NetworkType.FirstCacheThenRequest)
                     .add("name","孙悟空")
                     .add("age",500)
                     .add("address","花果山水帘洞")
@@ -379,7 +379,7 @@ FluContentPage{
                 text: "Timeout And Retry"
                 onClicked: {
                     text_info.text = ""
-                    FluNetwork.postJson("https://httpbingo.org/post")
+                    Network.postJson("https://httpbingo.org/post")
                     .setTimeout(5000)
                     .setRetry(3)
                     .add("name","孙悟空")
@@ -407,7 +407,7 @@ FluContentPage{
                 text: "Download File"
                 onClicked: {
                     folder_dialog.showDialog(function(path){
-                        FluNetwork.get("http://vjs.zencdn.net/v/oceans.mp4")
+                        Network.get("http://vjs.zencdn.net/v/oceans.mp4")
                         .toDownload(path)
                         .bind(root)
                         .go(callable_download_file)
@@ -421,7 +421,7 @@ FluContentPage{
                 text: "Breakpoint Download File"
                 onClicked: {
                     folder_dialog.showDialog(function(path){
-                        FluNetwork.get("http://vjs.zencdn.net/v/oceans.mp4")
+                        Network.get("http://vjs.zencdn.net/v/oceans.mp4")
                         .toDownload(path,true)
                         .bind(root)
                         .go(callable_breakpoint_download_file)
@@ -431,7 +431,7 @@ FluContentPage{
         }
     }
 
-    FluNetworkCallable{
+    NetworkCallable{
         id:callable_upload_file
         onStart: {
             btn_upload.disabled = true
@@ -455,7 +455,7 @@ FluContentPage{
             }
     }
 
-    FluNetworkCallable{
+    NetworkCallable{
         id:callable_download_file
         onStart: {
             btn_download.progress = 0
@@ -480,7 +480,7 @@ FluContentPage{
             }
     }
 
-    FluNetworkCallable{
+    NetworkCallable{
         id:callable_breakpoint_download_file
         onStart: {
             btn_download_breakpoint.progress = 0
@@ -508,7 +508,7 @@ FluContentPage{
     FileDialog {
         id: file_dialog
         onAccepted: {
-            FluNetwork.postForm("https://httpbingo.org/post")
+            Network.postForm("https://httpbingo.org/post")
             .setRetry(1)//只请求一次
             .add("accessToken","12345678")
             .addFile("file",FluTools.toLocalPath(file_dialog.currentFile))
@@ -532,7 +532,7 @@ FluContentPage{
         }
     }
 
-    FluArea{
+    FluFrame{
         anchors{
             top: layout_flick.top
             bottom: layout_flick.bottom

example/qml/page/T_OpenGL.qml

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

example/qml/page/T_Pagination.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Pagination")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 200
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 200
+        padding: 10
         ColumnLayout{
             spacing: 20
             anchors.verticalCenter: parent.verticalCenter
@@ -37,7 +36,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluPagination{
     pageCurrent: 1
     itemCount: 1000

example/qml/page/T_Pivot.qml

@@ -9,13 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Pivot")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 400
-        paddings: 10
-
-
+        Layout.preferredHeight: 400
+        padding: 10
 
         FluPivot{
             anchors.fill: parent
@@ -49,7 +46,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluPivot{
     anchors.fill: parent
     FluPivotItem:{

example/qml/page/T_Progress.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Progress")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 130
-        paddings: 10
+        Layout.preferredHeight: 130
+        padding: 10
 
         ColumnLayout{
             spacing: 10
@@ -32,7 +31,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluProgressBar{
 
 }
@@ -42,11 +41,11 @@ FluProgressRing{
 '
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 286
-        paddings: 10
+        Layout.preferredHeight: 286
+        padding: 10
 
         ColumnLayout{
             spacing: 10
@@ -88,7 +87,7 @@ FluProgressRing{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluProgressBar{
     indeterminate: false
 }

example/qml/page/T_QRCode.qml

@@ -11,7 +11,6 @@ FluScrollablePage{
 
     FluQRCode{
         id:qrcode
-        Layout.topMargin: 20
         size:slider_size.value
         text:text_box.text
         color:color_picker.current

example/qml/page/T_RadioButton.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("RadioButton")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 68
+        padding: 10
         Row{
             spacing: 30
             anchors.verticalCenter: parent.verticalCenter
@@ -41,34 +40,33 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluRadioButton{
     text:"Text"
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 100
-        paddings: 10
+        Layout.preferredHeight: 100
+        padding: 10
         Layout.topMargin: 20
         FluRadioButtons{
             spacing: 8
+            disabled: radio_button_switch2.checked
             anchors.verticalCenter: parent.verticalCenter
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
             }
+            currentIndex: 1
             FluRadioButton{
-                disabled: radio_button_switch2.checked
                 text: qsTr("Radio Button_1")
             }
             FluRadioButton{
-                disabled: radio_button_switch2.checked
                 text: qsTr("Radio Button_2")
             }
             FluRadioButton{
-                disabled: radio_button_switch2.checked
                 text: qsTr("Radio Button_3")
             }
         }
@@ -83,7 +81,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluRadioButtons{
     spacing: 8
     FluRadioButton{
@@ -98,4 +96,106 @@ FluScrollablePage{
 }'
     }
 
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 60
+        padding: 10
+        Layout.topMargin: 20
+        FluRadioButtons{
+            spacing: 8
+            anchors.verticalCenter: parent.verticalCenter
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            disabled: radio_button_switch3.checked
+            orientation: Qt.Horizontal
+            currentIndex: 1
+            FluRadioButton{
+                text: qsTr("Radio Button_1")
+            }
+            FluRadioButton{
+                text: qsTr("Radio Button_2")
+            }
+            FluRadioButton{
+                text: qsTr("Radio Button_3")
+            }
+        }
+        FluToggleSwitch{
+            id: radio_button_switch3
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluRadioButtons{
+    spacing: 8
+    orientation: Qt.Horizontal
+    FluRadioButton{
+        text:"Radio Button_1"
+    }
+    FluRadioButton{
+        text:"Radio Button_2"
+    }
+    FluRadioButton{
+        text:"Radio Button_3"
+    }
+}'
+    }
+
+    FluFrame{
+        Layout.fillWidth: true
+        Layout.preferredHeight: 100
+        padding: 10
+        Layout.topMargin: 20
+        FluRadioButtons{
+            spacing: 8
+            anchors.verticalCenter: parent.verticalCenter
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            disabled: radio_button_switch4.checked
+            currentIndex: -1
+            FluCheckBox{
+                text: qsTr("Radio Button_1")
+            }
+            FluCheckBox{
+                text: qsTr("Radio Button_2")
+            }
+            FluCheckBox{
+                text: qsTr("Radio Button_3")
+            }
+        }
+        FluToggleSwitch{
+            id: radio_button_switch4
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text: qsTr("Disabled")
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -6
+        code:'FluRadioButtons{
+    spacing: 8
+    FluCheckBox{
+        text:"Radio Button_1"
+    }
+    FluCheckBox{
+        text:"Radio Button_2"
+    }
+    FluCheckBox{
+        text:"Radio Button_3"
+    }
+}'
+    }
+
 }

example/qml/page/T_RatingControl.qml

@@ -9,11 +9,10 @@ FluScrollablePage {
 
     title: qsTr("RatingControl")
 
-    FluArea {
+    FluFrame {
         Layout.fillWidth: true
-        height: 100
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 100
+        padding: 10
 
         Column {
             spacing: 10
@@ -27,7 +26,7 @@ FluScrollablePage {
 
     CodeExpander {
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code: 'FluRatingControl{
 
 }'

example/qml/page/T_Rectangle.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Rectangle")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
+        Layout.preferredHeight: 80
+        padding: 10
 
         Column{
             spacing: 15
@@ -64,7 +63,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluRectangle{
     radius: [25,25,25,25]
     width: 50

example/qml/page/T_RemoteLoader.qml

@@ -9,6 +9,6 @@ FluPage{
     launchMode: FluPageType.SingleTop
     FluRemoteLoader{
         anchors.fill: parent
-        source: "https://zhu-zichu.gitee.io/Qt5_T_RemoteLoader.qml"
+        source: "https://zhu-zichu.gitee.io/Qt_174_RemoteLoader.qml"
     }
 }

example/qml/page/T_Settings.qml

@@ -4,38 +4,24 @@ import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 import "../component"
-import "../viewmodel"
 import "../global"
 
 FluScrollablePage{
 
     title: qsTr("Settings")
 
-    SettingsViewModel{
-        id:viewmodel_settings
-    }
-
     FluEvent{
-        id:event_checkupdate_finish
         name: "checkUpdateFinish"
         onTriggered: {
             btn_checkupdate.loading = false
         }
     }
 
-    Component.onCompleted: {
-        FluEventBus.registerEvent(event_checkupdate_finish)
-    }
-
-    Component.onDestruction: {
-        FluEventBus.unRegisterEvent(event_checkupdate_finish)
-    }
-
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 60
-        paddings: 10
+        Layout.preferredHeight: 60
+        padding: 10
         Row{
             spacing: 20
             anchors.verticalCenter: parent.verticalCenter
@@ -56,11 +42,11 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
         height: 50
-        paddings: 10
+        padding: 10
         FluCheckBox{
             text: qsTr("Use System AppBar")
             checked: FluApp.useSystemAppBar
@@ -72,11 +58,11 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
         height: 50
-        paddings: 10
+        padding: 10
         FluCheckBox{
             text:qsTr("Fits AppBar Windows")
             checked: window.fitsAppBarWindows
@@ -95,15 +81,15 @@ FluScrollablePage{
         negativeText: qsTr("Cancel")
         positiveText: qsTr("OK")
         onPositiveClicked: {
-            FluApp.exit(931)
+            FluRouter.exit(931)
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
         height: 128
-        paddings: 10
+        padding: 10
 
         ColumnLayout{
             spacing: 5
@@ -129,11 +115,11 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
         height: 160
-        paddings: 10
+        padding: 10
 
         ColumnLayout{
             spacing: 5
@@ -149,10 +135,10 @@ FluScrollablePage{
             Repeater{
                 model: [{title:qsTr("Open"),mode:FluNavigationViewType.Open},{title:qsTr("Compact"),mode:FluNavigationViewType.Compact},{title:qsTr("Minimal"),mode:FluNavigationViewType.Minimal},{title:qsTr("Auto"),mode:FluNavigationViewType.Auto}]
                 delegate: FluRadioButton{
-                    checked : viewmodel_settings.displayMode===modelData.mode
-                    text:modelData.title
+                    text: modelData.title
+                    checked: GlobalModel.displayMode === modelData.mode
                     clickListener:function(){
-                        viewmodel_settings.displayMode = modelData.mode
+                        GlobalModel.displayMode = modelData.mode
                     }
                 }
             }
@@ -169,11 +155,11 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
         height: 80
-        paddings: 10
+        padding: 10
 
         ColumnLayout{
             spacing: 10

example/qml/page/T_Sheet.qml

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

example/qml/page/T_ShortcutPicker.qml

@@ -9,18 +9,17 @@ FluScrollablePage{
 
     title: qsTr("ShortcutPicker")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 100
-        paddings: 10
+        Layout.preferredHeight: 100
+        padding: 10
         FluShortcutPicker{
             anchors.verticalCenter: parent.verticalCenter
         }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluShortcutPicker{
 
 }'

example/qml/page/T_Slider.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Slider")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 200
-        Layout.topMargin: 20
-        paddings: 10
+        padding: 10
 
         Row{
             spacing: 30
@@ -27,18 +26,18 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluSlider{
     value:50
 }'
     }
 
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 200
         Layout.topMargin: 20
-        paddings: 10
+        padding: 10
         Row{
             spacing: 30
             FluRangeSlider{
@@ -51,7 +50,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluRangeSlider{
     orientation: Qt.Vertical
 }'

example/qml/page/T_SplitLayout.qml

@@ -13,7 +13,6 @@ FluContentPage{
         id:layout_dropdown
         anchors{
             top: parent.top
-            topMargin: 20
         }
         FluText{
             text:"orientation:"

example/qml/page/T_StaggeredLayout.qml

@@ -27,7 +27,6 @@ FluContentPage{
     Flickable{
         id: scroll
         anchors.fill: parent
-        anchors.topMargin: 20
         boundsBehavior:Flickable.StopAtBounds
         contentHeight: staggered_view.implicitHeight
         clip: true
@@ -43,8 +42,7 @@ FluContentPage{
                 FluText{
                     color:"#FFFFFF"
                     text:model.index
-                    font.bold: true
-                    font.pixelSize: 18
+                    font: FluTextStyle.Title
                     anchors.centerIn: parent
                 }
             }

example/qml/page/T_StatusLayout.qml

@@ -9,12 +9,11 @@ FluScrollablePage{
 
     title: qsTr("StatusLayout")
 
-    FluArea{
+    FluFrame{
         id:layout_actions
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 50
-        paddings: 10
+        Layout.preferredHeight: 50
+        padding: 10
         RowLayout{
             spacing: 14
             FluDropDownButton{
@@ -53,20 +52,16 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 10
-        height: 380
-        paddings: 10
+        Layout.preferredHeight: 380
+        padding: 10
         FluStatusLayout{
             id:status_view
             anchors.fill: parent
-            loadingText: qsTr("Loading...")
-            emptyText: qsTr("Empty")
-            errorText: qsTr("The page went wrong...")
-            errorButtonText: qsTr("Reload")
             onErrorClicked:{
-                showError("Click Reload")
+                status_view.statusMode = FluStatusLayoutType.Loading
             }
             Rectangle {
                 anchors.fill: parent
@@ -76,7 +71,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluStatusLayout{
     anchors.fill: parent
     statusMode: FluStatusLayoutType.Loading

example/qml/page/T_TabView.qml

@@ -29,11 +29,10 @@ FluScrollablePage{
         newTab()
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 50
-        paddings: 10
+        Layout.preferredHeight: 50
+        padding: 10
         RowLayout{
             spacing: 14
             FluDropDownButton{
@@ -91,11 +90,11 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 15
-        height: 400
-        paddings: 10
+        Layout.preferredHeight: 400
+        padding: 10
         FluTabView{
             id:tab_view
             onNewPressed:{
@@ -105,7 +104,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluTabView{
     anchors.fill: parent
     Component.onCompleted: {

example/qml/page/T_TableView.qml

@@ -13,7 +13,7 @@ FluContentPage{
 
     property var dataSource : []
     property int sortType: 0
-    property bool seletedAll: true
+    property bool selectedAll: true
     property string nameKeyword: ""
 
     onNameKeywordChanged: {
@@ -32,11 +32,11 @@ FluContentPage{
     onCheckBoxChanged: {
         for(var i =0;i< table_view.rows ;i++){
             if(false === table_view.getRow(i).checkbox.options.checked){
-                root.seletedAll = false
+                root.selectedAll = false
                 return
             }
         }
-        root.seletedAll = true
+        root.selectedAll = true
     }
 
     onSortTypeChanged: {
@@ -159,7 +159,7 @@ FluContentPage{
             FluCheckBox{
                 anchors.centerIn: parent
                 checked: true === options.checked
-                enableAnimation: false
+                animationEnabled: false
                 clickListener: function(){
                     var obj = table_view.getRow(row)
                     obj.checkbox = table_view.customItem(com_checbox,{checked:!options.checked})
@@ -238,13 +238,15 @@ FluContentPage{
                     Layout.alignment: Qt.AlignVCenter
                 }
                 FluCheckBox{
-                    checked: true === root.seletedAll
-                    enableAnimation: false
+                    checked: true === root.selectedAll
+                    animationEnabled: false
                     Layout.alignment: Qt.AlignVCenter
                     clickListener: function(){
-                        root.seletedAll = !root.seletedAll
-                        var checked = root.seletedAll
-                        itemModel.display = table_view.customItem(com_column_checbox,{"checked":checked})
+                        root.selectedAll = !root.selectedAll
+                        var checked = root.selectedAll
+                        var columnModel = model.display
+                        columnModel.title = table_view.customItem(com_column_checbox,{"checked":checked})
+                        model.display = columnModel
                         for(var i =0;i< table_view.rows ;i++){
                             var rowData = table_view.getRow(i)
                             rowData.checkbox = table_view.customItem(com_checbox,{"checked":checked})
@@ -271,7 +273,8 @@ FluContentPage{
             }
             Component.onCompleted: {
                 currentIndex=["100","300","500","1000"].findIndex((element) => element === display)
-                selectAll()
+                textBox.forceActiveFocus()
+                textBox.selectAll()
             }
             onCommit: {
                 editTextChaged(editText)
@@ -280,6 +283,29 @@ FluContentPage{
         }
     }
 
+    Component{
+        id:com_auto_suggestbox
+        FluAutoSuggestBox {
+            id: textbox
+            anchors.fill: parent
+            focus: true
+            Component.onCompleted: {
+                var data = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
+                var result = data.map(function(item) {
+                    return {title: item};
+                });
+                items = result
+                textbox.text= String(display)
+                forceActiveFocus()
+                selectAll()
+            }
+            onCommit: {
+                editTextChaged(textbox.text)
+                tableView.closeEditor()
+            }
+        }
+    }
+
     Component{
         id:com_avatar
         Item{
@@ -323,7 +349,9 @@ FluContentPage{
                 cursorShape: Qt.PointingHandCursor
                 onClicked: {
                     custom_update_dialog.showDialog(options.title,function(text){
-                        itemModel.display = table_view.customItem(com_column_update_title,{"title":text})
+                        var columnModel = model.display
+                        columnModel.title = table_view.customItem(com_column_update_title,{"title":text})
+                        model.display = columnModel
                     })
                 }
             }
@@ -390,7 +418,7 @@ FluContentPage{
         }
     }
 
-    FluArea{
+    FluFrame{
         id:layout_controls
         anchors{
             left: parent.left
@@ -421,15 +449,15 @@ FluContentPage{
                     var data = []
                     var rows = []
                     for (var i = 0; i < table_view.rows; i++) {
-                        var item = table_view.getRow(i);
+                        var item = table_view.getRow(i)
                         rows.push(item)
                         if (!item.checkbox.options.checked) {
                             data.push(item);
                         }
                     }
-                    var sourceModel = table_view.sourceModel;
+                    var sourceModel = table_view.sourceModel
                     for (i = 0; i < sourceModel.rowCount; i++) {
-                        var sourceItem = sourceModel.getRow(i);
+                        var sourceItem = sourceModel.getRow(i)
                         const foundItem = rows.find(item=> item._key === sourceItem._key)
                         if (!foundItem) {
                             data.push(sourceItem);
@@ -438,14 +466,24 @@ FluContentPage{
                     table_view.dataSource = data
                 }
             }
-
             FluButton{
                 text: qsTr("Add a row of Data")
                 onClicked: {
                     table_view.appendRow(genTestObject())
                 }
             }
-
+            FluButton{
+                text: qsTr("Insert a Row")
+                onClicked: {
+                    var index = table_view.currentIndex()
+                    if(index !== -1){
+                        var testObj = genTestObject()
+                        table_view.insertRow(index,testObj)
+                    }else{
+                        showWarning(qsTr("Focus not acquired: Please click any item in the form as the target for insertion!"))
+                    }
+                }
+            }
         }
     }
 
@@ -465,20 +503,19 @@ FluContentPage{
             {
                 title: table_view.customItem(com_column_checbox,{checked:true}),
                 dataIndex: 'checkbox',
-                width:100,
-                minimumWidth:100,
-                maximumWidth:100
-            },
-            {
-                title: table_view.customItem(com_column_update_title,{title:qsTr("Avatar")}),
-                dataIndex: 'avatar',
-                width:100
+                frozen: true
             },
             {
                 title: table_view.customItem(com_column_filter_name,{title:qsTr("Name")}),
                 dataIndex: 'name',
                 readOnly:true
             },
+            {
+                title: table_view.customItem(com_column_update_title,{title:qsTr("Avatar")}),
+                dataIndex: 'avatar',
+                width:100,
+                frozen:true
+            },
             {
                 title: table_view.customItem(com_column_sort_age,{sort:0}),
                 dataIndex: 'age',
@@ -490,6 +527,7 @@ FluContentPage{
             {
                 title: qsTr("Address"),
                 dataIndex: 'address',
+                editDelegate: com_auto_suggestbox,
                 width:200,
                 minimumWidth:100,
                 maximumWidth:250
@@ -513,8 +551,7 @@ FluContentPage{
                 title: qsTr("Options"),
                 dataIndex: 'action',
                 width:160,
-                minimumWidth:160,
-                maximumWidth:160
+                frozen:true
             }
         ]
     }
@@ -566,7 +603,7 @@ FluContentPage{
             return avatars[randomIndex];
         }
         return {
-            checkbox: table_view.customItem(com_checbox,{checked:root.seletedAll}),
+            checkbox: table_view.customItem(com_checbox,{checked:root.selectedAll}),
             avatar:table_view.customItem(com_avatar,{avatar:getAvatar()}),
             name: getRandomName(),
             age:getRandomAge(),
@@ -579,7 +616,7 @@ FluContentPage{
         }
     }
     function loadData(page,count){
-        root.seletedAll = true
+        root.selectedAll = true
         const dataSource = []
         for(var i=0;i<count;i++){
             dataSource.push(genTestObject())

example/qml/page/T_Text.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Text")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 60
-        paddings: 10
+        Layout.preferredHeight: 60
+        padding: 10
 
         FluCopyableText{
             text: qsTr("This is a text that can be copied")
@@ -23,7 +22,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluCopyableText{
     text: qsTr("This is a text that can be copied")
 }'

example/qml/page/T_TextBox.qml

@@ -4,30 +4,20 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "../component"
-import "../viewmodel"
 
 FluScrollablePage{
 
     title: qsTr("TextBox")
 
-    TextBoxViewModel{
-        id:viewModel
-    }
-
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 68
+        padding: 10
 
         FluTextBox{
             placeholderText: qsTr("Single-line Input Box")
             disabled: text_box_switch.checked
             cleanEnabled: true
-            text: viewModel.text1
-            onTextChanged: {
-                viewModel.text1 = text
-            }
             anchors{
                 verticalCenter: parent.verticalCenter
                 left: parent.left
@@ -45,16 +35,16 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluTextBox{
     placeholderText: qsTr("Single-line Input Box")
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
-        paddings: 10
+        Layout.preferredHeight: 68
+        padding: 10
         Layout.topMargin: 20
 
         FluPasswordBox{
@@ -76,26 +66,21 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluPasswordBox{
     placeholderText: qsTr("Please enter your password")
 }'
     }
 
-
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 36+multiine_textbox.height
-        paddings: 10
+        Layout.preferredHeight: 36+multiine_textbox.height
+        padding: 10
         Layout.topMargin: 20
 
         FluMultilineTextBox{
             id: multiine_textbox
             placeholderText: qsTr("Multi-line Input Box")
-            text:viewModel.text2
-            onTextChanged: {
-                viewModel.text2 = text
-            }
             disabled: text_box_multi_switch.checked
             anchors{
                 verticalCenter: parent.verticalCenter
@@ -114,16 +99,16 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluMultilineTextBox{
     placeholderText: qsTr("Multi-line Input Box")
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
-        paddings: 10
+        Layout.preferredHeight: 68
+        padding: 10
         Layout.topMargin: 20
         FluAutoSuggestBox{
             placeholderText: qsTr("AutoSuggestBox")
@@ -145,16 +130,16 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluAutoSuggestBox{
     placeholderText: qsTr("AutoSuggestBox")
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
-        paddings: 10
+        Layout.preferredHeight: 68
+        padding: 10
         Layout.topMargin: 20
         FluSpinBox{
             disabled: spin_box_switch.checked
@@ -174,7 +159,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluSpinBox{
 
 }'

example/qml/page/T_Theme.qml

@@ -11,11 +11,10 @@ FluScrollablePage{
     id: root
     title: qsTr("Theme")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        Layout.preferredHeight: 340
-        paddings: 10
+        Layout.preferredHeight: 408
+        padding: 10
 
         ColumnLayout{
             spacing:0
@@ -115,16 +114,27 @@ FluScrollablePage{
             }
             FluToggleSwitch{
                 Layout.topMargin: 5
-                checked: FluTheme.enableAnimation
+                checked: FluTheme.animationEnabled
                 onClicked: {
-                    FluTheme.enableAnimation = !FluTheme.enableAnimation
+                    FluTheme.animationEnabled = !FluTheme.animationEnabled
+                }
+            }
+            FluText{
+                text: qsTr("Open Blur Window")
+                Layout.topMargin: 20
+            }
+            FluToggleSwitch{
+                Layout.topMargin: 5
+                checked: FluTheme.blurBehindWindowEnabled
+                onClicked: {
+                    FluTheme.blurBehindWindowEnabled = !FluTheme.blurBehindWindowEnabled
                 }
             }
         }
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluTheme.accentColor = FluColors.Orange
 
 FluTheme.dark = true

example/qml/page/T_TimePicker.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("TimePicker")
     launchMode: FluPageType.SingleInstance
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
+        Layout.preferredHeight: 80
+        padding: 10
 
         ColumnLayout{
 
@@ -43,17 +42,17 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluTimePicker{
 
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 80
-        paddings: 10
+        Layout.preferredHeight: 80
+        padding: 10
 
         ColumnLayout{
 
@@ -83,7 +82,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluTimePicker{
     hourFormat:FluTimePickerType.HH
 }'

example/qml/page/T_Timeline.qml

@@ -44,7 +44,6 @@ FluScrollablePage{
             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)=> {
@@ -106,7 +105,6 @@ FluScrollablePage{
 
     RowLayout{
         spacing: 20
-        Layout.topMargin: 20
         FluTextBox{
             id: text_box
             text: "Technical testing 2015-09-01"

example/qml/page/T_ToggleSwitch.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("ToggleSwitch")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 68
+        padding: 10
         Row{
             spacing: 30
             anchors.verticalCenter: parent.verticalCenter
@@ -41,7 +40,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluToggleSwitch{
     text:"Text"
 }'

example/qml/page/T_Tooltip.qml

@@ -10,15 +10,14 @@ FluScrollablePage{
     title: qsTr("Tooltip")
 
     FluText{
-        Layout.topMargin: 20
         text: qsTr("Hover over Tultip and it pops up")
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 68
-        paddings: 10
+        Layout.preferredHeight: 68
+        padding: 10
 
         Column{
             spacing: 5
@@ -41,7 +40,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluIconButton{
     iconSource:FluentIcons.ChromeCloseContrast
     iconSize: 15
@@ -53,11 +52,11 @@ FluScrollablePage{
 '
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 68
-        paddings: 10
+        Layout.preferredHeight: 68
+        padding: 10
 
         Column{
             spacing: 5
@@ -84,7 +83,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluButton{
     id: button_1
     text: qsTr("Delete")

example/qml/page/T_Tour.qml

@@ -18,11 +18,10 @@ FluScrollablePage{
         ]
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 130
-        paddings: 10
-        Layout.topMargin: 20
+        Layout.preferredHeight: 130
+        padding: 10
 
         FluFilledButton{
             anchors{
@@ -66,7 +65,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluTour{
     id:tour
     steps:[

example/qml/page/T_TreeView.qml

@@ -9,14 +9,33 @@ FluContentPage {
 
     title: qsTr("TreeView")
 
+
     function treeData(){
-        const dig = (path = '0', level = 4) => {
+        const names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"]
+        function getRandomName(){
+            var randomIndex = Math.floor(Math.random() * names.length)
+            return names[randomIndex]
+        }
+        const addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
+        function getRandomAddresses(){
+            var randomIndex = Math.floor(Math.random() * addresses.length)
+            return addresses[randomIndex]
+        }
+        const avatars = ["qrc:/example/res/svg/avatar_1.svg", "qrc:/example/res/svg/avatar_2.svg", "qrc:/example/res/svg/avatar_3.svg", "qrc:/example/res/svg/avatar_4.svg","qrc:/example/res/svg/avatar_5.svg","qrc:/example/res/svg/avatar_6.svg","qrc:/example/res/svg/avatar_7.svg","qrc:/example/res/svg/avatar_8.svg","qrc:/example/res/svg/avatar_9.svg","qrc:/example/res/svg/avatar_10.svg","qrc:/example/res/svg/avatar_11.svg","qrc:/example/res/svg/avatar_12.svg"]
+        function getRandomAvatar(){
+            var randomIndex = Math.floor(Math.random() * avatars.length);
+            return avatars[randomIndex];
+        }
+        const dig = (path = '0', level = 5) => {
             const list = [];
-            for (let i = 0; i < 6; i += 1) {
+            for (let i = 0; i < 4; i += 1) {
                 const key = `${path}-${i}`;
                 const treeNode = {
                     title: key,
-                    key,
+                    _key: key,
+                    name: getRandomName(),
+                    avatar:tree_view.customItem(com_avatar,{avatar:getRandomAvatar()}),
+                    address: getRandomAddresses()
                 };
                 if (level > 0) {
                     treeNode.children = dig(key, level - 1);
@@ -28,104 +47,159 @@ FluContentPage {
         return dig();
     }
 
-    Column{
-        id: layout_column
-        spacing: 12
-        width: 300
-        anchors{
-            topMargin: 20
-            top:parent.top
-            left: parent.left
-            leftMargin: 10
-            bottom:parent.bottom
-            bottomMargin: 20
-        }
-
-        FluText{
-            text: qsTr("Total %1 data, %2 data currently displayed").arg(tree_view.count()).arg(tree_view.visibleCount())
-        }
-
-        FluText{
-            text: qsTr("A total of %1 data items are selected").arg(tree_view.selectionModel().length)
-        }
-
-        RowLayout{
-            spacing: 10
-            FluText{
-                text: "cellHeight:"
-                Layout.alignment: Qt.AlignVCenter
-            }
-            FluSlider{
-                id: slider_cell_height
-                value: 30
-                from: 30
-                to:100
-            }
-        }
-        RowLayout{
-            spacing: 10
-            FluText{
-                text: "depthPadding:"
-                Layout.alignment: Qt.AlignVCenter
-            }
-            FluSlider{
-                id: slider_depth_padding
-                value: 30
-                from: 30
-                to:100
-            }
-        }
-        FluToggleSwitch{
-            id: switch_showline
-            text:"showLine"
-            checked: false
-        }
-        FluToggleSwitch{
-            id: switch_draggable
-            text:"draggable"
-            checked: false
-        }
-        FluToggleSwitch{
-            id: switch_checkable
-            text:"checkable"
-            checked: false
-        }
-        FluButton{
-            text: "all expand"
-            onClicked: {
-                tree_view.allExpand()
-            }
-        }
-        FluButton{
-            text: "all collapse"
-            onClicked: {
-                tree_view.allCollapse()
+    Component{
+        id:com_avatar
+        Item{
+            FluClip{
+                anchors.centerIn: parent
+                width: height
+                height: parent.height/3*2
+                radius: [height/2,height/2,height/2,height/2]
+                Image{
+                    anchors.fill: parent
+                    source: {
+                        if(options && options.avatar){
+                            return options.avatar
+                        }
+                        return ""
+                    }
+                    sourceSize: Qt.size(80,80)
+                }
             }
         }
     }
-    FluArea{
+    FluFrame{
+        id:layout_controls
         anchors{
-            left: layout_column.right
+            left: parent.left
+            right: parent.right
             top: parent.top
+            topMargin: 10
+        }
+        height: 80
+        clip: true
+        Row{
+            spacing: 12
+            anchors{
+                left: parent.left
+                leftMargin: 10
+                verticalCenter: parent.verticalCenter
+            }
+            Column{
+                anchors.verticalCenter: parent.verticalCenter
+                RowLayout{
+                    spacing: 10
+                    FluText{
+                        text: "cellHeight:"
+                        Layout.alignment: Qt.AlignVCenter
+                    }
+                    FluSlider{
+                        id: slider_cell_height
+                        value: 38
+                        from: 38
+                        to:100
+                    }
+                }
+                RowLayout{
+                    spacing: 10
+                    FluText{
+                        text: "depthPadding:"
+                        Layout.alignment: Qt.AlignVCenter
+                    }
+                    FluSlider{
+                        id: slider_depth_padding
+                        value: 15
+                        from: 15
+                        to:100
+                    }
+                }
+            }
+            Column{
+                spacing: 8
+                anchors.verticalCenter: parent.verticalCenter
+                FluToggleSwitch{
+                    id: switch_showline
+                    text:"showLine"
+                    checked: false
+                }
+                FluToggleSwitch{
+                    id: switch_checkable
+                    text:"checkable"
+                    checked: false
+                }
+            }
+            Column{
+                spacing: 8
+                anchors.verticalCenter: parent.verticalCenter
+                FluButton{
+                    text: "all expand"
+                    onClicked: {
+                        tree_view.allExpand()
+                    }
+                }
+                FluButton{
+                    text: "all collapse"
+                    onClicked: {
+                        tree_view.allCollapse()
+                    }
+                }
+            }
+            FluButton{
+                text: "print selection model"
+                onClicked: {
+                    var printData = []
+                    var data = tree_view.selectionModel();
+                    console.debug(data.length)
+                    for(var i = 0; i <= data.length-1 ; i++){
+                        const newObj = Object.assign({}, data[i].data);
+                        delete newObj["__parent"];
+                        delete newObj["children"];
+                        printData.push(newObj)
+                    }
+                    console.debug(JSON.stringify(printData))
+                }
+            }
+        }
+    }
+
+    FluTreeView{
+        id:tree_view
+        anchors{
+            left: parent.left
+            top: layout_controls.bottom
+            topMargin: 10
             bottom: parent.bottom
             right: parent.right
-            rightMargin: 5
-            topMargin: 5
-            bottomMargin: 5
         }
-        FluShadow{}
-        FluTreeView{
-            id:tree_view
-            anchors.fill: parent
-            cellHeight: slider_cell_height.value
-            draggable:switch_draggable.checked
-            showLine: switch_showline.checked
-            checkable:switch_checkable.checked
-            depthPadding: slider_depth_padding.value
-            Component.onCompleted: {
-                var data = treeData()
-                dataSource = data
-            }
+        cellHeight: slider_cell_height.value
+        showLine: switch_showline.checked
+        checkable:switch_checkable.checked
+        depthPadding: slider_depth_padding.value
+        onCurrentChanged: {
+            showInfo(current.data.title)
+        }
+        columnSource:[
+            {
+                title: qsTr("Title"),
+                dataIndex: 'title',
+                width: 300
+            },{
+                title: qsTr("Name"),
+                dataIndex: 'name',
+                width: 100
+            },{
+                title: qsTr("Avatar"),
+                dataIndex: 'avatar',
+                width: 100
+            },{
+                title: qsTr("Address"),
+                dataIndex: 'address',
+                width: 200
+            },
+        ]
+        Component.onCompleted: {
+            var data = treeData()
+            dataSource = data
         }
     }
 }

example/qml/page/T_Typography.qml

@@ -10,15 +10,14 @@ FluContentPage {
     title: qsTr("Typography")
     rightPadding: 10
 
-    FluArea{
+    FluFrame{
         anchors{
             top:parent.top
             left: parent.left
             right: parent.right
             bottom: parent.bottom
-            topMargin: 20
         }
-        paddings: 10
+        padding: 10
         ColumnLayout{
             spacing: 0
             scale: textScale

example/qml/page/T_Watermark.qml

@@ -9,9 +9,8 @@ FluContentPage{
 
     title: qsTr("Watermark")
 
-    FluArea{
+    FluFrame{
         anchors.fill: parent
-        anchors.topMargin: 20
 
         ColumnLayout{
             anchors{

example/qml/viewmodel/SettingsViewModel.qml

@@ -1,14 +0,0 @@
-import QtQuick 2.15
-import FluentUI 1.0
-
-FluViewModel{
-
-    objectName: "SettingsViewModel"
-    scope: FluViewModelType.Application
-    property int displayMode
-
-    onInitData: {
-        displayMode = FluNavigationViewType.Auto
-    }
-
-}

example/qml/viewmodel/TextBoxViewModel.qml

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

example/qml/window/AboutWindow.qml

@@ -31,7 +31,7 @@ FluWindow {
                 MouseArea{
                     anchors.fill: parent
                     onClicked: {
-                        FluApp.navigate("/")
+                        FluRouter.navigate("/")
                     }
                 }
             }

example/qml/window/CrashWindow.qml

@@ -71,7 +71,7 @@ FluWindow {
         FluFilledButton{
             text: qsTr("Restart Program")
             onClicked: {
-                FluApp.exit(931)
+                FluRouter.exit(931)
             }
         }
     }

example/qml/window/FluentInitializrWindow.qml

@@ -8,26 +8,26 @@ import "../component"
 FluWindowDialog {
 
     id:window
-    title:qsTr("FluentUI Initalizr")
+    title:qsTr("FluentUI Initializr")
     width: 600
     height: 400
 
     contentDelegate:Component{
         Item{
             Connections{
-                target: InitalizrHelper
+                target: InitializrHelper
                 function onError(message){
                     showError(message)
                 }
                 function onSuccess(path){
-                    FluTools.showFileInFolder(path+"/CMakeLists.txt")
+                    FluTools.showFileInFolder(path)
                     window.close()
                 }
             }
 
             FluText{
                 id:text_title
-                text:qsTr("FluentUI Initalizr")
+                text:qsTr("FluentUI Initializr")
                 font: FluTextStyle.Title
                 anchors{
                     left: parent.left
@@ -102,7 +102,7 @@ FluWindowDialog {
                         width: 120
                         anchors.verticalCenter: parent.verticalCenter
                         onClicked: {
-                            InitalizrHelper.generate(text_box_name.text,text_box_path.text)
+                            InitializrHelper.generate(text_box_name.text,text_box_path.text)
                         }
                     }
                 }

example/qml/window/HotloadWindow.qml

@@ -20,7 +20,7 @@ FluWindow {
             loader.reload()
         }
     }
-    FluArea{
+    FluFrame{
         anchors.fill: parent
         FluRemoteLoader{
             id:loader
@@ -41,7 +41,7 @@ FluWindow {
         }
         FluText{
             text: qsTr("Drag in a qml file")
-            font.pixelSize: 26
+            font: FluTextStyle.Title
             anchors.centerIn: parent
             visible: !loader.itemLodaer().item && loader.statusMode === FluStatusLayoutType.Success
         }

example/qml/window/LoginWindow.qml

@@ -51,7 +51,7 @@ FluWindow {
                     showError(qsTr("Please feel free to enter a password"))
                     return
                 }
-                onResult({password:textbox_password.text})
+                setResult({password:textbox_password.text})
                 window.close()
             }
         }

example/qml/window/MainWindow.qml

@@ -7,7 +7,6 @@ import Qt.labs.platform 1.1
 import FluentUI 1.0
 import example 1.0
 import "../component"
-import "../viewmodel"
 import "../global"
 
 FluWindow {
@@ -16,7 +15,7 @@ FluWindow {
     title: "FluentUI"
     width: 1000
     height: 680
-    minimumWidth: 520
+    minimumWidth: 800
     minimumHeight: 200
     launchMode: FluWindowType.SingleTask
     fitsAppBarWindows: true
@@ -29,37 +28,27 @@ FluWindow {
         z:7
     }
 
-    SettingsViewModel{
-        id:viewmodel_settings
+    FluentInitializrWindow{
+        id:fluent_Initializr
     }
 
     FluEvent{
-        id:event_checkupdate
         name: "checkUpdate"
         onTriggered: {
             checkUpdate(false)
         }
     }
 
-    onFirstVisible: {
-        timer_tour_delay.restart()
-    }
-
-    Timer{
-        id:timer_tour_delay
-        interval: 200
-        onTriggered: {
-            tour.open()
-        }
+    onLazyLoad: {
+        tour.open()
     }
 
     Component.onCompleted: {
         checkUpdate(true)
-        FluEventBus.registerEvent(event_checkupdate)
     }
 
     Component.onDestruction: {
-        FluEventBus.unRegisterEvent(event_checkupdate)
+        FluRouter.exit()
     }
 
     SystemTrayIcon {
@@ -71,7 +60,7 @@ FluWindow {
             MenuItem {
                 text: "退出"
                 onTriggered: {
-                    FluApp.exit()
+                    FluRouter.exit()
                 }
             }
         }
@@ -106,7 +95,7 @@ FluWindow {
         positiveText: qsTr("Quit")
         neutralText: qsTr("Cancel")
         onPositiveClicked:{
-            FluApp.exit(0)
+            FluRouter.exit(0)
         }
     }
 
@@ -116,9 +105,9 @@ FluWindow {
             width: 186
             FluMenuItem{
                 text: qsTr("Open in Separate Window")
-                font.pixelSize: 12
+                font: FluTextStyle.Caption
                 onClicked: {
-                    FluApp.navigate("/pageWindow",{title:modelData.title,url:modelData.url})
+                    FluRouter.navigate("/pageWindow",{title:modelData.title,url:modelData.url})
                 }
             }
         }
@@ -175,14 +164,14 @@ FluWindow {
                     }
                 }
                 Component.onCompleted: {
-                    appBar.setHitTestVisible(layout_back_buttons)
+                    window.setHitTestVisible(layout_back_buttons)
                 }
             }
             FluRemoteLoader{
                 id:loader
                 lazy: true
                 anchors.fill: parent
-                source: "https://zhu-zichu.gitee.io/Qt_168_LieflatPage.qml"
+                source: "https://zhu-zichu.gitee.io/Qt_174_LieflatPage.qml"
             }
         }
         front: Item{
@@ -197,7 +186,7 @@ FluWindow {
                 z:999
                 //Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式
                 //                pageMode: FluNavigationViewType.Stack
-                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存，可以配合FluViewModel保存页面数据（推荐）
+                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存
                 pageMode: FluNavigationViewType.NoStack
                 items: ItemsOriginal
                 footerItems:ItemsFooter
@@ -207,7 +196,7 @@ FluWindow {
                     }
                     return FluTools.isMacos() ? 20 : 0
                 }
-                displayMode:viewmodel_settings.displayMode
+                displayMode: GlobalModel.displayMode
                 logo: "qrc:/example/res/image/favicon.ico"
                 title:"FluentUI"
                 onLogoClicked:{
@@ -233,9 +222,9 @@ FluWindow {
                     ItemsOriginal.paneItemMenu = nav_item_right_menu
                     ItemsFooter.navigationView = nav_view
                     ItemsFooter.paneItemMenu = nav_item_right_menu
-                    appBar.setHitTestVisible(nav_view.buttonMenu)
-                    appBar.setHitTestVisible(nav_view.buttonBack)
-                    appBar.setHitTestVisible(nav_view.imageLogo)
+                    window.setHitTestVisible(nav_view.buttonMenu)
+                    window.setHitTestVisible(nav_view.buttonBack)
+                    window.setHitTestVisible(nav_view.imageLogo)
                     setCurrentIndex(0)
                 }
             }
@@ -268,7 +257,7 @@ FluWindow {
     }
 
     function handleDarkChanged(button){
-        if(!FluTheme.enableAnimation || window.fitsAppBarWindows === false){
+        if(!FluTheme.animationEnabled || window.fitsAppBarWindows === false){
             changeDark()
         }else{
             if(loader_reveal.sourceComponent){
@@ -355,11 +344,11 @@ FluWindow {
         }
     }
 
-    FluNetworkCallable{
+    NetworkCallable{
         id:callable
         property bool silent: true
         onStart: {
-            console.debug("satrt check update...")
+            console.debug("start check update...")
         }
         onFinish: {
             console.debug("check update finish")
@@ -391,7 +380,7 @@ FluWindow {
 
     function checkUpdate(silent){
         callable.silent = silent
-        FluNetwork.get("https://api.github.com/repos/zhuzichu520/FluentUI/releases/latest")
+        Network.get("https://api.github.com/repos/zhuzichu520/FluentUI/releases/latest")
         .go(callable)
     }
 }

example/qml/window/PageWindow.qml

@@ -16,7 +16,7 @@ FluWindow {
     onInitArgument:
         (arg)=>{
             window.title = arg.title
-            loader.setSource( arg.url,{animDisabled:true})
+            loader.setSource(arg.url,{animationEnabled:false})
         }
     FluLoader{
         id: loader

example/res/template/src/App.qml.in

@@ -4,14 +4,14 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import FluentUI 1.0
 
-Item {
+FluLauncher {
     id: app
     Component.onCompleted: {
         FluApp.init(app)
         FluApp.windowIcon = "qrc:/logo.ico"
-        FluApp.routes = {
+        FluRouter.routes = {
             "/":"qrc:/main.qml",
         }
-        FluApp.navigate("/")
+        FluRouter.navigate("/")
     }
 }

example/res/template/src/CMakeLists.txt.in

@@ -98,7 +98,7 @@ if (CMAKE_BUILD_TYPE MATCHES "Release")
         add_custom_target(Script-DeployRelease
             COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_SOURCE_DIR}/dist
             COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} ${CMAKE_SOURCE_DIR}/dist
-            COMMAND ${QT_DEPLOY_QT} ${CMAKE_SOURCE_DIR}/dist/${PROJECT_NAME}.exe -qmldir=${CMAKE_CURRENT_LIST_DIR}
+            COMMAND ${QT_DEPLOY_QT} --qmldir=${CMAKE_CURRENT_LIST_DIR} --plugindir ${CMAKE_SOURCE_DIR}/dist/plugins --no-translations --compiler-runtime ${CMAKE_SOURCE_DIR}/dist/${PROJECT_NAME}.exe
             COMMENT "Windows Deploying Qt Dependencies After Build........."
             SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
             WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}

example/src/AppInfo.cpp

@@ -1,17 +1,15 @@
 #include "AppInfo.h"
 
 #include <QQmlContext>
-#include <QDebug>
 #include <QGuiApplication>
 #include "Version.h"
 
 AppInfo::AppInfo(QObject *parent)
-    : QObject{parent}
-{
+        : QObject{parent} {
     version(APPLICATION_VERSION);
 }
 
-void AppInfo::testCrash(){
+[[maybe_unused]] void AppInfo::testCrash() {
     auto *crash = reinterpret_cast<volatile int *>(0);
     *crash = 0;
 }

example/src/AppInfo.h

@@ -1,20 +1,18 @@
-#ifndef APPINFO_H
-#define APPINFO_H
+#pragma once
 
 #include <QObject>
 #include <QQmlApplicationEngine>
 #include "stdafx.h"
 #include "singleton.h"
 
-class AppInfo : public QObject
-{
-    Q_OBJECT
-    Q_PROPERTY_AUTO(QString,version)
+class AppInfo : public QObject {
+Q_OBJECT
+Q_PROPERTY_AUTO(QString, version)
 private:
     explicit AppInfo(QObject *parent = nullptr);
-public:
-    SINGLETON(AppInfo)
-    Q_INVOKABLE void testCrash();
-};
 
-#endif // APPINFO_H
+public:
+SINGLETON(AppInfo)
+
+    [[maybe_unused]] Q_INVOKABLE void testCrash();
+};

example/src/app_dmp.h

@@ -1,5 +1,4 @@
-#ifndef APP_DUMP_H
-#define APP_DUMP_H
+#pragma once
 
 #include <Windows.h>
 #include <DbgHelp.h>
@@ -12,71 +11,69 @@
 
 #pragma comment(lib, "Dbghelp.lib")
 
-static void miniDumpWriteDump(HANDLE hProcess,DWORD ProcessId,HANDLE hFile,MINIDUMP_TYPE DumpType,CONST PMINIDUMP_EXCEPTION_INFORMATION ExceptionParam,CONST PMINIDUMP_USER_STREAM_INFORMATION UserStreamParam,CONST PMINIDUMP_CALLBACK_INFORMATION CallbackParam){
-    typedef HRESULT (WINAPI* MiniDumpWriteDumpPtr)(HANDLE hProcess,DWORD ProcessId,HANDLE hFile,MINIDUMP_TYPE DumpType,CONST PMINIDUMP_EXCEPTION_INFORMATION ExceptionParam,CONST PMINIDUMP_USER_STREAM_INFORMATION UserStreamParam,CONST PMINIDUMP_CALLBACK_INFORMATION CallbackParam);
+static void
+miniDumpWriteDump(HANDLE hProcess, DWORD ProcessId, HANDLE hFile, CONST PMINIDUMP_EXCEPTION_INFORMATION ExceptionParam, CONST PMINIDUMP_CALLBACK_INFORMATION CallbackParam) {
+    typedef HRESULT (WINAPI *MiniDumpWriteDumpPtr)(HANDLE hProcess, DWORD ProcessId, HANDLE hFile, MINIDUMP_TYPE DumpType, CONST PMINIDUMP_EXCEPTION_INFORMATION ExceptionParam,
+                                                   CONST PMINIDUMP_USER_STREAM_INFORMATION UserStreamParam, CONST PMINIDUMP_CALLBACK_INFORMATION CallbackParam);
     HMODULE module = LoadLibraryW(L"Dbghelp.dll");
-    if (module)
-    {
+    if (module) {
         MiniDumpWriteDumpPtr mini_dump_write_dump;
-        mini_dump_write_dump= reinterpret_cast<MiniDumpWriteDumpPtr>(GetProcAddress(module, "MiniDumpWriteDump"));
-        if (mini_dump_write_dump)
-        {
-            mini_dump_write_dump(hProcess,ProcessId,hFile,DumpType,ExceptionParam,UserStreamParam,CallbackParam);
+        mini_dump_write_dump = reinterpret_cast<MiniDumpWriteDumpPtr>(GetProcAddress(module, "MiniDumpWriteDump"));
+        if (mini_dump_write_dump) {
+            mini_dump_write_dump(hProcess, ProcessId, hFile, static_cast<MINIDUMP_TYPE>(80), ExceptionParam, nullptr, CallbackParam);
         }
     }
 }
 
 BOOL CALLBACK MyMiniDumpCallback(PVOID, const PMINIDUMP_CALLBACK_INPUT input, PMINIDUMP_CALLBACK_OUTPUT output) {
-    if (input == NULL || output == NULL)
+    if (input == nullptr || output == nullptr)
         return FALSE;
 
     BOOL ret = FALSE;
     switch (input->CallbackType) {
-    case IncludeModuleCallback:
-    case IncludeThreadCallback:
-    case ThreadCallback:
-    case ThreadExCallback:
-        ret = TRUE;
-        break;
-    case ModuleCallback: {
-        if (!(output->ModuleWriteFlags & ModuleReferencedByMemory)) {
-            output->ModuleWriteFlags &= ~ModuleWriteModule;
+        case IncludeModuleCallback:
+        case IncludeThreadCallback:
+        case ThreadCallback:
+        case ThreadExCallback:
+            ret = TRUE;
+            break;
+        case ModuleCallback: {
+            if (!(output->ModuleWriteFlags & ModuleReferencedByMemory)) {
+                output->ModuleWriteFlags &= ~ModuleWriteModule;
+            }
+            ret = TRUE;
         }
-        ret = TRUE;
-    } break;
-    default:
-        break;
+            break;
+        default:
+            break;
     }
     return ret;
 }
 
-void WriteDump(EXCEPTION_POINTERS* exp, const std::wstring& path) {
-    HANDLE h = ::CreateFileW(path.c_str(), GENERIC_WRITE | GENERIC_READ, FILE_SHARE_WRITE | FILE_SHARE_READ, NULL, CREATE_ALWAYS, FILE_ATTRIBUTE_NORMAL, NULL);
+void WriteDump(EXCEPTION_POINTERS *exp, const std::wstring &path) {
+    HANDLE h = ::CreateFileW(path.c_str(), GENERIC_WRITE | GENERIC_READ, FILE_SHARE_WRITE | FILE_SHARE_READ, nullptr, CREATE_ALWAYS, FILE_ATTRIBUTE_NORMAL, nullptr);
     MINIDUMP_EXCEPTION_INFORMATION info;
     info.ThreadId = ::GetCurrentThreadId();
     info.ExceptionPointers = exp;
     info.ClientPointers = FALSE;
     MINIDUMP_CALLBACK_INFORMATION mci;
-    mci.CallbackRoutine = (MINIDUMP_CALLBACK_ROUTINE)MyMiniDumpCallback;
-    mci.CallbackParam = 0;
-    MINIDUMP_TYPE mdt = (MINIDUMP_TYPE)(MiniDumpWithIndirectlyReferencedMemory | MiniDumpScanMemory);
-    miniDumpWriteDump(GetCurrentProcess(), GetCurrentProcessId(), h, mdt, &info, NULL, &mci);
+    mci.CallbackRoutine = (MINIDUMP_CALLBACK_ROUTINE) MyMiniDumpCallback;
+    mci.CallbackParam = nullptr;
+    miniDumpWriteDump(GetCurrentProcess(), GetCurrentProcessId(), h, &info, &mci);
     ::CloseHandle(h);
 }
 
-LONG WINAPI MyUnhandledExceptionFilter(EXCEPTION_POINTERS* exp) {
-    const QString dumpFileName = QString("%1_%2.dmp").arg("crash",QDateTime::currentDateTime().toString("yyyyMMdd_hhmmss"));
-    const QString dumpDirPath = QStandardPaths::writableLocation(QStandardPaths::AppLocalDataLocation)+"/dmp";
+LONG WINAPI MyUnhandledExceptionFilter(EXCEPTION_POINTERS *exp) {
+    const QString dumpFileName = QString("%1_%2.dmp").arg("crash", QDateTime::currentDateTime().toString("yyyyMMdd_hhmmss"));
+    const QString dumpDirPath = QStandardPaths::writableLocation(QStandardPaths::AppLocalDataLocation) + "/dmp";
     const QDir dumpDir(dumpDirPath);
-    if(!dumpDir.exists()){
+    if (!dumpDir.exists()) {
         dumpDir.mkpath(dumpDirPath);
     }
     QString dumpFilePath = dumpDir.filePath(dumpFileName);
     WriteDump(exp, dumpFilePath.toStdWString());
     QStringList arguments;
     arguments << "-crashed=" + dumpFilePath;
-    QProcess::startDetached(qApp->applicationFilePath(), arguments);
+    QProcess::startDetached(QGuiApplication::applicationFilePath(), arguments);
     return EXCEPTION_EXECUTE_HANDLER;
-}
-
-#endif // APP_DUMP_H
+}

example/src/component/CircularReveal.cpp

@@ -3,43 +3,43 @@
 #include <QQuickItemGrabResult>
 #include <QPainterPath>
 
-CircularReveal::CircularReveal(QQuickItem* parent) : QQuickPaintedItem(parent)
-{
+CircularReveal::CircularReveal(QQuickItem *parent) : QQuickPaintedItem(parent) {
+    _target = nullptr;
+    _radius = 0;
     _anim = new QPropertyAnimation(this, "radius", this);
-    setVisible(false);
     _anim->setDuration(333);
     _anim->setEasingCurve(QEasingCurve::OutCubic);
-    connect(_anim, &QPropertyAnimation::finished,this,[=](){
+    setVisible(false);
+    connect(_anim, &QPropertyAnimation::finished, this, [=]() {
         update();
         setVisible(false);
         Q_EMIT animationFinished();
     });
-    connect(this,&CircularReveal::radiusChanged,this,[=](){
+    connect(this, &CircularReveal::radiusChanged, this, [=]() {
         update();
     });
 }
 
-void CircularReveal::paint(QPainter* painter)
-{
+void CircularReveal::paint(QPainter *painter) {
     painter->save();
     painter->drawImage(QRect(0, 0, static_cast<int>(width()), static_cast<int>(height())), _source);
     QPainterPath path;
-    path.moveTo(_center.x(),_center.y());
-    path.addEllipse(QPointF(_center.x(),_center.y()), _radius, _radius);
+    path.moveTo(_center.x(), _center.y());
+    path.addEllipse(QPointF(_center.x(), _center.y()), _radius, _radius);
     painter->setCompositionMode(QPainter::CompositionMode_Clear);
     painter->fillPath(path, Qt::black);
     painter->restore();
 }
 
-void CircularReveal::start(int w,int h,const QPoint& center,int radius){
+[[maybe_unused]] void CircularReveal::start(int w, int h, const QPoint &center, int radius) {
     _anim->setStartValue(0);
     _anim->setEndValue(radius);
     _center = center;
-    _grabResult = _target->grabToImage(QSize(w,h));
+    _grabResult = _target->grabToImage(QSize(w, h));
     connect(_grabResult.data(), &QQuickItemGrabResult::ready, this, &CircularReveal::handleGrabResult);
 }
 
-void CircularReveal::handleGrabResult(){
+void CircularReveal::handleGrabResult() {
     _grabResult.data()->image().swap(_source);
     update();
     setVisible(true);

example/src/component/CircularReveal.h

@@ -1,5 +1,4 @@
-#ifndef CIRCULARREVEAL_H
-#define CIRCULARREVEAL_H
+#pragma once
 
 #include <QQuickItem>
 #include <QQuickPaintedItem>
@@ -7,23 +6,26 @@
 #include <QPropertyAnimation>
 #include "src/stdafx.h"
 
-class CircularReveal : public QQuickPaintedItem
-{
-    Q_OBJECT
-    Q_PROPERTY_AUTO(QQuickItem*,target)
-    Q_PROPERTY_AUTO(int,radius)
+class CircularReveal : public QQuickPaintedItem {
+Q_OBJECT
+Q_PROPERTY_AUTO_P(QQuickItem*, target)
+Q_PROPERTY_AUTO(int, radius)
 public:
-    CircularReveal(QQuickItem* parent = nullptr);
-    void paint(QPainter* painter) override;
-    Q_INVOKABLE void start(int w,int h,const QPoint& center,int radius);
+    explicit CircularReveal(QQuickItem *parent = nullptr);
+
+    void paint(QPainter *painter) override;
+
+    [[maybe_unused]] Q_INVOKABLE void start(int w, int h, const QPoint &center, int radius);
+
     Q_SIGNAL void imageChanged();
+
     Q_SIGNAL void animationFinished();
+
     Q_SLOT void handleGrabResult();
+
 private:
-    QPropertyAnimation* _anim = nullptr;
+    QPropertyAnimation *_anim = nullptr;
     QImage _source;
     QPoint _center;
-    QSharedPointer<QQuickItemGrabResult>  _grabResult;
+    QSharedPointer<QQuickItemGrabResult> _grabResult;
 };
-
-#endif // CIRCULARREVEAL_H

example/src/component/FileWatcher.cpp

@@ -1,24 +1,23 @@
 #include "FileWatcher.h"
 
-FileWatcher::FileWatcher(QObject *parent)
-    : QObject{parent}
-{
-    connect(&_watcher, &QFileSystemWatcher::fileChanged, this, [=](const QString &path){
+FileWatcher::FileWatcher(QObject *parent) : QObject{parent} {
+    connect(&_watcher, &QFileSystemWatcher::fileChanged, this, [=](const QString &path) {
         Q_EMIT fileChanged();
         clean();
         _watcher.addPath(_path);
     });
-    connect(this,&FileWatcher::pathChanged,this,[=](){
+    connect(this, &FileWatcher::pathChanged, this, [=]() {
         clean();
-        _watcher.addPath(_path.replace("file:///",""));
+        _watcher.addPath(_path.replace("file:///", ""));
     });
-    if(!_path.isEmpty()){
+    if (!_path.isEmpty()) {
         _watcher.addPath(_path);
     }
 }
 
-void FileWatcher::clean(){
-    foreach (const QString &item,  _watcher.files()) {
+void FileWatcher::clean() {
+    for (int i = 0; i <= _watcher.files().size() - 1; ++i) {
+        auto item = _watcher.files().at(i);
         _watcher.removePath(item);
     }
 }

example/src/component/FileWatcher.h

@@ -1,22 +1,21 @@
-#ifndef FILEWATCHER_H
-#define FILEWATCHER_H
+#pragma once
 
 #include <QObject>
 #include <QFileSystemWatcher>
 #include <QtQml/qqml.h>
 #include "src/stdafx.h"
 
-class FileWatcher : public QObject
-{
-    Q_OBJECT
-    Q_PROPERTY_AUTO(QString,path);
+class FileWatcher : public QObject {
+Q_OBJECT
+Q_PROPERTY_AUTO(QString, path);
 public:
     explicit FileWatcher(QObject *parent = nullptr);
+
     Q_SIGNAL void fileChanged();
+
 private:
     void clean();
+
 private:
     QFileSystemWatcher _watcher;
 };
-
-#endif // FILEWATCHER_H

example/src/component/FpsItem.cpp

@@ -3,16 +3,16 @@
 #include <QTimer>
 #include <QQuickWindow>
 
-FpsItem::FpsItem()
-{
-    QTimer *timer = new QTimer(this);
-    connect(timer, &QTimer::timeout, this, [this]{
+FpsItem::FpsItem() {
+    _fps = 0;
+    auto *timer = new QTimer(this);
+    connect(timer, &QTimer::timeout, this, [this] {
         fps(_frameCount);
         _frameCount = 0;
     });
-    connect(this, &QQuickItem::windowChanged, this, [this]{
-        if (window()){
-            connect(window(), &QQuickWindow::afterRendering, this, [this]{ _frameCount++; }, Qt::DirectConnection);
+    connect(this, &QQuickItem::windowChanged, this, [this] {
+        if (window()) {
+            connect(window(), &QQuickWindow::afterRendering, this, [this] { _frameCount++; }, Qt::DirectConnection);
         }
     });
     timer->start(1000);

example/src/component/FpsItem.h

@@ -1,19 +1,15 @@
-#ifndef FPSITEM_H
-#define FPSITEM_H
+#pragma once
 
 #include <QQuickItem>
 #include "src/stdafx.h"
 
-class FpsItem : public QQuickItem
-{
-    Q_OBJECT
-    Q_PROPERTY_AUTO(int,fps)
+class FpsItem : public QQuickItem {
+Q_OBJECT
+Q_PROPERTY_AUTO(int, fps)
 public:
     FpsItem();
 
 private:
     int _frameCount = 0;
 
-};
-
-#endif // FPSITEM_H
+};

example/src/component/OpenGLItem.cpp

@@ -0,0 +1,93 @@
+#include "OpenGLItem.h"
+
+#include <QOpenGLFramebufferObjectFormat>
+#include <QOpenGLShaderProgram>
+
+class FBORenderer : public QQuickFramebufferObject::Renderer, protected QOpenGLFunctions {
+public:
+    explicit FBORenderer(const OpenGLItem *item);
+
+    void render() override;
+
+    QOpenGLFramebufferObject *createFramebufferObject(const QSize &size) override;
+
+    QOpenGLShaderProgram program;
+    const OpenGLItem *item = nullptr;
+};
+
+FBORenderer::FBORenderer(const OpenGLItem *item) {
+    this->item = item;
+    initializeOpenGLFunctions();
+    program.addCacheableShaderFromSourceCode(QOpenGLShader::Vertex,
+                                             "attribute highp vec4 vertices;"
+                                             "varying highp vec2 coords;"
+                                             "void main() {"
+                                             "    gl_Position = vertices;"
+                                             "    coords = vertices.xy;"
+                                             "}");
+    program.addCacheableShaderFromSourceCode(QOpenGLShader::Fragment,
+                                             "uniform lowp float t;"
+                                             "varying highp vec2 coords;"
+                                             "void main() {"
+                                             "    lowp float i = 1. - (pow(abs(coords.x), 4.) + pow(abs(coords.y), 4.));"
+                                             "    i = smoothstep(t - 0.8, t + 0.8, i);"
+                                             "    i = floor(i * 20.) / 20.;"
+                                             "    gl_FragColor = vec4(coords * .5 + .5, i, i);"
+                                             "}");
+
+    program.bindAttributeLocation("vertices", 0);
+    program.link();
+}
+
+QOpenGLFramebufferObject *FBORenderer::createFramebufferObject(const QSize &size) {
+    QOpenGLFramebufferObjectFormat format;
+    format.setAttachment(QOpenGLFramebufferObject::CombinedDepthStencil);
+    format.setSamples(4);
+    return new QOpenGLFramebufferObject(size, format);
+}
+
+void FBORenderer::render() {
+    glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
+    glEnable(GL_DEPTH_TEST);
+    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
+    program.bind();
+    program.enableAttributeArray(0);
+    float values[] = {
+            -1, -1,
+            1, -1,
+            -1, 1,
+            1, 1
+    };
+    glBindBuffer(GL_ARRAY_BUFFER, 0);
+    program.setAttributeArray(0, GL_FLOAT, values, 2);
+    program.setUniformValue("t", (float) item->t());
+    glViewport(0, 0, qRound(item->width()), qRound(item->height()));
+    glDisable(GL_DEPTH_TEST);
+    glEnable(GL_BLEND);
+    glBlendFunc(GL_SRC_ALPHA, GL_ONE);
+    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
+    program.disableAttributeArray(0);
+    program.release();
+}
+
+
+OpenGLItem::OpenGLItem(QQuickItem *parent) : QQuickFramebufferObject(parent) {
+    setMirrorVertically(true);
+    startTimer(1);
+}
+
+void OpenGLItem::timerEvent(QTimerEvent *) {
+    update();
+}
+
+void OpenGLItem::setT(qreal t) {
+    if (t == m_t)
+        return;
+    m_t = t;
+    emit tChanged();
+}
+
+
+QQuickFramebufferObject::Renderer *OpenGLItem::createRenderer() const {
+    return new FBORenderer(this);
+}

example/src/component/OpenGLItem.h

@@ -0,0 +1,29 @@
+#pragma once
+
+#include <QtQuick/QQuickItem>
+#include <QOpenGLFunctions>
+#include <QQuickFramebufferObject>
+
+class FBORenderer;
+
+class OpenGLItem : public QQuickFramebufferObject, protected QOpenGLFunctions {
+Q_OBJECT
+    Q_PROPERTY(qreal t READ t WRITE setT NOTIFY tChanged)
+public:
+    explicit OpenGLItem(QQuickItem *parent = nullptr);
+
+    [[nodiscard]] QQuickFramebufferObject::Renderer *createRenderer() const override;
+
+    void timerEvent(QTimerEvent *) override;
+
+    [[nodiscard]] qreal t() const { return m_t; }
+
+    void setT(qreal t);
+
+signals:
+
+    void tChanged();
+
+private:
+    qreal m_t{};
+};