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上，第三个element元素将被删除，这将触发列表的其余部分向上移动。这种可能性是无限的。玩得开心！

我有一个ListView，可以在其中添加和删除ListElements。当我删除一个ListElement（行）时，是否有办法使下部项目的运动动画化？

1 个答案: