[Solved] Scrollable Grid in Qt?

[mozeni]

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

[mozeni]

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

[Jens]

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

[mozeni]

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.width0.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.width0.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?

[mozeni]

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