March 5, 2012

goli goli
Ant Farmer
111 posts

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:

  1. GridView
  2.         {
  3.             id: myGrid
  4.  
  5.  
  6.             width: 800
  7.             height: 400
  8.  
  9.             anchors.centerIn: parent
  10.  
  11.             model: .....
  12.             delegate: .....
  13.             cellWidth: 200
  14.             cellHeight:200
  15.  
  16.             flow: GridView.TopToBottom
  17.             highlightFollowsCurrentItem: true
  18.             preferredHighlightBegin: 0
  19.             preferredHighlightEnd: cellWidth
  20.             highlightRangeMode : GridView.StrictlyEnforceRange
  21.             interactive: (count > 8)
  22.         }

This code allows scrolling horizontaly, and don’t allows arrangement of the elements row after row , but column after column.

any idea?

1 reply

March 12, 2012

Damian Jansen Damian Jansen
Lab Rat
18 posts

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.

  1. Item {
  2.     id: something
  3.     height: 400
  4.     width: 400
  5.  
  6.     Flickable {
  7.       anchors.fill: parent
  8.       contentHeight: myGrid.height
  9.       contentWidth: myGrid.width
  10.       GridView {
  11.           id: myGrid
  12.           width: 200 * Math.ceil(count/2)
  13.           height: 400
  14.  
  15.           model: 8
  16.           delegate: Rectangle { height: 200; width: 200; border.color: "black"
  17.               Text { anchors.centerIn: parent; text: model.index }
  18.           }
  19.           cellWidth: 200
  20.           cellHeight:200
  21.           interactive: false
  22.       }
  23.     }
  24. }

 Signature 

QtQuick Quality Engineer / Lab Monkey
Nokia Brisbane

 
  ‹‹ Language translation      ListView: how to access a delegate ››

You must log in to post a reply. Not a member yet? Register here!