GridView with horizonal and vertical flickable direction

ogee77

Hi,

I am trying to obtain a GridView that would support flicking in both horizontal and vertical directions at the same time.

In the code snippet below the view scrolls only vertically disregard of setting flickableDirection to Flickable.HorizontalAndVerticalFlick.

I would like to have a sort of fixed grid built at the startup so I could traverse across it both in left-right and bottom-up directions.
Is there a way to achieve this using GridView?

I have only just started learning QML so any tips would be of great value to me.

@
import QtQuick 1.0

Rectangle {
width: 300; height: 300
ListModel {
id: listModel

    Component.onCompleted: {
        for (var i=0; i<1000; i++)
        {
            listModel.append({name: "Test"})
        }
    }
}

Component {
    id:textDelegate
    Text { text: name }
}

GridView {
    cellWidth: 30; cellHeight: 20
    anchors.margins: 10
    anchors.fill: parent
    model: listModel
    delegate: textDelegate

    flickableDirection: Flickable.HorizontalAndVerticalFlick
}

}
@

MartinJ

GridView is designed to layout its content within its width (assuming FlowLeftToRight). This is rather unfortunate, since it is not unusual to do what you want. I've created a task for this https://bugreports.qt-project.org/browse/QTBUG-26582

For now, you could put the GridView in a Flickable, which works except that the gesture grabbing will only allow flicking in one direction at a time.

@import QtQuick 1.0

Rectangle {
width: 300; height: 300
ListModel {
id: listModel

    Component.onCompleted: {
        for (var i=0; i<1000; i++)
        {
            listModel.append({name: "Test"})
        }
    }
}

Component {
    id:textDelegate
    Text { text: name }
}

Flickable {
    anchors.fill: parent
    contentHeight: height
    contentWidth: 600
    GridView {
        cellWidth: 30; cellHeight: 20
        anchors.margins: 10
        anchors.fill: parent
        model: listModel
        delegate: textDelegate
    }
}

}@

mchiasson

this solution proposed will 'visually' work, but I think it will be sub-optimal: GridView automatically culls the items that are out of range, where plain Flickable wouldn't do it. I know this thread is quite old, but I wanted to use the GridView to create a tiled map, but the GridView doesn't have the required mechanism to achieve what I want. I also upvoted https://bugreports.qt.io/browse/QTBUG-26582 hoping that it will eventually be done. Thanks!