学习:QML 实现瀑布流(他人代码)

本文通过一段代码示例,详细介绍了如何使用QML实现瀑布流布局。代码中利用Component动态创建元素,并通过随机高度增加视觉效果。通过初始化bottoms数组记录每列最下方的元素,以应对窗口宽度变化时的布局调整。程序启动时,计时器开始工作,随机添加或删除元素以保持瀑布流效果。添加元素时,找到最短列插入,同时维护元素间的上下关系。删除元素时,更新相邻元素的关联,并从数组中移除。
摘要由CSDN通过智能技术生成

先来段代码(代码来自:http://www.qtdream.com/topic/769/qtquick-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E7%80%91%E5%B8%83%E6%B5%81/4):

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
                }
            }
        
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值