Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Flow : "compact" vertically on horizontal flow



  • I am using a Flow Item to recreate a "cascade" of items
    3edc5e67-944d-43c5-a9b3-dbd22368d861-image.png

    like this (note : I added the layout items to try to solve this, but it didnt work:

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Layouts 1.3
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
        Flow{
            //anchors.fill:parent
            width:parent.width
            Rectangle{
                color:"red"
                width:parent.width / 2
                height:30
                Layout.alignment: Layout.Top
                Layout.preferredHeight: height
                Layout.fillHeight: false
            }
            Rectangle{
                color:"blue"
                width:parent.width / 2
                height:60
                Layout.alignment: Layout.Top
                Layout.preferredHeight: height
                Layout.fillHeight: false
            }
            Rectangle{
                color:"green"
                width:parent.width / 2
                height:30
                Layout.alignment: Layout.Top
                Layout.preferredHeight: height
                Layout.fillHeight: false
            }
            Rectangle{
                color:"pink"
                width:parent.width / 2
                height:50
                Layout.alignment: Layout.Top
                Layout.preferredHeight: height
                Layout.fillHeight: false
            }
            Rectangle{
                color:"yellow"
                width:parent.width / 2
                height:30
                Layout.alignment: Layout.Top
                Layout.preferredHeight: height
                Layout.fillHeight: false
            }
        }
    }
    

    How can I compact the smaller items on the right and get rid of the "empty" white areas?

    EDIT :
    Here's the version with a repearter, same result:

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Layouts 1.3
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
        ListModel {
            id:myModel
            ListElement{
                color: "red"
                height: 30
            }
            ListElement{
                color:"blue"
                height:60
            }
            ListElement{
                color:"green"
                height: 30
            }
            ListElement{
                color:"pink"
                height:50
            }
            ListElement{
                color:"yellow"
                height:30
            }
        }
        Flow{
            //anchors.fill:parent
            width:parent.width
            Repeater{
                model : myModel
                delegate:Rectangle{
                    color:model.color
                    width:parent.width / 2
                    height:model.height
                    Layout.alignment: Layout.Top
                    Layout.preferredHeight: height
                    Layout.fillHeight: false
                }
            }
        }
    }
    
    


  • As a reply;
    the qquickflow class (implemented in qtdeclarative) does not support individual heights.
    We will customize this component with our own version.


Log in to reply