QML：内置GridView的ScrollView：将单元格调整为可用空间（带或不带滚动条）

Question

我有一个带有GridView的QML ScrollView（3列中的矩形），当滚动出现/消失时，我有一个重绘问题。

窗口具有固定宽度（300）和可变高度，因此当窗口高度小于内容高度时，滚动会出现。

我的目标是矩形完全可见（有或没有滚动），在没有滚动时向左扩展，在滚动可见时向左扩展。为此，我想我需要根据滚动设置单元格大小，以便他们调整可用空间。

它可以工作但是在滚动出现/消失的那一刻，当矩形没有正确绘制时，窗口高度范围很短。

这是我的代码，我尝试过其他属性但没有成功...

import QtQuick 2.5
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.4

Item {
    id: idGrid

    height: 800
    width: 300

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