How to display a grid of non-uniform cells ?

Curtwagner1984

Hello,
My app has a picture viewing element to it, right now I'm using Gridview to display image thumbnails to the user. I want the thumbnail to include the whole image so I use the fillMode: Image.PreserveAspectFit. However different images have different aspect ratios, and as a result of that I have a lot of unused space.

I wonder if it's possible to use something like Gridview that doesn't force all the cells to be of the same size ...
For example like it's done in Google Photos:
0_1499862378948_hero[1].jpg

As you can see the thumbnails are in the same height, but of different width. I want to know how to achieve the same thing with QML ?

raven-worx

@Curtwagner1984
see QTBUG-57549
Unfortunately i do not find much time to finish my QML extension plugin, which contains such layout element.

SeeLook

Maybe Flow can suit You?

mrjj

@raven-worx
Where did you find a good ref for the Masonry algorithm ?

raven-worx

@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.

mrjj

@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.

raven-worx

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

mrjj

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

Ok, i hope u get some time.

Thx

raven-worx

@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.

mrjj

@raven-worx
Super
QrwAndroid sounds awesome :)

Curtwagner1984

@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.

SeeLook

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

Curtwagner1984

@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.

SeeLook

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.

Curtwagner1984

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

SeeLook

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

Curtwagner1984

@SeeLook

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

SeeLook

There has to be Flickable that wraps all...

Curtwagner1984

@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)