2 dimensions flickable GridView
-
Hello.
I want to get a gridview scollable horizontally AND vertically.
I have got 100 items with 10 columns and 10 rows and my view is smaller and I want to drag my view everywhere on this surface.
How to do that?To begin, I tried with only 9 items, 500x500, 3 columns and 3 rows, and a view size of 800x800.
I wrote that:
@
GridView{
width: 800
height: 800
contentHeight: 1500
contentWidth: 1500
clip: true
anchors.centerIn: parentmodel: itemList delegate: itemDelegate cellHeight: 500 cellWidth: 500 }
@
But I get an alone column with 9 rows and my view is flickable vertically, not horizontally.Perhaps, one solution is to create 3 vertical gridview (with 3 items into each), that I insert into a parent horizontal gridview?
But this is stupid. these are lists, not a grid! -
Ok, I have been able to do what I wanted, by using a repeater and a flickable:
@
ListModel{
id: imageModel
ListElement{ x: 0; y: 0; name: "image1:1.png"}
ListElement{ x: 500; y: 0; name: "image2:1.png"}
ListElement{ x: 1000; y: 0; name: "image3:1.png"}
ListElement{ x: 0; y: 500; name: "image1:2.png"}
ListElement{ x: 500; y: 500; name: "image2:2.png"}
ListElement{ x: 1000; y: 500; name: "image3:2png"}
ListElement{ x: 0; y: 1000; name: "image1:3.png"}
ListElement{ x: 500; y: 1000; name: "image2:3.png"}
ListElement{ x: 1000; y: 1000; name: "image3:3.png"}
}Component{ id: imageDelegate Image{ x: model.x y: model.y height: 500 width: 500 source: model.name } } Flickable{ width: 800 height: 800 anchors.centerIn: parent clip: true contentWidth: 1500 contentHeight: 1500 pixelAligned: true Repeater{ id: myGridView delegate: imageDelegate model: imageModel } }
@
But it is very strange that we cannot do a grid with a Grid View :-
No? -
The bad side is that a ListView or a GridView manage the cache memory (with cacheBuffer propertie) while with an Repeater, I have to create and delete my items manually :-(.