add FluStaggeredView

example/qml-Qt6/component/CodeExpander.qml

@@ -137,7 +137,8 @@ FluExpander{
                     "FluQRCode",
                     "FluTimeline",
                     "FluChart",
-                    "FluRangeSlider"
+                    "FluRangeSlider",
+                    "FluStaggeredView"
                 ];
         code = code.replace(/\n/g, "<br>");
         code = code.replace(/ /g, "&nbsp;");

example/qml-Qt6/global/ItemsOriginal.qml

@@ -217,6 +217,12 @@ FluObject{
             onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
+        FluPaneItem{
+            title:"StaggeredView"
+            url:"qrc:/example/qml/page/T_StaggeredView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
+        }
         FluPaneItem{
             title:"Watermark"
             url:"qrc:/example/qml/page/T_Watermark.qml"

example/qml-Qt6/page/T_StaggeredView.qml

@@ -0,0 +1,59 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import "qrc:///example/qml/component"
+import FluentUI 1.0
+
+FluContentPage{
+
+    title:"StaggeredView"
+
+    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)].dark
+                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 {}
+        FluStaggeredView{
+            id:staggered_view
+            width: parent.width
+            itemWidth: 160
+            model:list_model
+            delegate: Rectangle{
+                height: model.height
+                color:model.color
+                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/window/MainWindow.qml

@@ -134,13 +134,11 @@ CustomWindow {
                     }
                 }
             }
-
             FluRemoteLoader{
                 id:loader
                 lazy: true
                 anchors.fill: parent
-                //                source: "http://localhost:9000/RemoteComponent.qml"
+                source: "https://zhu-zichu.gitee.io/Qt6_155_LieflatPage.qml"
-                source: "https://zhu-zichu.gitee.io/RemoteComponent.qml"
             }
         }
         front: Item{

example/qml/component/CodeExpander.qml

@@ -137,7 +137,8 @@ FluExpander{
                     "FluQRCode",
                     "FluTimeline",
                     "FluChart",
-                    "FluRangeSlider"
+                    "FluRangeSlider",
+                    "FluStaggeredView"
                 ];
         code = code.replace(/\n/g, "<br>");
         code = code.replace(/ /g, "&nbsp;");

example/qml/global/ItemsOriginal.qml

@@ -217,6 +217,12 @@ FluObject{
             onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
             onTap:{ navigationView.push(url) }
         }
+        FluPaneItem{
+            title:"StaggeredView"
+            url:"qrc:/example/qml/page/T_StaggeredView.qml"
+            onDropped:{ FluApp.navigate("/pageWindow",{title:title,url:url}) }
+            onTap:{ navigationView.push(url) }
+        }
         FluPaneItem{
             title:"Watermark"
             url:"qrc:/example/qml/page/T_Watermark.qml"

example/qml/page/T_RemoteLoader.qml

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

example/qml/page/T_StaggeredView.qml

@@ -0,0 +1,61 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import "qrc:///example/qml/component"
+import "../component"
+import FluentUI 1.0
+
+FluContentPage{
+
+    title:"StaggeredView"
+
+    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)].dark
+                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 {}
+        FluStaggeredView{
+            id:staggered_view
+            width: parent.width
+            itemWidth: 160
+            model:list_model
+            delegate: Rectangle{
+                height: model.height
+                color:model.color
+                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/window/MainWindow.qml

@@ -135,13 +135,11 @@ CustomWindow {
                     }
                 }
             }
-
             FluRemoteLoader{
                 id:loader
                 lazy: true
                 anchors.fill: parent
-                //                source: "http://localhost:9000/RemoteComponent.qml"
+                source: "https://zhu-zichu.gitee.io/Qt5_155_LieflatPage.qml"
-                source: "https://zhu-zichu.gitee.io/RemoteComponent.qml"
             }
         }
         front: Item{

example/resource.qrc

@@ -185,5 +185,6 @@
         <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>
     </qresource>
 </RCC>

src/Qt5/imports/FluentUI/Controls/FluStaggeredView.qml

@@ -0,0 +1,68 @@
+import QtQuick 2.15
+
+Item {
+    property int itemWidth : 200
+    property alias model: rep.model
+    property alias delegate: rep.delegate
+    property int rowSpacing: 8
+    property int colSpacing: 8
+    id: control
+    QtObject{
+        id:d
+        property int cellWidth : itemWidth+rowSpacing
+        property int colCount: {
+            var cols = parseInt(control.width/cellWidth)
+            return cols>0?cols:1
+        }
+        property var colsHeightArr: []
+        property int maxHeight: 0
+        property var itemsInRep: []
+        onMaxHeightChanged: {
+            control.implicitHeight = maxHeight
+        }
+        onColCountChanged: {
+            refresh()
+        }
+        function refresh(){
+            d.colsHeightArr = []
+            var count = itemsInRep.length
+            for(var i=0; i<count; ++i){
+                addToFall(i, itemsInRep[i])
+            }
+        }
+        function addToFall(index, item){
+            var top = 0,left = 0
+            if(index<colCount){
+                colsHeightArr.push(item.height)
+                left = index * cellWidth
+            }else{
+                var minHeight = Math.min.apply(null, colsHeightArr)
+                var minIndex = colsHeightArr.indexOf(minHeight)
+                top = minHeight + control.colSpacing
+                left = minIndex * cellWidth
+                colsHeightArr[minIndex] = top + item.height
+            }
+            item.x = left
+            item.y = top
+            item.width = control.itemWidth
+            maxHeight = Math.max.apply(null, colsHeightArr)
+        }
+    }
+    Repeater {
+        id: rep
+        onCountChanged: {
+            d.refresh()
+        }
+        onItemAdded:
+            (index,item)=>  {
+                d.addToFall(index, item)
+                d.itemsInRep.push(item)
+            }
+    }
+    function clear(){
+        d.maxHeight = 0
+        d.colsHeightArr = []
+        d.itemsInRep = []
+        model.clear()
+    }
+}

src/Qt5/imports/FluentUI/qmldir

@@ -93,4 +93,5 @@ FluTour 1.0 Controls/FluTour.qml
 FluTreeView 1.0 Controls/FluTreeView.qml
 FluWindow 1.0 Controls/FluWindow.qml
 FluRangeSlider 1.0 Controls/FluRangeSlider.qml
+FluStaggeredView 1.0 Controls/FluStaggeredView.qml
 plugin fluentuiplugin

src/Qt6/imports/FluentUI/Controls/FluStaggeredView.qml

@@ -0,0 +1,68 @@
+import QtQuick
+
+Item {
+    property int itemWidth : 200
+    property alias model: rep.model
+    property alias delegate: rep.delegate
+    property int rowSpacing: 8
+    property int colSpacing: 8
+    id: control
+    QtObject{
+        id:d
+        property int cellWidth : itemWidth+rowSpacing
+        property int colCount: {
+            var cols = parseInt(control.width/cellWidth)
+            return cols>0?cols:1
+        }
+        property var colsHeightArr: []
+        property int maxHeight: 0
+        property var itemsInRep: []
+        onMaxHeightChanged: {
+            control.implicitHeight = maxHeight
+        }
+        onColCountChanged: {
+            refresh()
+        }
+        function refresh(){
+            d.colsHeightArr = []
+            var count = itemsInRep.length
+            for(var i=0; i<count; ++i){
+                addToFall(i, itemsInRep[i])
+            }
+        }
+        function addToFall(index, item){
+            var top = 0,left = 0
+            if(index<colCount){
+                colsHeightArr.push(item.height)
+                left = index * cellWidth
+            }else{
+                var minHeight = Math.min.apply(null, colsHeightArr)
+                var minIndex = colsHeightArr.indexOf(minHeight)
+                top = minHeight + control.colSpacing
+                left = minIndex * cellWidth
+                colsHeightArr[minIndex] = top + item.height
+            }
+            item.x = left
+            item.y = top
+            item.width = control.itemWidth
+            maxHeight = Math.max.apply(null, colsHeightArr)
+        }
+    }
+    Repeater {
+        id: rep
+        onCountChanged: {
+            d.refresh()
+        }
+        onItemAdded:
+            (index,item)=>  {
+                d.addToFall(index, item)
+                d.itemsInRep.push(item)
+            }
+    }
+    function clear(){
+        d.maxHeight = 0
+        d.colsHeightArr = []
+        d.itemsInRep = []
+        model.clear()
+    }
+}

src/resource.qrc

@@ -93,5 +93,6 @@
         <file>Qt5/imports/FluentUI/Controls/ColorPicker/Content/PanelBorder.qml</file>
         <file>Qt5/imports/FluentUI/Controls/ColorPicker/Content/SBPicker.qml</file>
         <file>Qt5/imports/FluentUI/Controls/FluRangeSlider.qml</file>
+        <file>Qt5/imports/FluentUI/Controls/FluStaggeredView.qml</file>
     </qresource>
 </RCC>