amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2024-11-30 07:03:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

add FluStaggeredView

Browse Source
This commit is contained in:
zhuzichu 2023-08-30 17:18:49 +08:00
parent 5fc7ae7e89
commit 5b3834ed8f
14 changed files with 278 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
example/qml-Qt6/component/CodeExpander.qml
View File

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

6
example/qml-Qt6/global/ItemsOriginal.qml
View File

@ -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"

59
example/qml-Qt6/page/T_StaggeredView.qml Normal file
View File

@ -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);
}
}

4
example/qml-Qt6/window/MainWindow.qml
View File

@ -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{

3
example/qml/component/CodeExpander.qml
View File

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

6
example/qml/global/ItemsOriginal.qml
View File

@ -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"

2
example/qml/page/T_RemoteLoader.qml
View File

@ -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"
}
}

61
example/qml/page/T_StaggeredView.qml Normal file
View File

@ -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);
}
}

4
example/qml/window/MainWindow.qml
View File

@ -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{

1
example/resource.qrc
View File

@ -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>

68
src/Qt5/imports/FluentUI/Controls/FluStaggeredView.qml Normal file
View File

@ -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()
}
}

1
src/Qt5/imports/FluentUI/qmldir
View File

@ -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

68
src/Qt6/imports/FluentUI/Controls/FluStaggeredView.qml Normal file
View File

@ -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()
}
}

1
src/resource.qrc
View File

@ -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>