Question

我使用Row来布局可修改大小的项目的可修改列表。我想平滑地为插入/移除设置动画，因此我添加了move转换。但是，我还想对项目本身的大小更改进行动画处理。

这会创建两个动画：已调整大小的项目的大小更改以及项目右侧的位置更改。总之，这会导致收缩项目与其右侧之间存在差距。您可以使用以下示例代码查看此效果（左键单击项目以更改其大小）：

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
    visible: true
    width: row.width
    height: row.height
    Row {
        id: row
        move: Transition {
            NumberAnimation {
                property: "x"
                easing.type: Easing.InOutQuad
                duration: 100
            }
        }

        Repeater {
            model: ListModel {
                id: listModel
                ListElement {
                    itemColor: "red"
                }
                ListElement {
                    itemColor: "green"
                }
                ListElement {
                    itemColor: "blue"
                }
                ListElement {
                    itemColor: "yellow"
                }
                ListElement {
                    itemColor: "orange"
                }
            }

            delegate: Rectangle {
                id: rectangle
                width: 100
                height: 100
                color: modelData

                MouseArea {
                    anchors.fill: parent
                    acceptedButtons: Qt.LeftButton
                    onClicked:  rectangle.width = 400 - rectangle.width
                }

                MouseArea {
                    anchors.fill: parent
                    acceptedButtons: Qt.RightButton
                    onClicked: listModel.remove(index)
                }

                Behavior on width {
                    PropertyAnimation {
                        easing.type: Easing.InOutQuad
                        duration: 100
                    }
                }
            }
        }
    }
}

所以问题是如何避免差距。理想情况下，我想将动画插入/移除与动画分开以进行大小更改。但是，documentation for move表示它用于

因定位器中其他物品的添加，移除或重新布置而移位的儿童物品

由于定位器中其他项目的尺寸而重新定位的子项目

那么如何在保持删除和尺寸变化动画的同时避免这种差距呢？

请注意 以上示例只是显示问题的最小方法，因为我无法在此处发布真实代码，其中删除由QAbstractItemModel派生的行删除信号触发。

Answer 1

差距由您的move媒体资源创建，该资产也会干扰您的PropertyAnimation。所以你应该删除该属性。

我包装了一个GridView并使用内置属性来处理动画。例如remove定义什么定义，displaced在项目移位时为动作设置动画。

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
    visible: true
    width: 100*listModel.count
    height: 100

    ListModel {
        id: listModel
        ListElement {
            itemColor: "red"
        }
        ListElement {
            itemColor: "green"
        }
        ListElement {
            itemColor: "blue"
        }
        ListElement {
            itemColor: "yellow"
        }
        ListElement {
            itemColor: "orange"
        }
    }

    GridView {
        model: listModel
        anchors.fill: parent

        remove: Transition {
            PropertyAnimation {
                easing.type: Easing.InOutQuad
                duration: 100
                property: "width"
                to: 0
            }
        }

        displaced: Transition {
                NumberAnimation { 
                    properties: "x,y"
                    easing.type: Easing.InOutQuad
                    duration: 100 }
        }

        delegate:
            Rectangle {
            id: rectangle
            width: 100
            height: 100
            color: modelData

            MouseArea {
                anchors.fill: parent
                acceptedButtons: Qt.LeftButton
                onClicked: rectangle.width = 400 - rectangle.width
            }

            MouseArea {
                anchors.fill: parent
                acceptedButtons: Qt.RightButton
                onClicked: listModel.remove(index)
            }

            Behavior on width {
                PropertyAnimation {
                    easing.type: Easing.InOutQuad
                    duration: 100
                }
            }
        }
    }
}

例如，请查看文档：{{3}}

在http://doc.qt.io/qt-5/qml-qtquick-gridview.html#remove-prop的文档中，您可以在GridView和ListView中找到更多属性，例如populate，add。

分层动画会在项目

1 个答案: