QML: ScrollView with GridView inside: adjust cell to available space (with or without scroll bar)

[Diego Donate]

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

[jpnurmi]

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.