QtQuick GridView 元素动画答案

【问题标题】：QtQuick GridView element animationsQtQuick GridView 元素动画
【发布时间】：2011-04-10 18:08:16
【问题描述】：

当调整 GridView 的大小并且它的元素重新排列时，这些元素的动画似乎不起作用。

在这里你可以找到一个简单的例子：http://pastebin.com/BgST6sCv
如果单击示例中的方块之一，则动画会正确触发。但是，如果您调整窗口大小以使 GridView 必须重新排列其元素，则不会触发动画。

有没有办法解决这个问题？可能没有任何 C++？

编辑：
我目前正在使用包含 Qt 4.7.3 的 Qt SDK 1.1

【问题讨论】：

标签： gridview qt4 qml qt-quick

【解决方案1】：

这段代码可以做到。基本上，您需要创建一个虚拟委托项目，然后在其中创建另一个具有相同宽度、高度、x 和 y 值的项目。将内部项目的父项设置为您的网格视图。这是您的代码修改后的动画效果。

import QtQuick 1.0

Rectangle {
    id: mainRect
    width: 300; height: 400

    ListModel {
        id: appModel
        ListElement { modelcolor: "#FF0000"}
        ListElement { modelcolor: "#00FF00"}
        ListElement { modelcolor: "#0000FF"}
    }

    Component {
        id: appDelegate

        Item {
            id: main
            width: grid.cellWidth; height: grid.cellHeight
            Rectangle {
                id: item; parent: grid
                x: main.x; y: main.y
                width: main.width; height: main.height;
                color: modelcolor
                Behavior on x { NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
                Behavior on y { NumberAnimation { duration: 400; easing.type: Easing.OutBack } }
            }
        }
    }

    GridView {
        id: grid
        anchors.fill: parent
        model: appModel
        delegate: appDelegate
        interactive: false
        MouseArea {
            anchors.fill: parent
            onClicked: {
                appModel.insert(1, { "modelcolor": "yellow" } )
            }
        }

    }
}

【讨论】：

我在几个地方找到了类似的解决方案，但没有解释。为什么需要这个虚拟委托？
它可以工作，但是 GridView 不再是 flickable。