update

.github/workflows/macos.yml

@@ -58,7 +58,7 @@ jobs:
           # 先删除所有dSYM文件，减少包的体积
           sudo find /Users/runner/work/FluentUI/Qt/${{ matrix.qt_ver }}/macos/qml -name "*.dSYM" | xargs rm -r
           # 拷贝依赖
-          sudo macdeployqt bin/release/${targetName}.app -qmldir=. -dmg     
+          sudo macdeployqt bin/Release/${targetName}.app -qmldir=. -dmg     
           
       - uses: actions/upload-artifact@v2
         with:

.github/workflows/ubuntu.yml

@@ -74,7 +74,7 @@ jobs:
           # make sure Qt plugin finds QML sources so it can deploy the imported files
           export QML_SOURCES_PATHS=./
           # 拷贝依赖
-          linuxdeploy-x86_64.AppImage --plugin=qt --output=appimage --create-desktop-file --icon-file=${targetName}.svg --executable=bin/release/${targetName} --appdir bin/release/
+          linuxdeploy-x86_64.AppImage --plugin=qt --output=appimage --create-desktop-file --icon-file=${targetName}.svg --executable=bin/Release/${targetName} --appdir bin/release/
           mv ${{ env.targetName }}-*.AppImage ${{ env.targetName }}.AppImage
         
       - uses: actions/upload-artifact@v2

CMakeLists.txt

@@ -13,6 +13,7 @@ list(APPEND CMAKE_MODULE_PATH ${CMAKE_SOURCE_DIR}/.cmake/)
 include(GetGitRevisionDescription)
 
 option(FLUENTUI_BUILD_EXAMPLES "Build FluentUI demo applications." ON)
+set(FLUENTUI_BUILD_STATIC_LIB OFF)
 
 find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core)
 find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Core)

example/CMakeLists.txt

@@ -1,9 +1,12 @@
 cmake_minimum_required(VERSION 3.20)
 
-project(example VERSION 1.0 LANGUAGES CXX)
+project(example VERSION 1.0)
 
 #配置通用编译
 set(CMAKE_CXX_STANDARD 17)
+set(CMAKE_INCLUDE_CURRENT_DIR ON)
+set(CMAKE_AUTOMOC ON)
+set(CMAKE_AUTORCC ON)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
 
 #判断FluentUI库类型
@@ -12,11 +15,7 @@ if(FLUENTUI_BUILD_STATIC_LIB)
 endif()
 
 #设置可执行文件输出目录
-if(CMAKE_BUILD_TYPE STREQUAL "Debug")
-    set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/debug)
-else()
-    set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/release)
-endif()
+set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_SOURCE_DIR}/bin/${CMAKE_BUILD_TYPE})
 
 if(APPLE)
     set(APPLICATION_DIR_PATH ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/${PROJECT_NAME}.app/Contents/MacOS)
@@ -28,28 +27,19 @@ endif()
 find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Quick Svg Network)
 find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Quick Svg Network)
 
-if(QT_VERSION VERSION_GREATER_EQUAL "6.3")
-    qt_standard_project_setup()
-else()
-    set(CMAKE_AUTOMOC ON)
-    set(CMAKE_AUTORCC ON)
-    set(CMAKE_AUTOUIC ON)
-endif()
-
-#国际化
+#添加国际化脚本
 find_program(QT_LUPDATE NAMES lupdate)
 find_program(QT_LRELEASE NAMES lrelease)
-if (NOT EXISTS ${CMAKE_CURRENT_LIST_DIR}/${PROJECT_NAME}_en_US.qm)
-    execute_process(COMMAND ${QT_LUPDATE} ${CMAKE_CURRENT_LIST_DIR} -ts ${PROJECT_NAME}_en_US.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR})
-    execute_process(COMMAND ${QT_LRELEASE} ${PROJECT_NAME}_en_US.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR})
-endif ()
-if (NOT EXISTS ${CMAKE_CURRENT_LIST_DIR}/${PROJECT_NAME}_zh_CN.qm)
-    execute_process(COMMAND ${QT_LUPDATE} ${CMAKE_CURRENT_LIST_DIR} -ts ${PROJECT_NAME}_zh_CN.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR})
-    execute_process(COMMAND ${QT_LRELEASE} ${PROJECT_NAME}_zh_CN.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR})
-endif ()
-
-file(GLOB QM_FILE_PATHS ${CMAKE_CURRENT_LIST_DIR}/ *.qm)
-file(COPY ${QM_FILE_PATHS} DESTINATION ${APPLICATION_DIR_PATH}/i18n)
+file(GLOB TS_FILE_PATHS ${CMAKE_CURRENT_LIST_DIR}/ *.ts)
+add_custom_target(Script-UpdateTranslations
+    COMMAND ${QT_LUPDATE} ${CMAKE_CURRENT_LIST_DIR} -ts ${PROJECT_NAME}_en_US.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
+    COMMAND ${QT_LUPDATE} ${CMAKE_CURRENT_LIST_DIR} -ts ${PROJECT_NAME}_zh_CN.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
+    COMMAND ${QT_LRELEASE} ${PROJECT_NAME}_en_US.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
+    COMMAND ${QT_LRELEASE} ${PROJECT_NAME}_zh_CN.ts WORKING_DIRECTORY ${CMAKE_CURRENT_LIST_DIR}
+    COMMAND ${CMAKE_COMMAND} -E make_directory ${APPLICATION_DIR_PATH}/i18n
+    COMMAND ${CMAKE_COMMAND} -E copy ${PROJECT_NAME}_en_US.qm ${PROJECT_NAME}_zh_CN.qm ${APPLICATION_DIR_PATH}/i18n
+    SOURCES ${TS_FILE_PATHS}
+)
 
 ##生成版本信息头文件
 set(HEADER_FILE_VERSION_PATH ${CMAKE_SOURCE_DIR}/${PROJECT_NAME}/Version.h)
@@ -69,30 +59,6 @@ if(WIN32)
     list(APPEND sources_files "src/app_dmp.h")
 endif()
 
-if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
-    #遍历所有qml文件
-    file(GLOB_RECURSE QML_PATHS *.qml qmldir)
-    foreach(filepath ${QML_PATHS})
-        string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
-        if(${filepath} MATCHES "qml-Qt6")
-            string(REPLACE "qml-Qt6" "qml" filealias ${filename})
-            set_source_files_properties(${filename} PROPERTIES QT_RESOURCE_ALIAS ${filealias})
-            if(${filename} MATCHES "qmldir")
-                list(APPEND resource_files ${filename})
-            else()
-                list(APPEND qml_files ${filename})
-            endif()
-        endif()
-    endforeach(filepath)
-
-    #遍历所有资源文件
-    file(GLOB_RECURSE RES_PATHS *.png *.jpg *.svg *.ico *.ttf *.webp *.in)
-    foreach(filepath ${RES_PATHS})
-        string(REPLACE "${CMAKE_CURRENT_SOURCE_DIR}/" "" filename ${filepath})
-        list(APPEND resource_files ${filename})
-    endforeach(filepath)
-endif()
-
 #如果是Windows平台，则生成rc文件，还有inno setup脚本文件
 set(EXAMPLE_VERSION_RC_PATH "")
 if(WIN32)
@@ -107,17 +73,27 @@ configure_file(
 )
 endif()
 
+#加快qrc编译
+qt_add_big_resources(QRC_RESOURCES ${PROJECT_NAME}.qrc)
+list(APPEND QRC_RESOURCES ${PROJECT_NAME}.qrc)
+set_property(SOURCE ${PROJECT_NAME}.qrc PROPERTY SKIP_AUTORCC ON)
+list(APPEND sources_files ${QRC_RESOURCES})
+
 #添加可执行文件
