[Solved] How to display items in a centered Flow-like way?

TiffMaelite

Hi,

I was wondering if there was a way to display child items in the way the Flow item does (side by side as long as there is enough room and then on the following row/column depending on the orientation/disposition)... but in centered way. That is to say, with an horizontal disposition, each "row" of items to be horizontally centered in the Flow item. And of course, with a vertical disposition, each "column" of items to be vertically centered in the Flow item.

For example, within a Flow item with spacing property of 0 and containing 3 items each of width half the flow width, to have the 3rd item centered on its row; but to have it look like a grid when a 4th similar item is added.
I cannot anchor statically the contained items since the container size as much as the quantity of contained items may may change.

Any idea on how I can achieve such a thing?
I am currently developing on Qt5.1 beta, so using a Layout item from QtQuickControls.Layout module is totally acceptable.

Thanks in advance.

sierdzio

I think you can hack around with "ListView snapMode":http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-listview.html#snapMode-prop to get what you need.

Alek Śmierciak

bq. For example, within a Flow item with spacing property of 0 and containing 3 items each of width half the flow width, to have the 3rd item centered on its row; but to have it look like a grid when a 4th similar item is added.

Even though using QtQuick.Layouts is tempting, it is only good if you don't do any size binding for the items you wish to put in a layout, since then it breaks the whole layout concept. Correct me if I misunderstood what you said about items width above.

Dynamic item addition works well in ListView and GridView and even though GridView is better suited for the concept of horizontal (column) layout, it wouldn't allow centering and justifying rows/columns.

Flow is also a good option, actually, it might be the most appropriate one.

This is interesting as I have tried a couple solutions with stock items and haven't found a solution that reaches all your goals. As basically you want a perfect fusion of Flow and GridView, it might be that you're all alone for some good hacking. ;-)

sierdzio

For some of my projects I'm using a combination of Row/ Column with Flickable. Requires a bit more coding, but for some use cases is more flexible and useful.

TiffMaelite

Thanks for you answers.
I ended up doing the following, even though it makes the last(s) items bigger than the others:

@GridLayout {
id: grid
property alias model: repeater.model
property int count: repeater.model.size
Repeater {
id: repeater
delegate: Item {
Layout.fillHeight: true
Layout.fillWidth: true
Layout.columnSpan: computeSpan(true)
Layout.rowSpan: computeSpan(false)

      function computeSpan(columnAxis) {
        var axisLength = 0;
        if(columnAxis) {
          if(grid.flow == GridLayout.TopToBottom) {
             return 1;
          } else {
            axisLength = grid.columns;
          }
        } else {
          if(grid.flow == GridLayout.LeftToRight) {
             return 1;
          } else {
            axisLength = grid.rows;
          }
        }
        if(axisLength <= 0) {
          return 0;
        } else {
           var remaining = grid.count%axisLength;
           if((remaining == 0) || (index < grid.count-remaining)) {
             return 1;
           } else {
             return Math.floor(axisLength/remaining);
           }
        }
    }
}

}@

Maybe it will help someone, but I anyone has a better idea, I'm willing to hear/see it!