首页 > 其他 > 详细

Qt实现原生Flow实现不了的Item错误排列效果,类似淘宝商品展示

时间:2019-11-13 11:45:54      阅读:94      评论:0      收藏:0      [点我收藏+]

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQml.Models 2.12
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    FlowView {
        width: 300
        height: 400
        columns: 2
        spacing: 10
        model: ObjectModel {
            Rectangle { height: 95; width: 140; color: "red" }
            Rectangle { height: 30; width: 140; color: "green" }
            Rectangle { height: 200; width: 140; color: "blue" }
            Rectangle { height: 75; width: 140; color: "yellow" }
            Rectangle { height: 80; width: 140; color: "gray" }
            Rectangle { height: 300; width: 140; color: "pink" }
        }
    }
}

FlowView.qml

import QtQuick 2.12
import QtQuick.Controls 2.12

Item {
    id: root
    property int columns: 2
    property var model
    property int rowSpacing
    property int spacing
    clip: true
    property var geomeory: []

    ScrollView {
        anchors.fill: parent
        Repeater {
            model: root.model
            onItemAdded:  {//(int index, Item item)
                if (index % 2 === 0) { //偶数放左边
                    if (index - 2 >= 0) { //上面有,坐标累加
                        item.x = spacing
                        item.y = spacing + geomeory[index - 2].y + geomeory[index - 2].height
                    } else { //上面没有,直接放
                        item.x = spacing
                        item.y = spacing
                    }
                } else { //奇数放右边
                    if (index - 2 >= 0) { //上面有,坐标累加
                        item.x = spacing + geomeory[index - 1].x + geomeory[index - 1].width
                        item.y = spacing + geomeory[index - 2].y + geomeory[index - 2].height
                    } else { //上面没有,直接放. 奇数左边肯定有一个,直接用index - 1
                        item.x = spacing + geomeory[index - 1].x + geomeory[index - 1].width
                        item.y = spacing
                    }
                }
                geomeory.push(item)
                geomeory = geomeory
            }
            onItemRemoved: { //(int index, Item item)
                //TODO
            }
        }
    }
}

效果图如下:

技术分享图片

 感谢支持的涛哥,放一波 @威武的涛哥 知乎专栏链接,Qt方面的专家,而且非常乐于助人

https://zhuanlan.zhihu.com/TaoQt

Qt实现原生Flow实现不了的Item错误排列效果,类似淘宝商品展示

原文:https://www.cnblogs.com/wzxNote/p/11847627.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!