开发者

QtQuick GridView element animations

When a GridView is resized and it's elements get rearranged the animations of that elements don't seem to work.

Here you can find a simple example: http://pastebin.com/BgST6sCv

If one of the squares in the example is clicked the animation is triggered properly. But if you resize t开发者_如何学Che window so that the GridView must rearrange it's elements the animation is NOT triggered.

Is there a way to fix that? Possibly without any C++?

EDIT:

I'm using the Qt SDK 1.1 which contains Qt 4.7.3 at the moment


This code will do it. Basically you need to create a dummy delegate item and then create another item inside that that has the same width, height, x and y values. Set the parent of the inside item to be your grid view. Here's your code modified to animate nicely.

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

    }
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