如何使用QML使GridView中的每个项目淡入淡出

Question

每当gridview的模型更改时，我都会尝试使动画淡入淡出。 我试图利用链接中提到的示例：

http://qt-project.org/doc/qt-4.8/qml-gridview.html#delayRemove-prop

但我正在尝试在附加的信号onAdd上执行此操作。

有可能还是我可以使用的解决方法？

下面是我的代码

        GridView{
            id:productGView
            height: 100
            width: 100
            anchors{
                left: parent.left; top: parent.top;
            }
            cellHeight:20;
            cellWidth: 20;
            keyNavigationWraps :true
            delegate: Image{
                id:gridDel
                height: productGView.cellHeight
                width: productGView.cellWidth
                source:(productGView.currentIndex==index)?("item_h.png"):("item_n.png")
                GridView.onAdd: SequentialAnimation {
                    PropertyAction { target: gridDel; property: "GridView.delayRemove"; value: true }
                    NumberAnimation { target: gridDel; property: "scale"; to: 0; duration: 250; easing.type: Easing.InOutQuad }
                    PropertyAction { target: gridDel; property: "GridView.delayRemove"; value: false }
                }
                GridView.onRemove: {
                    core.log("Del | onRemove | index = "+index)
                }

                Component.onCompleted: {
                    core.log("Del | onCompleted | index = "+index)
                }
            }
            snapMode: GridView.SnapToRow
            boundsBehavior: Flickable.DragOverBounds
        }

提前致谢

Answer 1

将项目添加到视图时，不需要防止它被删除，因此您可以通过删除两个PropertyAction来简化GridView.onAdd处理程序，然后也不需要SequentialAnimation 。

在您的代码中， NumberAnimation将比例动画设置为0 ，从而使单个委托无限小。 尝试这个：

delegate: Image {
     ..
     ..
   scale: 0 /* When a delegate is created, scale is initially zero */
   GridView.onAdd: NumberAnimation { 
          target: gridDel
          property: "scale"
          to: 1  /* When the delegate is added to the view, */
                 /* the scale will be animated to 1 */
          duration: 250
          easing.type: Easing.InOutQuad
   }