GridView - Arrangement of Elements
I need to create a GridView , with 2 rows and 4 columns. I want to insert the elements into the grid row after row, and also to enable scrolling of the grid from left to right.
This is what I tried:
- GridView
- {
- id: myGrid
- width: 800
- height: 400
- anchors.centerIn: parent
- model: .....
- delegate: .....
- cellWidth: 200
- cellHeight:200
- flow: GridView.TopToBottom
- highlightFollowsCurrentItem: true
- preferredHighlightBegin: 0
- preferredHighlightEnd: cellWidth
- highlightRangeMode : GridView.StrictlyEnforceRange
- interactive: (count > 8)
- }
This code allows scrolling horizontaly, and don’t allows arrangement of the elements row after row , but column after column.
any idea?
1 reply
You’re basically after the unconsidered “lay out from left to right, but also scroll that way”.
What you might have to do is place the GridView on a Flickable.
- Item {
- id: something
- height: 400
- width: 400
- Flickable {
- anchors.fill: parent
- contentHeight: myGrid.height
- contentWidth: myGrid.width
- GridView {
- id: myGrid
- width: 200 * Math.ceil(count/2)
- height: 400
- model: 8
- delegate: Rectangle { height: 200; width: 200; border.color: "black"
- Text { anchors.centerIn: parent; text: model.index }
- }
- cellWidth: 200
- cellHeight:200
- interactive: false
- }
- }
- }
You must log in to post a reply. Not a member yet? Register here!

