Solved GridView with horizonal and vertical flickable direction
-
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.0Rectangle {
width: 300; height: 300
ListModel {
id: listModelComponent.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 }
}
@ -
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: listModelComponent.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 } }
}@
-
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: listModelComponent.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 } }
}@
-
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!