Question

我关注QML GridView：

GridView
{
    id: ueProductGridView

    antialiasing: true

    clip: true

    Layout.fillWidth: true
    Layout.fillHeight: true

    cellWidth: 200
    cellHeight: 200

    delegate: Rectangle
    {
        id: test

        width: 192
        height: 192

        color: "red"

        Text
        {
            anchors.fill: parent

            text: index
        }

        transform:
        [
            Rotation
            {
                id: plateRotation

                angle: -90
                axis { x: 0; y: 1; z: 0 }
                origin.x: -200
                origin.y: 0
            }
        ]   // transform

        SequentialAnimation
        {
            id: addAnimation


            PauseAnimation
            {
                duration: Math.random()*2000
            }

            NumberAnimation
            {
                target: plateRotation
                property: "angle"
                to: 0
                duration: 1000
            }
        }

        SequentialAnimation
        {
            id: removeAnimation


            PropertyAction
            {
                target: test
                property: "GridView.delayRemove"
                value: true
            }

            NumberAnimation
            {
                target: test
                property: "scale"
                to: 0
                duration: 1000
            }

            PropertyAction
            {
                target: test
                property: "GridView.delayRemove"
                value: false
            }
        }

        GridView.onAdd:
        {
            addAnimation.start();
        }   // onAdd

        GridView.onRemove:
        {
            removeAnimation.start();
        }   // onRemove
    }   // delegate

    Component.onCompleted:
    {
        model=10;
    }   // onCompleted:
}   // GridView

现在，为什么 delegate动画不起作用，即为什么GridView 为空？有关动画的代码取自tutorial，其中有效。但是，如果我评论/删除有关动画的所有代码，则delegate中可以看到GridView并且一切正常：

GridView
{
    id: ueProductGridView

    antialiasing: true

    clip: true

    Layout.fillWidth: true
    Layout.fillHeight: true

    cellWidth: 200
    cellHeight: 200

    delegate: Rectangle
    {
        id: test

        width: 192
        height: 192

        color: "red"

        Text
        {
            anchors.fill: parent

            text: index
        }
    }   // delegate

    Component.onCompleted:
    {
        model=10;
    }   // onCompleted:
}   // GridView

Answer 1

与从视图中插入/删除元素相关联的动画是Transition s（例如，请参阅add），在不同的State之间，并且确实称为ViewTransition s 。您应该深入了解此类型的documentation页面：它包含很多很好的示例，并详细介绍了如何实现添加/删除动画。

定义ViewTransition时，其中引用的任何属性，如果没有不同的目标，则引用委托属性。因此，如果你在GridView：

内写信

add: Transition {
    NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 500 }
    NumberAnimation { property: "scale"; easing.type: Easing.OutBounce; from: 0; to: 1.0; duration: 750 }
}

您说每次将新代理添加到网格时，都应为其opacity和scale属性设置动画。顶级动画（如本例所示）并行运行，因此代理可以缩放并同时显示。

现在，如果你想为嵌套属性设置动画，就像在Rotation角度的情况下一样，最简单的方式是委托内的alias。这样，它可以与任何其他委托属性完全相同地处理，从而产生更清晰，更简单的代码。

应该注意的是，示例中的动画也不起作用，因为它们与add Transition相关联。在使用populate Transition时，在模型初始化期间使用 <{3}} Transition。来自文档：

此属性包含要应用于最初为视图创建的项目的转换。

它适用于在以下时间创建的所有项目：


首先创建视图

视图的模型更改


如果模型是QAbstractItemModel子类

，则重置视图的模型

最后，建议。如果为元素的添加和删除设置动画，尤其是在动画较慢的情况下，将视图所做的调整动画到其他元素也很重要。以优雅的方式制作动画可以改善视觉感受很多。因此，当您提供add和remove transition时，请同时考虑添加addDisplaced和removeDisplaced Transition。

以下是代码的修改版本，其中显示了上面讨论的所有要点：

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    id: window
    width: 600
    height: 400
    visible: true

    ListModel {
        id: model
         ListElement { code: "0" }
         ListElement { code: "1" }
         ListElement { code: "2" }
         ListElement { code: "3" }
         ListElement { code: "4" }
         ListElement { code: "5" }
    }

    GridView {
        id: ueProductGridView
        anchors.fill: parent
        antialiasing: true

        clip: true
        cellWidth: 200
        cellHeight: 200

        delegate: Rectangle {
            width: 192
            height: 192

            color: "red"
            property alias angle: rot.angle     // alias!
            Text {
                anchors.centerIn: parent
                text: code
                font.pixelSize: 30
            }

            transform: Rotation {
                id: rot
                angle: -90
                axis { x: 0; y: 1; z: 0 }
                origin.x: -200
                origin.y: 0
            }

            MouseArea {
                anchors.fill: parent
                onClicked: ueProductGridView.model.remove(index)
            }
        }   // delegate

        add: Transition {
            NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 500 }        //since is already at 1.0 we should enforce the start from 0
            NumberAnimation { property: "scale"; easing.type: Easing.OutBounce; from: 0; to: 1.0; duration: 750 }
        }

        addDisplaced: Transition {
            NumberAnimation { properties: "x,y"; duration: 200; easing.type: Easing.InBack }
        }

        remove: Transition {
            NumberAnimation { property: "scale"; from: 1.0; to: 0; duration: 200 }
        }

        removeDisplaced: Transition {
            NumberAnimation { properties: "x,y"; duration: 200; easing.type: Easing.OutBack }
        }

        populate: Transition {
            NumberAnimation { properties: "angle"; to: 0; duration: 500 }
        }
    }
    Component.onCompleted:{ ueProductGridView.model= model }
}

GridView委托转换不起作用

1 个答案: