ListView with section，删除对顶部项目无效的动画

Question

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

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

• 删除除顶部以外的其他项目。
• 禁用该节或动画。

Answer 1

我用QT5.13.1尝试了您的代码。目前正在下载QT5.15。目前，它看起来像是部分的bug，因为我在BugTracker上发现了许多未关闭的bug报告。我可以给你建议两种解决问题的方法。

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

我用Meself测试的第一种解决方案。以下是您尝试它所需更改的内容：

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

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

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，并相应地对删除函数进行castomize，这将导致与节正常工作时相比，代码要复杂得多。

UPD：5.15中同样的问题