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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.