update

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
+        PRIVATE
-    QT_MESSAGELOGCONTEXT
+        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,18 +10,18 @@ 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)
@@ -32,46 +32,46 @@ find_program(QT_LUPDATE NAMES lupdate)
 find_program(QT_LRELEASE NAMES lrelease)
 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}_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_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}_en_US.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
-    COMMAND ${QT_LRELEASE} ${PROJECT_NAME}_zh_CN.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 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
+        COMMAND ${CMAKE_COMMAND} -E copy ${PROJECT_NAME}_en_US.qm ${PROJECT_NAME}_zh_CN.qm ${APPLICATION_DIR_PATH}/i18n
-    SOURCES ${TS_FILE_PATHS}
+        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
+        ${CMAKE_SOURCE_DIR}/.cmake/Version.h.in
-    ${HEADER_FILE_VERSION_PATH}
+        ${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
+            ${CMAKE_SOURCE_DIR}/.cmake/version_exe.rc.in
-        ${EXAMPLE_VERSION_RC_PATH}
+            ${EXAMPLE_VERSION_RC_PATH}
     )
-configure_file(
+    configure_file(
-    ${CMAKE_SOURCE_DIR}/.cmake/InstallerScript.iss.in
+            ${CMAKE_SOURCE_DIR}/.cmake/InstallerScript.iss.in
-    ${CMAKE_SOURCE_DIR}/action-cli/InstallerScript.iss
+            ${CMAKE_SOURCE_DIR}/action-cli/InstallerScript.iss
-)
+    )
-endif()
+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()
+endif ()
-if(${QT_VERSION_MAJOR} GREATER_EQUAL 6)
+if (${QT_VERSION_MAJOR} GREATER_EQUAL 6)
     qt_add_executable(${PROJECT_NAME}
-        MANUAL_FINALIZATION
+            MANUAL_FINALIZATION
-        ${sources_files}
+            ${sources_files}
     )
-else()
+else ()
     add_executable(${PROJECT_NAME}
-        ${sources_files}
+            ${sources_files}
     )
-endif()
+endif ()
 add_dependencies(${PROJECT_NAME} Script-UpdateTranslations)
 
 #复制程序运行所需要的动态库
-if(WIN32)
+if (WIN32)
-    if(MSVC)
+    if (MSVC)
-        if(CMAKE_SIZEOF_VOID_P EQUAL 4)
+        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()
+        endif ()
-    elseif(MINGW)
+    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_GUI_IDENTIFIER my.${PROJECT_NAME}.com
-    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
+        MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
-    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
+        MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
-    MACOSX_BUNDLE TRUE
+        MACOSX_BUNDLE TRUE
-    WIN32_EXECUTABLE TRUE
+        WIN32_EXECUTABLE TRUE
 )
 
 #Release也支持日志打印代码位置
 target_compile_definitions(${PROJECT_NAME}
-    PRIVATE
+        PRIVATE
-    QT_MESSAGELOGCONTEXT
+        QT_MESSAGELOGCONTEXT
 )
 
 #目标文件链接库
 target_link_libraries(${PROJECT_NAME} PRIVATE
-    Qt${QT_VERSION_MAJOR}::Quick
+        Qt${QT_VERSION_MAJOR}::Quick
-    Qt${QT_VERSION_MAJOR}::Svg
+        Qt${QT_VERSION_MAJOR}::Svg
-    Qt${QT_VERSION_MAJOR}::Network
+        Qt${QT_VERSION_MAJOR}::Network
-    fluentuiplugin
+        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 remove_directory ${CMAKE_SOURCE_DIR}/dist
-            COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_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}
+                COMMAND ${QT_DEPLOY_QT} ${CMAKE_SOURCE_DIR}/dist/${PROJECT_NAME}.app -qmldir=${CMAKE_CURRENT_LIST_DIR}
-            COMMENT "MacOs Deploying Qt Dependencies After Build........."
+                COMMENT "MacOs Deploying Qt Dependencies After Build........."
-            SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
+                SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
-            WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
+                WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
         )
-    endif()
+    endif ()
-    if(WIN32)
+    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 remove_directory ${CMAKE_SOURCE_DIR}/dist
-            COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_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........."
+                COMMENT "Windows Deploying Qt Dependencies After Build........."
-            SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
+                SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
-            WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
+                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,12 +176,9 @@
         <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>
