Responsive layout best practices in QML

lasmr

Hi,

I would like to create a responsive component like this:

If there is enough horizontal space, the component should be displayed in A mode, if not use B mode. The blue zones should take any horizontal space remaining.

I have been playing with Layouts, but I am not sure if I can achieve that using only them.

I can duplicate the squares content and hide/show them depending on the kind of layout I want. But it doesn't seem right to me...

Any ideas?