Problems with Gridview

Dynamite101

Hey i've been learning qml every now and then but still feel it's not as easy as claimed to get to grips with, so i've kind of stuck to learning normal Qt.

my code isn't behaving like i want it. I'm simply trying to create a window using Item{} and in this item i parent a Gridview that fills its parent with 3 visible rows and 2 visible columns, that take up the windows height & width, although more rows below are out of the gridview/window/parent which might be the problem.
my Gridview's models are VisualItemModel elements that basically hold a rect that parents an image.

The problem is when i scroll the models out of view then let go, when they bounce back, they return all over the place outside of their bounding rectangle, and are no longer aligned with each other. I do not want all the rows to be visible at the same time and I don't know how else to make a window the correct size and a gridview with rows that overflow without making a very big oversized ugly window/UI. Here's the section of the troubling code.

http://bpaste.net/show/7mb4bqMMH18kn79RrRD6/

I understand once i scroll onto elements past row 3, i am out of the bounding Rectangle, but how else can i achieve what i want while keeping my main window's width & height properties the same or not appearing bigger? Also Is there a better method than using a gridview with a VisualItemModel? A repeater didn't seem a good idea.

Jens

The main reason it does not work is that GridView needs to know the cellwidth and cellheight explicitly. Setting those to width/2 and height/3 and assigning each item the same will fix the resize problem.

VisualItemModel is certainly not the right model in this case as you are duplicating what is essentially the same item over again and the only changing variable is the image source. Here is a cleaner version just using a model and delegate:
@
import QtQuick 2.1

GridView {
id: grid
width: 255
height: 306

cellWidth: width/2
cellHeight: height/3

model: ListModel {
    ListElement { img: "image/abel.jpg" }
    ListElement { img: "image/bruce.jpg" }
    ListElement { img: "image/sagat.jpg" }
    ListElement { img: "image/abel.jpg" }
}
delegate:  Rectangle {
    width: cellWidth
    height: cellHeight
    border{width: 2; color: "black"}
    Image { source: img ; anchors.fill: parent }
}

}
@

Dynamite101

[quote author="Jens" date="1375881150"]
VisualItemModel is certainly not the right model in this case as you are duplicating what is essentially the same item over again and the only changing variable is the image source. Here is a cleaner version just using a model and delegate:
@
import QtQuick 2.1

GridView {
id: grid
width: 255
height: 306

cellWidth: width/2
cellHeight: height/3

model: ListModel {
    ListElement { img: "image/abel.jpg" }
    ListElement { img: "image/bruce.jpg" }
    ListElement { img: "image/sagat.jpg" }
    ListElement { img: "image/abel.jpg" }
}
delegate:  Rectangle {
    width: cellWidth
    height: cellHeight
    border{width: 2; color: "black"}
    Image { source: img ; anchors.fill: parent }
}

}
@

[/quote]

Hi thanks for the code. I've done it the way you've shown and the images are no longer in columns. Just 1 straight row now. I'm not sure why as the width and height calculations are correct . Here's my complete code:

http://bpaste.net/show/gh9H5WdfZA470rgAulmL/--

Also what is VisualItemModel useful for? I'm still on using Qt.Quick 1.0 btw. Also you made the GridView the main parent. I didn't know this was possible. Usually tutorials show either Item or Rectangle as the main window. Are these just guidelines? It's actually ok to use other elements?

Jens

I honestly don't know why it is not working for you now as it is working with Qt Quick 2 which I am using.

The VisualItemModel is quite a narrow use case but if you need a separate delegate per item in your model it might make sense. I think it's a case of, if you don't know what to use it for then don't use it :)

Any visual item (deriving from QQuickItem) can always be a root item. There is nothing special a bout Rectangle apart from the fact that it is a QQuickItem. The fact that rectangle is used in examples is just for consistency. Often you want a frame around the items you are demonstrating but I am sure you can find some counter examples if you look around.

The only "special" root item is Window/ApplicationWindow which can also be a root item in many cases, but it will not work if you use it as a root item in a QQuickView as QQuickView itself is a window.

Dynamite101

Thanks for your response and explanations Jens. I've definately learnt a bit more about Qml.