example/CMakeLists.txt

@@ -21,6 +21,9 @@ else()
     set(CMAKE_RUNTIME_OUTPUT_DIRECTORY $<1:${FLUENTUI_DIRECTORY}/bin/release>)
 endif()
 
+#获取文件路径分隔符（解决执行命令的时候有些平台会报错）
+file(TO_CMAKE_PATH "/" PATH_SEPARATOR)
+
 #导入Qt相关依赖包
 find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Quick Svg Network)
 find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Quick Svg Network)
@@ -106,16 +109,18 @@ endif ()
 if(WIN32)
     if(MSVC)
         if(CMAKE_SIZEOF_VOID_P EQUAL 4)
-            file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x86/*.dll)
+            set(3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x86/*.dll)
         elseif(CMAKE_SIZEOF_VOID_P EQUAL 8)
-            file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x64/*.dll)
+            set(3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x64/*.dll)
         endif()
     elseif(MINGW)
-        file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/mingw/*.dll)
+        set(3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/mingw/*.dll)
     endif()
+    string(REPLACE "/" ${PATH_SEPARATOR} 3RDPARTY_DLL_DIR "${3RDPARTY_DLL_DIR}")
+    file(GLOB DLL_FILES ${3RDPARTY_DLL_DIR})
     add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
         COMMAND ${CMAKE_COMMAND} -E copy
-        ${3RDPARTY_DLL_DIR}
+        ${DLL_FILES}
         ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}
     )
 endif()
@@ -134,7 +139,7 @@ else()
     target_include_directories(example PRIVATE
         ${CMAKE_CURRENT_SOURCE_DIR}
     )
-target_sources(example PRIVATE example.qrc)
+    target_sources(example PRIVATE example.qrc)
 endif()
 
 #导入component头文件,不然通过QML_NAMED_ELEMENT生成的c++类会找不到头文件报错

example/example.qrc

@@ -181,7 +181,7 @@
         <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/page/T_StaggeredView.qml</file>
         <file>qml/viewmodel/SettingsViewModel.qml</file>
         <file>qml/viewmodel/TextBoxViewModel.qml</file>
         <file>qml/page/T_Clip.qml</file>
@@ -198,6 +198,5 @@
         <file>qml/chart/T_PolarAreaChart.qml</file>
         <file>res/image/ic_crash.png</file>
         <file>qml/window/CrashWindow.qml</file>
-        <file>qml/page/T_SplitLayout.qml</file>
     </qresource>
 </RCC>

example/qml-Qt6/chart/T_BarChart.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/chart/T_BubbleChart.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/chart/T_LineChart.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/chart/T_PieChart.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/chart/T_PolarAreaChart.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/chart/T_RadarChart.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/chart/T_ScatterChart.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/component/CodeExpander.qml

@@ -136,7 +136,7 @@ FluExpander{
                     "FluTimeline",
                     "FluChart",
                     "FluRangeSlider",
-                    "FluStaggeredLayout",
+                    "FluStaggeredView",
                     "FluProgressButton",
                     "FluLoadingButton",
                     "FluClip",

example/qml-Qt6/global/ItemsOriginal.qml

@@ -210,6 +210,12 @@ FluObject{
             url:"qrc:/example/qml/page/T_Expander.qml"
             onTap:{ navigationView.push(url) }
         }
+        FluPaneItem{
+            title:"StaggeredView"
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_StaggeredView.qml"
+            onTap:{ navigationView.push(url) }
+        }
         FluPaneItem{
             title:"Watermark"
             menuDelegate: paneItemMenu
@@ -218,23 +224,6 @@ FluObject{
         }
     }
 
-    FluPaneItemExpander{
-        title:Lang.layout
-        icon:FluentIcons.DockLeft
-        FluPaneItem{
-            title:"StaggeredLayout"
-            menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_StaggeredLayout.qml"
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"SplitLayout"
-            menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_SplitLayout.qml"
-            onTap:{ navigationView.push(url) }
-        }
-    }
-
     FluPaneItemExpander{
         title:Lang.popus
         icon:FluentIcons.ButtonMenu

example/qml-Qt6/global/Lang.qml

@@ -8,7 +8,6 @@ QtObject {
     property string basic_input
     property string form
     property string surface
-    property string layout
     property string popus
     property string navigation
     property string theming
@@ -35,7 +34,6 @@ QtObject {
         basic_input="基本输入"
         form="表单"
         surface="表面"
-        layout="布局"
         popus="弹窗"
         navigation="导航"
         theming="主题"
@@ -63,7 +61,6 @@ QtObject {
         basic_input="Basic Input"
         form="Form"
         surface="Surfaces"
-        layout="Layout"
         popus="Popus"
         navigation="Navigation"
         theming="Theming"

example/qml-Qt6/page/T_3D.qml

@@ -10,7 +10,7 @@ import Qt3D.Extras
 import QtQuick.Scene3D
 import QtQuick.Dialogs
 import Qt.labs.platform
-import "../component"
+import "qrc:///example/qml/component"
 
 FluContentPage{
 

example/qml-Qt6/page/T_Acrylic.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_Badge.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_BreadcrumbBar.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_Buttons.qml

@@ -4,7 +4,7 @@ import QtQuick.Window
 import QtQuick.Controls
 import QtQuick.Controls.Basic
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_CalendarPicker.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_Captcha.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_Carousel.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_CheckBox.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_Clip.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Controls
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_ColorPicker.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_ComboBox.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_DatePicker.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_Dialog.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 
@@ -16,6 +16,7 @@ FluScrollablePage{
         Layout.topMargin: 20
         FluButton{
             anchors.verticalCenter: parent.verticalCenter
+            Layout.topMargin: 20
             text:"Show Double Button Dialog"
             onClicked: {
                 double_btn_dialog.open()
@@ -64,6 +65,7 @@ FluScrollablePage{
         Layout.topMargin: 20
         FluButton{
             anchors.verticalCenter: parent.verticalCenter
+            Layout.topMargin: 20
             text:"Show Triple Button Dialog"
             onClicked: {
                 triple_btn_dialog.open()
@@ -116,25 +118,17 @@ FluScrollablePage{
 
     FluArea{
         Layout.fillWidth: true
-        height: 100
+        height: 68
         paddings: 10
         Layout.topMargin: 20
         FluButton{
-            anchors.top: parent.top
+            anchors.verticalCenter: parent.verticalCenter
-            anchors.topMargin: 5
+            Layout.topMargin: 20
             text:"Custom Content Dialog"
             onClicked: {
                 custom_btn_dialog.open()
             }
         }
-        FluButton{
-            anchors.top: parent.top
-            anchors.topMargin: 48
-            text:"Custom Content Dialog2"
-            onClicked: {
-                custom_btn_dialog2.open()
-            }
-        }
     }
     CodeExpander{
         Layout.fillWidth: true
@@ -170,8 +164,8 @@ FluScrollablePage{
         negativeText:"取消加载"
         contentDelegate: Component{
             Item{
-                implicitWidth: parent.width
+                width: parent.width
-                implicitHeight: 80
+                height: 80
                 FluProgressRing{
                     anchors.centerIn: parent
                 }
@@ -185,47 +179,4 @@ FluScrollablePage{
             showSuccess("点击确定按钮")
         }
     }
-
-    FluContentDialog{
-        id:custom_btn_dialog2
-        title:"折线图"
-        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:"确定"
-        onPositiveClicked:{
-            showSuccess("点击确定按钮")
-        }
-    }
 }

example/qml-Qt6/page/T_Expander.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_FlipView.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_Home.qml

@@ -2,8 +2,8 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
+import "qrc:///example/qml/global"
 import FluentUI
-import "../global"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_Image.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_InfoBar.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_Menu.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_MultiWindow.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_Network.qml

@@ -4,7 +4,7 @@ import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
 import Qt.labs.platform
-import "../component"
+import "qrc:///example/qml/component"
 
 FluContentPage{
 

example/qml-Qt6/page/T_Pagination.qml

@@ -2,8 +2,8 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
+import "qrc:///example/qml/component"
 import FluentUI
-import "../component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_Pivot.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_Progress.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_QRCode.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_RadioButton.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_RatingControl.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage {
 

example/qml-Qt6/page/T_Rectangle.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Controls
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_RemoteLoader.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluPage{
     launchMode: FluPageType.SingleTop

example/qml-Qt6/page/T_Screenshot.qml

@@ -4,7 +4,7 @@ import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
 import Qt.labs.platform
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_Settings.qml

@@ -3,9 +3,9 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../global"
+import "qrc:///example/qml/global"
-import "../component"
+import "qrc:///example/qml/component"
-import "../viewmodel"
+import "qrc:///example/qml/viewmodel"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_ShortcutPicker.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_Slider.qml

@@ -2,8 +2,8 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
+import "qrc:///example/qml/component"
 import FluentUI
-import "../component"
 
 FluScrollablePage{
 

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:"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_StaggeredView.qml

@@ -2,12 +2,12 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
+import "qrc:///example/qml/component"
 import FluentUI 1.0
-import "../component"
 
 FluContentPage{
 
-    title:"StaggeredLayout"
+    title:"StaggeredView"
 
     property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
 
@@ -32,7 +32,7 @@ FluContentPage{
         contentHeight: staggered_view.implicitHeight
         clip: true
         ScrollBar.vertical: FluScrollBar {}
-        FluStaggeredLayout{
+        FluStaggeredView{
             id:staggered_view
             width: parent.width
             itemWidth: 160

example/qml-Qt6/page/T_StatusView.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Controls
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_TabView.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_TableView.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluContentPage{
 

example/qml-Qt6/page/T_Text.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_TextBox.qml

@@ -3,8 +3,8 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
-import "../viewmodel"
+import "qrc:///example/qml/viewmodel"
 
 FluScrollablePage{
     title:"TextBox"

example/qml-Qt6/page/T_Theme.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_TimePicker.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_Timeline.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_ToggleSwitch.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_Tooltip.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_Tour.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml-Qt6/page/T_TreeView.qml

@@ -3,7 +3,7 @@ import QtQuick.Layouts
 import QtQuick.Window
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluContentPage {
 

example/qml-Qt6/page/T_Watermark.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Window
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluContentPage{
 

example/qml-Qt6/window/AboutWindow.qml

@@ -2,7 +2,7 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluWindow {
 

example/qml-Qt6/window/CrashWindow.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
 import Qt.labs.platform
-import "../component"
+import "qrc:///example/qml/component"
 
 FluWindow {
 

example/qml-Qt6/window/HotloadWindow.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
 import example
-import "../component"
+import "qrc:///example/qml/component"
 
 FluWindow {
 

example/qml-Qt6/window/LoginWindow.qml

@@ -2,7 +2,7 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluWindow {
 

example/qml-Qt6/window/MainWindow.qml

@@ -5,9 +5,9 @@ import QtQuick.Layouts
 import Qt.labs.platform
 import FluentUI
 import example
-import "../component"
+import "qrc:///example/qml/component"
-import "../global"
+import "qrc:///example/qml/global"
-import "../viewmodel"
+import "qrc:///example/qml/viewmodel"
 
 FluWindow {
 
@@ -179,7 +179,7 @@ FluWindow {
                 id:loader
                 lazy: true
                 anchors.fill: parent
-                source: "https://zhu-zichu.gitee.io/Qt_168_LieflatPage.qml"
+                source: "https://zhu-zichu.gitee.io/Qt_163_LieflatPage.qml"
             }
         }
         front: Item{

example/qml-Qt6/window/PageWindow.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
 import example
-import "../component"
+import "qrc:///example/qml/component"
 
 FluWindow {
 

example/qml-Qt6/window/SingleInstanceWindow.qml

@@ -2,8 +2,7 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
-
+import "qrc:///example/qml/component"
-import "../component"
 
 FluWindow {
 

example/qml-Qt6/window/SingleTaskWindow.qml

@@ -2,7 +2,7 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluWindow {
 

example/qml-Qt6/window/StandardWindow.qml

@@ -2,7 +2,7 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
-import "../component"
+import "qrc:///example/qml/component"
 
 FluWindow {
 

example/qml/chart/T_BarChart.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
+import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{

example/qml/chart/T_BubbleChart.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
+import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{

example/qml/chart/T_LineChart.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
+import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{

example/qml/chart/T_PieChart.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
+import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{

example/qml/chart/T_PolarAreaChart.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
+import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{

example/qml/chart/T_RadarChart.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
+import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{

example/qml/chart/T_ScatterChart.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
+import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{

example/qml/component/CodeExpander.qml

@@ -136,7 +136,7 @@ FluExpander{
                     "FluTimeline",
                     "FluChart",
                     "FluRangeSlider",
-                    "FluStaggeredLayout",
+                    "FluStaggeredView",
                     "FluProgressButton",
                     "FluLoadingButton",
                     "FluClip",

example/qml/global/ItemsOriginal.qml

@@ -210,6 +210,12 @@ FluObject{
             url:"qrc:/example/qml/page/T_Expander.qml"
             onTap:{ navigationView.push(url) }
         }
+        FluPaneItem{
+            title:"StaggeredView"
+            menuDelegate: paneItemMenu
+            url:"qrc:/example/qml/page/T_StaggeredView.qml"
+            onTap:{ navigationView.push(url) }
+        }
         FluPaneItem{
             title:"Watermark"
             menuDelegate: paneItemMenu
@@ -218,23 +224,6 @@ FluObject{
         }
     }
 
-    FluPaneItemExpander{
-        title:Lang.layout
-        icon:FluentIcons.DockLeft
-        FluPaneItem{
-            title:"StaggeredLayout"
-            menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_StaggeredLayout.qml"
-            onTap:{ navigationView.push(url) }
-        }
-        FluPaneItem{
-            title:"SplitLayout"
-            menuDelegate: paneItemMenu
-            url:"qrc:/example/qml/page/T_SplitLayout.qml"
-            onTap:{ navigationView.push(url) }
-        }
-    }
-
     FluPaneItemExpander{
         title:Lang.popus
         icon:FluentIcons.ButtonMenu

example/qml/global/Lang.qml

@@ -8,7 +8,6 @@ QtObject {
     property string basic_input
     property string form
     property string surface
-    property string layout
     property string popus
     property string navigation
     property string theming
@@ -35,7 +34,6 @@ QtObject {
         basic_input="基本输入"
         form="表单"
         surface="表面"
-        layout="布局"
         popus="弹窗"
         navigation="导航"
         theming="主题"
@@ -63,7 +61,6 @@ QtObject {
         basic_input="Basic Input"
         form="Form"
         surface="Surfaces"
-        layout="Layout"
         popus="Popus"
         navigation="Navigation"
         theming="Theming"

example/qml/page/T_3D.qml

@@ -10,6 +10,7 @@ import QtQuick.Scene3D 2.15
 import QtQuick.Dialogs 1.3
 import Qt.labs.platform 1.1
 import FluentUI 1.0
+import "qrc:///example/qml/component"
 import "../component"
 
 FluContentPage{

example/qml/page/T_Acrylic.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
+import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{

example/qml/page/T_Badge.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
+import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{

example/qml/page/T_BreadcrumbBar.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
+import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{

example/qml/page/T_Buttons.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
+import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{

example/qml/page/T_CalendarPicker.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
+import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{

example/qml/page/T_Captcha.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
+import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{

example/qml/page/T_Carousel.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
+import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{

example/qml/page/T_CheckBox.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
+import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{

example/qml/page/T_Clip.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 import "../component"
+import "qrc:///example/qml/component"
 
 FluScrollablePage{
 

example/qml/page/T_ColorPicker.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
+import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{

example/qml/page/T_ComboBox.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
+import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{

example/qml/page/T_DatePicker.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
+import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{

example/qml/page/T_Dialog.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
+import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{
@@ -16,6 +17,7 @@ FluScrollablePage{
         Layout.topMargin: 20
         FluButton{
             anchors.verticalCenter: parent.verticalCenter
+            Layout.topMargin: 20
             text:"Show Double Button Dialog"
             onClicked: {
                 double_btn_dialog.open()
@@ -64,6 +66,7 @@ FluScrollablePage{
         Layout.topMargin: 20
         FluButton{
             anchors.verticalCenter: parent.verticalCenter
+            Layout.topMargin: 20
             text:"Show Triple Button Dialog"
             onClicked: {
                 triple_btn_dialog.open()
@@ -116,25 +119,17 @@ FluScrollablePage{
 
     FluArea{
         Layout.fillWidth: true
-        height: 100
+        height: 68
         paddings: 10
         Layout.topMargin: 20
         FluButton{
-            anchors.top: parent.top
+            anchors.verticalCenter: parent.verticalCenter
-            anchors.topMargin: 5
+            Layout.topMargin: 20
             text:"Custom Content Dialog"
             onClicked: {
                 custom_btn_dialog.open()
             }
         }
-        FluButton{
-            anchors.top: parent.top
-            anchors.topMargin: 48
-            text:"Custom Content Dialog2"
-            onClicked: {
-                custom_btn_dialog2.open()
-            }
-        }
     }
     CodeExpander{
         Layout.fillWidth: true
@@ -170,8 +165,8 @@ FluScrollablePage{
         negativeText:"取消加载"
         contentDelegate: Component{
             Item{
-                implicitWidth: parent.width
+                width: parent.width
-                implicitHeight: 80
+                height: 80
                 FluProgressRing{
                     anchors.centerIn: parent
                 }
@@ -185,47 +180,4 @@ FluScrollablePage{
             showSuccess("点击确定按钮")
         }
     }
-
-    FluContentDialog{
-        id:custom_btn_dialog2
-        title:"折线图"
-        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:"确定"
-        onPositiveClicked:{
-            showSuccess("点击确定按钮")
-        }
-    }
 }

example/qml/page/T_Expander.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
+import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{

example/qml/page/T_FlipView.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
+import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{

example/qml/page/T_Home.qml

@@ -2,8 +2,8 @@ import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
+import "qrc:///example/qml/global"
 import FluentUI 1.0
-import "../global"
 
 FluScrollablePage{
 

example/qml/page/T_Image.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
+import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{

example/qml/page/T_InfoBar.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
+import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{

example/qml/page/T_Menu.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
+import "qrc:///example/qml/component"
 import "../component"
 
 FluScrollablePage{