Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

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

    QML and Qt Quick
    3
    5
    2000
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • T
      TiffMaelite last edited by

      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.

      1 Reply Last reply Reply Quote 0
      • sierdzio
        sierdzio Moderators last edited by

        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.

        (Z(:^

        1 Reply Last reply Reply Quote 0
        • A
          Alek Śmierciak last edited by

          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. ;-)

          1 Reply Last reply Reply Quote 0
          • sierdzio
            sierdzio Moderators last edited by

            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.

            (Z(:^

            1 Reply Last reply Reply Quote 0
            • T
              TiffMaelite last edited by

              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!

              1 Reply Last reply Reply Quote 0
              • First post
                Last post