fix bug #403

example/CMakeLists.txt

@@ -21,9 +21,6 @@ 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)
@@ -109,18 +106,16 @@ endif ()
 if(WIN32)
     if(MSVC)
         if(CMAKE_SIZEOF_VOID_P EQUAL 4)
-            set(3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x86/*.dll)
+            file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x86/*.dll)
         elseif(CMAKE_SIZEOF_VOID_P EQUAL 8)
-            set(3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x64/*.dll)
+            file(GLOB_RECURSE 3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/msvc/x64/*.dll)
         endif()
     elseif(MINGW)
-        set(3RDPARTY_DLL_DIR ${CMAKE_SOURCE_DIR}/3rdparty/mingw/*.dll)
+        file(GLOB_RECURSE 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
-        ${DLL_FILES}
+        ${3RDPARTY_DLL_DIR}
         ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}
     )
 endif()
@@ -139,7 +134,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_StaggeredView.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>
@@ -198,5 +198,6 @@
         <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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 

example/qml-Qt6/component/CodeExpander.qml

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

example/qml-Qt6/global/ItemsOriginal.qml

@@ -210,12 +210,6 @@ 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
@@ -224,6 +218,23 @@ 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,6 +8,7 @@ QtObject {
     property string basic_input
     property string form
     property string surface
+    property string layout
     property string popus
     property string navigation
     property string theming
@@ -34,6 +35,7 @@ QtObject {
         basic_input="基本输入"
         form="表单"
         surface="表面"
+        layout="布局"
         popus="弹窗"
         navigation="导航"
         theming="主题"
@@ -61,6 +63,7 @@ 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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../component"
 
 FluScrollablePage{
 
@@ -16,7 +16,6 @@ FluScrollablePage{
         Layout.topMargin: 20
         FluButton{
             anchors.verticalCenter: parent.verticalCenter
-            Layout.topMargin: 20
             text:"Show Double Button Dialog"
             onClicked: {
                 double_btn_dialog.open()
@@ -65,7 +64,6 @@ FluScrollablePage{
         Layout.topMargin: 20
         FluButton{
             anchors.verticalCenter: parent.verticalCenter
-            Layout.topMargin: 20
             text:"Show Triple Button Dialog"
             onClicked: {
                 triple_btn_dialog.open()
@@ -118,17 +116,25 @@ FluScrollablePage{
 
     FluArea{
         Layout.fillWidth: true
-        height: 68
+        height: 100
         paddings: 10
         Layout.topMargin: 20
         FluButton{
-            anchors.verticalCenter: parent.verticalCenter
-            Layout.topMargin: 20
+            anchors.top: parent.top
+            anchors.topMargin: 5
             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
@@ -164,8 +170,8 @@ FluScrollablePage{
         negativeText:"取消加载"
         contentDelegate: Component{
             Item{
-                width: parent.width
-                height: 80
+                implicitWidth: parent.width
+                implicitHeight: 80
                 FluProgressRing{
                     anchors.centerIn: parent
                 }
@@ -179,4 +185,47 @@ 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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/global"
-import "qrc:///example/qml/component"
-import "qrc:///example/qml/viewmodel"
+import "../global"
+import "../component"
+import "../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 "qrc:///example/qml/component"
+import "../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

@@ -0,0 +1,84 @@
+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_StaggeredLayout.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:"StaggeredView"
+    title:"StaggeredLayout"
 
     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 {}
-        FluStaggeredView{
+        FluStaggeredLayout{
             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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
-import "qrc:///example/qml/viewmodel"
+import "../component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../component"
 
 FluContentPage{
 

example/qml-Qt6/window/AboutWindow.qml

@@ -2,7 +2,7 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
-import "qrc:///example/qml/component"
+import "../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 "qrc:///example/qml/component"
+import "../component"
 
 FluWindow {
 

example/qml-Qt6/window/HotloadWindow.qml

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

example/qml-Qt6/window/LoginWindow.qml

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

example/qml-Qt6/window/MainWindow.qml

@@ -5,9 +5,9 @@ import QtQuick.Layouts
 import Qt.labs.platform
 import FluentUI
 import example
-import "qrc:///example/qml/component"
-import "qrc:///example/qml/global"
-import "qrc:///example/qml/viewmodel"
+import "../component"
+import "../global"
+import "../viewmodel"
 
 FluWindow {
 
@@ -179,7 +179,7 @@ FluWindow {
                 id:loader
                 lazy: true
                 anchors.fill: parent
-                source: "https://zhu-zichu.gitee.io/Qt_163_LieflatPage.qml"
+                source: "https://zhu-zichu.gitee.io/Qt_168_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 "qrc:///example/qml/component"
+import "../component"
 
 FluWindow {
 

example/qml-Qt6/window/SingleInstanceWindow.qml

@@ -2,7 +2,8 @@ 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 "qrc:///example/qml/component"
+import "../component"
 
 FluWindow {
 

example/qml-Qt6/window/StandardWindow.qml

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

example/qml/chart/T_BarChart.qml

@@ -3,7 +3,6 @@ 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,7 +3,6 @@ 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,7 +3,6 @@ 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,7 +3,6 @@ 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,7 +3,6 @@ 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,7 +3,6 @@ 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,7 +3,6 @@ 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",
-                    "FluStaggeredView",
+                    "FluStaggeredLayout",
                     "FluProgressButton",
                     "FluLoadingButton",
                     "FluClip",

example/qml/global/ItemsOriginal.qml

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

example/qml/page/T_3D.qml

@@ -10,7 +10,6 @@ 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,7 +3,6 @@ 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,7 +3,6 @@ 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,7 +3,6 @@ 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,7 +3,6 @@ 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,7 +3,6 @@ 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,7 +3,6 @@ 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,7 +3,6 @@ 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,7 +3,6 @@ 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,7 +4,6 @@ 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,7 +3,6 @@ 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,7 +3,6 @@ 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,7 +3,6 @@ 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,7 +3,6 @@ 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{
@@ -17,7 +16,6 @@ FluScrollablePage{
         Layout.topMargin: 20
         FluButton{
             anchors.verticalCenter: parent.verticalCenter
-            Layout.topMargin: 20
             text:"Show Double Button Dialog"
             onClicked: {
                 double_btn_dialog.open()
@@ -66,7 +64,6 @@ FluScrollablePage{
         Layout.topMargin: 20
         FluButton{
             anchors.verticalCenter: parent.verticalCenter
-            Layout.topMargin: 20
             text:"Show Triple Button Dialog"
             onClicked: {
                 triple_btn_dialog.open()
@@ -119,17 +116,25 @@ FluScrollablePage{
 
     FluArea{
         Layout.fillWidth: true
-        height: 68
+        height: 100
         paddings: 10
         Layout.topMargin: 20
         FluButton{
-            anchors.verticalCenter: parent.verticalCenter
-            Layout.topMargin: 20
+            anchors.top: parent.top
+            anchors.topMargin: 5
             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
@@ -165,8 +170,8 @@ FluScrollablePage{
         negativeText:"取消加载"
         contentDelegate: Component{
             Item{
-                width: parent.width
-                height: 80
+                implicitWidth: parent.width
+                implicitHeight: 80
                 FluProgressRing{
                     anchors.centerIn: parent
                 }
@@ -180,4 +185,47 @@ 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,7 +3,6 @@ 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,7 +3,6 @@ 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,7 +3,6 @@ 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,7 +3,6 @@ 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,7 +3,6 @@ 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{