Item {
// width: 800
height: 600
Item {
id: flow
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
width: columns * (cardWidth+spacing) - spacing
anchors.margins: 8
property int spacing: 8
property int cardWidth: 80
property int animeDuration: 1200//动画周期+修改定时
property int columns: (parent.width)/(cardWidth+spacing)//每行多少个
property int length//cards数组的数量,默认为0,所有元素的数量
property var cards: []
property var bottoms: []
function update(item) {
var upCard = bottoms[0]//存储高度最低的元素
var column = 0
for (var i = 1;i<columns;i++) {//需找高度最低的底元素
if (bottoms[i].bottomY<upCard.bottomY) {
upCard = bottoms[i]
column = i
}
}
学习:QML 实现瀑布流(他人代码)
最新推荐文章于 2024-07-08 00:00:09 发布
本文通过一段代码示例,详细介绍了如何使用QML实现瀑布流布局。代码中利用Component动态创建元素,并通过随机高度增加视觉效果。通过初始化bottoms数组记录每列最下方的元素,以应对窗口宽度变化时的布局调整。程序启动时,计时器开始工作,随机添加或删除元素以保持瀑布流效果。添加元素时,找到最短列插入,同时维护元素间的上下关系。删除元素时,更新相邻元素的关联,并从数组中移除。
摘要由CSDN通过智能技术生成