移动时MouseArea无法更新mouseContains属性

Question

我遇到一个问题，即 MouseArea 的 containMouse 属性在设置动画后无法正确更新自身。

下面，我提供了一个代码段，希望可以说明我的观点：

import QtQuick 2.10

Item {
    id: root

    width: 500
    height: 240
    visible: true

    ListView {
        id: view

        anchors.fill: parent
        anchors.margins: 20
        orientation: ListView.Horizontal
        spacing: 20

        delegate: Rectangle {
            width: 100
            height: 200
            color: "black"
            radius: 10

            Rectangle {
                width: 40
                height: 40
                anchors.centerIn: parent
                color: mouseArea.containsMouse ? "white" : "grey"
                visible: model.index == view.currentIndex

                MouseArea {
                    id: mouseArea

                    anchors.fill: parent
                    hoverEnabled: true

                    onClicked: view.model.move(view.currentIndex, view.currentIndex+1, 1)
                }
            }
        }

        model: ListModel {
            ListElement { number: 1 }
            ListElement { number: 2 }
            ListElement { number: 3 }
            ListElement { number: 4 }
        }

        move: Transition {
            NumberAnimation { properties: "x"; duration: 200 }
        }

        moveDisplaced: Transition {
            NumberAnimation { properties: "x"; duration: 200 }
        }
    }
}

如果要运行此应用程序，将显示以下显示：

将光标移动到灰色框的左下部分会将框的颜色更改为白色，例如：

单击按钮后，就会触发动画以交换 ListView 的第一个和第二个元素。不幸的是，完成后，您 MIGHT 会得到以下结果：

基于代码行color: mouseArea.containsMouse ? "white" : "grey"，我希望矩形为灰色，因为鼠标不再包含在 MouseArea 中。

所以我的问题是：

1. 我的代码出问题了吗
2. 这是一个错误
3. 如何纠正这种行为
4. 也许是为什么会发生这种情况的解释

Answer 1

问题是指令：

visible: model.index == view.currentIndex

移动元素时，该指令在True和False之间变化，因此在转换中它被认为是不稳定的，这就是为什么它会产生未定义行为的原因。 ListView提供了一个称为ListView.isCurrentItem的稳定属性，用于指示当前项目。

下一个解决方案是

delegate: Rectangle {
    id: rect // <--- set id
    width: 100
    height: 200
    color: "black"
    radius: 10

    Rectangle {
        width: 40
        height: 40
        anchors.centerIn: parent
        color: mouseArea.containsMouse ? "white" : "grey"
        visible: rect.ListView.isCurrentItem // <--- change this line
        MouseArea {
            id: mouseArea

            anchors.fill: parent
            hoverEnabled: true

            onClicked: view.model.move(view.currentIndex, view.currentIndex+1, 1)
        }
    }
}