[Solved] Scrollable Grid in Qt?



  • Hi,
    I'm trying to implement a scrollable (and flickable) grid
    I was able to do so with a model/delegate set up, but I was wondering if its possible with Grid{}

    This is what I have so far:

    @Flickable {
    anchors.fill: parent
    flickableDirection: Flickable.VerticalFlick
    boundsBehavior: Flickable.DragOverBounds
    clip: true
    Grid {
    columns: 3
    width: parent.width0.32; height: parent.height0.32
    spacing: parent.width*0.01
    Layout1 {}
    Layout2 {}
    Layout3 {}
    Layout4 {}
    Layout5 {}
    Layout6 {}
    Layout7 {}
    Layout8 {}
    Layout9 {}
    Layout10 {}
    Layout11 {}
    Layout12 {}
    Layout13 {}
    }
    }@

    Right now this allows me to flick, but it always bounces back to the top of the list and I dont want it to do that and I can't use the mouse wheel either to scroll down?

    How can I stop the rebound effect and also be able to use the mouse wheel to scroll with this Grid if possible?

    Thanks



  • Having tried to just go with the model/delegate way of getting the scrolling and no rebound effect I wanted got me closer to what I want to see. But with the model/delegate method, for some reason, the actual qml files don't actually create the shapes that I want them to. running the qml files individually gets the me shapes, but running it in the following way ends up with no shapes showing up:

    @FolderListModel {
    id: folderModel
    folder: "MainscreenLayouts"
    nameFilters: [".qml"]
    }
    Item {
    width: parent.width
    0.4; height: parent.height0.55
    anchors.top: instructions.bottom
    anchors.left: instructions.left
    GridView {
    id: gridModel
    snapMode: ListView.SnapToItem
    boundsBehavior: Flickable.StopAtBounds
    anchors.fill: parent
    clip: true
    model: folderModel
    delegate: fileDelegate
    Rectangle {
    id: scrollbar
    x: gridModel.width
    0.96; y: gridModel.visibleArea.yPosition * gridModel.height
    radius: 7
    width: 10
    height: gridModel.visibleArea.heightRatio * gridModel.height
    opacity: 0.7
    color: "black"
    }
    }
    }

    Component {
        id: fileDelegate
        Loader {
            source: folderModel.folder + "/" + fileName
        }
    }@
    

    any help would be great
    thx



  • The reason it bounces up is because the Flickable doesn't know how big its content area is. You can fix this by setting contentHeight on the Flickable:

    @
    import QtQuick 2.0
    import QtQuick.Controls 1.0
    Flickable {
    anchors.fill: parent
    flickableDirection: Flickable.VerticalFlick
    boundsBehavior: Flickable.DragOverBounds
    clip: true
    contentHeight: grid.height
    Grid {
    id: grid
    columns: 2
    width: parent.width0.32;
    spacing: parent.width
    0.01
    Repeater {
    model: 20
    Rectangle {width: 100; height: 100 ; border.width: 1}
    }
    }
    }
    @

    Note that you should not set the height property on the Grid, as the height of the grid itself should depend on how many items it contains. Especially when you have locked the vertical column count.



  • For the code you provide it works great, but now what if I'm trying to fill the grid with shapes created by other QML files in a separate folder called MainscreenLayouts

    @import QtQuick 2.0
    import QtQuick.Controls 1.0
    import "MainscreenLayouts"

    Item {
    id: questions3
    anchors.fill: parent
    //Layout Options
    Text {
    id: instructions
    x: parent.width0.07; y: parent.height0.20
    font.pixelSize: parent.height0.023
    color: "gray"
    text: "Select a layout"
    }
    Item {
    width: parent.width
    0.4; height: parent.height0.55
    anchors.top: instructions.bottom
    anchors.left: instructions.left
    Flickable {
    anchors.fill: parent
    flickableDirection: Flickable.VerticalFlick
    boundsBehavior: Flickable.DragOverBounds
    clip: true
    contentHeight: grid.height
    Grid {
    id: grid
    columns: 3
    width: parent.width
    0.3;
    spacing: parent.width*0.01
    Component{
    Layout1{}
    Layout2{}
    Layout3{}
    Layout4{}
    Layout5{}
    Layout6{}
    Layout7{}
    Layout8{}
    Layout9{}
    Layout10{}
    Layout11{}
    Layout12{}
    Layout13{}
    }
    }
    }
    }
    }@

    So there are 13 layouts to choose from, is there a way to show them, cuz individually I can see the shapes generated by LayoutX{}, but in the grid I can not?



  • nvm i got it!
    Thanks for the help with the scrolling :D


Log in to reply
 

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