CODEWITHSUNDEEP
qtlistviewgridviewqmlqt5
laurapons
laurapons

Reputation: 1103

QML ListView or GridView : diplay list of items inside a box

Is there any way to create this in QML? enter image description here

Like a ListView with horizontal flow (until it reaches the total width, then it continues on the next line).

ListView {
    anchors.fill: parent
    layoutDirection: Qt.Horizontal
    width: container.width; height: implicitHeight
    model: ListModel{ id: contactListModel }
    delegate: contactComponent
}

The issue with the code above is that it doesn't consider the limit on the width.

Or like a GridLayout, but without defining number of columns or rows.

Flickable {
    anchors.fill: parent
    contentHeight: grid.height
    contentWidth: container.width

    GridLayout {
        id: grid
        columns: 3
        width: container.width; height: implicitHeight
        columnSpacing: 0; rowSpacing: 0
        Repeater {
            model: ListModel{ id: contactListModel }
            delegate: contactComponent
        }
    }
}

The issue here is that if I don't define a number of columns or rows, then it keeps on adding items horizontally, regardless of the total width. And also, the spacing...

Thanks,

Upvotes: 0

Views: 2959

Answers (2)

m. c.
m. c.

Reputation: 895

You can try QML Flow type. I don't think Widget based system has this equivalent class. http://doc.qt.io/qt-5/qml-qtquick-flow.html#details

Upvotes: 1

GrecKo
GrecKo

Reputation: 7170

Flow is what you need.

And if you want to make it scrolable, you can wrap it in a Flickable (like you did with the GridLayout).

Flickable {
    anchors.fill: parent
    contentWidth: width
    contentHeight: flow.implicitHeight    
    Flow {
        id: flow
        width: parent.width
        spacing: 5
        Repeater {
            model: ListModel{ id: contactListModel }
            delegate: contactComponent
        }
    }
}

Upvotes: 5

Related Questions