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.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
    }
    

    }
    @



  • 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
        }
    }
    

    }@


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.