-if (WIN32)
-    add_executable(${PROJECT_NAME}
+if(WIN32)
+    list(APPEND sources_files ${EXAMPLE_VERSION_RC_PATH})
+endif()
+if(${QT_VERSION_MAJOR} GREATER_EQUAL 6)
+    qt_add_executable(${PROJECT_NAME}
+        MANUAL_FINALIZATION
         ${sources_files}
-        ${EXAMPLE_VERSION_RC_PATH}
     )
-else ()
+else()
     add_executable(${PROJECT_NAME}
         ${sources_files}
     )
-endif ()
+endif()
+add_dependencies(${PROJECT_NAME} Script-UpdateTranslations)
 
 #复制程序运行所需要的动态库
 if(WIN32)
@@ -130,34 +106,13 @@ if(WIN32)
     elseif(MINGW)
         file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/mingw/*.dll)
     endif()
-    add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
-        COMMAND ${CMAKE_COMMAND} -E copy
-        ${3RDPARTY_DLL_DIR}
-        ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}
-    )
+    file(COPY ${3RDPARTY_DLL_DIR} DESTINATION ${CMAKE_RUNTIME_OUTPUT_DIRECTORY})
 endif()
 
 #复制FluentUI源码到运行目录下，用于脚手架生成
 file(MAKE_DIRECTORY ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/source/)
 file(COPY ${CMAKE_SOURCE_DIR}/src/ DESTINATION ${APPLICATION_DIR_PATH}/source/)
 
-if(QT_VERSION VERSION_GREATER_EQUAL "6.2")
-    #如果是Qt6.2以上，则使用qt_add_qml_module添加资源文件
-    qt_add_qml_module(${PROJECT_NAME}
-        URI ${PROJECT_NAME}
-        VERSION 1.0
-        QML_FILES ${qml_files}
-        RESOURCES ${resource_files}
-        RESOURCE_PREFIX "/"
-    )
-else()
-    #如果是Qt6.2以下，则使用qrc添加资源文件
-    target_include_directories(${PROJECT_NAME} PRIVATE
-        ${CMAKE_CURRENT_SOURCE_DIR}
-    )
-target_sources(${PROJECT_NAME} PRIVATE ${PROJECT_NAME}.qrc)
-endif()
-
 #导入component头文件,不然通过QML_NAMED_ELEMENT生成的c++类会找不到头文件报错
 target_include_directories(${PROJECT_NAME} PRIVATE
     ${CMAKE_CURRENT_SOURCE_DIR}/src/component
@@ -193,9 +148,28 @@ target_link_libraries(${PROJECT_NAME} PRIVATE
     fluentuiplugin
 )
 
-#安装
-install(TARGETS ${PROJECT_NAME}
-    BUNDLE DESTINATION .
-    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
-    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
-)
+#添加部署脚本
+if (CMAKE_BUILD_TYPE MATCHES "Release")
+    if (APPLE)
+        find_program(QT_DEPLOY_QT NAMES macdeployqt)
+        add_custom_target(Script-DeployRelease
+            COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_SOURCE_DIR}/dist
+            COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} ${CMAKE_SOURCE_DIR}/dist
+            COMMAND ${QT_DEPLOY_QT} ${CMAKE_SOURCE_DIR}/dist/${PROJECT_NAME}.app -qmldir=${CMAKE_CURRENT_LIST_DIR}
+            COMMENT "MacOs Deploying Qt Dependencies After Build........."
+            SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
+            WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
+        )
+    endif()
+    if(WIN32)
+        find_program(QT_DEPLOY_QT NAMES windeployqt)
+        add_custom_target(Script-DeployRelease
+            COMMAND ${CMAKE_COMMAND} -E remove_directory ${CMAKE_SOURCE_DIR}/dist
+            COMMAND ${CMAKE_COMMAND} -E copy_directory ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} ${CMAKE_SOURCE_DIR}/dist
+            COMMAND ${QT_DEPLOY_QT} --qmldir=${CMAKE_CURRENT_LIST_DIR} --plugindir ${CMAKE_SOURCE_DIR}/dist/plugins --no-translations --compiler-runtime ${CMAKE_SOURCE_DIR}/dist/${PROJECT_NAME}.exe
+            COMMENT "Windows Deploying Qt Dependencies After Build........."
+            SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/CMakeLists.txt
+            WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
+        )
+endif()
+endif()

example/README.md

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

example/example.qrc

@@ -177,12 +177,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 +194,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>
@@ -207,5 +203,11 @@
         <file>res/template/src/main.qml.in</file>
         <file>res/template/src/qml.qrc.in</file>
         <file>res/template/src/zh_CN.ts.in</file>
+        <file>res/template/src/README.md.in</file>
+        <file>qml/global/GlobalModel.qml</file>
+        <file>qml/page/T_Sheet.qml</file>
+        <file>qml/page/T_GroupBox.qml</file>
+        <file>res/image/bg_scenic.jpg</file>
+        <file>qml/window/FluentInitializrWindow.qml</file>
     </qresource>
 </RCC>

example/qml-Qt6/App.qml

@@ -1,59 +0,0 @@
-import QtQuick
-import QtQuick.Window
-import QtQuick.Controls
-import QtQuick.Layouts
-import FluentUI
-
-Item {
-    id: app
-
-    Connections{
-        target: FluTheme
-        function onDarkModeChanged(){
-            SettingsHelper.saveDarkMode(FluTheme.darkMode)
-        }
-    }
-
-    Connections{
-        target: FluApp
-        function onUseSystemAppBarChanged(){
-            SettingsHelper.saveUseSystemAppBar(FluApp.useSystemAppBar)
-        }
-    }
-
-    Connections{
-        target: TranslateHelper
-        function onCurrentChanged(){
-            SettingsHelper.saveLanguage(TranslateHelper.current)
-        }
-    }
-
-    Component.onCompleted: {
-        FluNetwork.openLog = false
-        FluNetwork.setInterceptor(function(param){
-            param.addHeader("Token","000000000000000000000")
-        })
-        FluApp.init(app,Qt.locale(TranslateHelper.current))
-        FluApp.windowIcon = "qrc:/example/res/image/favicon.ico"
-        FluApp.useSystemAppBar = SettingsHelper.getUseSystemAppBar()
-        FluTheme.darkMode = SettingsHelper.getDarkMode()
-        FluTheme.enableAnimation = true
-        FluApp.routes = {
-            "/":"qrc:/example/qml/window/MainWindow.qml",
-            "/about":"qrc:/example/qml/window/AboutWindow.qml",
-            "/login":"qrc:/example/qml/window/LoginWindow.qml",
-            "/hotload":"qrc:/example/qml/window/HotloadWindow.qml",
-            "/crash":"qrc:/example/qml/window/CrashWindow.qml",
-            "/singleTaskWindow":"qrc:/example/qml/window/SingleTaskWindow.qml",
-            "/standardWindow":"qrc:/example/qml/window/StandardWindow.qml",
-            "/singleInstanceWindow":"qrc:/example/qml/window/SingleInstanceWindow.qml",
-            "/pageWindow":"qrc:/example/qml/window/PageWindow.qml"
-        }
-        var args = Qt.application.arguments
-        if(args.length>=2 && args[1].startsWith("-crashed=")){
-            FluApp.navigate("/crash",{crashFilePath:args[1].replace("-crashed=","")})
-        }else{
-            FluApp.navigate("/")
-        }
-    }
-}

example/qml-Qt6/chart/T_BarChart.qml

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

example/qml-Qt6/chart/T_BubbleChart.qml

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

example/qml-Qt6/chart/T_LineChart.qml

@@ -1,45 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    title: qsTr("Line Chart")
-
-    FluArea{
-        width: 500
-        height: 370
-        paddings: 10
-        Layout.topMargin: 20
-        FluChart{
-            anchors.fill: parent
-            chartType: 'line'
-            chartData: { return {
-                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                    datasets: [{
-                            label: 'My First Dataset',
-                            data: [65, 59, 80, 81, 56, 55, 40],
-                            fill: false,
-                            borderColor: 'rgb(75, 192, 192)',
-                            tension: 0.1
-                        }]
-                }
-            }
-            chartOptions: { return {
-                    maintainAspectRatio: false,
-                    title: {
-                        display: true,
-                        text: 'Chart.js Line Chart - Stacked'
-                    },
-                    tooltips: {
-                        mode: 'index',
-                        intersect: false
-                    }
-                }
-            }
-        }
-    }
-}

example/qml-Qt6/chart/T_PieChart.qml

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

example/qml-Qt6/chart/T_PolarAreaChart.qml

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

example/qml-Qt6/chart/T_RadarChart.qml

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

example/qml-Qt6/chart/T_ScatterChart.qml

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

example/qml-Qt6/component/CodeExpander.qml

@@ -1,144 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-
-FluExpander{
-
-    id:control
-    property string code: ""
-    headerText: qsTr("Source")
-    contentHeight:content.height
-    focus: false
-
-    FluCopyableText{
-        id:content
-        width:parent.width
-        text:highlightQmlCode(code)
-        textFormat: FluMultilineTextBox.RichText
-        padding: 10
-        topPadding: 10
-        leftPadding: 10
-        rightPadding: 10
-        bottomPadding: 10
-    }
-
-    FluIconButton{
-        iconSource:FluentIcons.Copy
-        anchors{
-            right: parent.right
-            top: parent.top
-            rightMargin: 5
-            topMargin: 5
-        }
-        onClicked:{
-            FluTools.clipText(FluTools.html2PlantText(content.text))
-            showSuccess(qsTr("The Copy is Successful"))
-        }
-    }
-
-    function htmlEncode(e){
-        var i,s;
-        for(i in s={
-                "&":/&/g,//""//":/"/g,"'":/'/g,
-                "<":/</g,">":/>/g,"<br/>":/\n/g,
-                " ":/ /g,"  ":/\t/g
-            })e=e.replace(s[i],i);
-        return e;
-    }
-
-    function highlightQmlCode(code) {
-        var qmlKeywords = [
-                    "FluTextButton",
-                    "FluAppBar",
-                    "FluAutoSuggestBox",
-                    "FluBadge",
-                    "FluButton",
-                    "FluCalendarPicker",
-                    "FluCalendarView",
-                    "FluCarousel",
-                    "FluCheckBox",
-                    "FluColorPicker",
-                    "FluColorView",
-                    "FluComboBox",
-                    "FluContentDialog",
-                    "FluContentPage",
-                    "FluDatePicker",
-                    "FluDivider",
-                    "FluDropDownButton",
-                    "FluExpander",
-                    "FluFilledButton",
-                    "FluFlipView",
-                    "FluFocusRectangle",
-                    "FluIcon",
-                    "FluIconButton",
-                    "FluInfoBar",
-                    "FluMediaPlayer",
-                    "FluMenu",
-                    "FluMenuItem",
-                    "FluMultilineTextBox",
-                    "FluNavigationView",
-                    "FluObject",
-                    "FluPaneItem",
-                    "FluPaneItemExpander",
-                    "FluPaneItemHeader",
-                    "FluPaneItemSeparator",
-                    "FluPivot",
-                    "FluPivotItem",
-                    "FluProgressBar",
-                    "FluProgressRing",
-                    "FluRadioButton",
-                    "FluRectangle",
-                    "FluScrollablePage",
-                    "FluScrollBar",
-                    "FluShadow",
-                    "FluSlider",
-                    "FluTabView",
-                    "FluText",
-                    "FluTextArea",
-                    "FluTextBox",
-                    "FluTextBoxBackground",
-                    "FluTextBoxMenu",
-                    "FluTextButton",
-                    "FluTextFiled",
-                    "FluTimePicker",
-                    "FluToggleSwitch",
-                    "FluTooltip",
-                    "FluTreeView",
-                    "FluWindow",
-                    "FluWindowResize",
-                    "FluToggleButton",
-                    "FluTableView",
-                    "FluColors",
-                    "FluTheme",
-                    "FluStatusLayout",
-                    "FluRatingControl",
-                    "FluPasswordBox",
-                    "FluBreadcrumbBar",
-                    "FluCopyableText",
-                    "FluAcrylic",
-                    "FluRemoteLoader",
-                    "FluMenuBar",
-                    "FluPagination",
-                    "FluRadioButtons",
-                    "FluImage",
-                    "FluSpinBox",
-                    "FluWatermark",
-                    "FluTour",
-                    "FluQRCode",
-                    "FluTimeline",
-                    "FluChart",
-                    "FluRangeSlider",
-                    "FluStaggeredLayout",
-                    "FluProgressButton",
-                    "FluLoadingButton",
-                    "FluClip",
-                    "FluNetwork",
-                    "FluShortcutPicker"
-                ];
-        code = code.replace(/\n/g, "<br>");
-        code = code.replace(/ /g, "&nbsp;");
-        return code.replace(RegExp("\\b(" + qmlKeywords.join("|") + ")\\b", "g"), "<span style='color: #c23a80'>$1</span>");
-    }
-}

example/qml-Qt6/global/ItemsFooter.qml

@@ -1,33 +0,0 @@
-pragma Singleton
-
-import QtQuick
-import FluentUI
-
-FluObject{
-
-    property var navigationView
-    property var paneItemMenu
-
-    id:footer_items
-
-    FluPaneItemSeparator{}
-
-    FluPaneItem{
-        title:qsTr("About")
-        icon:FluentIcons.Contact
-        onTapListener:function(){
-            FluApp.navigate("/about")
-        }
-    }
-
-    FluPaneItem{
-        title:qsTr("Settings")
-        menuDelegate: paneItemMenu
-        icon:FluentIcons.Settings
-        url:"qrc:/example/qml/page/T_Settings.qml"
-        onTap:{
-            navigationView.push(url)
-        }
-    }
-
-}

example/qml-Qt6/global/ItemsOriginal.qml

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

example/qml-Qt6/global/qmldir

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

example/qml-Qt6/page/T_3D.qml

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

example/qml-Qt6/page/T_Acrylic.qml

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

example/qml-Qt6/page/T_Awesome.qml

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

example/qml-Qt6/page/T_Badge.qml

@@ -1,131 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    title: qsTr("Badge")
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 120
-        paddings: 10
-
-        Column{
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-                right: parent.right
-            }
-            FluText{
-                wrapMode: Text.WrapAnywhere
-                width: parent.width
-                text: qsTr("It usually appears in the upper right corner of the notification icon or avatar to display the number of messages that need to be processed")
-            }
-            Row{
-                spacing: 20
-                Rectangle{
-                    width: 40
-                    height: 40
-                    radius:  8
-                    color: Qt.rgba(191/255,191/255,191/255,1)
-                    FluBadge{
-                        topRight: true
-                        showZero: true
-                        count:0
-                    }
-                }
-
-                Rectangle{
-                    width: 40
-                    height: 40
-                    radius:  8
-                    color: Qt.rgba(191/255,191/255,191/255,1)
-                    FluBadge{
-                        topRight: true
-                        showZero: true
-                        count:5
-                    }
-                }
-                Rectangle{
-                    width: 40
-                    height: 40
-                    radius:  8
-                    color: Qt.rgba(191/255,191/255,191/255,1)
-                    FluBadge{
-                        topRight: true
-                        showZero: true
-                        count:50
-                    }
-                }
-                Rectangle{
-                    width: 40
-                    height: 40
-                    radius:  8
-                    color: Qt.rgba(191/255,191/255,191/255,1)
-                    FluBadge{
-                        topRight: true
-                        showZero: true
-                        count:100
-                    }
-                }
-                Rectangle{
-                    width: 40
-                    height: 40
-                    radius:  8
-                    color: Qt.rgba(191/255,191/255,191/255,1)
-                    FluBadge{
-                        topRight: true
-                        showZero: true
-                        isDot:true
-                    }
-                }
-                Rectangle{
-                    width: 40
-                    height: 40
-                    radius:  8
-                    color: Qt.rgba(191/255,191/255,191/255,1)
-                    FluBadge{
-                        topRight: true
-                        showZero: true
-                        count:99
-                        color: Qt.rgba(250/255,173/255,20/255,1)
-                    }
-                }
-                Rectangle{
-                    width: 40
-                    height: 40
-                    radius:  8
-                    color: Qt.rgba(191/255,191/255,191/255,1)
-                    FluBadge{
-                        topRight: true
-                        showZero: true
-                        count:99
-                        color: Qt.rgba(82/255,196/255,26/255,1)
-                    }
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'Rectangle{
-    width: 40
-    height: 40
-    radius: 8
-    color: Qt.rgba(191/255,191/255,191/255,1)
-    FluBadge{
-        count: 100
-        isDot: false
-        color: Qt.rgba(82/255,196/255,26/255,1)
-    }
-}'
-    }
-
-}

example/qml-Qt6/page/T_BreadcrumbBar.qml

@@ -1,93 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    title: qsTr("BreadcurmbBar")
-
-    Component.onCompleted: {
-        var items = []
-        for(var i=0;i<10;i++){
-            items.push({title:"Item_"+(i+1)})
-        }
-        breadcrumb_1.items = items
-        breadcrumb_2.items = items
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-
-        FluBreadcrumbBar{
-            id:breadcrumb_1
-            width:parent.width
-            anchors.verticalCenter: parent.verticalCenter
-            onClickItem:
-                (model)=>{
-                    showSuccess(model.title)
-                }
-        }
-    }
-
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 100
-        paddings: 10
-        Layout.topMargin: 20
-
-        ColumnLayout{
-            anchors.verticalCenter: parent.verticalCenter
-            width:parent.width
-            spacing: 10
-
-            FluFilledButton{
-                text: qsTr("Reset sample")
-                onClicked:{
-                    var items = []
-                    for(var i=0;i<10;i++){
-                        items.push({title:"Item_"+(i+1)})
-                    }
-                     breadcrumb_2.items = items
-                }
-            }
-
-            FluBreadcrumbBar{
-                id:breadcrumb_2
-                separator:">"
-                spacing:8
-                textSize:18
-                Layout.fillWidth: true
-                onClickItem:
-                    (model)=>{
-                        if(model.index+1!==count()){
-                            breadcrumb_2.remove(model.index+1,count()-model.index-1)
-                        }
-                        showSuccess(model.title)
-                    }
-            }
-        }
-    }
-
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluBreadcrumbBar{
-    width:parent.width
-    separator:">"
-    spacing:8
-    textSize:18
-    onClickItem: (model)=>{
-
-    }
-}'
-    }
-
-
-}

example/qml-Qt6/page/T_Buttons.qml

@@ -1,438 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import QtQuick.Controls.Basic
-import FluentUI
-import "../component"
-
-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{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-
-        FluTextButton{
-            disabled: text_button_switch.checked
-            text: qsTr("Text Button")
-            onClicked: {
-                showInfo("点击Text Button")
-            }
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-        FluToggleSwitch{
-            id: text_button_switch
-            anchors{
-                right: parent.right
-                verticalCenter: parent.verticalCenter
-            }
-            text: qsTr("Disabled")
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluTextButton{
-    text:"Text Button"
-    onClicked: {
-
-    }
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-
-        FluButton{
-            disabled: button_switch.checked
-            text: qsTr("Standard Button")
-            onClicked: {
-                showInfo(qsTr("Click StandardButton"))
-            }
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-        FluToggleSwitch{
-            id: button_switch
-            anchors{
-                right: parent.right
-                verticalCenter: parent.verticalCenter
-            }
-            text: qsTr("Disabled")
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluButton{
-    text:"Standard Button"
-    onClicked: {
-
-    }
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        Layout.topMargin: 20
-        paddings: 10
-
-        FluFilledButton{
-            disabled: filled_button_switch.checked
-            text: qsTr("Filled Button")
-            onClicked: {
-                showWarning(qsTr("Click FilledButton"))
-            }
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-        FluToggleSwitch{
-            id: filled_button_switch
-            anchors{
-                right: parent.right
-                verticalCenter: parent.verticalCenter
-            }
-            text: qsTr("Disabled")
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluFilledButton{
-    text:"Filled Button"
-    onClicked: {
-
-    }
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        Layout.topMargin: 20
-        paddings: 10
-
-        FluToggleButton{
-            disabled:toggle_button_switch.checked
-            text: qsTr("Toggle Button")
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-        FluToggleSwitch{
-            id: toggle_button_switch
-            anchors{
-                right: parent.right
-                verticalCenter: parent.verticalCenter
-            }
-            text: qsTr("Disabled")
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluToggleButton{
-    text:"Toggle Button"
-    onClicked: {
-        checked = !checked
-    }
-}'
-    }
-
-    Timer{
-        id: timer_progress
-        interval: 200
-        onTriggered: {
-            btn_progress.progress = (btn_progress.progress + 0.1).toFixed(1)
-            if(btn_progress.progress==1){
-                timer_progress.stop()
-            }else{
-                timer_progress.start()
-            }
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        Layout.topMargin: 20
-        paddings: 10
-
-        FluProgressButton{
-            id: btn_progress
-            disabled: progress_button_switch.checked
-            text: qsTr("Progress Button")
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            onClicked: {
-                btn_progress.progress = 0
-                timer_progress.restart()
-            }
-        }
-        FluToggleSwitch{
-            id: progress_button_switch
-            anchors{
-                right: parent.right
-                verticalCenter: parent.verticalCenter
-            }
-            text: qsTr("Disabled")
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluProgressButton{
-    text:"Progress Button"
-    onClicked: {
-
-    }
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        Layout.topMargin: 20
-        paddings: 10
-
-        FluLoadingButton{
-            id: btn_loading
-            loading: loading_button_switch.checked
-            text: qsTr("Loading Button")
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            onClicked: {
-
-            }
-        }
-        FluToggleSwitch{
-            id: loading_button_switch
-            checked: true
-            anchors{
-                right: parent.right
-                verticalCenter: parent.verticalCenter
-            }
-            text: qsTr("Loading")
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluLoadingButton{
-    text:"Loading Button"
-    onClicked: {
-
-    }
-}'
-    }
-
-
-    FluArea{
-        Layout.fillWidth: true
-        height: layout_icon_button.height + 30
-        paddings: 10
-        Layout.topMargin: 20
-        Flow{
-            id: layout_icon_button
-            spacing: 10
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-                right: icon_button_switch.left
-            }
-            FluIconButton{
-                disabled: icon_button_switch.checked
-                iconDelegate: Image{ sourceSize: Qt.size(40,40) ; width: 20; height: 20; source: "qrc:/example/res/image/ic_home_github.png" }
-                onClicked:{
-                    showSuccess(qsTr("Click IconButton"))
-                }
-            }
-            FluIconButton{
-                iconSource: FluentIcons.ChromeCloseContrast
-                disabled: icon_button_switch.checked
-                iconSize: 15
-                text: qsTr("IconOnly")
-                display: Button.IconOnly
-                onClicked:{
-                    showSuccess(qsTr("Button.IconOnly"))
-                }
-            }
-            FluIconButton{
-                iconSource: FluentIcons.ChromeCloseContrast
-                disabled: icon_button_switch.checked
-                iconSize: 15
-                text: qsTr("TextOnly")
-                display: Button.TextOnly
-                onClicked:{
-                    showSuccess(qsTr("Button.TextOnly"))
-                }
-            }
-            FluIconButton{
-                iconSource: FluentIcons.ChromeCloseContrast
-                disabled: icon_button_switch.checked
-                iconSize: 15
-                text: qsTr("TextBesideIcon")
-                display: Button.TextBesideIcon
-                onClicked:{
-                    showSuccess(qsTr("Button.TextBesideIcon"))
-                }
-            }
-            FluIconButton{
-                iconSource: FluentIcons.ChromeCloseContrast
-                disabled: icon_button_switch.checked
-                iconSize: 15
-                text: qsTr("TextUnderIcon")
-                display: Button.TextUnderIcon
-                onClicked:{
-                    showSuccess(qsTr("Button.TextUnderIcon"))
-                }
-            }
-        }
-        FluToggleSwitch{
-            id: icon_button_switch
-            anchors{
-                right: parent.right
-                verticalCenter: parent.verticalCenter
-            }
-            text: qsTr("Disabled")
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluIconButton{
-    iconSource:FluentIcons.ChromeCloseContrast
-    onClicked: {
-
-    }
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-        FluDropDownButton{
-            disabled: drop_down_button_switch.checked
-            text: qsTr("DropDownButton")
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluMenuItem{
-                text: qsTr("Menu_1")
-            }
-            FluMenuItem{
-                text: qsTr("Menu_2")
-            }
-            FluMenuItem{
-                text: qsTr("Menu_3")
-            }
-            FluMenuItem{
-                text: qsTr("Menu_4")
-                onClicked: {
-
-                }
-            }
-        }
-        FluToggleSwitch{
-            id: drop_down_button_switch
-            anchors{
-                right: parent.right
-                verticalCenter: parent.verticalCenter
-            }
-            text: qsTr("Disabled")
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluDropDownButton{
-    text:"DropDownButton"
-    FluMenuItem{
-        text:"Menu_1"
-    },
-    FluMenuItem{
-        text:"Menu_2"
-    },
-    FluMenuItem{
-        text:"Menu_3"
-    },
-    FluMenuItem{
-        text:"Menu_4"
-    }
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 100
-        paddings: 10
-        Layout.topMargin: 20
-        FluRadioButtons{
-            spacing: 8
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluRadioButton{
-                disabled:radio_button_switch.checked
-                text: qsTr("Radio Button_1")
-            }
-            FluRadioButton{
-                disabled:radio_button_switch.checked
-                text: qsTr("Radio Button_2")
-            }
-            FluRadioButton{
-                disabled:radio_button_switch.checked
-                text: qsTr("Radio Button_3")
-            }
-        }
-        FluToggleSwitch{
-            id: radio_button_switch
-            anchors{
-                right: parent.right
-                verticalCenter: parent.verticalCenter
-            }
-            text: qsTr("Disabled")
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluRadioButton{
-    checked:true
-    text:"Text Button"
-    onClicked: {
-
-    }
-}'
-    }
-
-}

example/qml-Qt6/page/T_CalendarPicker.qml

@@ -1,37 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    title: qsTr("CalendarPicker")
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
-        ColumnLayout{
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluCalendarPicker{
-                onAccepted:{
-                    showSuccess(current.toLocaleString())
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluCalendarPicker{
-
-}'
-    }
-
-}

example/qml-Qt6/page/T_Captcha.qml

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

example/qml-Qt6/page/T_Carousel.qml

@@ -1,147 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    title: qsTr("Carousel")
-
-    ListModel{
-        id:data_model
-        ListElement{
-            url:"qrc:/example/res/image/banner_1.jpg"
-        }
-        ListElement{
-            url:"qrc:/example/res/image/banner_2.jpg"
-        }
-        ListElement{
-            url:"qrc:/example/res/image/banner_3.jpg"
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 370
-        paddings: 10
-        Layout.topMargin: 20
-        Column{
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left:parent.left
-            }
-            FluText{
-                text: qsTr("Carousel map, support infinite carousel, infinite swipe, and components implemented with ListView")
-            }
-            Item{
-                width: 400
-                height: 300
-                FluShadow{
-                    radius: 8
-                }
-                FluCarousel{
-                    anchors.fill: parent
-                    delegate: Component{
-                        Image {
-                            anchors.fill: parent
-                            source: model.url
-                            asynchronous: true
-                            fillMode:Image.PreserveAspectCrop
-                        }
-                    }
-                    Layout.topMargin: 20
-                    Layout.leftMargin: 5
-                    Component.onCompleted: {
-                        model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
-                    }
-                }
-            }
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 340
-        paddings: 10
-        Layout.topMargin: 10
-        Column{
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left:parent.left
-            }
-            Item{
-                width: 400
-                height: 300
-                FluShadow{
-                    radius: 8
-                }
-                FluCarousel{
-                    anchors.fill: parent
-                    loopTime:1500
-                    indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
-                    indicatorMarginTop:15
-                    delegate: Component{
-                        Item{
-                            anchors.fill: parent
-                            Image {
-                                anchors.fill: parent
-                                source: model.url
-                                asynchronous: true
-                                fillMode:Image.PreserveAspectCrop
-                            }
-                            Rectangle{
-                                height: 40
-                                width: parent.width
-                                anchors.bottom: parent.bottom
-                                color: "#33000000"
-                                FluText{
-                                    anchors.fill: parent
-                                    verticalAlignment: Qt.AlignVCenter
-                                    horizontalAlignment: Qt.AlignHCenter
-                                    text:model.title
-                                    color: FluColors.Grey10
-                                    font.pixelSize: 15
-                                }
-                            }
-                        }
-                    }
-                    Layout.topMargin: 20
-                    Layout.leftMargin: 5
-                    Component.onCompleted: {
-                        var arr = []
-                        arr.push({url:"qrc:/example/res/image/banner_1.jpg",title:"共同应对全球性问题"})
-                        arr.push({url:"qrc:/example/res/image/banner_2.jpg",title:"三小只全程没互动"})
-                        arr.push({url:"qrc:/example/res/image/banner_3.jpg",title:"有效投资扩大 激发增长动能"})
-                        model = arr
-                    }
-                }
-            }
-
-        }
-    }
-
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluCarousel{
-    id:carousel
-    width: 400
-    height: 300
-    delegate: Component{
-        Image {
-            anchors.fill: parent
-            source: model.url
-            asynchronous: true
-            fillMode:Image.PreserveAspectCrop
-        }
-    }
-    Component.onCompleted: {
-        carousel.model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
-    }
-}'
-    }
-}

example/qml-Qt6/page/T_CheckBox.qml

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

example/qml-Qt6/page/T_Clip.qml

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

example/qml-Qt6/page/T_ColorPicker.qml

@@ -1,43 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    title: qsTr("ColorPicker")
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 60
-        paddings: 10
-        RowLayout{
-            FluText{
-                text: qsTr("Click to Select a Color - >")
-                Layout.alignment: Qt.AlignVCenter
-            }
-            FluColorPicker{
-                cancelText: qsTr("Cancel")
-                okText: qsTr("OK")
-                titleText: qsTr("Color Picker")
-                editText: qsTr("Edit Color")
-                redText: qsTr("Red")
-                greenText: qsTr("Green")
-                blueText: qsTr("Blue")
-                opacityText: qsTr("Opacity")
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluColorPicker{
-
-}'
-    }
-
-}
-

example/qml-Qt6/page/T_ComboBox.qml

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

example/qml-Qt6/page/T_DatePicker.qml

@@ -1,75 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    title: qsTr("TimePicker")
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
-        ColumnLayout{
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluText{
-                text: qsTr("showYear=true")
-            }
-            FluDatePicker{
-                current: new Date()
-                onAccepted: {
-                    showSuccess(current.toLocaleDateString())
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluDatePicker{
-
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
-        ColumnLayout{
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluText{
-                text: qsTr("showYear=false")
-            }
-            FluDatePicker{
-                showYear: false
-                yearText: qsTr("Year")
-                monthText: qsTr("Month")
-                dayText: qsTr("Day")
-                cancelText: qsTr("Cancel")
-                okText: qsTr("OK")
-                onAccepted: {
-                    showSuccess(current.toLocaleDateString())
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluDatePicker{
-    showYear:false
-}'
-    }
-
-}

example/qml-Qt6/page/T_Dialog.qml

@@ -1,232 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    title: qsTr("Dialog")
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-        FluButton{
-            anchors.verticalCenter: parent.verticalCenter
-            text: qsTr("Show Double Button Dialog")
-            onClicked: {
-                double_btn_dialog.open()
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluContentDialog{
-    id:dialog
-    title: qsTr("Friendly Reminder")
-    message: qsTr("Are you sure you want to opt out?")
-    negativeText: qsTr("Cancel")
-    buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
-    onNegativeClicked:{
-        showSuccess(qsTr("Click the Cancel Button"))
-    }
-    positiveText: qsTr("OK")
-    onPositiveClicked:{
-        showSuccess(qsTr("Click the OK Button"))
-        }
-    }
-    dialog.open()'
-    }
-
-    FluContentDialog{
-        id:double_btn_dialog
-        title: qsTr("Friendly Reminder")
-        message: qsTr("Are you sure you want to opt out?")
-        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
-        negativeText: qsTr("Cancel")
-        onNegativeClicked: {
-            showSuccess(qsTr("Click the Cancel Button"))
-        }
-        positiveText: qsTr("OK")
-        onPositiveClicked:{
-            showSuccess(qsTr("Click the OK Button"))
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-        FluButton{
-            anchors.verticalCenter: parent.verticalCenter
-            text: qsTr("Show Triple Button Dialog")
-            onClicked: {
-                triple_btn_dialog.open()
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluContentDialog{
-    id: dialog
-    title: qsTr("Friendly Reminder")
-    message: qsTr("Are you sure you want to opt out?")
-    negativeText: qsTr("Cancel")
-    buttonFlags: FluContentDialogType.NeutralButton | FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
-    negativeText: qsTr("Cancel")
-    onNegativeClicked: {
-        showSuccess(qsTr("Click the Cancel Button"))
-    }
-    positiveText: qsTr("OK")
-    onPositiveClicked: {
-        showSuccess(qsTr("Click the OK Button"))
-    }
-    neutralText: qsTr("Minimize")
-    onNeutralClicked: {
-        showSuccess(qsTr("Click Minimize"))
-        }
-    }
-    dialog.open()'
-    }
-
-    FluContentDialog{
-        id: triple_btn_dialog
-        title: qsTr("Friendly Reminder")
-        message: qsTr("Are you sure you want to opt out?")
-        buttonFlags: FluContentDialogType.NeutralButton | FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
-        negativeText: qsTr("Cancel")
-        onNegativeClicked: {
-            showSuccess(qsTr("Click the Cancel Button"))
-        }
-        positiveText: qsTr("OK")
-        onPositiveClicked: {
-            showSuccess(qsTr("Click the OK Button"))
-        }
-        neutralText: qsTr("Minimize")
-        onNeutralClicked: {
-            showSuccess(qsTr("Click Minimize"))
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 100
-        paddings: 10
-        Layout.topMargin: 20
-        FluButton{
-            anchors.top: parent.top
-            anchors.topMargin: 5
-            text: qsTr("Custom Content Dialog")
-            onClicked: {
-                custom_btn_dialog.open()
-            }
-        }
-        FluButton{
-            anchors.top: parent.top
-            anchors.topMargin: 48
-            text: qsTr("Custom Content Dialog2")
-            onClicked: {
-                custom_btn_dialog2.open()
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluContentDialog{
-    id: dialog
-    title: qsTr("Friendly Reminder")
-    message: qsTr("Data is loading, please wait...")
-    negativeText: qsTr("Unload")
-    contentDelegate: Component{
-        Item{
-            width: parent.width
-            height: 80
-            FluProgressRing{
-                anchors.centerIn: parent
-            }
-        }
-    }
-    onNegativeClicked: {
-        showSuccess(qsTr("Click the Cancel Button"))
-    }
-    positiveText :qsTr("OK")
-    onPositiveClicked: {
-        showSuccess(qsTr("Click the OK Button"))
-        }
-    }
-    dialog.open()'
-    }
-
-    FluContentDialog{
-        id: custom_btn_dialog
-        title: qsTr("Friendly Reminder")
-        message: qsTr("Data is loading, please wait...")
-        negativeText: qsTr("Unload")
-        contentDelegate: Component{
-            Item{
-                implicitWidth: parent.width
-                implicitHeight: 80
-                FluProgressRing{
-                    anchors.centerIn: parent
-                }
-            }
-        }
-        onNegativeClicked: {
-            showSuccess(qsTr("Click the Cancel Button"))
-        }
-        positiveText: qsTr("OK")
-        onPositiveClickListener: function(){
-            showError(qsTr("Test the InfoBar level on top of the Popup"))
-        }
-    }
-
-    FluContentDialog{
-        id:custom_btn_dialog2
-        title: qsTr("Line Chart")
-        contentDelegate: Component{
-            Item{
-                implicitWidth: parent.width
-                implicitHeight: 300
-                FluChart{
-                    anchors.fill: parent
-                    chartType: 'line'
-                    chartData: { return {
-                            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-                            datasets: [{
-                                    label: 'My First Dataset',
-                                    data: [65, 59, 80, 81, 56, 55, 40],
-                                    fill: false,
-                                    borderColor: 'rgb(75, 192, 192)',
-                                    tension: 0.1
-                                }]
-                        }
-                    }
-                    chartOptions: { return {
-                            maintainAspectRatio: false,
-                            title: {
-                                display: true,
-                                text: 'Chart.js Line Chart - Stacked'
-                            },
-                            tooltips: {
-                                mode: 'index',
-                                intersect: false
-                            }
-                        }
-                    }
-                }
-            }
-        }
-        buttonFlags: FluContentDialogType.PositiveButton
-        positiveText: qsTr("OK")
-        onPositiveClicked: {
-            showSuccess(qsTr("Click the OK Button"))
-        }
-    }
-}

example/qml-Qt6/page/T_Expander.qml

@@ -1,110 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    title: qsTr("Expander")
-
-    FluArea{
-        Layout.fillWidth: true
-        height: layout_column.height+20
-        paddings: 10
-        Layout.topMargin: 20
-        Column{
-            id:layout_column
-            spacing: 15
-            anchors{
-                top:parent.top
-                left:parent.left
-            }
-
-            FluExpander{
-                headerText: qsTr("Open a radio box")
-                Layout.topMargin: 20
-                Item{
-                    anchors.fill: parent
-                    FluRadioButtons{
-                        spacing: 8
-                        anchors{
-                            top: parent.top
-                            left: parent.left
-                            topMargin: 15
-                            leftMargin: 15
-                        }
-                        FluRadioButton{
-                            text:"Radio Button_1"
-                        }
-                        FluRadioButton{
-                            text:"Radio Button_2"
-                        }
-                        FluRadioButton{
-                            text:"Radio Button_3"
-                        }
-                    }
-                }
-            }
-
-            FluExpander{
-                Layout.topMargin: 20
-                headerText: qsTr("Open a sliding text box")
-                Item{
-                    anchors.fill: parent
-                    Flickable{
-                        id:scrollview
-                        width: parent.width
-                        height: parent.height
-                        contentWidth: width
-                        boundsBehavior: Flickable.StopAtBounds
-                        contentHeight: text_info.height
-                        ScrollBar.vertical: FluScrollBar {}
-                        FluText{
-                            id:text_info
-                            width: scrollview.width
-                            wrapMode: Text.WrapAnywhere
-                            padding: 14
-                            text: qsTr("Permit me to observe: the late emperor was taken from us before he could finish his life`s work, the restoration of Han. Today, the empire is still divided in three, and our very survival is threatened. Yet still the officials at court and the soldiers throughout the realm remain loyal to you, your majesty. Because they remember the late emperor, all of them, and they wish to repay his kindness in service to you. This is the moment to extend your divine influence, to honour the memory of the late Emperor and strengthen the morale of your officers. It is not time to listen to bad advice, or close your ears to the suggestions of loyal men.
-The court and the administration are as one. Both must be judged by one standard. Those who are loyal and good must get what they deserve, but so must the evil-doers who break the law. This will demonstrate the justice of your rule. There cannot be one law for the court and another for the administration.
-Counselors and attendants like Guo Youzhi, Fei Yi, and Dong Yun are all reliable men, loyal of purpose and pure in motive. The late Emperor selected them for office so that they would serve you after his death.These are the men who should be consulted on all palace affairs. Xiang Chong has proved himself a fine general in battle, and the late Emperor believed in him. That is why the assembly has recommended him for overall command. It will keep the troops happy if he is consulted on all military matters.
-Xiang Chong has proved himself a fine general in battle, and the late Emperor believed in him. That is why the assembly has recommended him for overall command. It will keep the troops happy if he is consulted on all military matters.
-The emperors of the Western Han chose their courtiers wisely, and their dynasty flourished. The emperors of the Eastern Han chose poorly, and they doomed the empire to ruin. Whenever the late Emperor discussed this problem with me, he lamented the failings of Emperors Huan and Ling. Advisors like Guo Youzhi, Fei Yi, Chen Zhen, Zhang Yi, and Jiang Wan – these are all men of great integrity and devotion. I encourage you to trust them, your majesty, if the house of Han is to rise again.
-I begin as a common man, farming in my fields in Nanyang, doing what I could to survive in an age of chaos. I never had any interest in making a name for myself as a noble. The late Emperor was not ashamed to visit my cottage and seek my advice. Grateful for his regard, I responded to his appeal and threw myself into his service. Now twenty-one years has passed, the late Emperor always appreciated my caution and, in his final days, entrusted me with his cause.
-Since that moment, I have been tormented day and night by the fear that I might let him down. That is why I crossed the Lu river at the height of summer, and entered the wastelands beyond. Now the south has been subdued, and our forces are fully armed.I should lead our soldiers to conquer the northern heartland and attempt to remove the hateful traitors, restore the house of Han, and return it to the former capital.This the way I mean to honor my debt to the late Emperor and fulfill my duty to you. Guo Youzhi, Fei Yi, and Dong Yun are the ones who should be making policy decisions and recommendations.
-My only desire is to be permitted to drive out the traitors and restore the Han. If I should let you down, punish my offense and report it to the spirit of the late Emperor. If those three advisors should fail in their duties, then they should be punished for their negligence.Your Majesty, consider your course of action carefully. Seek out good advice, and never forget the late Emperor. I depart now on a long expedition, and I will be forever grateful if you heed my advice. Blinded by my own tears, I know not what I write.")
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluExpander{
-    headerText: qsTr("Open a radio box")
-    Item{
-        anchors.fill: parent
-        Flickable{
-            width: parent.width
-            height: parent.height
-            contentWidth: width
-            contentHeight: text_info.height
-            ScrollBar.vertical: FluScrollBar {}
-            FluText{
-                id:text_info
-                width: scrollview.width
-                wrapMode: Text.WrapAnywhere
-                padding: 14
-                text: qsTr("Permit me to observe: the late emperor was taken from us before he could finish his life`s work...")
-            }
-        }
-    }
-}'
-    }
-
-
-}

example/qml-Qt6/page/T_FlipView.qml

@@ -1,117 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    title: qsTr("FlipView")
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 340
-        paddings: 10
-        Layout.topMargin: 20
-        ColumnLayout{
-            anchors.verticalCenter: parent.verticalCenter
-            FluText{
-                text: qsTr("Horizontal FlipView")
-            }
-            FluFlipView{
-                Image{
-                    source: "qrc:/example/res/image/banner_1.jpg"
-                    asynchronous: true
-                    fillMode:Image.PreserveAspectCrop
-                }
-                Image{
-                    source: "qrc:/example/res/image/banner_2.jpg"
-                    asynchronous: true
-                    fillMode:Image.PreserveAspectCrop
-                }
-                Image{
-                    source: "qrc:/example/res/image/banner_3.jpg"
-                    asynchronous: true
-                    fillMode:Image.PreserveAspectCrop
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluFlipView{
-    Image{
-        source: "qrc:/example/res/image/banner_1.jpg"
-        asynchronous: true
-        fillMode:Image.PreserveAspectCrop
-    }
-    Image{
-        source: "qrc:/example/res/image/banner_1.jpg"
-        asynchronous: true
-        fillMode:Image.PreserveAspectCrop
-    }
-    Image{
-        source: "qrc:/example/res/image/banner_1.jpg"
-        asynchronous: true
-        fillMode:Image.PreserveAspectCrop
-    }
-}
-'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 340
-        paddings: 10
-        Layout.topMargin: 20
-        ColumnLayout{
-            anchors.verticalCenter: parent.verticalCenter
-            FluText{
-                text: qsTr("Vertical FlipView")
-            }
-            FluFlipView{
-                vertical:true
-                Image{
-                    source: "qrc:/example/res/image/banner_1.jpg"
-                    asynchronous: true
-                    fillMode:Image.PreserveAspectCrop
-                }
-                Image{
-                    source: "qrc:/example/res/image/banner_2.jpg"
-                    asynchronous: true
-                    fillMode:Image.PreserveAspectCrop
-                }
-                Image{
-                    source: "qrc:/example/res/image/banner_3.jpg"
-                    asynchronous: true
-                    fillMode:Image.PreserveAspectCrop
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluFlipView{
-    vertical:true
-    Image{
-        source: "qrc:/example/res/image/banner_1.jpg"
-        asynchronous: true
-        fillMode:Image.PreserveAspectCrop
-    }
-    Image{
-        source: "qrc:/example/res/image/banner_1.jpg"
-        asynchronous: true
-        fillMode:Image.PreserveAspectCrop
-    }
-    Image{
-        source: "qrc:/example/res/image/banner_1.jpg"
-        asynchronous: true
-        fillMode:Image.PreserveAspectCrop
-    }
-}
-'
-    }
-}

example/qml-Qt6/page/T_Home.qml

@@ -1,294 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "../global"
-import "../window"
-
-
-FluScrollablePage{
-
-    launchMode: FluPageType.SingleTask
-    animDisabled: true
-
-    FluentInitalizrWindow{
-        id:fluent_initalizr
-    }
-
-    ListModel{
-        id: model_header
-        ListElement{
-            icon: "qrc:/example/res/image/ic_home_github.png"
-            title: qsTr("FluentUI GitHub")
-            desc: qsTr("The latest FluentUI controls and styles for your applications.")
-            url: "https://github.com/zhuzichu520/FluentUI"
-            clicked: function(model){
-                Qt.openUrlExternally(model.url)
-            }
-        }
-        ListElement{
-            icon: "qrc:/example/res/image/favicon.ico"
-            title: qsTr("FluentUI Initalizr")
-            desc: qsTr("FluentUI Initializr is a Tool that helps you create and customize Fluent UI projects with various options.")
-            url: "https://github.com/zhuzichu520/FluentUI"
-            clicked: function(model){
-                fluent_initalizr.showDialog()
-            }
-        }
-    }
-    Item{
-        Layout.fillWidth: true
-        Layout.preferredHeight: 320
-        Image {
-            id: bg
-            fillMode:Image.PreserveAspectCrop
-            anchors.fill: parent
-            verticalAlignment: Qt.AlignTop
-            sourceSize: Qt.size(960,640)
-            source: "qrc:/example/res/image/bg_home_header.png"
-        }
-        Rectangle{
-            anchors.fill: parent
-            gradient: Gradient{
-                GradientStop { position: 0.8; color: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(1,1,1,0) }
-                GradientStop { position: 1.0; color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) }
-            }
-        }
-        FluText{
-            text:"FluentUI Gallery"
-            font: FluTextStyle.TitleLarge
-            anchors{
-                top: parent.top
-                left: parent.left
-                topMargin: 20
-                leftMargin: 20
-            }
-        }
-        Component{
-            id:com_grallery
-            Item{
-                id: control
-                width: 220
-                height: 240
-                FluShadow{
-                    radius:5
-                    anchors.fill: item_content
-                }
-                FluClip{
-                    id:item_content
-                    radius: [5,5,5,5]
-                    width: 200
-                    height: 220
-                    anchors.centerIn: parent
-                    FluAcrylic{
-                        anchors.fill: parent
-                        tintColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
-                        target: bg
-                        tintOpacity: FluTheme.dark ? 0.8 : 0.9
-                        blurRadius : 40
-                        targetRect: Qt.rect(list.x-list.contentX+10+(control.width)*index,list.y+10,width,height)
-                    }
-                    Rectangle{
-                        anchors.fill: parent
-                        radius: 5
-                        color:FluTheme.itemHoverColor
-                        visible: item_mouse.containsMouse
-                    }
-                    Rectangle{
-                        anchors.fill: parent
-                        radius: 5
-                        color:Qt.rgba(0,0,0,0.0)
-                        visible: !item_mouse.containsMouse
-                    }
-                    ColumnLayout{
-                        Image {
-                            Layout.topMargin: 20
-                            Layout.leftMargin: 20
-                            Layout.preferredWidth: 50
-                            Layout.preferredHeight: 50
-                            source: model.icon
-                        }
-                        FluText{
-                            text: model.title
-                            font: FluTextStyle.Body
-                            Layout.topMargin: 20
-                            Layout.leftMargin: 20
-                        }
-                        FluText{
-                            text: model.desc
-                            Layout.topMargin: 5
-                            Layout.preferredWidth: 160
-                            Layout.leftMargin: 20
-                            color: FluColors.Grey120
-                            font.pixelSize: 12
-                            wrapMode: Text.WrapAnywhere
-                        }
-                    }
-                    FluIcon{
-                        iconSource: FluentIcons.OpenInNewWindow
-                        iconSize: 15
-                        anchors{
-                            bottom: parent.bottom
-                            right: parent.right
-                            rightMargin: 10
-                            bottomMargin: 10
-                        }
-                    }
-                    MouseArea{
-                        id:item_mouse
-                        anchors.fill: parent
-                        hoverEnabled: true
-                        onWheel:
-                            (wheel)=>{
-                                if (wheel.angleDelta.y > 0) scrollbar_header.decrease()
-                                else scrollbar_header.increase()
-                            }
-                        onClicked: {
-                            model.clicked(model)
-                        }
-                    }
-                }
-            }
-        }
-
-        ListView{
-            id: list
-            anchors{
-                left: parent.left
-                right: parent.right
-                bottom: parent.bottom
-            }
-            orientation: ListView.Horizontal
-            height: 240
-            model: model_header
-            header: Item{height: 10;width: 10}
-            footer: Item{height: 10;width: 10}
-            ScrollBar.horizontal: FluScrollBar{
-                id: scrollbar_header
-            }
-            clip: false
-            delegate: com_grallery
-        }
-    }
-
-    Component{
-        id:com_item
-        Item{
-            property string desc: modelData.extra.desc
-            width: 320
-            height: 120
-            FluArea{
-                radius: 8
-                width: 300
-                height: 100
-                anchors.centerIn: parent
-                Rectangle{
-                    anchors.fill: parent
-                    radius: 8
-                    color:{
-                        if(item_mouse.containsMouse){
-                            return FluTheme.itemHoverColor
-                        }
-                        return FluTheme.itemNormalColor
-                    }
-                }
-                Image{
-                    id:item_icon
-                    height: 40
-                    width: 40
-                    source: modelData.extra.image
-                    anchors{
-                        left: parent.left
-                        leftMargin: 20
-                        verticalCenter: parent.verticalCenter
-                    }
-                }
-                FluText{
-                    id:item_title
-                    text:modelData.title
-                    font: FluTextStyle.BodyStrong
-                    anchors{
-                        left: item_icon.right
-                        leftMargin: 20
-                        top: item_icon.top
-                    }
-                }
-                FluText{
-                    id:item_desc
-                    text:desc
-                    color:FluColors.Grey120
-                    wrapMode: Text.WrapAnywhere
-                    elide: Text.ElideRight
-                    font: FluTextStyle.Caption
-                    maximumLineCount: 2
-                    anchors{
-                        left: item_title.left
-                        right: parent.right
-                        rightMargin: 20
-                        top: item_title.bottom
-                        topMargin: 5
-                    }
-                }
-
-                Rectangle{
-                    height: 12
-                    width: 12
-                    radius:  6
-                    color: FluTheme.primaryColor
-                    anchors{
-                        right: parent.right
-                        top: parent.top
-                        rightMargin: 14
-                        topMargin: 14
-                    }
-                }
-
-                MouseArea{
-                    id:item_mouse
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    onClicked: {
-                        ItemsOriginal.startPageByItem(modelData)
-                    }
-                }
-            }
-        }
-    }
-
-    FluText{
-        text: "Recently added samples"
-        font: FluTextStyle.Title
-        Layout.topMargin: 20
-        Layout.leftMargin: 20
-    }
-
-    GridView{
-        Layout.fillWidth: true
-        Layout.preferredHeight: contentHeight
-        cellHeight: 120
-        cellWidth: 320
-        model:ItemsOriginal.getRecentlyAddedData()
-        interactive: false
-        delegate: com_item
-    }
-
-    FluText{
-        text: "Recently updated samples"
-        font: FluTextStyle.Title
-        Layout.topMargin: 20
-        Layout.leftMargin: 20
-    }
-
-    GridView{
-        Layout.fillWidth: true
-        Layout.preferredHeight: contentHeight
-        cellHeight: 120
-        cellWidth: 320
-        interactive: false
-        model: ItemsOriginal.getRecentlyUpdatedData()
-        delegate: com_item
-    }
-
-}
-

example/qml-Qt6/page/T_Image.qml

@@ -1,48 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    title: qsTr("Image")
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 260
-        paddings: 10
-        Layout.topMargin: 20
-        Column{
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left:parent.left
-            }
-            FluImage{
-                width: 384
-                height: 240
-                source: "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_4.jpg"
-                onStatusChanged:{
-                    if(status === Image.Error){
-                        showError(qsTr("The image failed to load, please reload"))
-                    }
-                }
-                clickErrorListener: function(){
-                    source = "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_1.jpg"
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluImage{
-    width: 400
-    height: 300
-    source: "https://gitee.com/zhu-zichu/zhu-zichu/raw/74f075efe2f8d3c3bb7ba3c2259e403450e4050b/image/banner_1.jpg"
-}'
-    }
-
-}

example/qml-Qt6/page/T_InfoBar.qml

@@ -1,72 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    title: qsTr("InfoBar")
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 270
-        paddings: 10
-        ColumnLayout{
-            spacing: 14
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluButton{
-                text: qsTr("Info")
-                onClicked: {
-                    showInfo(qsTr("This is an InfoBar in the Info Style"))
-                }
-            }
-            FluButton{
-                text: qsTr("Warning")
-                onClicked: {
-                    showWarning(qsTr("This is an InfoBar in the Warning Style"))
-                }
-            }
-            FluButton{
-                text:"Error"
-                onClicked: {
-                    showError(qsTr("This is an InfoBar in the Error Style"))
-                }
-            }
-            FluButton{
-                text:"Success"
-                onClicked: {
-                    showSuccess(qsTr("This is an InfoBar in the Success Style"))
-                }
-            }
-            FluButton{
-                text: qsTr("InfoBar that needs to be turned off manually")
-                onClicked: {
-                    showInfo(qsTr("This is an InfoBar in the Info Style"),0,qsTr("Manual shutdown is supported"))
-                }
-            }
-            FluButton{
-                text:"Loading"
-                onClicked: {
-                    showLoading()
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'showInfo(qsTr("This is an InfoBar in the Info Style"))
-
-showWarning(qsTr("This is an InfoBar in the Warning Style"))
-
-showError(qsTr("This is an InfoBar in the Error Style"))
-
-showSuccess(qsTr("This is an InfoBar in the Success Style"))'
-    }
-}

example/qml-Qt6/page/T_Menu.qml

@@ -1,171 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    title: qsTr("Menu")
-
-    FluMenu {
-        id:menu
-        title: qsTr("File")
-        Action { text: qsTr("New...")}
-        Action { text: qsTr("Open...") }
-        Action { text: qsTr("Save") }
-        FluMenuSeparator { }
-        FluMenuItem{
-            text: qsTr("Quit")
-            onTriggered: {
-                showError("Quit")
-            }
-        }
-        FluMenuItem{
-            text: qsTr("Search")
-            iconSource: FluentIcons.Zoom
-            iconSpacing: 3
-            onTriggered: {
-                showError(qsTr("Search"))
-            }
-        }
-        Action {
-            text: qsTr("Disable")
-            enabled:false
-            onTriggered: {
-                showError(qsTr("Disable"))
-            }
-        }
-        FluMenuSeparator { }
-        Action { text: qsTr("Check");checkable: true;checked: true}
-        FluMenu{
-            title: qsTr("Save As...")
-            Action { text: qsTr("Doc") }
-            Action { text: qsTr("PDF") }
-        }
-    }
-
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 100
-        paddings: 10
-        Layout.topMargin: 20
-        Column{
-            id: layout_column
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left:parent.left
-            }
-
-            FluText{
-                text: qsTr("Menu")
-            }
-
-            FluButton{
-                text: qsTr("Show Menu Popup")
-                Layout.topMargin: 20
-                onClicked:{
-                    menu.popup()
-                }
-            }
-
-
-        }
-    }
-
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluMenu{
-    id:menu
-    FluMenuItem:{
-        text:"删除"
-        onClicked: {
-            showError("删除")
-        }
-    }
-    FluMenuItem:{
-        text:"修改"
-        onClicked: {
-            showInfo("修改")
-        }
-    }
-}
-menu.popup()
-'
-    }
-
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 100
-        paddings: 10
-        Layout.topMargin: 20
-        Column{
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left:parent.left
-            }
-
-            FluText{
-                text: qsTr("MenuBar")
-            }
-
-            FluMenuBar {
-                id:menu_bar
-                FluMenu {
-                    title: qsTr("File")
-                    Action { text: qsTr("New...") }
-                    Action { text: qsTr("Open...") }
-                    Action { text: qsTr("Save") }
-                    FluMenuSeparator { }
-                    Action { text: qsTr("Quit") }
-                    Action {
-                        text: qsTr("Disable")
-                        enabled:false
-                    }
-                    FluMenu{
-                        title: qsTr("Save As...")
-                        Action { text: qsTr("Doc") }
-                        Action { text: qsTr("PDF") }
-                    }
-                }
-                FluMenu {
-                    title: qsTr("Edit")
-                    Action { text: qsTr("Cut") }
-                    Action { text: qsTr("Copy") }
-                    Action { text: qsTr("Paste") }
-                }
-                FluMenu {
-                    title: qsTr("Help")
-                    Action { text: qsTr("About") }
-                }
-            }
-
-        }
-    }
-
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluMenuBar{
-    id:menu
-    FluMenu:{
-        title:"File"
-        Action { text: qsTr("New...") }
-    }
-    FluMenu:{
-        title:"Edit"
-        Action { text: qsTr("Cut") }
-        Action { text: qsTr("Copy") }
-        Action { text: qsTr("Paste") }
-    }
-}
-menu.popup()
-'
-    }
-}

example/qml-Qt6/page/T_MultiWindow.qml

@@ -1,186 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    property string password: ""
-    property var loginPageRegister: registerForWindowResult("/login")
-
-    title: qsTr("MultiWindow")
-
-    Connections{
-        target: loginPageRegister
-        function onResult(data)
-        {
-            password = data.password
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 86
-        paddings: 10
-        Layout.topMargin: 20
-        Column{
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluText{
-                text: qsTr("<font color='red'>Standard</font> mode window，a new window is created every time")
-            }
-            FluButton{
-                text: qsTr("Create Window")
-                onClicked: {
-                    FluApp.navigate("/standardWindow")
-                }
-            }
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 86
-        paddings: 10
-        Layout.topMargin: 10
-        Column{
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluText{
-                text: qsTr("<font color='red'>SingleTask</font> mode window，If a window exists, this activates the window")
-                textFormat: Text.RichText
-            }
-            FluButton{
-                text: qsTr("Create Window")
-                onClicked: {
-                    FluApp.navigate("/singleTaskWindow")
-                }
-            }
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 86
-        paddings: 10
-        Layout.topMargin: 10
-        Column{
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluText{
-                text: qsTr("<font color='red'>SingleInstance</font> mode window，If the window exists, destroy the window and create a new window")
-            }
-            FluButton{
-                text: qsTr("Create Window")
-                onClicked: {
-                    FluApp.navigate("/singleInstanceWindow")
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluWindow{
-  //launchMode: FluWindowType.Standard
-  //launchMode: FluWindowType.SingleTask
-     launchMode: FluWindowType.SingleInstance
-}
-'
-    }
-
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 100
-        paddings: 10
-        Layout.topMargin: 20
-        Column{
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluText{
-                text: qsTr("Create the window without carrying any parameters")
-            }
-            FluButton{
-                text: qsTr("Create Window")
-                onClicked: {
-                    FluApp.navigate("/about")
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluButton{
-    text: qsTr("Create Window")
-    onClicked: {
-        FluApp.navigate("/about")
-    }
-}
-'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 130
-        paddings: 10
-        Layout.topMargin: 20
-
-        Column{
-            spacing: 15
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluText{
-                text: qsTr("Create a window with the parameter username: zhuzichu")
-            }
-            FluButton{
-                text: qsTr("Create Window")
-                onClicked: {
-                    loginPageRegister.launch({username:"zhuzichu"})
-                }
-            }
-            FluText{
-                text:qsTr("Login Window Returned Password - >")+password
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'property var loginPageRegister: registerForWindowResult("/login")
-
-Connections{
-    target: loginPageRegister
-    function onResult(data)
-    {
-        password = data.password
-    }
-}
-
-FluButton{
-    text: qsTr("Create Window")
-    onClicked: {
-        loginPageRegister.launch({username:"zhuzichu"})
-    }
-}
-'
-    }
-
-}

example/qml-Qt6/page/T_Network.qml

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

example/qml-Qt6/page/T_Pagination.qml

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

example/qml-Qt6/page/T_Pivot.qml

@@ -1,82 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    title: qsTr("Pivot")
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 400
-        paddings: 10
-
-
-
-        FluPivot{
-            anchors.fill: parent
-            currentIndex: 2
-
-            FluPivotItem{
-                title: qsTr("All")
-                contentItem:FluText{
-                    text: qsTr("All emails go here.")
-                }
-            }
-            FluPivotItem{
-                title: qsTr("Unread")
-                contentItem: FluText{
-                    text: qsTr("Unread emails go here.")
-                }
-            }
-            FluPivotItem{
-                title: qsTr("Flagged")
-                contentItem: FluText{
-                    text: qsTr("Flagged emails go here.")
-                }
-            }
-            FluPivotItem{
-                title: qsTr("Urgent")
-                contentItem: FluText{
-                    text: qsTr("Urgent emails go here.")
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluPivot{
-    anchors.fill: parent
-    FluPivotItem:{
-        text: qsTr("All")
-        contentItem: FluText{
-            text: qsTr("All emails go here.")
-        }
-    }
-    FluPivotItem:{
-        text: qsTr("Unread")
-        contentItem: FluText{
-            text: qsTr("Unread emails go here.")
-        }
-    }
-    FluPivotItem:{
-        text: qsTr("Flagged")
-        contentItem: FluText{
-            text: qsTr("Flagged emails go here.")
-        }
-    }
-    FluPivotItem:{
-        text: qsTr("Urgent")
-        contentItem: FluText{
-            text: qsTr("Urgent emails go here.")
-        }
-    }
-}
-'
-    }
-}

example/qml-Qt6/page/T_Progress.qml

@@ -1,103 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    title: qsTr("Progress")
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 130
-        paddings: 10
-
-        ColumnLayout{
-            spacing: 10
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluText{
-                text: "indeterminate = true"
-            }
-            FluProgressBar{
-            }
-            FluProgressRing{
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluProgressBar{
-
-}
-FluProgressRing{
-
-}
-'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 286
-        paddings: 10
-
-        ColumnLayout{
-            spacing: 10
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluText{
-                text: "indeterminate = false"
-            }
-            FluProgressBar{
-                indeterminate: false
-                value:slider.value/100
-                Layout.topMargin: 10
-            }
-            FluProgressBar{
-                indeterminate: false
-                value:slider.value/100
-                progressVisible: true
-                Layout.topMargin: 10
-            }
-            FluProgressRing{
-                indeterminate: false
-                value: slider.value/100
-                Layout.topMargin: 10
-            }
-            FluProgressRing{
-                progressVisible: true
-                indeterminate: false
-                value: slider.value/100
-            }
-            FluSlider{
-                id:slider
-                Component.onCompleted: {
-                    value = 50
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluProgressBar{
-    indeterminate: false
-}
-FluProgressRing{
-    indeterminate: false
-    progressVisible: true
-}
-'
-    }
-
-
-}

example/qml-Qt6/page/T_QRCode.qml

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

example/qml-Qt6/page/T_RadioButton.qml

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

example/qml-Qt6/page/T_RatingControl.qml

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

example/qml-Qt6/page/T_Rectangle.qml

@@ -1,74 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Controls
-import QtQuick.Window
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    title: qsTr("Rectangle")
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
-
-        Column{
-            spacing: 15
-            anchors{
-                left: parent.left
-                verticalCenter: parent.verticalCenter
-            }
-            RowLayout{
-                Layout.topMargin: 20
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    color:"#0078d4"
-                    radius:[0,0,0,0]
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    color:"#744da9"
-                    radius:[15,15,15,15]
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    color:"#ffeb3b"
-                    radius:[15,0,0,0]
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    color:"#f7630c"
-                    radius:[0,15,0,0]
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    color:"#e71123"
-                    radius:[0,0,15,0]
-                }
-                FluRectangle{
-                    width: 50
-                    height: 50
-                    color:"#b4009e"
-                    radius:[0,0,0,15]
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluRectangle{
-    radius: [25,25,25,25]
-    width: 50
-    height: 50
-}'
-    }
-}

example/qml-Qt6/page/T_RemoteLoader.qml

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

example/qml-Qt6/page/T_Settings.qml

@@ -1,205 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "../global"
-import "../component"
-import "../viewmodel"
-
-FluScrollablePage{
-
-    title: qsTr("Settings")
-
-    SettingsViewModel{
-        id:viewmodel_settings
-    }
-
-    FluEvent{
-        id:event_checkupdate_finish
-        name: "checkUpdateFinish"
-        onTriggered: {
-            btn_checkupdate.loading = false
-        }
-    }
-
-    Component.onCompleted: {
-        FluEventBus.registerEvent(event_checkupdate_finish)
-    }
-
-    Component.onDestruction: {
-        FluEventBus.unRegisterEvent(event_checkupdate_finish)
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 60
-        paddings: 10
-        Row{
-            spacing: 20
-            anchors.verticalCenter: parent.verticalCenter
-            FluText{
-                text: "%1 v%2".arg(qsTr("Current Version")).arg(AppInfo.version)
-                font: FluTextStyle.Body
-                anchors.verticalCenter: parent.verticalCenter
-            }
-            FluLoadingButton{
-                id: btn_checkupdate
-                text: qsTr("Check for Updates")
-                anchors.verticalCenter: parent.verticalCenter
-                onClicked: {
-                    loading = true
-                    FluEventBus.post("checkUpdate")
-                }
-            }
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 50
-        paddings: 10
-        FluCheckBox{
-            text: qsTr("Use System AppBar")
-            checked: FluApp.useSystemAppBar
-            anchors.verticalCenter: parent.verticalCenter
-            onClicked: {
-                FluApp.useSystemAppBar = !FluApp.useSystemAppBar
-                dialog_restart.open()
-            }
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 50
-        paddings: 10
-        FluCheckBox{
-            text:qsTr("Fits AppBar Windows")
-            checked: window.fitsAppBarWindows
-            anchors.verticalCenter: parent.verticalCenter
-            onClicked: {
-                window.fitsAppBarWindows = !window.fitsAppBarWindows
-            }
-        }
-    }
-
-    FluContentDialog{
-        id: dialog_restart
-        title: qsTr("Friendly Reminder")
-        message: qsTr("This action requires a restart of the program to take effect, is it restarted?")
-        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
-        negativeText: qsTr("Cancel")
-        positiveText: qsTr("OK")
-        onPositiveClicked: {
-            FluApp.exit(931)
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 128
-        paddings: 10
-
-        ColumnLayout{
-            spacing: 5
-            anchors{
-                top: parent.top
-                left: parent.left
-            }
-            FluText{
-                text: qsTr("Dark Mode")
-                font: FluTextStyle.BodyStrong
-                Layout.bottomMargin: 4
-            }
-            Repeater{
-                model: [{title:qsTr("System"),mode:FluThemeType.System},{title:qsTr("Light"),mode:FluThemeType.Light},{title:qsTr("Dark"),mode:FluThemeType.Dark}]
-                delegate: FluRadioButton{
-                    checked : FluTheme.darkMode === modelData.mode
-                    text:modelData.title
-                    clickListener:function(){
-                        FluTheme.darkMode = modelData.mode
-                    }
-                }
-            }
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 160
-        paddings: 10
-
-        ColumnLayout{
-            spacing: 5
-            anchors{
-                top: parent.top
-                left: parent.left
-            }
-            FluText{
-                text:qsTr("Navigation View Display Mode")
-                font: FluTextStyle.BodyStrong
-                Layout.bottomMargin: 4
-            }
-            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
-                    clickListener:function(){
-                        viewmodel_settings.displayMode = modelData.mode
-                    }
-                }
-            }
-        }
-    }
-
-    ListModel{
-        id:model_language
-        ListElement{
-            name:"en"
-        }
-        ListElement{
-            name:"zh"
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
-
-        ColumnLayout{
-            spacing: 10
-            anchors{
-                top: parent.top
-                left: parent.left
-            }
-            FluText{
-                text:qsTr("Language")
-                font: FluTextStyle.BodyStrong
-                Layout.bottomMargin: 4
-            }
-            Flow{
-                spacing: 5
-                Repeater{
-                    model: TranslateHelper.languages
-                    delegate: FluRadioButton{
-                        checked: TranslateHelper.current === modelData
-                        text:modelData
-                        clickListener:function(){
-                            TranslateHelper.current = modelData
-                            dialog_restart.open()
-                        }
-                    }
-                }
-            }
-        }
-    }
-}

example/qml-Qt6/page/T_ShortcutPicker.qml

@@ -1,30 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    title: qsTr("ShortcutPicker")
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 100
-        paddings: 10
-        FluShortcutPicker{
-            anchors.verticalCenter: parent.verticalCenter
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluShortcutPicker{
-
-}'
-    }
-
-}
-

example/qml-Qt6/page/T_Slider.qml

@@ -1,59 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    title: qsTr("Slider")
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.preferredHeight: 200
-        Layout.topMargin: 20
-        paddings: 10
-
-        Row{
-            spacing: 30
-            FluSlider{
-            }
-            FluSlider{
-                orientation: Qt.Vertical
-                anchors.verticalCenter: parent.verticalCenter
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluSlider{
-    value:50
-}'
-    }
-
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.preferredHeight: 200
-        Layout.topMargin: 20
-        paddings: 10
-        Row{
-            spacing: 30
-            FluRangeSlider{
-            }
-            FluRangeSlider{
-                orientation: Qt.Vertical
-                anchors.verticalCenter: parent.verticalCenter
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluRangeSlider{
-    orientation: Qt.Vertical
-}'
-    }
-}

example/qml-Qt6/page/T_SplitLayout.qml

@@ -1,84 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "../component"
-
-FluContentPage{
-
-    title: qsTr("SplitLayout")
-
-    RowLayout{
-        id:layout_dropdown
-        anchors{
-            top: parent.top
-            topMargin: 20
-        }
-        FluText{
-            text:"orientation:"
-        }
-        FluDropDownButton{
-            id:btn_orientation
-            Layout.preferredWidth: 120
-            text:"Horizontal"
-            FluMenuItem{
-                text:"Horizontal"
-                onClicked: {
-                    btn_orientation.text = text
-                    split_layout.orientation = Qt.Horizontal
-                }
-            }
-            FluMenuItem{
-                text:"Vertical"
-                onClicked: {
-                    btn_orientation.text = text
-                    split_layout.orientation = Qt.Vertical
-                }
-            }
-        }
-    }
-    FluSplitLayout {
-        id:split_layout
-        anchors{
-            top: layout_dropdown.bottom
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-            topMargin: 8
-        }
-        orientation: Qt.Horizontal
-        Item {
-            clip: true
-            implicitWidth: 200
-            implicitHeight: 200
-            SplitView.maximumWidth: 400
-            SplitView.maximumHeight: 400
-            FluText {
-                text: "Page 1"
-                anchors.centerIn: parent
-            }
-        }
-        Item {
-            clip: true
-            id: centerItem
-            SplitView.minimumWidth: 50
-            SplitView.minimumHeight: 50
-            SplitView.fillWidth: true
-            SplitView.fillHeight: true
-            FluText {
-                text: "Page 2"
-                anchors.centerIn: parent
-            }
-        }
-        Item {
-            clip: true
-            implicitWidth: 200
-            implicitHeight: 200
-            FluText {
-                text: "Page 3"
-                anchors.centerIn: parent
-            }
-        }
-    }
-}

example/qml-Qt6/page/T_StaggeredLayout.qml

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

example/qml-Qt6/page/T_StatusLayout.qml

@@ -1,90 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Controls
-import QtQuick.Window
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    title: qsTr("StatusLayout")
-
-    FluArea{
-        id:layout_actions
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 50
-        paddings: 10
-        RowLayout{
-            spacing: 14
-            FluDropDownButton{
-                id:btn_status_mode
-                Layout.preferredWidth: 140
-                text:"Loading"
-                FluMenuItem{
-                    text:"Loading"
-                    onClicked: {
-                        btn_status_mode.text = text
-                        status_view.statusMode = FluStatusLayoutType.Loading
-                    }
-                }
-                FluMenuItem{
-                    text:"Empty"
-                    onClicked: {
-                        btn_status_mode.text = text
-                        status_view.statusMode = FluStatusLayoutType.Empty
-                    }
-                }
-                FluMenuItem{
-                    text:"Error"
-                    onClicked: {
-                        btn_status_mode.text = text
-                        status_view.statusMode = FluStatusLayoutType.Error
-                    }
-                }
-                FluMenuItem{
-                    text:"Success"
-                    onClicked: {
-                        btn_status_mode.text = text
-                        status_view.statusMode = FluStatusLayoutType.Success
-                    }
-                }
-            }
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 10
-        height: 380
-        paddings: 10
-        FluStatusLayout{
-            id:status_view
-            anchors.fill: parent
-            loadingText: qsTr("Loading...")
-            emptyText: qsTr("Empty")
-            errorText: qsTr("The page went wrong...")
-            errorButtonText: qsTr("Reload")
-            onErrorClicked:{
-                showError("Click Reload")
-            }
-            Rectangle {
-                anchors.fill: parent
-                color:FluTheme.primaryColor
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluStatusLayout{
-    anchors.fill: parent
-    statusMode: FluStatusLayoutType.Loading
-    Rectangle{
-        anchors.fill: parent
-        color:FluTheme.primaryColor
-    }
-}'
-    }
-
-}

example/qml-Qt6/page/T_TabView.qml

@@ -1,129 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
-
-    title: qsTr("TabView")
-
-    Component{
-        id:com_page
-        Rectangle{
-            anchors.fill: parent
-            color: argument.normal
-        }
-    }
-
-    function newTab(){
-        tab_view.appendTab("qrc:/example/res/image/favicon.ico",qsTr("Document ")+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)])
-    }
-
-    Component.onCompleted: {
-        newTab()
-        newTab()
-        newTab()
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 50
-        paddings: 10
-        RowLayout{
-            spacing: 14
-            FluDropDownButton{
-                id:btn_tab_width_behavior
-                Layout.preferredWidth: 140
-                text:"Equal"
-                FluMenuItem{
-                    text:"Equal"
-                    onClicked: {
-                        btn_tab_width_behavior.text = text
-                        tab_view.tabWidthBehavior = FluTabViewType.Equal
-                    }
-                }
-                FluMenuItem{
-                    text:"SizeToContent"
-                    onClicked: {
-                        btn_tab_width_behavior.text = text
-                        tab_view.tabWidthBehavior = FluTabViewType.SizeToContent
-                    }
-                }
-                FluMenuItem{
-                    text:"Compact"
-                    onClicked: {
-                        btn_tab_width_behavior.text = text
-                        tab_view.tabWidthBehavior = FluTabViewType.Compact
-                    }
-                }
-            }
-            FluDropDownButton{
-                id:btn_close_button_visibility
-                text:"Always"
-                Layout.preferredWidth: 120
-                FluMenuItem{
-                    text:"Never"
-                    onClicked: {
-                        btn_close_button_visibility.text = text
-                        tab_view.closeButtonVisibility = FluTabViewType.Never
-                    }
-                }
-                FluMenuItem{
-                    text:"Always"
-                    onClicked: {
-                        btn_close_button_visibility.text = text
-                        tab_view.closeButtonVisibility = FluTabViewType.Always
-                    }
-                }
-                FluMenuItem{
-                    text:"OnHover"
-                    onClicked: {
-                        btn_close_button_visibility.text = text
-                        tab_view.closeButtonVisibility = FluTabViewType.OnHover
-                    }
-                }
-            }
-        }
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 15
-        height: 400
-        paddings: 10
-        FluTabView{
-            id:tab_view
-            onNewPressed:{
-                newTab()
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluTabView{
-    anchors.fill: parent
-    Component.onCompleted: {
-        newTab()
-        newTab()
-        newTab()
-    }
-    Component{
-        id:com_page
-        Rectangle{
-            anchors.fill: parent
-            color: argument
-        }
-    }
-    function newTab(){
-        tab_view.appendTab("qrc:/example/res/image/favicon.ico","Document 1",com_page,argument)
-    }
-}
-'
-    }
-}

example/qml-Qt6/page/T_TableView.qml

@@ -1,589 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "../component"
-
-FluContentPage{
-
-    id:root
-    title: qsTr("TableView")
-    signal checkBoxChanged
-
-    property var dataSource : []
-    property int sortType: 0
-    property bool seletedAll: true
-    property string nameKeyword: ""
-
-    onNameKeywordChanged: {
-        table_view.filter(function(item){
-            if(item.name.includes(nameKeyword)){
-                return true
-            }
-            return false
-        })
-    }
-
-    Component.onCompleted: {
-        loadData(1,1000)
-    }
-
-    onCheckBoxChanged: {
-        for(var i =0;i< table_view.rows ;i++){
-            if(false === table_view.getRow(i).checkbox.options.checked){
-                root.seletedAll = false
-                return
-            }
-        }
-        root.seletedAll = true
-    }
-
-    onSortTypeChanged: {
-        table_view.closeEditor()
-        if(sortType === 0){
-            table_view.sort()
-        }else if(sortType === 1){
-            table_view.sort(
-                        (l, r) =>{
-                            var lage = Number(l.age)
-                            var rage = Number(r.age)
-                            if(lage === rage){
-                                return l._key>r._key
-                            }
-                            return lage>rage
-                        });
-        }else if(sortType === 2){
-            table_view.sort(
-                        (l, r) => {
-                            var lage = Number(l.age)
-                            var rage = Number(r.age)
-                            if(lage === rage){
-                                return l._key>r._key
-                            }
-                            return lage<rage
-                        });
-        }
-    }
-
-    FluContentDialog{
-        id:custom_update_dialog
-        property var text
-        property var onAccpetListener
-        title: qsTr("Modify the column name")
-        negativeText: qsTr("Cancel")
-        contentDelegate: Component{
-            Item{
-                implicitWidth: parent.width
-                implicitHeight: 60
-                FluTextBox{
-                    id:textbox_text
-                    anchors.centerIn: parent
-                    onTextChanged: {
-                        custom_update_dialog.text = textbox_text.text
-                    }
-                }
-                Component.onCompleted: {
-                    textbox_text.text = custom_update_dialog.text
-                    textbox_text.forceActiveFocus()
-                }
-            }
-        }
-        positiveText: qsTr("OK")
-        onPositiveClicked:{
-            if(custom_update_dialog.onAccpetListener){
-                custom_update_dialog.onAccpetListener(custom_update_dialog.text)
-            }
-        }
-        function showDialog(text,listener){
-            custom_update_dialog.text = text
-            custom_update_dialog.onAccpetListener = listener
-            custom_update_dialog.open()
-        }
-    }
-
-    FluMenu{
-        id:pop_filter
-        width: 200
-        height: 89
-
-        contentItem: Item{
-
-            onVisibleChanged: {
-                if(visible){
-                    name_filter_text.text = root.nameKeyword
-                    name_filter_text.cursorPosition = name_filter_text.text.length
-                    name_filter_text.forceActiveFocus()
-                }
-            }
-
-            FluTextBox{
-                id:name_filter_text
-                anchors{
-                    left: parent.left
-                    right: parent.right
-                    top: parent.top
-                    leftMargin: 10
-                    rightMargin: 10
-                    topMargin: 10
-                }
-                iconSource: FluentIcons.Search
-            }
-
-            FluButton{
-                text: qsTr("Search")
-                anchors{
-                    bottom: parent.bottom
-                    right: parent.right
-                    bottomMargin: 10
-                    rightMargin: 10
-                }
-                onClicked: {
-                    root.nameKeyword = name_filter_text.text
-                    pop_filter.close()
-                }
-            }
-
-        }
-
-        function showPopup(){
-            table_view.closeEditor()
-            pop_filter.popup()
-        }
-
-    }
-
-    Component{
-        id:com_checbox
-        Item{
-            FluCheckBox{
-                anchors.centerIn: parent
-                checked: true === options.checked
-                enableAnimation: false
-                clickListener: function(){
-                    var obj = table_view.getRow(row)
-                    obj.checkbox = table_view.customItem(com_checbox,{checked:!options.checked})
-                    table_view.setRow(row,obj)
-                    checkBoxChanged()
-                }
-            }
-        }
-    }
-
-    Component{
-        id:com_column_filter_name
-        Item{
-            FluText{
-                text: qsTr("Name")
-                anchors.centerIn: parent
-            }
-            FluIconButton{
-                width: 20
-                height: 20
-                iconSize: 12
-                verticalPadding:0
-                horizontalPadding:0
-                iconSource: FluentIcons.Filter
-                iconColor: {
-                    if("" !== root.nameKeyword){
-                        return FluTheme.primaryColor
-                    }
-                    return FluTheme.dark ?  Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
-                }
-                anchors{
-                    right: parent.right
-                    rightMargin: 3
-                    verticalCenter: parent.verticalCenter
-                }
-                onClicked: {
-                    pop_filter.showPopup()
-                }
-            }
-        }
-    }
-
-    Component{
-        id:com_action
-        Item{
-            RowLayout{
-                anchors.centerIn: parent
-                FluButton{
-                    text: qsTr("Delete")
-                    onClicked: {
-                        table_view.closeEditor()
-                        table_view.removeRow(row)
-                    }
-                }
-                FluFilledButton{
-                    text: qsTr("Edit")
-                    onClicked: {
-                        var obj = table_view.getRow(row)
-                        obj.name = "12345"
-                        table_view.setRow(row,obj)
-                        showSuccess(JSON.stringify(obj))
-                    }
-                }
-            }
-        }
-    }
-
-
-    Component{
-        id:com_column_checbox
-        Item{
-            RowLayout{
-                anchors.centerIn: parent
-                FluText{
-                    text: qsTr("Select All")
-                    Layout.alignment: Qt.AlignVCenter
-                }
-                FluCheckBox{
-                    checked: true === root.seletedAll
-                    enableAnimation: false
-                    Layout.alignment: Qt.AlignVCenter
-                    clickListener: function(){
-                        root.seletedAll = !root.seletedAll
-                        var checked = root.seletedAll
-                        itemModel.display = table_view.customItem(com_column_checbox,{"checked":checked})
-                        for(var i =0;i< table_view.rows ;i++){
-                            var rowData = table_view.getRow(i)
-                            rowData.checkbox = table_view.customItem(com_checbox,{"checked":checked})
-                            table_view.setRow(i,rowData)
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    Component{
-        id:com_combobox
-        FluComboBox {
-            anchors.fill: parent
-            focus: true
-            editText: display
-            editable: true
-            model: ListModel {
-                ListElement { text: "100" }
-                ListElement { text: "300" }
-                ListElement { text: "500" }
-                ListElement { text: "1000" }
-            }
-            Component.onCompleted: {
-                currentIndex=["100","300","500","1000"].findIndex((element) => element === display)
-                selectAll()
-            }
-            onCommit: {
-                editTextChaged(editText)
-                tableView.closeEditor()
-            }
-        }
-    }
-
-    Component{
-        id:com_avatar
-        Item{
-            FluClip{
-                anchors.centerIn: parent
-                width: 40
-                height: 40
-                radius: [20,20,20,20]
-                Image{
-                    anchors.fill: parent
-                    source: {
-                        if(options && options.avatar){
-                            return options.avatar
-                        }
-                        return ""
-                    }
-                    sourceSize: Qt.size(80,80)
-                }
-            }
-        }
-    }
-
-    Component{
-        id:com_column_update_title
-        Item{
-            FluText{
-                id:text_title
-                text: {
-                    if(options.title){
-                        return options.title
-                    }
-                    return ""
-                }
-                anchors.fill: parent
-                verticalAlignment: Qt.AlignVCenter
-                horizontalAlignment: Qt.AlignHCenter
-                elide: Text.ElideRight
-            }
-            MouseArea{
-                anchors.fill: parent
-                cursorShape: Qt.PointingHandCursor
-                onClicked: {
-                    custom_update_dialog.showDialog(options.title,function(text){
-                        itemModel.display = table_view.customItem(com_column_update_title,{"title":text})
-                    })
-                }
-            }
-        }
-    }
-
-    Component{
-        id:com_column_sort_age
-        Item{
-            FluText{
-                text: qsTr("Age")
-                anchors.centerIn: parent
-            }
-            ColumnLayout{
-                spacing: 0
-                anchors{
-                    right: parent.right
-                    verticalCenter: parent.verticalCenter
-                    rightMargin: 4
-                }
-                FluIconButton{
-                    Layout.preferredWidth: 20
-                    Layout.preferredHeight: 15
-                    iconSize: 12
-                    verticalPadding:0
-                    horizontalPadding:0
-                    iconSource: FluentIcons.ChevronUp
-                    iconColor: {
-                        if(1 === root.sortType){
-                            return FluTheme.primaryColor
-                        }
-                        return FluTheme.dark ?  Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
-                    }
-                    onClicked: {
-                        if(root.sortType === 1){
-                            root.sortType = 0
-                            return
-                        }
-                        root.sortType = 1
-                    }
-                }
-                FluIconButton{
-                    Layout.preferredWidth: 20
-                    Layout.preferredHeight: 15
-                    iconSize: 12
-                    verticalPadding:0
-                    horizontalPadding:0
-                    iconSource: FluentIcons.ChevronDown
-                    iconColor: {
-                        if(2 === root.sortType){
-                            return FluTheme.primaryColor
-                        }
-                        return FluTheme.dark ?  Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
-                    }
-                    onClicked: {
-                        if(root.sortType === 2){
-                            root.sortType = 0
-                            return
-                        }
-                        root.sortType = 2
-                    }
-                }
-            }
-        }
-    }
-
-    FluArea{
-        id:layout_controls
-        anchors{
-            left: parent.left
-            right: parent.right
-            top: parent.top
-            topMargin: 20
-        }
-        height: 60
-
-        Row{
-            spacing: 5
-            anchors{
-                left: parent.left
-                leftMargin: 10
-                verticalCenter: parent.verticalCenter
-            }
-
-            FluButton{
-                text: qsTr("Clear All")
-                onClicked: {
-                    table_view.dataSource = []
-                }
-            }
-
-            FluButton{
-                text: qsTr("Delete Selection")
-                onClicked: {
-                    var data = []
-                    var rows = []
-                    for (var i = 0; i < table_view.rows; i++) {
-                        var item = table_view.getRow(i);
-                        rows.push(item)
-                        if (!item.checkbox.options.checked) {
-                            data.push(item);
-                        }
-                    }
-                    var sourceModel = table_view.sourceModel;
-                    for (i = 0; i < sourceModel.rowCount; i++) {
-                        var sourceItem = sourceModel.getRow(i);
-                        const foundItem = rows.find(item=> item._key === sourceItem._key)
-                        if (!foundItem) {
-                            data.push(sourceItem);
-                        }
-                    }
-                    table_view.dataSource = data
-                }
-            }
-
-            FluButton{
-                text: qsTr("Add a row of Data")
-                onClicked: {
-                    table_view.appendRow(genTestObject())
-                }
-            }
-
-        }
-    }
-
-    FluTableView{
-        id:table_view
-        anchors{
-            left: parent.left
-            right: parent.right
-            top: layout_controls.bottom
-            bottom: gagination.top
-        }
-        anchors.topMargin: 5
-        onRowsChanged: {
-            root.checkBoxChanged()
-        }
-        columnSource:[
-            {
-                title: table_view.customItem(com_column_checbox,{checked:true}),
-                dataIndex: 'checkbox',
-                width:100,
-                minimumWidth:100,
-                maximumWidth:100
-            },
-            {
-                title: table_view.customItem(com_column_update_title,{title:qsTr("Avatar")}),
-                dataIndex: 'avatar',
-                width:100
-            },
-            {
-                title: table_view.customItem(com_column_filter_name,{title:qsTr("Name")}),
-                dataIndex: 'name',
-                readOnly:true
-            },
-            {
-                title: table_view.customItem(com_column_sort_age,{sort:0}),
-                dataIndex: 'age',
-                editDelegate:com_combobox,
-                width:100,
-                minimumWidth:100,
-                maximumWidth:100
-            },
-            {
-                title: qsTr("Address"),
-                dataIndex: 'address',
-                width:200,
-                minimumWidth:100,
-                maximumWidth:250
-            },
-            {
-                title: qsTr("Nickname"),
-                dataIndex: 'nickname',
-                width:100,
-                minimumWidth:80,
-                maximumWidth:200
-            },
-            {
-                title: qsTr("Long String"),
-                dataIndex: 'longstring',
-                width:200,
-                minimumWidth:100,
-                maximumWidth:300
-            },
-            {
-                title: qsTr("Options"),
-                dataIndex: 'action',
-                width:160,
-                minimumWidth:160,
-                maximumWidth:160
-            }
-        ]
-    }
-
-    FluPagination{
-        id:gagination
-        anchors{
-            bottom: parent.bottom
-            left: parent.left
-        }
-        pageCurrent: 1
-        itemCount: 100000
-        pageButtonCount: 7
-        __itemPerPage: 1000
-        previousText: qsTr("<Previous")
-        nextText: qsTr("Next>")
-        onRequestPage:
-            (page,count)=> {
-                table_view.closeEditor()
-                loadData(page,count)
-                table_view.resetPosition()
-            }
-    }
-
-    function genTestObject(){
-        var ages = ["100", "300", "500", "1000"];
-        function getRandomAge() {
-            var randomIndex = Math.floor(Math.random() * ages.length);
-            return ages[randomIndex];
-        }
-        var names = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨夫人","金角大王","熊山君","黄风怪","银角大王"];
-        function getRandomName(){
-            var randomIndex = Math.floor(Math.random() * names.length);
-            return names[randomIndex];
-        }
-        var nicknames = ["复海大圣","混天大圣","移山大圣","通风大圣","驱神大圣","齐天大圣","平天大圣"]
-        function getRandomNickname(){
-            var randomIndex = Math.floor(Math.random() * nicknames.length);
-            return nicknames[randomIndex];
-        }
-        var addresses = ["傲来国界花果山水帘洞","傲来国界坎源山脏水洞","大唐国界黑风山黑风洞","大唐国界黄风岭黄风洞","大唐国界骷髅山白骨洞","宝象国界碗子山波月洞","宝象国界平顶山莲花洞","宝象国界压龙山压龙洞","乌鸡国界号山枯松涧火云洞","乌鸡国界衡阳峪黑水河河神府"]
-        function getRandomAddresses(){
-            var randomIndex = Math.floor(Math.random() * addresses.length);
-            return addresses[randomIndex];
-        }
-        var avatars = ["qrc:/example/res/svg/avatar_1.svg", "qrc:/example/res/svg/avatar_2.svg", "qrc:/example/res/svg/avatar_3.svg", "qrc:/example/res/svg/avatar_4.svg","qrc:/example/res/svg/avatar_5.svg","qrc:/example/res/svg/avatar_6.svg","qrc:/example/res/svg/avatar_7.svg","qrc:/example/res/svg/avatar_8.svg","qrc:/example/res/svg/avatar_9.svg","qrc:/example/res/svg/avatar_10.svg","qrc:/example/res/svg/avatar_11.svg","qrc:/example/res/svg/avatar_12.svg"];
-        function getAvatar(){
-            var randomIndex = Math.floor(Math.random() * avatars.length);
-            return avatars[randomIndex];
-        }
-        return {
-            checkbox: table_view.customItem(com_checbox,{checked:root.seletedAll}),
-            avatar:table_view.customItem(com_avatar,{avatar:getAvatar()}),
-            name: getRandomName(),
-            age:getRandomAge(),
-            address: getRandomAddresses(),
-            nickname: getRandomNickname(),
-            longstring:"你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好",
-            action: table_view.customItem(com_action),
-            _minimumHeight:50,
-            _key:FluTools.uuid()
-        }
-    }
-    function loadData(page,count){
-        root.seletedAll = true
-        const dataSource = []
-        for(var i=0;i<count;i++){
-            dataSource.push(genTestObject())
-        }
-        root.dataSource = dataSource
-        table_view.dataSource = root.dataSource
-    }
-}

example/qml-Qt6/page/T_Text.qml

@@ -1,32 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    title: qsTr("Text")
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 60
-        paddings: 10
-
-        FluCopyableText{
-            text: qsTr("This is a text that can be copied")
-            anchors.verticalCenter: parent.verticalCenter
-        }
-
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluCopyableText{
-    text: qsTr("This is a text that can be copied")
-}'
-    }
-
-}

example/qml-Qt6/page/T_TextBox.qml

@@ -1,203 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "../component"
-import "../viewmodel"
-
-FluScrollablePage{
-
-    title: qsTr("TextBox")
-
-    TextBoxViewModel{
-        id:viewModel
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 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
-            }
-        }
-
-        FluToggleSwitch{
-            id: text_box_switch
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
-            text: qsTr("Disabled")
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluTextBox{
-    placeholderText: qsTr("Single-line Input Box")
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-
-        FluPasswordBox{
-            placeholderText: qsTr("Please enter your password")
-            disabled:password_box_switch.checked
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-        FluToggleSwitch{
-            id:password_box_switch
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
-            text: qsTr("Disabled")
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluPasswordBox{
-    placeholderText: qsTr("Please enter your password")
-}'
-    }
-
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 36+multiine_textbox.height
-        paddings: 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
-                left: parent.left
-            }
-        }
-
-        FluToggleSwitch{
-            id:text_box_multi_switch
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
-            text: qsTr("Disabled")
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluMultilineTextBox{
-    placeholderText: qsTr("Multi-line Input Box")
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-        FluAutoSuggestBox{
-            placeholderText: qsTr("AutoSuggestBox")
-            items: generateRandomNames(100)
-            disabled: text_box_suggest_switch.checked
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-        FluToggleSwitch{
-            id:text_box_suggest_switch
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
-            text: qsTr("Disabled")
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluAutoSuggestBox{
-    placeholderText: qsTr("AutoSuggestBox")
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-        FluSpinBox{
-            disabled: spin_box_switch.checked
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-        }
-        FluToggleSwitch{
-            id: spin_box_switch
-            anchors{
-                verticalCenter: parent.verticalCenter
-                right: parent.right
-            }
-            text: qsTr("Disabled")
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluSpinBox{
-
-}'
-    }
-
-    function generateRandomNames(numNames) {
-        const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-        const names = [];
-        function generateRandomName() {
-            const nameLength = Math.floor(Math.random() * 5) + 4;
-            let name = '';
-            for (let i = 0; i < nameLength; i++) {
-                const letterIndex = Math.floor(Math.random() * 26);
-                name += alphabet.charAt(letterIndex);
-            }
-            return name;
-        }
-        for (let i = 0; i < numNames; i++) {
-            const name = generateRandomName();
-            names.push({title:name});
-        }
-        return names;
-    }
-
-
-}

example/qml-Qt6/page/T_Theme.qml

@@ -1,136 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    property var colorData: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
-    id: root
-    title: qsTr("Theme")
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        Layout.preferredHeight: 340
-        paddings: 10
-
-        ColumnLayout{
-            spacing:0
-            anchors{
-                left: parent.left
-            }
-            FluText{
-                text: qsTr("Theme colors")
-                Layout.topMargin: 10
-            }
-            RowLayout{
-                Layout.topMargin: 5
-                Repeater{
-                    model: root.colorData
-                    delegate:  Rectangle{
-                        width: 42
-                        height: 42
-                        radius: 4
-                        color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
-                        border.color: modelData.darker
-                        FluIcon {
-                            anchors.centerIn: parent
-                            iconSource: FluentIcons.AcceptMedium
-                            iconSize: 15
-                            visible: modelData === FluTheme.accentColor
-                            color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
-                        }
-                        MouseArea{
-                            id:mouse_item
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            onClicked: {
-                                FluTheme.accentColor = modelData
-                            }
-                        }
-                    }
-                }
-            }
-            Row{
-                Layout.topMargin: 10
-                spacing: 10
-                FluText{
-                    text: qsTr("Customize the Theme Color")
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-                FluColorPicker{
-                    id:color_picker
-                    current: FluTheme.accentColor.normal
-                    onAccepted: {
-                       FluTheme.accentColor = FluColors.createAccentColor(current)
-                    }
-                    FluIcon {
-                        anchors.centerIn: parent
-                        iconSource: FluentIcons.AcceptMedium
-                        iconSize: 15
-                        visible: {
-                            for(var i =0 ;i< root.colorData.length; i++){
-                                if(root.colorData[i] === FluTheme.accentColor){
-                                    return false
-                                }
-                            }
-                            return true
-                        }
-                        color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
-                    }
-                }
-            }
-            FluText{
-                text: qsTr("Dark Mode")
-                Layout.topMargin: 20
-            }
-            FluToggleSwitch{
-                Layout.topMargin: 5
-                checked: FluTheme.dark
-                onClicked: {
-                    if(FluTheme.dark){
-                        FluTheme.darkMode = FluThemeType.Light
-                    }else{
-                        FluTheme.darkMode = FluThemeType.Dark
-                    }
-                }
-            }
-            FluText{
-                text: qsTr("Native Text")
-                Layout.topMargin: 20
-            }
-            FluToggleSwitch{
-                Layout.topMargin: 5
-                checked: FluTheme.nativeText
-                onClicked: {
-                    FluTheme.nativeText = !FluTheme.nativeText
-                }
-            }
-            FluText{
-                text: qsTr("Open Animation")
-                Layout.topMargin: 20
-            }
-            FluToggleSwitch{
-                Layout.topMargin: 5
-                checked: FluTheme.enableAnimation
-                onClicked: {
-                    FluTheme.enableAnimation = !FluTheme.enableAnimation
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluTheme.accentColor = FluColors.Orange
-
-FluTheme.dark = true
-
-FluTheme.nativeText = true'
-    }
-
-
-}

example/qml-Qt6/page/T_TimePicker.qml

@@ -1,92 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    title: qsTr("TimePicker")
-    launchMode: FluPageType.SingleInstance
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
-
-        ColumnLayout{
-
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-
-            FluText{
-                text: qsTr("hourFormat=FluTimePickerType.H")
-            }
-
-            FluTimePicker{
-                current: new Date()
-                amText: qsTr("AM")
-                pmText: qsTr("PM")
-                hourText: qsTr("Hour")
-                minuteText: qsTr("Minute")
-                cancelText: qsTr("Cancel")
-                okText: qsTr("OK")
-                onAccepted: {
-                    showSuccess(current.toLocaleTimeString(Qt.locale("de_DE")))
-                }
-            }
-
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluTimePicker{
-
-}'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
-
-        ColumnLayout{
-
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-
-            FluText{
-                text: qsTr("hourFormat=FluTimePickerType.HH")
-            }
-
-            FluTimePicker{
-                hourFormat:FluTimePickerType.HH
-                amText: qsTr("AM")
-                pmText: qsTr("PM")
-                hourText: qsTr("Hour")
-                minuteText: qsTr("Minute")
-                cancelText: qsTr("Cancel")
-                okText: qsTr("OK")
-                onAccepted: {
-                    showSuccess(current.toLocaleTimeString(Qt.locale("de_DE")))
-                }
-            }
-
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluTimePicker{
-    hourFormat:FluTimePickerType.HH
-}'
-    }
-
-}

example/qml-Qt6/page/T_Timeline.qml

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

example/qml-Qt6/page/T_ToggleSwitch.qml

@@ -1,51 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    title: qsTr("ToggleSwitch")
-
-    FluArea{
-        Layout.fillWidth: true
-        height: 68
-        paddings: 10
-        Layout.topMargin: 20
-        Row{
-            spacing: 30
-            anchors.verticalCenter: parent.verticalCenter
-            FluToggleSwitch{
-                disabled: toggle_switch.checked
-            }
-            FluToggleSwitch{
-                disabled: toggle_switch.checked
-                text: qsTr("Right")
-            }
-            FluToggleSwitch{
-                disabled: toggle_switch.checked
-                text: qsTr("Left")
-                textRight: false
-            }
-        }
-        FluToggleSwitch{
-            id: toggle_switch
-            anchors{
-                right: parent.right
-                verticalCenter: parent.verticalCenter
-            }
-            text: qsTr("Disabled")
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluToggleSwitch{
-    text:"Text"
-}'
-    }
-
-
-}

example/qml-Qt6/page/T_Tooltip.qml

@@ -1,103 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Window
-import FluentUI
-import "../component"
-
-FluScrollablePage{
-
-    title: qsTr("Tooltip")
-
-    FluText{
-        Layout.topMargin: 20
-        text: qsTr("Hover over Tultip and it pops up")
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 68
-        paddings: 10
-
-        Column{
-            spacing: 5
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluText{
-                text: qsTr("Text properties of FluIconButton support the Tooltip pop-up window by default")
-            }
-            FluIconButton{
-                iconSource:FluentIcons.ChromeCloseContrast
-                iconSize: 15
-                text: qsTr("Delete")
-                onClicked:{
-                    showSuccess(qsTr("Click IconButton"))
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluIconButton{
-    iconSource:FluentIcons.ChromeCloseContrast
-    iconSize: 15
-    text: qsTr("Delete")
-    onClicked:{
-        showSuccess(qsTr("Click IconButton"))
-    }
-}
-'
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 68
-        paddings: 10
-
-        Column{
-            spacing: 5
-            anchors{
-                verticalCenter: parent.verticalCenter
-                left: parent.left
-            }
-            FluText{
-                text: qsTr("Add a Tooltip pop-up to a Button")
-            }
-            FluButton{
-                id:button_1
-                text: qsTr("Delete")
-                onClicked:{
-                    showSuccess(qsTr("Click Button"))
-                }
-                FluTooltip{
-                    visible: button_1.hovered
-                    text:button_1.text
-                    delay: 1000
-                }
-            }
-        }
-    }
-    CodeExpander{
-        Layout.fillWidth: true
-        Layout.topMargin: -1
-        code:'FluButton{
-    id: button_1
-    text: qsTr("Delete")
-    FluTooltip{
-        visible: button_1.hovered
-        text:button_1.text
-        delay: 1000
-    }
-    onClicked:{
-        showSuccess(qsTr("Click Button"))
-    }
-}'
-    }
-
-
-}

example/qml-Qt6/page/T_Tour.qml

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

example/qml-Qt6/page/T_TreeView.qml

@@ -1,131 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Window
-import QtQuick.Controls
-import FluentUI
-import "../component"
-
-FluContentPage {
-
-    title: qsTr("TreeView")
-
-    function treeData(){
-        const dig = (path = '0', level = 4) => {
-            const list = [];
-            for (let i = 0; i < 6; i += 1) {
-                const key = `${path}-${i}`;
-                const treeNode = {
-                    title: key,
-                    key,
-                };
-                if (level > 0) {
-                    treeNode.children = dig(key, level - 1);
-                }
-                list.push(treeNode);
-            }
-            return list;
-        };
-        return dig();
-    }
-
-    Column{
-        id: layout_column
-        spacing: 12
-        width: 300
-        anchors{
-            topMargin: 20
-            top:parent.top
-            left: parent.left
-            leftMargin: 10
-            bottom:parent.bottom
-            bottomMargin: 20
-        }
-
-        FluText{
-            text: qsTr("Total %1 data, %2 data currently displayed").arg(tree_view.count()).arg(tree_view.visibleCount())
-        }
-
-        FluText{
-            text: qsTr("A total of %1 data items are selected").arg(tree_view.selectionModel().length)
-        }
-
-        RowLayout{
-            spacing: 10
-            FluText{
-                text: "cellHeight:"
-                Layout.alignment: Qt.AlignVCenter
-            }
-            FluSlider{
-                id: slider_cell_height
-                value: 30
-                from: 30
-                to:100
-            }
-        }
-        RowLayout{
-            spacing: 10
-            FluText{
-                text: "depthPadding:"
-                Layout.alignment: Qt.AlignVCenter
-            }
-            FluSlider{
-                id: slider_depth_padding
-                value: 30
-                from: 30
-                to:100
-            }
-        }
-        FluToggleSwitch{
-            id: switch_showline
-            text:"showLine"
-            checked: false
-        }
-        FluToggleSwitch{
-            id: switch_draggable
-            text:"draggable"
-            checked: false
-        }
-        FluToggleSwitch{
-            id: switch_checkable
-            text:"checkable"
-            checked: false
-        }
-        FluButton{
-            text: "all expand"
-            onClicked: {
-                tree_view.allExpand()
-            }
-        }
-        FluButton{
-            text: "all collapse"
-            onClicked: {
-                tree_view.allCollapse()
-            }
-        }
-    }
-    FluArea{
-        anchors{
-            left: layout_column.right
-            top: parent.top
-            bottom: parent.bottom
-            right: parent.right
-            rightMargin: 5
-            topMargin: 5
-            bottomMargin: 5
-        }
-        FluShadow{}
-        FluTreeView{
-            id:tree_view
-            anchors.fill: parent
-            cellHeight: slider_cell_height.value
-            draggable:switch_draggable.checked
-            showLine: switch_showline.checked
-            checkable:switch_checkable.checked
-            depthPadding: slider_depth_padding.value
-            Component.onCompleted: {
-                var data = treeData()
-                dataSource = data
-            }
-        }
-    }
-}

example/qml-Qt6/page/T_Typography.qml

@@ -1,84 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Controls
-import FluentUI
-
-FluContentPage {
-
-    property real textScale: 1
-
-    title: qsTr("Typography")
-    rightPadding: 10
-
-    FluArea{
-        anchors{
-            top:parent.top
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-            topMargin: 20
-        }
-        paddings: 10
-        ColumnLayout{
-            spacing: 0
-            scale: textScale
-            transformOrigin: Item.TopLeft
-            FluText{
-                id:text_Display
-                text:"Display"
-                padding: 0
-                font: FluTextStyle.Display
-            }
-            FluText{
-                id:text_TitleLarge
-                text:"Title Large"
-                padding: 0
-                font: FluTextStyle.TitleLarge
-            }
-            FluText{
-                id:text_Title
-                text:"Title"
-                padding: 0
-                font: FluTextStyle.Title
-            }
-            FluText{
-                id:text_Subtitle
-                text:"Subtitle"
-                padding: 0
-                font: FluTextStyle.Subtitle
-            }
-            FluText{
-                id:text_BodyStrong
-                text:"Body Strong"
-                padding: 0
-                font: FluTextStyle.BodyStrong
-            }
-            FluText{
-                id:text_Body
-                text:"Body"
-                padding: 0
-                font: FluTextStyle.Body
-            }
-            FluText{
-                id:text_Caption
-                text:"Caption"
-                padding: 0
-                font: FluTextStyle.Caption
-            }
-        }
-
-        FluSlider{
-            id:slider
-            orientation: Qt.Vertical
-            anchors{
-                right: parent.right
-                rightMargin: 45
-                top: parent.top
-                topMargin: 30
-            }
-            onValueChanged:{
-                textScale = 1+value/100
-            }
-        }
-    }
-}

example/qml-Qt6/page/T_Watermark.qml

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

example/qml-Qt6/viewmodel/SettingsViewModel.qml

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

example/qml-Qt6/viewmodel/TextBoxViewModel.qml

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

example/qml-Qt6/window/AboutWindow.qml

@@ -1,165 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import FluentUI
-import "../component"
-
-FluWindow {
-
-    id:window
-    title:"关于"
-    width: 600
-    height: 580
-    fixSize: true
-    launchMode: FluWindowType.SingleTask
-
-    ColumnLayout{
-        anchors{
-            top: parent.top
-            left: parent.left
-            right: parent.right
-        }
-        spacing: 5
-
-        RowLayout{
-            Layout.topMargin: 15
-            Layout.leftMargin: 15
-            spacing: 14
-            FluText{
-                text:"FluentUI"
-                font: FluTextStyle.Title
-                MouseArea{
-                    anchors.fill: parent
-                    onClicked: {
-                        FluApp.navigate("/")
-                    }
-                }
-            }
-            FluText{
-                text:"v%1".arg(AppInfo.version)
-                font: FluTextStyle.Body
-                Layout.alignment: Qt.AlignBottom
-            }
-        }
-
-        RowLayout{
-            spacing: 14
-            Layout.leftMargin: 15
-            FluText{
-                text:"作者："
-            }
-            FluText{
-                text:"朱子楚"
-                Layout.alignment: Qt.AlignBottom
-            }
-        }
-
-        RowLayout{
-            spacing: 14
-            Layout.leftMargin: 15
-            FluText{
-                text:"微信号："
-            }
-            FluText{
-                text:"FluentUI"
-                Layout.alignment: Qt.AlignBottom
-            }
-            FluText{
-                text:"(有啥问题可能不会马上回，但发了红包必须立马回......)"
-            }
-        }
-
-        RowLayout{
-            spacing: 14
-            Layout.leftMargin: 15
-            FluText{
-                text:"GitHub："
-            }
-            FluTextButton{
-                id:text_hublink
-                topPadding:0
-                bottomPadding:0
-                text:"https://github.com/zhuzichu520/FluentUI"
-                Layout.alignment: Qt.AlignBottom
-                onClicked: {
-                    Qt.openUrlExternally(text_hublink.text)
-                }
-            }
-        }
-
-        RowLayout{
-            spacing: 14
-            Layout.leftMargin: 15
-            FluText{
-                text:"B站："
-            }
-            FluTextButton{
-                topPadding:0
-                bottomPadding:0
-                text:"https://www.bilibili.com/video/BV1mg4y1M71w/"
-                Layout.alignment: Qt.AlignBottom
-                onClicked: {
-                    Qt.openUrlExternally(text)
-                }
-            }
-        }
-
-        RowLayout{
-            spacing: 14
-            Layout.leftMargin: 15
-            FluText{
-                id:text_info
-                text:"如果该项目对你有作用，就请点击上方链接给一个免费的star，或者一键三连，谢谢！"
-                ColorAnimation {
-                    id: animation
-                    target: text_info
-                    property: "color"
-                    from: "red"
-                    to: "blue"
-                    duration: 1000
-                    running: true
-                    loops: Animation.Infinite
-                    easing.type: Easing.InOutQuad
-                }
-            }
-        }
-
-        RowLayout{
-            spacing: 14
-            Layout.topMargin: 20
-            Layout.leftMargin: 15
-            FluText{
-                text:"捐赠："
-            }
-        }
-
-        Item{
-            Layout.preferredWidth: parent.width
-            Layout.preferredHeight: 252
-            Row{
-                anchors.horizontalCenter: parent.horizontalCenter
-                spacing: 30
-                Image{
-                    width: 250
-                    height: 250
-                    source: "qrc:/example/res/image/qrcode_wx.jpg"
-                }
-                Image{
-                    width: 250
-                    height: 250
-                    source: "qrc:/example/res/image/qrcode_zfb.jpg"
-                }
-            }
-        }
-
-        RowLayout{
-            spacing: 14
-            Layout.leftMargin: 15
-            Layout.topMargin: 20
-            FluText{
-                id:text_desc
-                text:"个人开发，维护不易，你们的捐赠就是我继续更新的动力！\n有什么问题提Issues，只要时间充足我就会解决的！！"
-            }
-        }
-    }
-}

example/qml-Qt6/window/CrashWindow.qml

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

example/qml-Qt6/window/FluentInitalizrWindow.qml

@@ -1,113 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import FluentUI
-import Qt.labs.platform
-import "../component"
-
-FluWindowDialog {
-
-    id:window
-    title:qsTr("FluentUI Initalizr")
-    width: 600
-    height: 400
-
-    contentDelegate:Component{
-        Item{
-            Connections{
-                target: InitalizrHelper
-                function onError(message){
-                    showError(message)
-                }
-                function onSuccess(path){
-                    FluTools.showFileInFolder(path+"/CMakeLists.txt")
-                    window.close()
-                }
-            }
-
-            FluText{
-                id:text_title
-                text:qsTr("FluentUI Initalizr")
-                font: FluTextStyle.Title
-                anchors{
-                    left: parent.left
-                    top: parent.top
-                    leftMargin: 20
-                    topMargin: 20
-                }
-            }
-
-            Column{
-                spacing: 14
-                anchors{
-                    left: parent.left
-                    top: text_title.bottom
-                    leftMargin: 20
-                    topMargin: 20
-                }
-                FluTextBox{
-                    id:text_box_name
-                    width: 180
-                    placeholderText: qsTr("Name")
-                    focus: true
-                }
-                Row{
-                    spacing: 8
-                    FluTextBox{
-                        id:text_box_path
-                        width: 300
-                        placeholderText: qsTr("Create In")
-                        anchors.verticalCenter: parent.verticalCenter
-                    }
-                    FluButton{
-                        text:qsTr("Browse")
-                        anchors.verticalCenter: parent.verticalCenter
-                        onClicked: {
-                            folder_dialog.open()
-                        }
-                    }
-                }
-            }
-
-            FolderDialog{
-                id:folder_dialog
-                onAccepted: {
-                    text_box_path.text = FluTools.toLocalPath(currentFolder)
-                }
-            }
-
-            Rectangle{
-                id:layout_actions
-                width: parent.width
-                height: 60
-                anchors.bottom: parent.bottom
-                color: FluTheme.backgroundColor
-                Row{
-                    height: parent.height
-                    spacing: 20
-                    anchors{
-                        right: parent.right
-                        rightMargin: 20
-                    }
-                    FluButton{
-                        text:qsTr("Cancel")
-                        width: 120
-                        anchors.verticalCenter: parent.verticalCenter
-                        onClicked: {
-                            window.close()
-                        }
-                    }
-                    FluFilledButton{
-                        text:qsTr("Create")
-                        width: 120
-                        anchors.verticalCenter: parent.verticalCenter
-                        onClicked: {
-                            InitalizrHelper.generate(text_box_name.text,text_box_path.text)
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-}

example/qml-Qt6/window/HotloadWindow.qml

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

example/qml-Qt6/window/LoginWindow.qml

@@ -1,59 +0,0 @@
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Controls
-import FluentUI
-import "../component"
-
-FluWindow {
-
-    id: window
-    title: qsTr("Login")
-    width: 400
-    height: 400
-    fixSize: true
-    modality: Qt.ApplicationModal
-    onInitArgument:
-        (argument)=>{
-            textbox_uesrname.updateText(argument.username)
-            textbox_password.focus =  true
-        }
-
-    ColumnLayout{
-        anchors{
-            left: parent.left
-            right: parent.right
-            verticalCenter: parent.verticalCenter
-        }
-
-        FluAutoSuggestBox{
-            id: textbox_uesrname
-            items:[{title:"Admin"},{title:"User"}]
-            placeholderText: qsTr("Please enter the account")
-            Layout.preferredWidth: 260
-            Layout.alignment: Qt.AlignHCenter
-        }
-
-        FluTextBox{
-            id: textbox_password
-            Layout.topMargin: 20
-            Layout.preferredWidth: 260
-            placeholderText: qsTr("Please enter your password")
-            echoMode:TextInput.Password
-            Layout.alignment: Qt.AlignHCenter
-        }
-
-        FluFilledButton{
-            text: qsTr("Login")
-            Layout.alignment: Qt.AlignHCenter
-            Layout.topMargin: 20
-            onClicked:{
-                if(textbox_password.text === ""){
-                    showError(qsTr("Please feel free to enter a password"))
-                    return
-                }
-                onResult({password:textbox_password.text})
-                window.close()
-            }
-        }
-    }
-}

example/qml-Qt6/window/MainWindow.qml

@@ -1,395 +0,0 @@
-import QtQuick
-import QtQuick.Window
-import QtQuick.Controls
-import QtQuick.Layouts
-import Qt.labs.platform
-import FluentUI
-import example
-import "../component"
-import "../global"
-import "../viewmodel"
-
-FluWindow {
-
-    id:window
-    title: "FluentUI"
-    width: 1000
-    height: 680
-    minimumWidth: 520
-    minimumHeight: 200
-    launchMode: FluWindowType.SingleTask
-    fitsAppBarWindows: true
-    appBar: FluAppBar {
-        height: 30
-        showDark: true
-        darkClickListener:(button)=>handleDarkChanged(button)
-        closeClickListener: ()=>{dialog_close.open()}
-        z:7
-    }
-
-    SettingsViewModel{
-        id:viewmodel_settings
-    }
-
-    FluEvent{
-        id:event_checkupdate
-        name: "checkUpdate"
-        onTriggered: {
-            checkUpdate(false)
-        }
-    }
-
-    onFirstVisible: {
-        timer_tour_delay.restart()
-    }
-
-    Timer{
-        id:timer_tour_delay
-        interval: 200
-        onTriggered: {
-            tour.open()
-        }
-    }
-
-    Component.onCompleted: {
-        checkUpdate(true)
-        FluEventBus.registerEvent(event_checkupdate)
-    }
-
-    Component.onDestruction: {
-        FluEventBus.unRegisterEvent(event_checkupdate)
-    }
-
-    SystemTrayIcon {
-        id:system_tray
-        visible: true
-        icon.source: "qrc:/example/res/image/favicon.ico"
-        tooltip: "FluentUI"
-        menu: Menu {
-            MenuItem {
-                text: "退出"
-                onTriggered: {
-                    FluApp.exit()
-                }
-            }
-        }
-        onActivated:
-            (reason)=>{
-                if(reason === SystemTrayIcon.Trigger){
-                    window.show()
-                    window.raise()
-                    window.requestActivate()
-                }
-            }
-    }
-
-    Timer{
-        id: timer_window_hide_delay
-        interval: 150
-        onTriggered: {
-            window.hide()
-        }
-    }
-
-    FluContentDialog{
-        id: dialog_close
-        title: qsTr("Quit")
-        message: qsTr("Are you sure you want to exit the program?")
-        negativeText: qsTr("Minimize")
-        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.NeutralButton | FluContentDialogType.PositiveButton
-        onNegativeClicked: {
-            system_tray.showMessage(qsTr("Friendly Reminder"),qsTr("FluentUI is hidden from the tray, click on the tray to activate the window again"));
-            timer_window_hide_delay.restart()
-        }
-        positiveText: qsTr("Quit")
-        neutralText: qsTr("Cancel")
-        onPositiveClicked:{
-            FluApp.exit(0)
-        }
-    }
-
-    Component{
-        id: nav_item_right_menu
-        FluMenu{
-            width: 186
-            FluMenuItem{
-                text: qsTr("Open in Separate Window")
-                font.pixelSize: 12
-                onClicked: {
-                    FluApp.navigate("/pageWindow",{title:modelData.title,url:modelData.url})
-                }
-            }
-        }
-    }
-
-    Flipable{
-        id:flipable
-        anchors.fill: parent
-        property bool flipped: false
-        property real flipAngle: 0
-        transform: Rotation {
-            id: rotation
-            origin.x: flipable.width/2
-            origin.y: flipable.height/2
-            axis { x: 0; y: 1; z: 0 }
-            angle: flipable.flipAngle
-
-        }
-        states: State {
-            PropertyChanges { target: flipable; flipAngle: 180 }
-            when: flipable.flipped
-        }
-        transitions: Transition {
-            NumberAnimation { target: flipable; property: "flipAngle"; duration: 1000 ; easing.type: Easing.OutCubic}
-        }
-        back: Item{
-            anchors.fill: flipable
-            visible: flipable.flipAngle !== 0
-            Row{
-                id:layout_back_buttons
-                z:8
-                anchors{
-                    top: parent.top
-                    left: parent.left
-                    topMargin: FluTools.isMacos() ? 20 : 5
-                    leftMargin: 5
-                }
-                FluIconButton{
-                    iconSource: FluentIcons.ChromeBack
-                    width: 30
-                    height: 30
-                    iconSize: 13
-                    onClicked: {
-                        flipable.flipped = false
-                    }
-                }
-                FluIconButton{
-                    iconSource: FluentIcons.Sync
-                    width: 30
-                    height: 30
-                    iconSize: 13
-                    onClicked: {
-                        loader.reload()
-                    }
-                }
-                Component.onCompleted: {
-                    appBar.setHitTestVisible(layout_back_buttons)
-                }
-            }
-            FluRemoteLoader{
-                id:loader
-                lazy: true
-                anchors.fill: parent
-                source: "https://zhu-zichu.gitee.io/Qt_168_LieflatPage.qml"
-            }
-        }
-        front: Item{
-            id:page_front
-            visible: flipable.flipAngle !== 180
-            anchors.fill: flipable
-            FluNavigationView{
-                property int clickCount: 0
-                id:nav_view
-                width: parent.width
-                height: parent.height
-                z:999
-                //Stack模式，每次切换都会将页面压入栈中，随着栈的页面增多，消耗的内存也越多，内存消耗多就会卡顿，这时候就需要按返回将页面pop掉，释放内存。该模式可以配合FluPage中的launchMode属性，设置页面的启动模式
-                //                pageMode: FluNavigationViewType.Stack
-                //NoStack模式，每次切换都会销毁之前的页面然后创建一个新的页面，只需消耗少量内存，可以配合FluViewModel保存页面数据（推荐）
-                pageMode: FluNavigationViewType.NoStack
-                items: ItemsOriginal
-                footerItems:ItemsFooter
-                topPadding:{
-                    if(window.useSystemAppBar){
-                        return 0
-                    }
-                    return FluTools.isMacos() ? 20 : 0
-                }
-                displayMode:viewmodel_settings.displayMode
-                logo: "qrc:/example/res/image/favicon.ico"
-                title:"FluentUI"
-                onLogoClicked:{
-                    clickCount += 1
-                    showSuccess("%1:%2".arg(qsTr("Click Time")).arg(clickCount))
-                    if(clickCount === 5){
-                        loader.reload()
-                        flipable.flipped = true
-                        clickCount = 0
-                    }
-                }
-                autoSuggestBox:FluAutoSuggestBox{
-                    iconSource: FluentIcons.Search
-                    items: ItemsOriginal.getSearchData()
-                    placeholderText: qsTr("Search")
-                    onItemClicked:
-                        (data)=>{
-                            ItemsOriginal.startPageByItem(data)
-                        }
-                }
-                Component.onCompleted: {
-                    ItemsOriginal.navigationView = nav_view
-                    ItemsOriginal.paneItemMenu = nav_item_right_menu
-                    ItemsFooter.navigationView = nav_view
-                    ItemsFooter.paneItemMenu = nav_item_right_menu
-                    appBar.setHitTestVisible(nav_view.buttonMenu)
-                    appBar.setHitTestVisible(nav_view.buttonBack)
-                    appBar.setHitTestVisible(nav_view.imageLogo)
-                    setCurrentIndex(0)
-                }
-            }
-        }
-    }
-
-    Component{
-        id:com_reveal
-        CircularReveal{
-            id:reveal
-            target:window.contentItem
-            anchors.fill: parent
-            onAnimationFinished:{
-                //动画结束后释放资源
-                loader_reveal.sourceComponent = undefined
-            }
-            onImageChanged: {
-                changeDark()
-            }
-        }
-    }
-
-    FluLoader{
-        id:loader_reveal
-        anchors.fill: parent
-    }
-
-    function distance(x1,y1,x2,y2){
-        return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2))
-    }
-
-    function handleDarkChanged(button){
-        if(!FluTheme.enableAnimation || window.fitsAppBarWindows === false){
-            changeDark()
-        }else{
-            if(loader_reveal.sourceComponent){
-                return
-            }
-            loader_reveal.sourceComponent = com_reveal
-            var target = window.contentItem
-            var pos = button.mapToItem(target,0,0)
-            var mouseX = pos.x
-            var mouseY = pos.y
-            var radius = Math.max(distance(mouseX,mouseY,0,0),distance(mouseX,mouseY,target.width,0),distance(mouseX,mouseY,0,target.height),distance(mouseX,mouseY,target.width,target.height))
-            var reveal = loader_reveal.item
-            reveal.start(reveal.width*Screen.devicePixelRatio,reveal.height*Screen.devicePixelRatio,Qt.point(mouseX,mouseY),radius)
-        }
-    }
-
-    function changeDark(){
-        if(FluTheme.dark){
-            FluTheme.darkMode = FluThemeType.Light
-        }else{
-            FluTheme.darkMode = FluThemeType.Dark
-        }
-    }
-
-    Shortcut {
-        sequence: "F5"
-        context: Qt.WindowShortcut
-        onActivated: {
-            if(flipable.flipped){
-                loader.reload()
-            }
-        }
-    }
-
-    Shortcut {
-        sequence: "F6"
-        context: Qt.WindowShortcut
-        onActivated: {
-            tour.open()
-        }
-    }
-
-    FluTour{
-        id: tour
-        finishText: qsTr("Finish")
-        nextText: qsTr("Next")
-        previousText: qsTr("Previous")
-        steps:{
-            var data = []
-            if(!window.useSystemAppBar){
-                data.push({title:qsTr("Dark Mode"),description: qsTr("Here you can switch to night mode."),target:()=>appBar.buttonDark})
-            }
-            data.push({title:qsTr("Hide Easter eggs"),description: qsTr("Try a few more clicks!!"),target:()=>nav_view.imageLogo})
-            return data
-        }
-    }
-
-    FpsItem{
-        id:fps_item
-    }
-
-    FluText{
-        text: "fps %1".arg(fps_item.fps)
-        opacity: 0.3
-        anchors{
-            bottom: parent.bottom
-            right: parent.right
-            bottomMargin: 5
-            rightMargin: 5
-        }
-    }
-
-    FluContentDialog{
-        property string newVerson
-        property string body
-        id: dialog_update
-        title: qsTr("Upgrade Tips")
-        message:qsTr("FluentUI is currently up to date ")+ newVerson +qsTr(" -- The current app version") +AppInfo.version+qsTr(" \nNow go and download the new version？\n\nUpdated content: \n")+body
-        buttonFlags: FluContentDialogType.NegativeButton | FluContentDialogType.PositiveButton
-        negativeText: qsTr("Cancel")
-        positiveText: qsTr("OK")
-        onPositiveClicked:{
-            Qt.openUrlExternally("https://github.com/zhuzichu520/FluentUI/releases/latest")
-        }
-    }
-
-    FluNetworkCallable{
-        id:callable
-        property bool silent: true
-        onStart: {
-            console.debug("satrt check update...")
-        }
-        onFinish: {
-            console.debug("check update finish")
-            FluEventBus.post("checkUpdateFinish");
-        }
-        onSuccess:
-            (result)=>{
-                var data = JSON.parse(result)
-                console.debug("current version "+AppInfo.version)
-                console.debug("new version "+data.tag_name)
-                if(data.tag_name !== AppInfo.version){
-                    dialog_update.newVerson =  data.tag_name
-                    dialog_update.body = data.body
-                    dialog_update.open()
-                }else{
-                    if(!silent){
-                        showInfo(qsTr("The current version is already the latest"))
-                    }
-                }
-            }
-        onError:
-            (status,errorString)=>{
-                if(!silent){
-                    showError(qsTr("The network is abnormal"))
-                }
-                console.debug(status+";"+errorString)
-            }
-    }
-
-    function checkUpdate(silent){
-        callable.silent = silent
-        FluNetwork.get("https://api.github.com/repos/zhuzichu520/FluentUI/releases/latest")
-        .go(callable)
-    }
-}

example/qml-Qt6/window/PageWindow.qml

@@ -1,25 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import FluentUI
-import example
-import "../component"
-
-FluWindow {
-
-    id:window
-    width: 800
-    height: 600
-    minimumWidth: 520
-    minimumHeight: 200
-    launchMode: FluWindowType.SingleInstance
-    onInitArgument:
-        (arg)=>{
-            window.title = arg.title
-            loader.setSource( arg.url,{animDisabled:true})
-        }
-    FluLoader{
-        id: loader
-        anchors.fill: parent
-    }
-}

example/qml-Qt6/window/SingleInstanceWindow.qml

@@ -1,35 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import FluentUI
-import "../component"
-
-FluWindow {
-
-    id: window
-    title: qsTr("SingleInstance")
-    width: 500
-    height: 600
-    fixSize: true
-    launchMode: FluWindowType.SingleInstance
-
-    FluTextBox{
-        anchors{
-            top:parent.top
-            topMargin:60
-            horizontalCenter: parent.horizontalCenter
-        }
-    }
-
-    FluText{
-        wrapMode: Text.WrapAnywhere
-        anchors{
-            left: parent.left
-            right: parent.right
-            leftMargin: 20
-            rightMargin: 20
-            verticalCenter: parent.verticalCenter
-        }
-        text: qsTr("I'm a SingleInstance window, and if I exist, I'll destroy the previous window and create a new one")
-    }
-}

example/qml-Qt6/window/SingleTaskWindow.qml

@@ -1,21 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import FluentUI
-import "../component"
-
-FluWindow {
-
-    id: window
-    title: qsTr("SingleTask")
-    width: 500
-    height: 600
-    fixSize: true
-    launchMode: FluWindowType.SingleTask
-
-    FluText{
-        anchors.centerIn: parent
-        text: qsTr("I'm a SingleTask mode window, and if I exist, I activate the window")
-    }
-
-}

example/qml-Qt6/window/StandardWindow.qml

@@ -1,43 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Layouts
-import FluentUI
-import "../component"
-
-FluWindow {
-
-    id:window
-    title:"Standard"
-    width: 500
-    height: 600
-    fixSize: true
-    launchMode: FluWindowType.Standard
-
-    FluMenuBar {
-        FluMenu {
-            title: qsTr("File")
-            Action { text: qsTr("New...") }
-            Action { text: qsTr("Open...") }
-            Action { text: qsTr("Save") }
-            Action { text: qsTr("Save As...") }
-            FluMenuSeparator { }
-            Action { text: qsTr("Quit") }
-        }
-        FluMenu {
-            title: qsTr("Edit")
-            Action { text: qsTr("Cut") }
-            Action { text: qsTr("Copy") }
-            Action { text: qsTr("Paste") }
-        }
-        FluMenu {
-            title: qsTr("Help")
-            Action { text: qsTr("About") }
-        }
-    }
-
-    FluText{
-        anchors.centerIn: parent
-        text: qsTr("I'm a Standard mode window, and every time I create a new window")
-    }
-
-}

example/qml/App.qml

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

example/qml/chart/T_BarChart.qml

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

example/qml/chart/T_BubbleChart.qml

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

example/qml/chart/T_LineChart.qml

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

example/qml/chart/T_PieChart.qml

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

example/qml/chart/T_PolarAreaChart.qml

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

example/qml/chart/T_RadarChart.qml

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

example/qml/chart/T_ScatterChart.qml

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

example/qml/component/CodeExpander.qml

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

example/qml/global/GlobalModel.qml

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

example/qml/global/ItemsFooter.qml

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

example/qml/global/ItemsOriginal.qml

@@ -104,6 +104,12 @@ FluObject{
             url: "qrc:/example/qml/page/T_ToggleSwitch.qml"
             onTap: { navigationView.push(url) }
         }
+        FluPaneItem{
+            title: qsTr("GroupBox")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_GroupBox.qml"
+            onTap: { navigationView.push(url) }
+        }
         FluPaneItem{
             title: qsTr("PaneItem Disabled")
             disabled: true
@@ -271,6 +277,12 @@ FluObject{
             url: "qrc:/example/qml/page/T_Menu.qml"
             onTap: { navigationView.push(url) }
         }
+        FluPaneItem{
+            title: qsTr("Sheet")
+            menuDelegate: paneItemMenu
+            url: "qrc:/example/qml/page/T_Sheet.qml"
+            onTap: { navigationView.push(url) }
+        }
     }
 
     FluPaneItemExpander{
@@ -462,7 +474,7 @@ FluObject{
         FluPaneItem{
             title: qsTr("Hot Loader")
             onTapListener: function(){
-                FluApp.navigate("/hotload")
+                FluRouter.navigate("/hotload")
             }
         }
         FluPaneItem{
@@ -473,10 +485,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_3D.qml

@@ -7,7 +7,6 @@ import Qt3D.Render 2.15
 import Qt3D.Input 2.12
 import Qt3D.Extras 2.15
 import QtQuick.Scene3D 2.15
-import QtQuick.Dialogs 1.3
 import Qt.labs.platform 1.1
 import FluentUI 1.0
 import "../component"

example/qml/page/T_Acrylic.qml

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

example/qml/page/T_Awesome.qml

@@ -12,7 +12,6 @@ FluContentPage {
         id:text_box
         placeholderText: qsTr("Please enter a keyword")
         anchors{
-            topMargin: 20
             top:parent.top
         }
     }
@@ -59,6 +58,7 @@ FluContentPage {
             FluText {
                 id:item_name
                 font.pixelSize: 10
+                font.family: FluTextStyle.family
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: item_icon.bottom
                 width:parent.width

example/qml/page/T_Badge.qml

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

example/qml/page/T_BreadcrumbBar.qml

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