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

最新推荐文章于 2024-07-29 17:24:40 发布

神梦椋月

最新推荐文章于 2024-07-29 17:24:40 发布

阅读量1.2k

点赞数 1

分类专栏： Qt-Quick 文章标签： QML 瀑布流

本文链接：https://blog.csdn.net/qq1071247042/article/details/53135006

版权

本文通过一段代码示例，详细介绍了如何使用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
                }
            }