Alignment questions for QML GridView

[VRHans]

First, thanks to @SGaist for all the help so far, we managed to obtain several Qt licenses now and I'm sure we'll be using it for all kinds of things in the future.

Anyhow, I've got a section of my UI devoted to a group of icons that should be pressed to switch to a specific UI interface for that feature.

I have currently implemented this as a GridView, and everything looks good and clicks yield proper indices, et cetera.

The question I had is that because the collection of UI icons is variable depending upon the state of the application (for instance it could have 4 icon buttons in it or 8 depending upon conditions) I would like to know how to evenly (or 'more evenly') distribute elements of my list model within the gridview.

Ideally there'd be a way to say "center the collection of icons in the middle" - but it seems that I can only get the default GridView aligment of top left (left to right.)

Am I missing something simple or is this just the way that GridView is?

Is GridView the wrong component for this type of thing?

Thanks!

[Leonardo]

Hi. How many rows and columns are we talking about?

[VRHans]

That's the point, I don't know, it's dependent upon the state of the application.

I could be 1 row of 4 items, it could be two rows of four items, or two rows - one with four and one with three.

If I knew the composition ahead of time I would create a UI that satisfied that need.

I need a way to do this at runtime based upon a dynamic number of GridView items.

The one thing I can control is the size of the grid view items themselves - that's fixed (at 200 x 113.)

[Leonardo]

Hi. Indeed you can't center items in a GridView. Maybe you could play with some properties to find a better disposition. You can't center items, but you can center the grid itself. For example:

GridView {
	anchors.horizontalCenter: parent.horizontalCenter
	width: Math.min(model.count, Math.floor(parent.width/cellWidth))*cellWidth
}

This would make the grid "hug" its content and be centered in its parent. Note that the items themselves are still left-aligned, but as the grid is tight and centered they all seem to be too. The only problem with this is when you have an incomplete last row. Items in this row won't look centered, of course.

If you feel like taking the challenge for truly center-aligned items, maybe you could use a Repeater and implement your own laying out code.

[VRHans]

Thanks Leonardo, some derivative of this may be the way I can go forward :).

[VRHans]

In the end I went with a compromise solution that made some assumptions about the max width/height of the gridview:

width: Math.min( model.count, 3 ) * cellWidth
height: ( model.count % 3 == 0 ) ? ( Math.min( model.count / 3, 3 ) * cellHeight ) : ( Math.min( ( ( model.count / 3 ) + 1 ), 3 ) * cellHeight )
x: ( parent.width / 2 ) - ( width / 2 )
y: ( parent.height / 2 ) - ( height / 2 )

In this case I can safely assume that the view should never be more than 3 elements wide or 3 elements high.