Question

我尝试更改此处给出的示例（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 }
         }
     }

Answer 1

首先，我必须责怪你，你的榜样不起作用。

好的，所以不要将MouseArea放在正面和背面，因为它们的宽度是动态变化的，并且边框触摸鼠标会产生输入和退出的信号。您必须将MouseArea设置为父级或兄弟级。然后您可以使用输入和退出的信号或containsMouse属性。

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 }
        }
    }
}

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

1 个答案: