Unsolved QML: ScrollView with GridView inside: adjust cell to available space (with or without scroll bar)
-
Hi,
I have a QML ScrollView with a GridView inside (rectangles in 3 columns) and I have a repaint problem when the scroll appears/disappears.
The window has fixed width (300) and variable height, so the scroll appears when window height is less than content height, of course.
My target is that the rectangles are completely visibles always (with or without scroll), expanded to the left when no scroll appears, and to the left of the scroll when it is visible. For that, I suppose I need to set the cell size depending on the scroll, for them to adjust the available space.
It works BUT just in the moment the scroll appears/disappears, there is a short window height range when the rectangles are not painted properly.
Here is my code, I have tried with other properties otions with no success...
import QtQuick 2.5 import QtQuick.Controls 1.3 import QtQuick.Controls.Styles 1.4 Item { id: idGrid property int iNumcolums: 3 property int iMarginGrid: 2 ListModel { id: appModel ListElement { colorR: "red"} ListElement { colorR: "green" } ListElement { colorR: "blue" } ListElement { colorR: "cyan"} ListElement { colorR: "yellow"} ListElement { colorR: "blue" } ListElement { colorR: "lightgray" } ListElement { colorR: "red" } ListElement { colorR: "green" } ListElement { colorR: "blue" } ListElement { colorR: "cyan" } ListElement { colorR: "yellow" } ListElement { colorR: "lightgray" } ListElement { colorR: "blue" } } ScrollView { id: scrollView anchors.top: parent.top anchors.bottom: parent.bottom anchors.left: parent.left anchors.right: parent.right anchors.leftMargin: iMarginGrid anchors.rightMargin: iMarginGrid property int scrollWidth: 10 style: ScrollViewStyle { id: sptScrollStyle property int iScrollWidth: 10 handle: Rectangle { implicitWidth: iScrollWidth color: "gray" radius: 20 } scrollBarBackground: Rectangle { implicitWidth: iScrollWidth color: "lightgray" radius: 20 } decrementControl: Rectangle { implicitWidth: 0 } incrementControl: Rectangle { implicitWidth: 0 } } GridView { id: grid width: parent.width; height: parent.height model: appModel property int iSizeThumb: scrollView.width/3 cellWidth: iSizeThumb; cellHeight: iSizeThumb delegate: Item { width: grid.cellWidth; height: grid.cellHeight Rectangle { color: colorR; anchors.fill: parent; anchors.margins: 2} } onHeightChanged: { // if ( height >= contentItem.height ) // grid.iSizeThumb = scrollView.width/3 // else // grid.iSizeThumb = scrollView.width/3 - 3 if ((idSptGridThumbs.width - scrollView.scrollWidth) > width) grid.iSizeThumb = scrollView.width/3 - 3 else grid.iSizeThumb = scrollView.width/3 } } } }
Thanks in advance!
Diego
-
Perhaps you could use transient overlay ScrollBars from Qt Quick Controls 2? They are common in modern UIs - not only on mobile but also on desktop. They effectively eliminate the whole chicken-egg layouting issue: visibility of the vertical scrollbar depends on the content height, which depends on the content width, which in turn depends on the visibility of the vertical scrollbar.