qml - ListView 中的并行添加和移位转换

Question

在 ListView 中，当我使用长添加过渡添加新项目时，在该项目之前插入新项目会导致该项目的替换并停止其添加过渡处理。我该如何解决这个问题？

import QtQuick 2.0
import QtQuick.Controls 1.0

Item
{
    width: 500
    height: 500

    property ListModel model: ListModel {}

    Button
    {
        id: button
        text: "insert: " + model.count

        onClicked:
        {
            model.insert(Math.round(Math.random() * model.count), {"name": model.count});
        }
    }

    ListView
    {
        model: parent.model
        anchors.top: button.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom

        delegate: Text {
            text: name
        }

        add: Transition {
            NumberAnimation { properties: "opacity"; from: 0.0; to: 1.0; duration: 1000 }
        }
    }
}

Answer 1

这个问题在this中有明确讨论。很好的教程，关于过渡及其处理确实是一本很好的读物。我强烈建议您阅读它。

直接引用自 Handling interrupted animations部分:

Each newly added item undergoes an add transition, but before the transition can finish, another item is added, displacing the previously added item. Because of this, the add transition on the previously added item is interrupted and a displaced transition is started on the item instead. Due to the interruption, the opacity and scale animations have not completed, thus producing items with opacity and scale that are below 1.0.

因此，您需要的是位移的过渡。将以下代码添加到 ListView 应该可以解决您的问题:

displaced: Transition {
    NumberAnimation { properties: "opacity"; to: 1.0; duration: 1000}
}

持续时间可以省略。它可以帮助调整动画，从而避免(或至少限制)加速。也许我们还可以写:

displaced: Transition {
        NumberAnimation { properties: "opacity"; to: 1.0; duration: 1000 * (1 - from)}
}