javascript - 如何动态更改Flickable的contentHeight？

我有一个带有网格的简单Flickable。使用滚轮，将对象附加到网格。我想做的是，一旦Grid元素超过默认的contentHeight，则更改Flickable的contentHeight。

这是我的代码：

Flickable {
    property real flickHeight: Screen.height * 2
    width: Screen.width
    height: Screen.height
    contentWidth: Screen.width
    contentHeight: flickHeight

    MouseArea {
        anchors.fill: parent
        onWheel: {
            gridModel.append({ _color: "black" })
            var cheight = (gridModel.count * 180 + gridModel.count * 2)
            if(cheight > parent.flickHeight) {
                parent.flickHeight = cheight
            }
            console.log("Flickable.flickHeight: " + parent.flickHeight) // Prints qml: Flickable.flickHeight: undefined
        }
    } // MouseArea

    Grid {
        ListModel {
            id: gridModel
            ListElement { _color: "red" }
            ListElement { _color: "blue" }
            ListElement { _color: "green" }
            ListElement { _color: "darkred" }
            ListElement { _color: "darkblue" }
            ListElement { _color: "darkgreen" }
        } // ListModel

        id: grid
        columns: 2
        spacing: 2

        Repeater {
            model: gridModel
            delegate: Rectangle {
                width: 180
                height: 180
                color: _color
            } // Delegate
        } // Repeater
    } // Grid
} // Flickable

除了当我尝试更改contentHeight的高度时，其他所有东西都很好。 onWheel函数会打印出“ qml：Flickable.flickHeight：未定义”。我没有正确使用属性吗？为什么我会得到“未定义”？

最佳答案

该问题是由于您的MouseArea不是Flickable的直接子项而是Flickable.contentItem的直接子项引起的。因此，您不能在此上下文中使用parent，因为它引用了不同的元素。一种快速的解决方案是使用id：

Flickable {
    id: flickable

    ...

    MouseArea {
        anchors.fill: parent
        onWheel: {
            ...
            console.log("Flickable.flickHeight: " + flickable.flickHeight)
        }
    } // MouseArea

    ...

}