QML Qt5 中 onEntered 和 onExited 的可翻转问题

Flipable issue with onEntered and onExited in QML Qt5

本文关键字：翻转问题 onExited Qt5 onEntered QML 更新时间：2023-10-16

我试图改变这里给出的例子（http://qt-project.org/doc/qt-4.8/qml-flipable.html）以获得相同的效果。碰巧当我用鼠标在前面进入时，信号 onEntered 和 onExited 被捕获了几次：例如：将鼠标递过，出现在控制台上：

进入退出进入

如果鼠标步过非常快，则执行翻转，但即使鼠标不再处于该区域，也会保持第二种状态。帮助？

Flipable {
         id: flipable
         width: 240
         height: 240
         property bool flipped: false
         front: Rectangle { 
            color: "red"; 
            anchors.centerIn: parent 
            MouseArea {
               anchors.fill: parent
               onEntered: {
                  console.log("Entered");
                  flipable.flipped = !flipable.flipped
               }
            }
         }
         back: Rectangle { 
            source: "blue"; 
            anchors.centerIn: parent 
               MouseArea {
                  anchors.fill: parent
                  onExited: {
                     console.log("Exited");
                     flipable.flipped = !flipable.flipped
                  }
         }
         transform: Rotation {
             id: rotation
             origin.x: flipable.width/2
             origin.y: flipable.height/2
             axis.x: 0; axis.y: 1; axis.z: 0
             angle: 0
         }
         states: State {
             name: "back"
             PropertyChanges { target: rotation; angle: 180 }
             when: flipable.flipped
         }
         transitions: Transition {
             NumberAnimation { target: rotation; property: "angle"; duration: 1000 }
         }
     }

首先，我必须责怪你，因为你的例子不起作用。

好的，所以不要将鼠标区域放在前后，因为它们的宽度是动态变化的，边框会接触鼠标，从而产生进入和退出的信号。必须将鼠标区域设置为父级或同级。然后，您可以使用输入和退出的信号或包含鼠标属性。

import QtQuick 2.0
MouseArea
{
    id: mouseArea
    width: 240
    height: 240
    hoverEnabled: true
    onEntered:
    {
        console.log("Entered");
        flipable.flipped = !flipable.flipped
    }
    onExited:
    {
        console.log("Exited");
        flipable.flipped = !flipable.flipped
    }
    Flipable
    {
        id: flipable
        width: 240
        height: 240
        property bool flipped: false
        //property bool flipped: mouseArea.containsMouse // uncoment if onEntered and onExited is commented
        front: Rectangle 
        { 
            color: "red"; 
            anchors.fill: parent 
             }
        back: Rectangle
        { 
            color: "blue"; 
            anchors.fill: parent 
        }
        transform: Rotation
        {
            id: rotation
            origin.x: flipable.width/2
            origin.y: flipable.height/2
            axis.x: 0; axis.y: 1; axis.z: 0
            angle: 0
        }
        states: State
        {
            name: "back"
            PropertyChanges { target: rotation; angle: 180 }
            when: flipable.flipped
        }
        transitions: Transition
        {
            NumberAnimation { target: rotation; property: "angle"; duration: 1000 }
        }
    }
}