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，因为它引用了不同的元素。快速解决方案是使用ID：

Flickable {
    id: flickable

    ...

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

    ...

}

如何动态更改Flickable的contentHeight？

1 个答案: