У меня есть ListView, где я добавляю и удаляю ListElements. Когда я удаляю ListElement (строку), есть ли способ анимировать движение нижних элементов?

Question

В моем ListView у меня есть кнопка добавления, которая добавляет ListElement в конец ListView. Каждый ListElement имеет кнопку удаления в своей строке, и когда он щелкает, я анимирую его, удаляя, но я также хочу анимировать любые элементы ниже при перемещении вверх.

ListView {
    id: myListView
    delegate: myListViewDelegate
    model: myListModel
    anchors.fill: parent
}

ListModel {
    id: myListModel
}

Component {
    id: myListViewDelegate
    Item {
        id: rowContainer
        height: 40
        width: myListView.width

        Text {
            id: labelText

            text: label

            anchors {
                left: parent.left
                verticalCenter: parent.verticalCenter
            }
        }

        CustomButton {
            anchors {
                right: parent.right
                rightMargin: 8
                verticalCenter: parent.verticalCenter
            }

            width: 32
            height: width
            buttonRadius: width/2
            iconSource: "qrc:/image/Delete.png"

            onReleased: deleteRowAnimation.start()
        }

        ParallelAnimation {
            id: deleteRowAnimation
            SmoothedAnimation {velocity: 300; target: rowContainer; properties: "x"; to: -rowContainer.width}

            onRunningChanged: if(!running) deleteRow(index)
        }
    }
}

Позже в коде ..

function deleteRow(index) {
    myListModel.remove(index)
}

Я могу анимировать уходящую (удаляемую) строку, но если под ней есть строки, они подпрыгивают, чтобы заполнить место, где была удалена строка. Я бы хотел, чтобы это был плавный анимированный переход.

Answer 1

Вот краткий пример того, как это работает:

import QtQuick 2.12
import QtQuick.Controls 2.3

ApplicationWindow {
    id: window
    visible: true
    width: 400
    height: 400
    title: qsTr('Frameless')
    flags: Qt.Window | Qt.FramelessWindowHint

    ListView {
        id: view
        anchors.fill: parent

        model: ListModel{
            ListElement {text: "111111"}
            ListElement {text: "222222"}
            ListElement {text: "333333"}
            ListElement {text: "444444"}
            ListElement {text: "555555"}
            ListElement {text: "666666"}
            ListElement {text: "777777"}
            ListElement {text: "888888"}
        }
        delegate: Text {
            id: name
            text: qsTr(modelData)
            Rectangle {
                anchors.fill: parent
                color: "red"
                opacity: 0.4
            }
        }
        displaced: Transition {
            NumberAnimation { property: "y" duration: 200 }
        }
    }

    Shortcut {
        sequence: "Esc"
        onActivated: view.model.remove(2)
    }
}

В Escape удаляется 3-й элемент элемента, и это вызывает запуск остальной части списка вверх.Возможности этого безграничны.Веселись!