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. How to display a grid of non-uniform cells ?
Forum Update on Monday, May 27th 2025

How to display a grid of non-uniform cells ?

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
qmlgrid
19 Posts 4 Posters 6.1k 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.
  • R raven-worx
    13 Jul 2017, 06:54

    @mrjj said in How to display a grid of non-uniform cells ?:

    Where did you find a good ref for the Masonry algorithm ?

    There are some algorithmns on the web. Basically i looked at various JavaScript implementations and based on them i implemented it in QML/C++.
    There are more simple ones and more sophisticated ones available.

    @SeeLook
    The problem with the Flow element is that it doesn't takes care of the uniform row height. But which could be easily achieved though i guess by setting a fixed height to the items.
    But achieving a "filled width" isn't that easy.

    M Offline
    M Offline
    mrjj
    Lifetime Qt Champion
    wrote on 13 Jul 2017, 07:21 last edited by
    #6

    @raven-worx
    Ok, i did see the java script ones but wanted language neutral explanation but
    i guess it a variant of bin packing that is used.

    R 1 Reply Last reply 13 Jul 2017, 07:24
    0
    • M mrjj
      13 Jul 2017, 07:21

      @raven-worx
      Ok, i did see the java script ones but wanted language neutral explanation but
      i guess it a variant of bin packing that is used.

      R Offline
      R Offline
      raven-worx
      Moderators
      wrote on 13 Jul 2017, 07:24 last edited by raven-worx
      #7

      @mrjj said in How to display a grid of non-uniform cells ?:

      i guess it a variant of bin packing that is used.

      yes exactly, basically it's bin packing. You can design it really simple or pretty smart. There are numerous ways to implement such layout. Depending on the features desired.

      My implementation for example has the ability to stretch a certain item over 2 columns/rows. Making an item more present in the layout.

      I hope i can provide the plugin sometime this year. Will make an anouncement in the showcase sub-forum ;)

      --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
      If you have a question please use the forum so others can benefit from the solution in the future

      M 1 Reply Last reply 13 Jul 2017, 07:30
      0
      • R raven-worx
        13 Jul 2017, 07:24

        @mrjj said in How to display a grid of non-uniform cells ?:

        i guess it a variant of bin packing that is used.

        yes exactly, basically it's bin packing. You can design it really simple or pretty smart. There are numerous ways to implement such layout. Depending on the features desired.

        My implementation for example has the ability to stretch a certain item over 2 columns/rows. Making an item more present in the layout.

        I hope i can provide the plugin sometime this year. Will make an anouncement in the showcase sub-forum ;)

        M Offline
        M Offline
        mrjj
        Lifetime Qt Champion
        wrote on 13 Jul 2017, 07:30 last edited by
        #8

        @raven-worx
        Oh that sounds helpful.
        Is the project on git or still private ?

        Ok, i hope u get some time.

        Thx

        R 1 Reply Last reply 13 Jul 2017, 08:07
        0
        • M mrjj
          13 Jul 2017, 07:30

          @raven-worx
          Oh that sounds helpful.
          Is the project on git or still private ?

          Ok, i hope u get some time.

          Thx

          R Offline
          R Offline
          raven-worx
          Moderators
          wrote on 13 Jul 2017, 08:07 last edited by
          #9

          @mrjj
          yes, it's on git but also it's private :)

          It's not determined yet if it will be a commercial or an open-source product in the end.
          Beta testing will be free though. ;)

          Nevertheless i created the topic now and will post any news there in the future for everyone who is interested.

          --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
          If you have a question please use the forum so others can benefit from the solution in the future

          M 1 Reply Last reply 13 Jul 2017, 09:33
          1
          • R raven-worx
            13 Jul 2017, 08:07

            @mrjj
            yes, it's on git but also it's private :)

            It's not determined yet if it will be a commercial or an open-source product in the end.
            Beta testing will be free though. ;)

            Nevertheless i created the topic now and will post any news there in the future for everyone who is interested.

            M Offline
            M Offline
            mrjj
            Lifetime Qt Champion
            wrote on 13 Jul 2017, 09:33 last edited by
            #10

            @raven-worx
            Super
            QrwAndroid sounds awesome :)

            1 Reply Last reply
            0
            • S SeeLook
              12 Jul 2017, 18:21

              Maybe Flow can suit You?

              C Offline
              C Offline
              Curtwagner1984
              wrote on 13 Jul 2017, 12:23 last edited by
              #11

              @SeeLook said in How to display a grid of non-uniform cells ?:

              Maybe Flow can suit You?

              As far as I can see Flow doesn't work with a model like Gridview does.

              1 Reply Last reply
              0
              • S Offline
                S Offline
                SeeLook
                wrote on 13 Jul 2017, 12:27 last edited by
                #12

                @Curtwagner1984
                And what if to squeeze Repeater inside the Flow?

                C 1 Reply Last reply 13 Jul 2017, 12:32
                0
                • S SeeLook
                  13 Jul 2017, 12:27

                  @Curtwagner1984
                  And what if to squeeze Repeater inside the Flow?

                  C Offline
                  C Offline
                  Curtwagner1984
                  wrote on 13 Jul 2017, 12:32 last edited by
                  #13

                  @SeeLook said in How to display a grid of non-uniform cells ?:

                  @Curtwagner1984
                  And what if to squeeze Repeater inside the Flow?

                  I don't know. Gridview creates and destroys delegates as needed. If I'll put a repeater in Flow and I have let's say 500 images, they would all have to be loaded to memory.

                  1 Reply Last reply
                  0
                  • S Offline
                    S Offline
                    SeeLook
                    wrote on 13 Jul 2017, 12:42 last edited by
                    #14

                    I've already tried a Repeater with dynamically changed model size. Seemed to work and when size was decreased items were deleted (I believe...)
                    But better I will not mess You up. This is already out of my experience.

                    1 Reply Last reply
                    1
                    • C Offline
                      C Offline
                      Curtwagner1984
                      wrote on 13 Jul 2017, 12:54 last edited by
                      #15

                      Can you elaborate a bit more about how and what you did, so that I may try it too ?

                      1 Reply Last reply
                      0
                      • S Offline
                        S Offline
                        SeeLook
                        wrote on 13 Jul 2017, 13:10 last edited by
                        #16

                        If I were You, I might try something like this:

                        Flow {
                          Repeater {
                            model: yourData.length
                            Image {
                              source: yourData[index]
                              sourceSize.height: 200 // or other fixed value
                            }
                          }
                        }
                        

                        If yourData is QStringList or just QML array of strings, it can be directly set as a model of the Repeater:

                         model: yourData
                        

                        and accessible inside Image this way:

                        source: modelData
                        

                        I hope this is some clue for You

                        C 1 Reply Last reply 13 Jul 2017, 13:15
                        2
                        • S SeeLook
                          13 Jul 2017, 13:10

                          If I were You, I might try something like this:

                          Flow {
                            Repeater {
                              model: yourData.length
                              Image {
                                source: yourData[index]
                                sourceSize.height: 200 // or other fixed value
                              }
                            }
                          }
                          

                          If yourData is QStringList or just QML array of strings, it can be directly set as a model of the Repeater:

                           model: yourData
                          

                          and accessible inside Image this way:

                          source: modelData
                          

                          I hope this is some clue for You

                          C Offline
                          C Offline
                          Curtwagner1984
                          wrote on 13 Jul 2017, 13:15 last edited by
                          #17

                          @SeeLook

                          This could work... I'll have to check if it disposes of elements that aren't visible.

                          1 Reply Last reply
                          0
                          • S Offline
                            S Offline
                            SeeLook
                            wrote on 13 Jul 2017, 13:25 last edited by
                            #18

                            There has to be Flickable that wraps all...

                            C 1 Reply Last reply 13 Jul 2017, 13:49
                            0
                            • S SeeLook
                              13 Jul 2017, 13:25

                              There has to be Flickable that wraps all...

                              C Offline
                              C Offline
                              Curtwagner1984
                              wrote on 13 Jul 2017, 13:49 last edited by
                              #19

                              @SeeLook Looks like the model can be a QAbstructListModel which is exactly what I use...
                              It's interesting, I'll try this out.

                              Other problems are the insert and remove function that GridView supports, as well as the shouldfechmore and fetchmore functions. (implemented inQAbstructListModel)

                              1 Reply Last reply
                              0

                              15/19

                              13 Jul 2017, 12:54

                              • Login

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