带部分的 ListView，删除动画不适用于顶部项目

Question

我正在使用带有部分的 QML ListView，单击要删除动画的项目。代码如下：

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    visible: true
    width: 400
    height: 400

    ListView {
        id: list
        anchors.fill: parent
        clip: true
        spacing: 0

        onContentYChanged: console.log("onContentYChanged: " + contentY)
        onContentHeightChanged: console.log("onContentHeightChanged: " + contentHeight)

        model: ListModel {
            id: myModel
            ListElement {name: "Item 1";type: "A"}
            ListElement {name: "Item 2";type: "A"}
            ListElement {name: "Item 3";type: "B"}
        }

        delegate: Rectangle {
            width: parent.width
            height: 50
            color: (index % 2 == 1) ? "#5678a2" : "#88a345"

            Text {
                anchors.verticalCenter: parent.verticalCenter
                text: name
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log("remove: " + index + ", contentY:" + list.contentY)
                    myModel.remove(index)
                }
            }
        }

        section.property: "type"
        section.delegate: Rectangle {
            height: 30
            Text {
                anchors.verticalCenter: parent.verticalCenter
                text: section
            }
        }

        displaced: Transition {
            NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.OutCubic }
        }
        remove: Transition {
            NumberAnimation { property: "opacity"; from: 1.0; to: 0; duration: 500 }
            NumberAnimation { property: "scale"; from: 1.0; to: 0; duration: 500 }
        }
    }
}

当我点击第一个项目（项目 1）时，它被删除了，但项目 2 飞到了窗外。 ListView 将剩余项目显示在错误的位置。 ContentY 变为 80（之前是 Item 2 的 y 位置），而不是保持在 0。

qml: onContentHeightChanged: 300
qml: onContentHeightChanged: 240
qml: onContentHeightChanged: 210
qml: remove: 0, contentY:0
qml: onContentYChanged: 80
qml: onContentHeightChanged: 160

如果满足以下条件，它将正常工作：

• 删除除最上面的其他项目。
• 禁用部分或动画。

Answer 1

我使用 Qt 5.13.1 尝试了您的代码。目前正在下载 Qt 5.15。目前看来这是section 的一个错误，因为我在bugtracker 上发现了很多未关闭的错误报告。我可以建议 2 种方法来解决您的问题。

1. 在解除锁定时执行动画。
2. 使用带有类别的模型。

第一个解决方案我自己测试过。以下是您需要更改才能尝试的内容：

删除 ListView 的移除动画。将以下代码添加到您的委托

ListView.onRemove: SequentialAnimation {
                        PropertyAction { target: wrapper; property: "ListView.delayRemove"; value: true }
                        ParallelAnimation {
                            NumberAnimation { target: wrapper; property: "opacity"; to: 0; duration: 500 }
                            NumberAnimation { target: wrapper; property: "scale"; to: 0; duration: 500 }
                        }
                        PropertyAction { target: wrapper; property: "ListView.delayRemove"; value: false }
                    }

这是什么？ ListView 有一个信号remove()，在从视图中删除项目之前调用它。它在documentation 中进行了描述，还注意到，

如果已指定删除转换，则在处理此信号后应用它，前提是 delayRemove 为 false。 因此，在委托中，您只需阻止从视图中移除，您是否制作动画并取消阻止它。我想它不会像你想要的那样干净和漂亮，因为在这种情况下视图不只是它的大小。

第二个解决方案

我没有尝试实现它，但我可以想象有这样的模型：

ListModel {
    id: myModel
    ListElement { type: "category"; name: "cat1" }
    ListElement { name: "delegate1"; type: "delegate"; catrgory: "cat1"}
    ListElement { name: "delegate2"; type: "delegate"; catrgory: "cat1"}
    ListElement { name: "delegate3"; type: "delegate"; catrgory: "cat1"}
    ListElement { type: "category"; name: "cat2" }
    ListElement { name: "delegate4"; type: "delegate"; catrgory: "cat2"}

要根据需要使用它，您需要相应地对您的委托进行castomize 并相应地删除函数，与section 正常工作相比，这将导致更复杂的代码。

UPD：5.15 中的同样问题