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

Question

我有一个带有网格的简单 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: undefined”。我没有正确使用属性吗？为什么我会得到“未定义”？

Answer 1

问题是由于您的 MouseArea 不是 Flickable 的直接子项，而是 Flickable.contentItem 的直接子项。所以你不能在这个上下文中使用 parent 因为它引用了不同的元素。一个快速的解决方案是使用 ids:

Flickable {
    id: flickable

    ...

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

    ...

}