HowTo flick a QML ListView horizontal and vertical

Question

I want to display a big list on a small display. The problem with the ListView is, that I have to setup a orientation, whether it is flickable horizontal or vertical.

What I tried is:

I inserted the ListView in a Flickable, and setup the Flickable for horizontal scroll and the view for vertical scroll, but then I can't flick to both sides at the same time
I tried to set the flickableDirection property of the ListView to Flickable.HorizontalAndVerticalFlick, but this didn't work.

Heres a simple example:

import QtQuick 2.2
import QtQuick.Window 2.1

Window {
    visible: true
    width: 360
    height: 360

    ListModel {
        id: fruitModel

        ListElement {
            name: "Apple"
            cost: 2.45
        }
        ListElement {
            name: "Orange"
            cost: 3.25
        }
        ListElement {
            name: "Banana"
            cost: 1.95
        }
    }

    ListView {
        anchors.fill: parent

        model: fruitModel

        delegate: Rectangle {
            id: delegateRect
            height: 150
            width: 545

            border.color: "steelblue"
            border.width: 1

            Row {
                Text {
                    id: nameLabel
                    width: 345
                    text: name
                }

                Text {
                    id: costLabel
                    width: 200
                    text: cost
                }
            }
        }
    }
}

What about a different approach in which each delegate is a flickable in a plain Listview? The Listview can provide the vertical (horizontal resp.) scroll whereas you can flick the delegate horizontally (vertically resp.) — BaCaRoZzo
Thanks for your answer. When I do that I won't be able to scroll in both directions at the same time (diagonal). — SGbo
So you want the scrolling ability of a Flickable object with the content laid out through a ListView and only the former to intercept the mouse interactions (including diagonal scrolling), is that correct? — BaCaRoZzo
@BaCaRoZzo Sorry for my late answer. I've been on holiday. Normally I would just like to implement vertical, horizontal and diagonal scroll in my ListView but I don't know how. Your assumption is correct! If it is not possible to use the ListView options, I'd like to use a Flickable around the ListView that displays the content. — SGbo
No problem! Hope the approach provided in the answer could help. — BaCaRoZzo

BaCaRoZzo BaCaRoZzo · Accepted Answer · 2014-11-10T09:02:10

I think the solution you are searching for is Repeater.

The Repeater type is used to create a large number of similar items. Like other view types, a Repeater has a model and a delegate: for each entry in the model, the delegate is instantiated in a context seeded with data from the model. A Repeater item is usually enclosed in a positioner type such as Row or Column to visually position the multiple delegate items created by the Repeater.

The resulting Row (Column resp.) can be enclosed in a Flickable which provides the actual flicking ability.

HowTo flick a QML ListView horizontal and vertical

1 Answers