@@ -197,7 +193,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 +203,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
+        Network.openLog = false
-        FluNetwork.setInterceptor(function(param){
+        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
+        FluTheme.animationEnabled = true
-        FluApp.routes = {
+        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{
+    FluFrame{
-        width: 500
+        Layout.preferredWidth: 500
-        height: 370
+        Layout.preferredHeight: 370
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         FluChart{
             anchors.fill: parent
@@ -69,10 +69,10 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
-        width: 500
+        Layout.preferredWidth: 500
-        height: 370
+        Layout.preferredHeight: 370
-        paddings: 10
+        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{
+    FluFrame{
-        height: 370
+        Layout.preferredWidth: 500
-        width: 500
+        Layout.preferredHeight: 370
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         FluChart{
             anchors.fill: parent

example/qml/chart/T_LineChart.qml

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

example/qml/chart/T_PieChart.qml

@@ -9,10 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Pie Chart")
 
-    FluArea{
+    FluFrame{
-        width: 500
+        Layout.preferredWidth: 500
-        height: 370
+        Layout.preferredHeight: 370
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         FluChart{
             anchors.fill: parent
@@ -50,10 +50,10 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
-        width: 500
+        Layout.preferredWidth: 500
-        height: 370
+        Layout.preferredHeight: 370
-        paddings: 10
+        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{
+    FluFrame{
-        width: 500
+        Layout.preferredWidth: 500
-        height: 370
+        Layout.preferredHeight: 370
-        paddings: 10
+        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{
+    FluFrame{
-        width: 500
+        Layout.preferredWidth: 500
-        height: 370
+        Layout.preferredHeight: 370
-        paddings: 10
+        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{
+    FluFrame{
-        height: 370
+        Layout.preferredWidth: 500
-        width: 500
+        Layout.preferredHeight: 370
-        paddings: 10
+        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,7 +480,7 @@ FluObject{
         FluPaneItem{
             title: qsTr("Hot Loader")
             onTapListener: function(){
-                FluApp.navigate("/hotload")
+                FluRouter.navigate("/hotload")
             }
         }
         FluPaneItem{
@@ -473,10 +491,12 @@ FluObject{
         }
         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_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
+        Layout.preferredHeight: 1200/4+20
-        paddings: 10
+        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_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
+        Layout.preferredHeight: 68
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
 
         FluBreadcrumbBar{
             id:breadcrumb_1
@@ -36,10 +35,10 @@ FluScrollablePage{
     }
 
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 100
+        Layout.preferredHeight: 100
-        paddings: 10
+        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
+        Layout.preferredHeight: 68
-        paddings: 10
+        Layout.topMargin: 10
-        Layout.topMargin: 20
+        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
+        Layout.preferredHeight: 68
-        paddings: 10
+        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
+        Layout.preferredHeight: layout_icon_button.height + 30
-        paddings: 10
+        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
+        Layout.preferredHeight: 68
-        paddings: 10
+        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
+        Layout.preferredHeight: 100
-        paddings: 10
+        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
+        Layout.preferredHeight: 80
-        height: 80
+        padding: 10
-        paddings: 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
+        padding: 10
-        Layout.topMargin: 20
         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
+        Layout.preferredHeight: 72
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
 
         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
+        Layout.preferredHeight: 72
-        paddings: 10
+        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
+        Layout.preferredHeight: 380
-        height: 380
+        padding: 10
-        paddings: 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,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("ColorPicker")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
+        Layout.preferredHeight: 60
-        height: 60
+        padding: 10
-        paddings: 10
         RowLayout{
             FluText{
                 text: qsTr("Click to Select a Color - >")
@@ -33,7 +32,7 @@ FluScrollablePage{
     }
     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
+        Layout.preferredHeight: 80
-        paddings: 5
+        padding: 5
-        Layout.topMargin: 20
         Column{
             spacing: 5
             anchors.verticalCenter: parent.verticalCenter
@@ -32,10 +31,10 @@ FluScrollablePage{
         }
     }
 
-    FluArea {
+    FluFrame {
         Layout.fillWidth: true
-        height: 80
+        Layout.preferredHeight: 80
-        paddings: 5
+        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
+        Layout.preferredHeight: 80
-        height: 80
+        padding: 10
-        paddings: 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
+        Layout.preferredHeight: 80
-        paddings: 10
+        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
+        Layout.preferredHeight: 68
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
         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
+        Layout.preferredHeight: 68
-        paddings: 10
+        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
+        Layout.preferredHeight: 100
-        paddings: 10
+        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
+        padding: 10
-        Layout.topMargin: 20
         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
+        Layout.preferredHeight: 340
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
         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,48 @@
+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")
+        FluRadioButtons {
+            spacing: 10
+            FluRadioButton { text: qsTr("E-mail") }
+            FluRadioButton { text: qsTr("Calendar") }
+            FluRadioButton { text: qsTr("Contacts") }
+        }
+    }
+
+    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") }
+    }
+}'
+    }
+
+}

example/qml/page/T_Home.qml

@@ -9,10 +9,11 @@ import "../global"
 FluScrollablePage{
 
     launchMode: FluPageType.SingleTask
-    animDisabled: true
+    animationEnabled: false
+    header: Item{}
 
-    FluentInitalizrWindow{
+    FluentInitializrWindow{
-        id:fluent_initalizr
+        id:fluent_Initializr
     }
 
     ListModel{
@@ -28,11 +29,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 +122,7 @@ FluScrollablePage{
                             Layout.leftMargin: 20
                             color: FluColors.Grey120
                             font.pixelSize: 12
+                            font.family: FluTextStyle.family
                             wrapMode: Text.WrapAnywhere
                         }
                     }
@@ -177,7 +179,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

@@ -6,14 +6,13 @@ import FluentUI 1.0
 
 FluContentPage {
 
-    title: qsTr("Awesome")
+    title: qsTr("Icons")
 
     FluTextBox{
-        id:text_box
+        id: text_box
         placeholderText: qsTr("Please enter a keyword")
         anchors{
-            topMargin: 20
+            top: parent.top
-            top:parent.top
         }
     }
 
@@ -29,42 +28,45 @@ FluContentPage {
         }
     }
     GridView{
-        id:grid_view
+        id: grid_view
-        cellWidth: 80
+        cellWidth: 110
-        cellHeight: 80
+        cellHeight: 110
         clip: true
         boundsBehavior: GridView.StopAtBounds
         model:FluTheme.awesomeList()
         ScrollBar.vertical: FluScrollBar {}
         anchors{
             topMargin: 10
-            top:text_box.bottom
+            top: text_box.bottom
             left: parent.left
             right: parent.right
             bottom: parent.bottom
         }
         delegate: Item {
-            width: 68
+            width: 100
-            height: 80
+            height: 100
             FluIconButton{
                 id:item_icon
-                iconSource:modelData.icon
+                iconSource: modelData.icon
-                anchors.horizontalCenter: parent.horizontalCenter
+                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{
-            FluText {
+                    width: parent.width
-                id:item_name
+                    horizontalAlignment: Qt.AlignHCenter
-                font.pixelSize: 10
+                    wrapMode: Text.WrapAnywhere
-                anchors.horizontalCenter: parent.horizontalCenter
+                    text: modelData.name
-                anchors.top: item_icon.bottom
+                    anchors.top: parent.top
-                width:parent.width
+                    anchors.topMargin: 60
-                wrapMode: Text.WrapAnywhere
+                }
-                text: modelData.name
-                horizontalAlignment: Text.AlignHCenter
             }
         }
     }

example/qml/page/T_Image.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Image")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 260
+        Layout.preferredHeight: 260
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
         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,10 @@ FluScrollablePage{
 
     title: qsTr("InfoBar")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
+        Layout.preferredHeight: 270
-        height: 270
+        padding: 10
-        paddings: 10
         ColumnLayout{
             spacing: 14
             anchors{
@@ -60,7 +59,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'showInfo(qsTr("This is an InfoBar in the Info Style"))
 
 showWarning(qsTr("This is an InfoBar in the Warning Style"))

example/qml/page/T_Menu.qml

@@ -47,11 +47,10 @@ FluScrollablePage{
     }
 
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 100
+        Layout.preferredHeight: 100
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
         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
+        Layout.preferredHeight: 100
-        paddings: 10
+        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{
+    FluWindowResultLauncher{
-        target: loginPageRegister
+        id:loginResultLauncher
-        function onResult(data)
+        path: "/login"
-        {
+        onResult:
-            password = data.password
+            (data)=>{
-        }
+                password = data.password
+            }
+
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 86
+        Layout.preferredHeight: 86
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
         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
+        Layout.preferredHeight: 86
-        paddings: 10
+        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
+        Layout.preferredHeight: 86
-        paddings: 10
+        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
+        Layout.preferredHeight: 100
-        paddings: 10
+        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
+        Layout.preferredHeight: 130
-        paddings: 10
+        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
+        Layout.topMargin: -6
-        code:'property var loginPageRegister: registerForWindowResult("/login")
+        code:'FluWindowResultLauncher{
-
+    id:loginResultLauncher
-Connections{
+    path: "/login"
-    target: loginPageRegister
+    onResult:
-    function onResult(data)
+        (data)=>{
-    {
+            password = data.password
-        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")
+                    Network.postJson("https://httpbingo.org/post")
-                    .setCacheMode(FluNetworkType.RequestFailedReadCache)
+                    .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")
+                    Network.postJson("https://httpbingo.org/post")
-                    .setCacheMode(FluNetworkType.IfNoneCacheRequest)
+                    .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")
+                    Network.postJson("https://httpbingo.org/post")
-                    .setCacheMode(FluNetworkType.FirstCacheThenRequest)
+                    .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
+        Layout.preferredHeight: 200
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
         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
+        Layout.preferredHeight: 400
-        height: 400
+        padding: 10
-        paddings: 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
+        Layout.preferredHeight: 130
-        height: 130
+        padding: 10
-        paddings: 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
+        Layout.preferredHeight: 286
-        paddings: 10
+        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
+        Layout.preferredHeight: 68
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
         Row{
             spacing: 30
             anchors.verticalCenter: parent.verticalCenter
@@ -41,16 +40,16 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluRadioButton{
     text:"Text"
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        height: 100
+        Layout.preferredHeight: 100
-        paddings: 10
+        padding: 10
         Layout.topMargin: 20
         FluRadioButtons{
             spacing: 8
@@ -83,7 +82,7 @@ FluScrollablePage{
     }
     CodeExpander{
         Layout.fillWidth: true
-        Layout.topMargin: -1
+        Layout.topMargin: -6
         code:'FluRadioButtons{
     spacing: 8
     FluRadioButton{

example/qml/page/T_RatingControl.qml

@@ -9,11 +9,10 @@ FluScrollablePage {
 
     title: qsTr("RatingControl")
 
-    FluArea {
+    FluFrame {
         Layout.fillWidth: true
-        height: 100
+        Layout.preferredHeight: 100
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
 
         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
+        Layout.preferredHeight: 80
-        height: 80
+        padding: 10
-        paddings: 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: {
+    FluFrame{
-        FluEventBus.registerEvent(event_checkupdate_finish)
-    }
-
-    Component.onDestruction: {
-        FluEventBus.unRegisterEvent(event_checkupdate_finish)
-    }
-
-    FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 60
+        Layout.preferredHeight: 60
-        paddings: 10
+        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
+        Layout.preferredHeight: 100
-        height: 100
+        padding: 10
-        paddings: 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
+        padding: 10
-        paddings: 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: FluTextStyle.Title
-                    font.pixelSize: 18
                     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
+        Layout.preferredHeight: 50
-        height: 50
+        padding: 10
-        paddings: 10
         RowLayout{
             spacing: 14
             FluDropDownButton{
@@ -53,11 +52,11 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 10
-        height: 380
+        Layout.preferredHeight: 380
-        paddings: 10
+        padding: 10
         FluStatusLayout{
             id:status_view
             anchors.fill: parent
@@ -76,7 +75,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
+        Layout.preferredHeight: 50
-        height: 50
+        padding: 10
-        paddings: 10
         RowLayout{
             spacing: 14
             FluDropDownButton{
@@ -91,11 +90,11 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 15
-        height: 400
+        Layout.preferredHeight: 400
-        paddings: 10
+        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

@@ -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})
@@ -239,7 +239,7 @@ FluContentPage{
                 }
                 FluCheckBox{
                     checked: true === root.seletedAll
-                    enableAnimation: false
+                    animationEnabled: false
                     Layout.alignment: Qt.AlignVCenter
                     clickListener: function(){
                         root.seletedAll = !root.seletedAll
@@ -390,7 +390,7 @@ FluContentPage{
         }
     }
 
-    FluArea{
+    FluFrame{
         id:layout_controls
         anchors{
             left: parent.left

example/qml/page/T_Text.qml

@@ -9,11 +9,10 @@ FluScrollablePage{
 
     title: qsTr("Text")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
-        Layout.topMargin: 20
+        Layout.preferredHeight: 60
-        height: 60
+        padding: 10
-        paddings: 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{
+    FluFrame{
-        id:viewModel
-    }
-
-    FluArea{
         Layout.fillWidth: true
-        height: 68
+        Layout.preferredHeight: 68
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
 
         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
+        Layout.preferredHeight: 68
-        paddings: 10
+        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")
 }'
     }
 
-
+    FluFrame{
-    FluArea{
         Layout.fillWidth: true
-        height: 36+multiine_textbox.height
+        Layout.preferredHeight: 36+multiine_textbox.height
-        paddings: 10
+        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
+        Layout.preferredHeight: 68
-        paddings: 10
+        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
+        Layout.preferredHeight: 68
-        paddings: 10
+        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: 400
-        Layout.preferredHeight: 340
+        padding: 10
-        paddings: 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
+        Layout.preferredHeight: 80
-        height: 80
+        padding: 10
-        paddings: 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
+        Layout.preferredHeight: 80
-        paddings: 10
+        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

@@ -106,7 +106,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
+        Layout.preferredHeight: 68
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
         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
+        Layout.preferredHeight: 68
-        paddings: 10
+        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
+        Layout.preferredHeight: 68
-        paddings: 10
+        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
+        Layout.preferredHeight: 130
-        paddings: 10
+        padding: 10
-        Layout.topMargin: 20
 
         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,34 @@ 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 < 5; 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,100 +48,202 @@ FluContentPage {
         return dig();
     }
 
-    Column{
+    //    Row{
-        id: layout_column
+    //        id: layout_column
-        spacing: 12
+    //        spacing: 12
-        width: 300
+    //        width: 340
-        anchors{
+    //        anchors{
-            topMargin: 20
+    //            top:parent.top
-            top:parent.top
+    //            left: parent.left
-            left: parent.left
+    //            leftMargin: 10
-            leftMargin: 10
+    //            bottom:parent.bottom
-            bottom:parent.bottom
+    //            bottomMargin: 20
-            bottomMargin: 20
+    //        }
-        }
+    //        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: 15
+    //                from: 15
+    //                to:100
+    //            }
+    //        }
+    //        FluToggleSwitch{
+    //            id: switch_showline
+    //            text:"showLine"
+    //            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()
+    //            }
+    //        }
+    //    }
 
-        FluText{
+    Component{
-            text: qsTr("Total %1 data, %2 data currently displayed").arg(tree_view.count()).arg(tree_view.visibleCount())
+        id:com_avatar
-        }
+        Item{
-
+            FluClip{
-        FluText{
+                anchors.centerIn: parent
-            text: qsTr("A total of %1 data items are selected").arg(tree_view.selectionModel().length)
+                width: height
-        }
+                height: parent.height/3*2
-
+                radius: [height/2,height/2,height/2,height/2]
-        RowLayout{
+                Image{
-            spacing: 10
+                    anchors.fill: parent
-            FluText{
+                    source: {
-                text: "cellHeight:"
+                        if(options && options.avatar){
-                Layout.alignment: Qt.AlignVCenter
+                            return options.avatar
-            }
+                        }
-            FluSlider{
+                        return ""
-                id: slider_cell_height
+                    }
-                value: 30
+                    sourceSize: Qt.size(80,80)
-                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()
             }
         }
     }
-    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()
+                    }
+                }
+            }
+
+        }
+    }
+
+    FluFrame{
+        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
+            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,14 +8,14 @@ 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)
                 }
@@ -27,7 +27,7 @@ FluWindowDialog {
 
             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 {
@@ -29,37 +28,23 @@ FluWindow {
         z:7
     }
 
-    SettingsViewModel{
-        id:viewmodel_settings
-    }
-
     FluEvent{
-        id:event_checkupdate
         name: "checkUpdate"
         onTriggered: {
             checkUpdate(false)
         }
     }
 
-    onFirstVisible: {
+    onLazyLoad: {
-        timer_tour_delay.restart()
+        tour.open()
-    }
-
-    Timer{
-        id:timer_tour_delay
-        interval: 200
-        onTriggered: {
-            tour.open()
-        }
     }
 
     Component.onCompleted: {
         checkUpdate(true)
-        FluEventBus.registerEvent(event_checkupdate)
     }
 
     Component.onDestruction: {
-        FluEventBus.unRegisterEvent(event_checkupdate)
+        FluRouter.exit()
     }
 
     SystemTrayIcon {
@@ -71,7 +56,7 @@ FluWindow {
             MenuItem {
                 text: "退出"
                 onTriggered: {
-                    FluApp.exit()
+                    FluRouter.exit()
                 }
             }
         }
@@ -106,7 +91,7 @@ FluWindow {
         positiveText: qsTr("Quit")
         neutralText: qsTr("Cancel")
         onPositiveClicked:{
-            FluApp.exit(0)
+            FluRouter.exit(0)
         }
     }
 
@@ -116,9 +101,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 +160,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 +182,7 @@ FluWindow {
                 z:999
                 //Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式
                 //                pageMode: FluNavigationViewType.Stack
-                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存，可以配合FluViewModel保存页面数据（推荐）
+                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存
                 pageMode: FluNavigationViewType.NoStack
                 items: ItemsOriginal
                 footerItems:ItemsFooter
@@ -207,7 +192,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 +218,9 @@ FluWindow {
                     ItemsOriginal.paneItemMenu = nav_item_right_menu
                     ItemsFooter.navigationView = nav_view
                     ItemsFooter.paneItemMenu = nav_item_right_menu
-                    appBar.setHitTestVisible(nav_view.buttonMenu)
+                    window.setHitTestVisible(nav_view.buttonMenu)
-                    appBar.setHitTestVisible(nav_view.buttonBack)
+                    window.setHitTestVisible(nav_view.buttonBack)
-                    appBar.setHitTestVisible(nav_view.imageLogo)
+                    window.setHitTestVisible(nav_view.imageLogo)
                     setCurrentIndex(0)
                 }
             }
@@ -268,7 +253,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 +340,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 +376,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
+#pragma once
-#define APPINFO_H
 
 #include <QObject>
 #include <QQmlApplicationEngine>
 #include "stdafx.h"
 #include "singleton.h"
 
-class AppInfo : public QObject
+class AppInfo : public QObject {
-{
+Q_OBJECT
-    Q_OBJECT
+Q_PROPERTY_AUTO(QString, version)
-    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
+#pragma once
-#define APP_DUMP_H
 
 #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){
+static void
-    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);
+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"));
+        mini_dump_write_dump = reinterpret_cast<MiniDumpWriteDumpPtr>(GetProcAddress(module, "MiniDumpWriteDump"));
-        if (mini_dump_write_dump)
+        if (mini_dump_write_dump) {
-        {
+            mini_dump_write_dump(hProcess, ProcessId, hFile, static_cast<MINIDUMP_TYPE>(80), ExceptionParam, nullptr, CallbackParam);
-            mini_dump_write_dump(hProcess,ProcessId,hFile,DumpType,ExceptionParam,UserStreamParam,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 IncludeModuleCallback:
-    case IncludeThreadCallback:
+        case IncludeThreadCallback:
-    case ThreadCallback:
+        case ThreadCallback:
-    case ThreadExCallback:
+        case ThreadExCallback:
-        ret = TRUE;
+            ret = TRUE;
-        break;
+            break;
-    case ModuleCallback: {
+        case ModuleCallback: {
-        if (!(output->ModuleWriteFlags & ModuleReferencedByMemory)) {
+            if (!(output->ModuleWriteFlags & ModuleReferencedByMemory)) {
-            output->ModuleWriteFlags &= ~ModuleWriteModule;
+                output->ModuleWriteFlags &= ~ModuleWriteModule;
+            }
+            ret = TRUE;
         }
-        ret = TRUE;
+            break;
-    } break;
+        default:
-    default:
+            break;
-        break;
     }
     return ret;
 }
 
-void WriteDump(EXCEPTION_POINTERS* exp, const std::wstring& path) {
+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);
+    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.CallbackRoutine = (MINIDUMP_CALLBACK_ROUTINE) MyMiniDumpCallback;
-    mci.CallbackParam = 0;
+    mci.CallbackParam = nullptr;
-    MINIDUMP_TYPE mdt = (MINIDUMP_TYPE)(MiniDumpWithIndirectlyReferencedMemory | MiniDumpScanMemory);
+    miniDumpWriteDump(GetCurrentProcess(), GetCurrentProcessId(), h, &info, &mci);
-    miniDumpWriteDump(GetCurrentProcess(), GetCurrentProcessId(), h, mdt, &info, NULL, &mci);
     ::CloseHandle(h);
 }
 
-LONG WINAPI MyUnhandledExceptionFilter(EXCEPTION_POINTERS* exp) {
+LONG WINAPI MyUnhandledExceptionFilter(EXCEPTION_POINTERS *exp) {
-    const QString dumpFileName = QString("%1_%2.dmp").arg("crash",QDateTime::currentDateTime().toString("yyyyMMdd_hhmmss"));
+    const QString dumpFileName = QString("%1_%2.dmp").arg("crash", QDateTime::currentDateTime().toString("yyyyMMdd_hhmmss"));
-    const QString dumpDirPath = QStandardPaths::writableLocation(QStandardPaths::AppLocalDataLocation)+"/dmp";
+    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.moveTo(_center.x(), _center.y());
-    path.addEllipse(QPointF(_center.x(),_center.y()), _radius, _radius);
+    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
+#pragma once
-#define CIRCULARREVEAL_H
 
 #include <QQuickItem>
 #include <QQuickPaintedItem>
@@ -7,23 +6,26 @@
 #include <QPropertyAnimation>
 #include "src/stdafx.h"
 
-class CircularReveal : public QQuickPaintedItem
+class CircularReveal : public QQuickPaintedItem {
-{
+Q_OBJECT
-    Q_OBJECT
+Q_PROPERTY_AUTO_P(QQuickItem*, target)
-    Q_PROPERTY_AUTO(QQuickItem*,target)
+Q_PROPERTY_AUTO(int, radius)
-    Q_PROPERTY_AUTO(int,radius)
 public:
-    CircularReveal(QQuickItem* parent = nullptr);
+    explicit CircularReveal(QQuickItem *parent = nullptr);
-    void paint(QPainter* painter) override;
+
-    Q_INVOKABLE void start(int w,int h,const QPoint& center,int radius);
+    void paint(QPainter *painter) override;
+
+    Q_INVOKABLE [[maybe_unused]] 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)
+FileWatcher::FileWatcher(QObject *parent) : QObject{parent} {
-    : QObject{parent}
+    connect(&_watcher, &QFileSystemWatcher::fileChanged, this, [=](const QString &path) {
-{
-    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(){
+void FileWatcher::clean() {
-    foreach (const QString &item,  _watcher.files()) {
+    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
+#pragma once
-#define FILEWATCHER_H
 
 #include <QObject>
 #include <QFileSystemWatcher>
 #include <QtQml/qqml.h>
 #include "src/stdafx.h"
 
-class FileWatcher : public QObject
+class FileWatcher : public QObject {
-{
+Q_OBJECT
-    Q_OBJECT
+Q_PROPERTY_AUTO(QString, path);
-    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()
+FpsItem::FpsItem() {
-{
+    _fps = 0;
-    QTimer *timer = new QTimer(this);
+    auto *timer = new QTimer(this);
-    connect(timer, &QTimer::timeout, this, [this]{
+    connect(timer, &QTimer::timeout, this, [this] {
         fps(_frameCount);
         _frameCount = 0;
     });
-    connect(this, &QQuickItem::windowChanged, this, [this]{
+    connect(this, &QQuickItem::windowChanged, this, [this] {
-        if (window()){
+        if (window()) {
-            connect(window(), &QQuickWindow::afterRendering, this, [this]{ _frameCount++; }, Qt::DirectConnection);
+            connect(window(), &QQuickWindow::afterRendering, this, [this] { _frameCount++; }, Qt::DirectConnection);
         }
     });
     timer->start(1000);

example/src/component/FpsItem.h

@@ -1,19 +1,15 @@
-#ifndef FPSITEM_H
+#pragma once
-#define FPSITEM_H
 
 #include <QQuickItem>
 #include "src/stdafx.h"
 
-class FpsItem : public QQuickItem
+class FpsItem : public QQuickItem {
-{
+Q_OBJECT
-    Q_OBJECT
+Q_PROPERTY_AUTO(int, fps)
-    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{};
+};

example/src/helper/InitalizrHelper.cpp

@@ -1,109 +0,0 @@
-#include "InitalizrHelper.h"
-
-#include <QDir>
-#include <QGuiApplication>
-
-InitalizrHelper::InitalizrHelper(QObject *parent) : QObject(parent)
-{
-
-}
-
-InitalizrHelper::~InitalizrHelper() = default;
-
-bool InitalizrHelper::copyDir(const QDir& fromDir, const QDir& toDir, bool coverIfFileExists){
-    QDir _formDir = fromDir;
-    QDir _toDir = toDir;
-    if(!_toDir.exists())
-    {
-        if(!_toDir.mkdir(toDir.absolutePath()))
-            return false;
-    }
-    QFileInfoList fileInfoList = _formDir.entryInfoList();
-    foreach(QFileInfo fileInfo, fileInfoList)
-    {
-        if(fileInfo.fileName() == "." || fileInfo.fileName() == "..")
-            continue;
-        if(fileInfo.isDir())
-        {
-            if(!copyDir(fileInfo.filePath(), _toDir.filePath(fileInfo.fileName()),true))
-                return false;
-        }
-        else
-        {
-            if(coverIfFileExists && _toDir.exists(fileInfo.fileName()))
-            {
-                _toDir.remove(fileInfo.fileName());
-            }
-            if(!QFile::copy(fileInfo.filePath(), _toDir.filePath(fileInfo.fileName())))
-            {
-                return false;
-            }
-        }
-    }
-    return true;
-}
-
-template <typename...Args>
-void InitalizrHelper::templateToFile(const QString& source,const QString& dest,Args &&...args){
-    QFile file(source);
-    if (file.open(QIODevice::ReadOnly | QIODevice::Text)) {
-        QTextStream in(&file);
-        QString content = in.readAll().arg(std::forward<Args>(args)...);
-        file.close();
-        QDir outputDir = QFileInfo(dest).absoluteDir();
-        if(!outputDir.exists()){
-            outputDir.mkpath(outputDir.absolutePath());
-        }
-        QFile outputFile(dest);
-        if (outputFile.open(QIODevice::WriteOnly | QIODevice::Text)) {
-            QTextStream out(&outputFile);
-            out << content;
-            outputFile.close();
-        } else {
-            qDebug() << "Failed to open output file.";
-        }
-    } else {
-        qDebug() << "Failed to open resource file.";
-    }
-}
-
-void InitalizrHelper::copyFile(const QString& source,const QString& dest){
-    QFile::copy(source,dest);
-    QFile::setPermissions(dest, QFile::WriteOwner | QFile::WriteUser | QFile::WriteGroup | QFile::WriteOther);
-}
-
-void InitalizrHelper::generate(const QString& name,const QString& path){
-    if(name.isEmpty()){
-        error(tr("The name cannot be empty"));
-        return;
-    }
-    if(path.isEmpty()){
-        error(tr("The creation path cannot be empty"));
-        return;
-    }
-    QDir projectRootDir(path);
-    if(!projectRootDir.exists()){
-        error(tr("The path does not exist"));
-        return;
-    }
-    QString projectPath = projectRootDir.filePath(name);
-    QDir projectDir(projectPath);
-    if(projectDir.exists()){
-        error(tr("%1 folder already exists").arg(name));
-        return;
-    }
-    projectDir.mkpath(projectPath);
-    QDir fluentDir(projectDir.filePath("FluentUI"));
-    copyDir(QDir(QGuiApplication::applicationDirPath()+"/source"),fluentDir);
-    templateToFile(":/example/res/template/CMakeLists.txt.in",projectDir.filePath("CMakeLists.txt"),name);
-    templateToFile(":/example/res/template/src/CMakeLists.txt.in",projectDir.filePath("src/CMakeLists.txt"),name);
-    templateToFile(":/example/res/template/src/main.cpp.in",projectDir.filePath("src/main.cpp"),name);
-    templateToFile(":/example/res/template/src/main.qml.in",projectDir.filePath("src/main.qml"),name);
-    templateToFile(":/example/res/template/src/en_US.ts.in",projectDir.filePath("src/"+name+"_en_US.ts"),name);
-    templateToFile(":/example/res/template/src/zh_CN.ts.in",projectDir.filePath("src/"+name+"_zh_CN.ts"),name);
-    copyFile(":/example/res/template/src/App.qml.in",projectDir.filePath("src/App.qml"));
-    copyFile(":/example/res/template/src/qml.qrc.in",projectDir.filePath("src/qml.qrc"));
-    copyFile(":/example/res/template/src/logo.ico.in",projectDir.filePath("src/logo.ico"));
-    copyFile(":/example/res/template/src/README.md.in",projectDir.filePath("src/README.md"));
-    return this->success(projectPath);
-}

example/src/helper/InitalizrHelper.h

@@ -1,26 +0,0 @@
-#ifndef INITALIZRHELPER_H
-#define INITALIZRHELPER_H
-
-#include <QObject>
-#include <QtQml/qqml.h>
-#include <QDir>
-#include "src/singleton.h"
-
-class InitalizrHelper : public QObject
-{
-    Q_OBJECT
-private:
-    explicit InitalizrHelper(QObject* parent = nullptr);
-    bool copyDir(const QDir& fromDir, const QDir& toDir, bool coverIfFileExists = true);
-    void copyFile(const QString& source,const QString& dest);
-    template <typename...Args>
-    void templateToFile(const QString& source,const QString& dest,Args &&...args);
-public:
-    SINGLETON(InitalizrHelper)
-    ~InitalizrHelper() override;
-    Q_INVOKABLE void generate(const QString& name,const QString& path);
-    Q_SIGNAL void error(const QString& message);
-    Q_SIGNAL void success(const QString& path);
-};
-
-#endif // INITALIZRHELPER_H

example/src/helper/InitializrHelper.cpp

@@ -0,0 +1,101 @@
+#include "InitializrHelper.h"
+
+#include <QDir>
+#include <QGuiApplication>
+
+[[maybe_unused]] InitializrHelper::InitializrHelper(QObject *parent) : QObject(parent) {
+
+}
+
+InitializrHelper::~InitializrHelper() = default;
+
+bool InitializrHelper::copyDir(const QDir &fromDir, const QDir &toDir, bool coverIfFileExists) {
+    const QDir &_formDir = fromDir;
+    QDir _toDir = toDir;
+    if (!_toDir.exists()) {
+        if (!_toDir.mkdir(toDir.absolutePath()))
+            return false;
+    }
+    QFileInfoList fileInfoList = _formDir.entryInfoList();
+            foreach(QFileInfo fileInfo, fileInfoList) {
+            if (fileInfo.fileName() == "." || fileInfo.fileName() == "..")
+                continue;
+            if (fileInfo.isDir()) {
+                if (!copyDir(fileInfo.filePath(), _toDir.filePath(fileInfo.fileName()), true))
+                    return false;
+            } else {
+                if (coverIfFileExists && _toDir.exists(fileInfo.fileName())) {
+                    _toDir.remove(fileInfo.fileName());
+                }
+                if (!QFile::copy(fileInfo.filePath(), _toDir.filePath(fileInfo.fileName()))) {
+                    return false;
+                }
+            }
+        }
+    return true;
+}
+
+template<typename...Args>
+void InitializrHelper::templateToFile(const QString &source, const QString &dest, Args &&...args) {
+    QFile file(source);
+    if (file.open(QIODevice::ReadOnly | QIODevice::Text)) {
+        QTextStream in(&file);
+        QString content = in.readAll().arg(std::forward<Args>(args)...);
+        file.close();
+        QDir outputDir = QFileInfo(dest).absoluteDir();
+        if (!outputDir.exists()) {
+            outputDir.mkpath(outputDir.absolutePath());
+        }
+        QFile outputFile(dest);
+        if (outputFile.open(QIODevice::WriteOnly | QIODevice::Text)) {
+            QTextStream out(&outputFile);
+            out << content;
+            outputFile.close();
+        } else {
+            qDebug() << "Failed to open output file.";
+        }
+    } else {
+        qDebug() << "Failed to open resource file.";
+    }
+}
+
+void InitializrHelper::copyFile(const QString &source, const QString &dest) {
+    QFile::copy(source, dest);
+    QFile::setPermissions(dest, QFile::WriteOwner | QFile::WriteUser | QFile::WriteGroup | QFile::WriteOther);
+}
+
+[[maybe_unused]] void InitializrHelper::generate(const QString &name, const QString &path) {
+    if (name.isEmpty()) {
+        error(tr("The name cannot be empty"));
+        return;
+    }
+    if (path.isEmpty()) {
+        error(tr("The creation path cannot be empty"));
+        return;
+    }
+    QDir projectRootDir(path);
+    if (!projectRootDir.exists()) {
+        error(tr("The path does not exist"));
+        return;
+    }
+    QString projectPath = projectRootDir.filePath(name);
+    QDir projectDir(projectPath);
+    if (projectDir.exists()) {
+        error(tr("%1 folder already exists").arg(name));
+        return;
+    }
+    projectDir.mkpath(projectPath);
+    QDir fluentDir(projectDir.filePath("FluentUI"));
+    copyDir(QDir(QGuiApplication::applicationDirPath() + "/source"), fluentDir);
+    templateToFile(":/example/res/template/CMakeLists.txt.in", projectDir.filePath("CMakeLists.txt"), name);
+    templateToFile(":/example/res/template/src/CMakeLists.txt.in", projectDir.filePath("src/CMakeLists.txt"), name);
+    templateToFile(":/example/res/template/src/main.cpp.in", projectDir.filePath("src/main.cpp"), name);
+    templateToFile(":/example/res/template/src/main.qml.in", projectDir.filePath("src/main.qml"), name);
+    templateToFile(":/example/res/template/src/en_US.ts.in", projectDir.filePath("src/" + name + "_en_US.ts"), name);
+    templateToFile(":/example/res/template/src/zh_CN.ts.in", projectDir.filePath("src/" + name + "_zh_CN.ts"), name);
+    copyFile(":/example/res/template/src/App.qml.in", projectDir.filePath("src/App.qml"));
+    copyFile(":/example/res/template/src/qml.qrc.in", projectDir.filePath("src/qml.qrc"));
+    copyFile(":/example/res/template/src/logo.ico.in", projectDir.filePath("src/logo.ico"));
+    copyFile(":/example/res/template/src/README.md.in", projectDir.filePath("src/README.md"));
+    return this->success(projectPath);
+}

example/src/helper/InitializrHelper.h

@@ -0,0 +1,30 @@
+#pragma once
+
+#include <QObject>
+#include <QtQml/qqml.h>
+#include <QDir>
+#include "src/singleton.h"
+
+class InitializrHelper : public QObject {
+Q_OBJECT
+private:
+    [[maybe_unused]] explicit InitializrHelper(QObject *parent = nullptr);
+
+    bool copyDir(const QDir &fromDir, const QDir &toDir, bool coverIfFileExists = true);
+
+    static void copyFile(const QString &source, const QString &dest);
+
+    template<typename...Args>
+    void templateToFile(const QString &source, const QString &dest, Args &&...args);
+
+public:
+SINGLETON(InitializrHelper)
+
+    ~InitializrHelper() override;
+
+    Q_INVOKABLE [[maybe_unused]] void generate(const QString &name, const QString &path);
+
+    Q_SIGNAL void error(const QString &message);
+
+    Q_SIGNAL void success(const QString &path);
+};

example/src/helper/Log.cpp

@@ -11,8 +11,11 @@
 #include <QSettings>
 #include <QRegularExpression>
 #include "Version.h"
+
 #ifdef WIN32
+
 #include <process.h>
+
 #else
 #include <unistd.h>
 #endif
@@ -26,7 +29,7 @@
 #endif
 
 static QString g_app = {};
-static QString g_file_path= {};
+static QString g_file_path = {};
 static bool g_logError = false;
 
 static std::unique_ptr<QFile> g_logFile = nullptr;
@@ -35,15 +38,14 @@ static std::unique_ptr<QTextStream> g_logStream = nullptr;
 static int g_logLevel = 4;
 
 std::map<QtMsgType, int> logLevelMap = {
-    {QtFatalMsg,0},
+        {QtFatalMsg,    0},
-    {QtCriticalMsg,1},
+        {QtCriticalMsg, 1},
-    {QtWarningMsg,2},
+        {QtWarningMsg,  2},
-    {QtInfoMsg,3},
+        {QtInfoMsg,     3},
-    {QtDebugMsg,4}
+        {QtDebugMsg,    4}
 };
 
-QString Log::prettyProductInfoWrapper()
+QString Log::prettyProductInfoWrapper() {
-{
     auto productName = QSysInfo::prettyProductName();
 #if QT_VERSION < QT_VERSION_CHECK(6, 5, 0)
 #if defined(Q_OS_MACOS)
@@ -70,20 +72,17 @@ QString Log::prettyProductInfoWrapper()
 #endif
 #endif
 #if defined(Q_OS_WIN)
-    QSettings regKey {QString::fromUtf8("HKEY_LOCAL_MACHINE\\SOFTWARE\\Microsoft\\Windows NT\\CurrentVersion"), QSettings::NativeFormat};
+    QSettings regKey{QString::fromUtf8(R"(HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion)"), QSettings::NativeFormat};
     if (regKey.contains(QString::fromUtf8("CurrentBuildNumber"))) {
         auto buildNumber = regKey.value(QString::fromUtf8("CurrentBuildNumber")).toInt();
         if (buildNumber > 0) {
             if (buildNumber < 9200) {
                 productName = QString::fromUtf8("Windows 7 build %1").arg(buildNumber);
-            }
+            } else if (buildNumber < 10240) {
-            else if (buildNumber < 10240) {
                 productName = QString::fromUtf8("Windows 8 build %1").arg(buildNumber);
-            }
+            } else if (buildNumber < 22000) {
-            else if (buildNumber < 22000) {
                 productName = QString::fromUtf8("Windows 10 build %1").arg(buildNumber);
-            }
+            } else {
-            else {
                 productName = QString::fromUtf8("Windows 11 build %1").arg(buildNumber);
             }
         }
@@ -92,56 +91,55 @@ QString Log::prettyProductInfoWrapper()
     return productName;
 }
 
-static inline void messageHandler(const QtMsgType type, const QMessageLogContext &context, const QString &message)
+static inline void messageHandler(const QtMsgType type, const QMessageLogContext &context, const QString &message) {
-{
+    if (message == "Could not get the INetworkConnection instance for the adapter GUID.") {
-    if(message == "Could not get the INetworkConnection instance for the adapter GUID."){
         return;
     }
-    if(logLevelMap[type]>g_logLevel){
+    if (logLevelMap[type] > g_logLevel) {
         return;
     }
     if (!message.isEmpty()) {
         QString levelName;
         switch (type) {
-        case QtDebugMsg:
+            case QtDebugMsg:
-            levelName = QStringLiteral("Debug");
+                levelName = QStringLiteral("Debug");
-            break;
+                break;
-        case QtInfoMsg:
+            case QtInfoMsg:
-            levelName = QStringLiteral("Info");
+                levelName = QStringLiteral("Info");
-            break;
+                break;
-        case QtWarningMsg:
+            case QtWarningMsg:
-            levelName = QStringLiteral("Warning");
+                levelName = QStringLiteral("Warning");
-            break;
+                break;
-        case QtCriticalMsg:
+            case QtCriticalMsg:
-            levelName = QStringLiteral("Critical");
+                levelName = QStringLiteral("Critical");
-            break;
+                break;
-        case QtFatalMsg:
+            case QtFatalMsg:
-            levelName = QStringLiteral("Fatal");
+                levelName = QStringLiteral("Fatal");
-            break;
+                break;
         }
         QString fileAndLineLogStr;
-        if(context.file){
+        if (context.file) {
             std::string strFileTmp = context.file;
-            const char* ptr = strrchr(strFileTmp.c_str(), '/');
+            const char *ptr = strrchr(strFileTmp.c_str(), '/');
             if (nullptr != ptr) {
                 char fn[512] = {0};
                 sprintf(fn, "%s", ptr + 1);
                 strFileTmp = fn;
             }
-            const char* ptrTmp = strrchr(strFileTmp.c_str(), '\\');
+            const char *ptrTmp = strrchr(strFileTmp.c_str(), '\\');
             if (nullptr != ptrTmp) {
                 char fn[512] = {0};
                 sprintf(fn, "%s", ptrTmp + 1);
                 strFileTmp = fn;
             }
-            fileAndLineLogStr = QString::fromStdString("[%1:%2]").arg(QString::fromStdString(strFileTmp),QString::number(context.line));
+            fileAndLineLogStr = QString::fromStdString("[%1:%2]").arg(QString::fromStdString(strFileTmp), QString::number(context.line));
         }
         const QString finalMessage = QString::fromStdString("%1[%2]%3[%4]:%5").arg(
-            QDateTime::currentDateTime().toString("yyyy/MM/dd hh:mm:ss.zzz"),
+                QDateTime::currentDateTime().toString("yyyy/MM/dd hh:mm:ss.zzz"),
-            levelName,
+                levelName,
-            fileAndLineLogStr,
+                fileAndLineLogStr,
-            QString::number(reinterpret_cast<quintptr>(QThread::currentThreadId())),
+                QString::number(reinterpret_cast<quintptr>(QThread::currentThreadId())),
-            message);
+                message);
         if ((type == QtInfoMsg) || (type == QtDebugMsg)) {
             std::cout << qPrintable(finalMessage) << std::endl;
         } else {
@@ -168,8 +166,7 @@ static inline void messageHandler(const QtMsgType type, const QMessageLogContext
     }
 }
 
-void Log::setup(char *argv[],const QString &app,int level)
+void Log::setup(char *argv[], const QString &app, int level) {
-{
     Q_ASSERT(!app.isEmpty());
     if (app.isEmpty()) {
         return;
@@ -182,30 +179,30 @@ void Log::setup(char *argv[],const QString &app,int level)
     QString applicationPath = QString::fromStdString(argv[0]);
     once = true;
     g_app = app;
-    const QString logFileName = QString("%1_%2.log").arg(g_app,QDateTime::currentDateTime().toString("yyyyMMdd"));
+    const QString logFileName = QString("%1_%2.log").arg(g_app, QDateTime::currentDateTime().toString("yyyyMMdd"));
-    const QString logDirPath = QStandardPaths::writableLocation(QStandardPaths::AppLocalDataLocation)+"/log";
+    const QString logDirPath = QStandardPaths::writableLocation(QStandardPaths::AppLocalDataLocation) + "/log";
     const QDir logDir(logDirPath);
-    if(!logDir.exists()){
+    if (!logDir.exists()) {
         logDir.mkpath(logDirPath);
     }
     g_file_path = logDir.filePath(logFileName);
     qInstallMessageHandler(messageHandler);
-    qInfo()<<"===================================================";
+    qInfo() << "===================================================";
-    qInfo()<<"[AppName]"<<g_app;
+    qInfo() << "[AppName]" << g_app;
-    qInfo()<<"[AppVersion]"<<APPLICATION_VERSION;
+    qInfo() << "[AppVersion]" << APPLICATION_VERSION;
-    qInfo()<<"[AppPath]"<<applicationPath;
+    qInfo() << "[AppPath]" << applicationPath;
-    qInfo()<<"[QtVersion]"<<QT_VERSION_STR;
+    qInfo() << "[QtVersion]" << QT_VERSION_STR;
 #ifdef WIN32
-    qInfo()<<"[ProcessId]"<<QString::number(_getpid());
+    qInfo() << "[ProcessId]" << QString::number(_getpid());
 #else
     qInfo()<<"[ProcessId]"<<QString::number(getpid());
 #endif
-    qInfo()<<"[GitHashCode]"<<COMMIT_HASH;
+    qInfo() << "[GitHashCode]" << COMMIT_HASH;
-    qInfo()<<"[DeviceInfo]";
+    qInfo() << "[DeviceInfo]";
-    qInfo()<<"  [DeviceId]"<<QSysInfo::machineUniqueId();
+    qInfo() << "  [DeviceId]" << QSysInfo::machineUniqueId();
-    qInfo()<<"  [Manufacturer]"<<prettyProductInfoWrapper();
+    qInfo() << "  [Manufacturer]" << prettyProductInfoWrapper();
-    qInfo()<<"  [CPU_ABI]"<<QSysInfo::currentCpuArchitecture();
+    qInfo() << "  [CPU_ABI]" << QSysInfo::currentCpuArchitecture();
-    qInfo()<<"[LOG_LEVEL]"<<g_logLevel;
+    qInfo() << "[LOG_LEVEL]" << g_logLevel;
-    qInfo()<<"[LOG_PATH]"<<g_file_path;
+    qInfo() << "[LOG_PATH]" << g_file_path;
-    qInfo()<<"===================================================";
+    qInfo() << "===================================================";
 }

example/src/helper/Log.h

@@ -1,11 +1,9 @@
-#ifndef LOG_H
+#pragma once
-#define LOG_H
+
 #include <QtCore/qstring.h>
 
-namespace Log
+namespace Log {
-{
     QString prettyProductInfoWrapper();
-    void setup(char *argv[], const QString &app,int level = 4);
-}
 
-#endif // LOG_H
+    void setup(char *argv[], const QString &app, int level = 4);
+}