QML 中未触发位移的 ViewTransition

Question

所以我有一个 ListView 和 ListModel，我正在向其中动态添加对象。我希望在添加新对象时发生 displaced 动画，但据我所知，仅触发了 add 过渡，而从未触发 displaced 过渡。根据教程，这有效：

  Rectangle {
        anchors.fill: parent
        ListView {
          width: 240; height: 320
          model: ListModel {
              id: model
          }

          Component {
              id: del
              Row {
                  height: 20
                  spacing: 20
                  Text { text: name }
                  Text { text: age }
              }
          }

          delegate: del

          add: Transition {
              NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 1000 }
          }

          displaced: Transition {
              NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutBounce }
          }

          focus: true
          Keys.onSpacePressed: model.insert(0, { "name": "Item " + model.count, "age":21})
        }
    }

但这只会触发 add 转换。

        Rectangle {
            height: 500
            width: 0.90 * parent.width
            anchors {
                top: parent
                topMargin: 30
                left: parent.left
                leftMargin: 45
            }
            ListView {
                anchors.fill: parent
                model: notificationModel
                delegate: notificationDelegate
                spacing: 30

                add: Transition {
                    NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 1000 }
                }
                displaced: Transition {
                    NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutBounce }
                }
            }
        }

        ListModel {
            id: notificationModel
            Component.onCompleted: {
                    notificationModel.append({"name": "Tony"})
                }
        }

        Timer {
            interval: 5000; running: true; repeat: true
            onTriggered: notificationModel.append({"name": "Stark"})
        }

        Component {
            id: notificationDelegate
            Row {
                spacing: 20
                Text { text: name; color: "white" }
            }
        }

知道为什么会这样吗？谢谢！

Answer 1

当列表中的一个项目因为另一个项目 added/removed/etc 而被迫移动时，会触发 displaced 转换。工作示例之所以有效，是因为在列表的开头插入了一个项目，导致剩余项目被替换。

对于您显示的当前代码，问题在于您使用的是 append 函数而不是 insert。 Append 将项目添加到列表的底部，因此没有项目被取代。

在您编辑问题之前，您遇到了一个不同的问题。您使用 insert 将项目添加到列表的开头，但每次添加一个项目时，您都会清除整个列表并重建它。再说一次，没有任何东西被取代，因为每次都会重新创建整个列表。

QML 中未触发位移的 ViewTransition

Displaced ViewTransition not triggered in QML

qt

qml

qt-quick