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

中的duration可以省略。它可以帮助调整动画以避免（或至少限制）加速。可能我们也可以这样写：

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

ListView 中的并行添加和置换转换

Parallel add and displaced transitions in ListView

qml

qt-quick

qtquick2