GridLayout in a ScrollView adjust to width change
-
Hello everyone,
We are working on a Qt for WebAssembly application.
The main component is aGridLayout
with 2columns
and we also want to make it work on a mobile screen.
So based on the width we make the grid with 2rows
and a singlecolumn
.Unfortunately when viewing it on mobile the
Flickable id: flick
(which is insideColumnLayout { id: left
is not showing at all at the bottom in some cases and sometimes only shows a small part of theFlickable
.Below there is what I mean about showing small part of the
Flickable
(marked with red).
I want to make it stretch down and fill the remaining height at the bottom of it as much as possible.
The code snippet is here: Link to snippet
Any help with how to achieve this will be much appreciated :) -
I think I came up with something that seems to work but not sure if this is a good way to do this (I also changed from
ScrollView
toFlickable
because I saw online that it is better suited for touch devices.)Flickable { id: scroller anchors.fill: parent contentHeight: main.height contentWidth: main.width GridLayout { id: main height: scroller.width > 600 ? scroller.height : children.length * 800 width: scroller.width columns: 2 states: [ State { when: root.width <= 600 PropertyChanges {target: left; Layout.row: 1} PropertyChanges {target: right; Layout.row: 0} }, State { when: root.width > 600 PropertyChanges {target: left; Layout.column: 0} PropertyChanges {target: right; Layout.column: 1} } ]
Basically I set the GridLayout's height to the height of the
scroller
or to a very high height (800 *children.length
) if the width gets narrower (<= 600 in this case).Is there a better way to do it or is it "good enough"?