Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Auto-reformatting rows based on number of QML Elements
Forum Update on Monday, May 27th 2025

Auto-reformatting rows based on number of QML Elements

Scheduled Pinned Locked Moved QML and Qt Quick
7 Posts 3 Posters 1.5k Views
  • 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.
  • D Offline
    D Offline
    danimals
    wrote on 6 Aug 2014, 23:20 last edited by
    #1

    I am trying to design a UI in which there will be a row of rectangular elements. I need some way to determine how many elements are in the row and if this number exceeds 5, to create a new row. I would just hard code it, but the problem is that it's future customers who will potentially be adding rectangles to the row and I want their only job to be adding the rectangles and not having to worry about creating new rows, etc. Is there a straightforward way to do this with QML? Or even some way to determine the number of elements within a row?

    Thanks in advance.

    1 Reply Last reply
    0
    • S Offline
      S Offline
      sierdzio
      Moderators
      wrote on 7 Aug 2014, 06:07 last edited by
      #2

      You can use "Flow":http://qt-project.org/doc/qt-5/qml-qtquick-flow.html element.

      (Z(:^

      1 Reply Last reply
      0
      • P Offline
        P Offline
        p3c0
        Moderators
        wrote on 7 Aug 2014, 06:44 last edited by
        #3

        bq. Or even some way to determine the number of elements within a row?

        @
        row.children.length
        @

        157

        1 Reply Last reply
        0
        • D Offline
          D Offline
          danimals
          wrote on 7 Aug 2014, 18:38 last edited by
          #4

          Thank you for the Flow suggestion! Exactly what I was looking for.

          1 Reply Last reply
          0
          • S Offline
            S Offline
            sierdzio
            Moderators
            wrote on 7 Aug 2014, 18:50 last edited by
            #5

            :-) Hope it helps. Happy coding :-)

            (Z(:^

            1 Reply Last reply
            0
            • D Offline
              D Offline
              danimals
              wrote on 7 Aug 2014, 20:48 last edited by
              #6

              Quick follow-up: Do you know of a way that I can determine the number of elements that exist in a single row of the Flow? I'm trying to figure out a way to have all the rectangles in the Flow centered within it. Right now, it looks like they naturally align to the left anchor.

              1 Reply Last reply
              0
              • S Offline
                S Offline
                sierdzio
                Moderators
                wrote on 8 Aug 2014, 05:07 last edited by
                #7

                As far as I know, you have no control over alignment in Flow. Maybe there is some way by - example - using attached properties, but I doubt it. You can probably achieve good results by carefully sizing the Flow element and it's contents, but that is not possible in all situations + quite fragile.

                An alternative would be to use the "Grid":http://qt-project.org/doc/qt-5/qml-qtquick-grid.html element.

                (Z(:^

                1 Reply Last reply
                0

                2/7

                7 Aug 2014, 06:07

                topic:navigator.unread, 5
                • Login

                • Login or register to search.
                2 out of 7
                • First post
                  2/7
                  Last post
                0
                • Categories
                • Recent
                • Tags
                • Popular
                • Users
                • Groups
                • Search
                • Get Qt Extensions
                • Unsolved