QML: ScrollView with GridView inside: adjust cell to available space (scroll?)

[ddonate]

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
 
            }
        }
    }
}

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

            }
        }
    }
}

To copy to clipboard, switch view to plain text mode 

Thanks in advance!

Diego

[anda_skoa]

Maybe try something like this

GridView {
    readonly property bool scrollBarVisible: contentHeight > height
    readonly property real visibleWidth: width - (scrollBarVisible ? iScrollWidth : 0)
    readonly property read iSizeThumb: visibleWidth / 3
}

GridView {
    readonly property bool scrollBarVisible: contentHeight > height
    readonly property real visibleWidth: width - (scrollBarVisible ? iScrollWidth : 0)
    readonly property read iSizeThumb: visibleWidth / 3
}

To copy to clipboard, switch view to plain text mode 

Cheers,
_

[ddonate]

Thanks a lot for your help. I am afraid it still does not work with that...

If scroll is visible due to low height and I make it disappear (increasing window height), only 2 columns appear in the grid (instead of the 3 from the beginning)

[anda_skoa]

What if you change the width of the gridview instead

GridView {
    width: parent.width - (scrollBarVisible ? iScrollWidth : 0)
    iSizeThumb: width / 3
}

GridView {
    width: parent.width - (scrollBarVisible ? iScrollWidth : 0)
    iSizeThumb: width / 3
}

To copy to clipboard, switch view to plain text mode 

[ddonate]

It seems to hang (not always) when scroll must appear (maybe a loop resizing?)...

GridView {
            ... 
            property bool scrollBarVisible: contentHeight > height
            width: parent.width - (scrollBarVisible ? scrollView.iScrollWidth : 0)
            property int iSizeThumb: width / 3
 
            cellWidth: iSizeThumb; cellHeight: iSizeThumb
            delegate: Item {
                width: grid.cellWidth; height: grid.cellHeight
                Rectangle { color: colorR; anchors.fill: parent; anchors.margins: 2}
            }
}

GridView {
            ... 
            property bool scrollBarVisible: contentHeight > height
            width: parent.width - (scrollBarVisible ? scrollView.iScrollWidth : 0)
            property int iSizeThumb: width / 3

            cellWidth: iSizeThumb; cellHeight: iSizeThumb
            delegate: Item {
                width: grid.cellWidth; height: grid.cellHeight
                Rectangle { color: colorR; anchors.fill: parent; anchors.margins: 2}
            }
}

To copy to clipboard, switch view to plain text mode