amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2025-07-01 23:51:48 +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
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>