From 5b3834ed8f6926561d246b613288e855bb6b501a Mon Sep 17 00:00:00 2001 From: zhuzichu Date: Wed, 30 Aug 2023 17:18:49 +0800 Subject: [PATCH] add FluStaggeredView --- example/qml-Qt6/component/CodeExpander.qml | 3 +- example/qml-Qt6/global/ItemsOriginal.qml | 6 ++ example/qml-Qt6/page/T_StaggeredView.qml | 59 ++++++++++++++++ example/qml-Qt6/window/MainWindow.qml | 4 +- example/qml/component/CodeExpander.qml | 3 +- example/qml/global/ItemsOriginal.qml | 6 ++ example/qml/page/T_RemoteLoader.qml | 2 +- example/qml/page/T_StaggeredView.qml | 61 +++++++++++++++++ example/qml/window/MainWindow.qml | 4 +- example/resource.qrc | 1 + .../FluentUI/Controls/FluStaggeredView.qml | 68 +++++++++++++++++++ src/Qt5/imports/FluentUI/qmldir | 1 + .../FluentUI/Controls/FluStaggeredView.qml | 68 +++++++++++++++++++ src/resource.qrc | 1 + 14 files changed, 278 insertions(+), 9 deletions(-) create mode 100644 example/qml-Qt6/page/T_StaggeredView.qml create mode 100644 example/qml/page/T_StaggeredView.qml create mode 100644 src/Qt5/imports/FluentUI/Controls/FluStaggeredView.qml create mode 100644 src/Qt6/imports/FluentUI/Controls/FluStaggeredView.qml diff --git a/example/qml-Qt6/component/CodeExpander.qml b/example/qml-Qt6/component/CodeExpander.qml index 7387033f..ea9d9781 100644 --- a/example/qml-Qt6/component/CodeExpander.qml +++ b/example/qml-Qt6/component/CodeExpander.qml @@ -137,7 +137,8 @@ FluExpander{ "FluQRCode", "FluTimeline", "FluChart", - "FluRangeSlider" + "FluRangeSlider", + "FluStaggeredView" ]; code = code.replace(/\n/g, "
"); code = code.replace(/ /g, " "); diff --git a/example/qml-Qt6/global/ItemsOriginal.qml b/example/qml-Qt6/global/ItemsOriginal.qml index 8bb7b23e..1528a77e 100644 --- a/example/qml-Qt6/global/ItemsOriginal.qml +++ b/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" diff --git a/example/qml-Qt6/page/T_StaggeredView.qml b/example/qml-Qt6/page/T_StaggeredView.qml new file mode 100644 index 00000000..b7df5f5a --- /dev/null +++ b/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); + } + +} + diff --git a/example/qml-Qt6/window/MainWindow.qml b/example/qml-Qt6/window/MainWindow.qml index 298333f9..89c6a9c1 100644 --- a/example/qml-Qt6/window/MainWindow.qml +++ b/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/RemoteComponent.qml" + source: "https://zhu-zichu.gitee.io/Qt6_155_LieflatPage.qml" } } front: Item{ diff --git a/example/qml/component/CodeExpander.qml b/example/qml/component/CodeExpander.qml index cc547cec..0ccc2985 100644 --- a/example/qml/component/CodeExpander.qml +++ b/example/qml/component/CodeExpander.qml @@ -137,7 +137,8 @@ FluExpander{ "FluQRCode", "FluTimeline", "FluChart", - "FluRangeSlider" + "FluRangeSlider", + "FluStaggeredView" ]; code = code.replace(/\n/g, "
"); code = code.replace(/ /g, " "); diff --git a/example/qml/global/ItemsOriginal.qml b/example/qml/global/ItemsOriginal.qml index 7c27c4cf..b825ada9 100644 --- a/example/qml/global/ItemsOriginal.qml +++ b/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" diff --git a/example/qml/page/T_RemoteLoader.qml b/example/qml/page/T_RemoteLoader.qml index a6723a9a..0917f326 100644 --- a/example/qml/page/T_RemoteLoader.qml +++ b/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" } } diff --git a/example/qml/page/T_StaggeredView.qml b/example/qml/page/T_StaggeredView.qml new file mode 100644 index 00000000..572a9466 --- /dev/null +++ b/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); + } + +} + diff --git a/example/qml/window/MainWindow.qml b/example/qml/window/MainWindow.qml index 6115301f..95831a8b 100644 --- a/example/qml/window/MainWindow.qml +++ b/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/RemoteComponent.qml" + source: "https://zhu-zichu.gitee.io/Qt5_155_LieflatPage.qml" } } front: Item{ diff --git a/example/resource.qrc b/example/resource.qrc index 95d3d5cd..a941b5bc 100644 --- a/example/resource.qrc +++ b/example/resource.qrc @@ -185,5 +185,6 @@ res/image/bg_scenic.png res/image/image_1.jpg qml/window/PageWindow.qml + qml/page/T_StaggeredView.qml diff --git a/src/Qt5/imports/FluentUI/Controls/FluStaggeredView.qml b/src/Qt5/imports/FluentUI/Controls/FluStaggeredView.qml new file mode 100644 index 00000000..4b226baf --- /dev/null +++ b/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 { + d.addToFall(index, item) + d.itemsInRep.push(item) + } + } + function clear(){ + d.maxHeight = 0 + d.colsHeightArr = [] + d.itemsInRep = [] + model.clear() + } +} diff --git a/src/Qt5/imports/FluentUI/qmldir b/src/Qt5/imports/FluentUI/qmldir index 49175a4f..e05c9be6 100644 --- a/src/Qt5/imports/FluentUI/qmldir +++ b/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 diff --git a/src/Qt6/imports/FluentUI/Controls/FluStaggeredView.qml b/src/Qt6/imports/FluentUI/Controls/FluStaggeredView.qml new file mode 100644 index 00000000..9f0da327 --- /dev/null +++ b/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 { + d.addToFall(index, item) + d.itemsInRep.push(item) + } + } + function clear(){ + d.maxHeight = 0 + d.colsHeightArr = [] + d.itemsInRep = [] + model.clear() + } +} diff --git a/src/resource.qrc b/src/resource.qrc index ada937f7..7725923b 100644 --- a/src/resource.qrc +++ b/src/resource.qrc @@ -93,5 +93,6 @@ Qt5/imports/FluentUI/Controls/ColorPicker/Content/PanelBorder.qml Qt5/imports/FluentUI/Controls/ColorPicker/Content/SBPicker.qml Qt5/imports/FluentUI/Controls/FluRangeSlider.qml + Qt5/imports/FluentUI/Controls/FluStaggeredView.qml