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


    main.qml

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

  • 相关阅读:
    Spring Cloud Gateway 路由动态配置
    Spring cloud Gateway HTTS配置
    Spring Gateway 全局过滤器 Global Filters
    Spring Cloud Gateway内置GatewayFilter工厂类(四)
    Spring Cloud Gateway内置GatewayFilter工厂类(三)
    lumen框架的辅助函数
    php算法基础----时间复杂度和空间复杂度
    php数据结构之二叉树
    PHP利用二叉堆实现TopK-算法的方法详解
    php实现菲波那切数列和杨辉三角
  • 原文地址:https://www.cnblogs.com/wzxNote/p/11847627.html
Copyright © 2020-2023  润新知