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, Oct 31 '14 at 22:11
Thanks for your answer. When I do that I won't be able to scroll in both directions at the same time (diagonal). — SGbo, Nov 01 '14 at 15:28
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, Nov 01 '14 at 22:12
@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, Nov 10 '14 at 06:54
No problem! Hope the approach provided in the answer could help. — BaCaRoZzo, Nov 10 '14 at 09:02

BaCaRoZzo · Accepted Answer · 2014-11-10T10:41:49.043

1

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.

edited Nov 10 '14 at 10:41

answered Nov 10 '14 at 09:02

BaCaRoZzo

7,502
6
51
82

Thank you really much, that helped a lot! But I'm still wondering, why a ListView is not able to do this! – SGbo Nov 10 '14 at 10:31
ListView has VISUAL purposes of a list. Hence, ListView provides APIs to show something which visually acts like a list, i.e. scrolls vertically or horizontally depending on the orientation. On the contrary, GridView which has the purpose of showing a grid (and thus not just SINGLE consecutive elements) has both scrolling axes. In any case, given your list model, going for the parent of both (Flickable) is the easiest way for you. – BaCaRoZzo Nov 10 '14 at 11:07
@BaCaRoZzo : No, GridView unfortunately doesn't have both scrolling axes at the same time. – vsz Aug 31 '16 at 06:30
Definitely an oversight @vsz at the time of writing. – BaCaRoZzo Aug 31 '16 at 07:12
@BaCaRoZzo : I came to this question because I need a view which contains a huge amount of tiles. A `Repeater` which fills a 20000*20000 pixel `Item` with tens of thousands of subitems is too slow. A `GridView` would be perfect as it only renders items which are actually visible, too bad it can not be scrolled in both directions at the same time. – vsz Aug 31 '16 at 07:55

score 0 · Answer 2 · answered Jan 26 '22 at 21:29

0

I found it in the Qt Doc: https://doc.qt.io/qt-5/qml-qtquick-listview.html It works for me :)

answered Jan 26 '22 at 21:29

Krzysztof Sommerfeld

366
3
11

HowTo flick a QML ListView horizontal and vertical

2 Answers2

Linked