单击组件后更改值时，QML MouseArea悬停停止工作

Question

我有以下代码：

...
property var isEnabled: true;

Text {
    id: iconName
    color: isEnabled ?(mouseArea.containsMouse ? "blue": "white"): "black" 
    ...
}
MouseArea {
    id: mouseArea
    anchors.fill: parent
    propagateComposedEvents: true
    hoverEnabled: true
    onClicked:{
            if(isEnabled){
                isEnabled = false;
            }else{
                isEnabled = true;
            }
        mouse.accepted = false;
    }
    ...

当我启动应用程序时，如果我将鼠标悬停在iconName上，颜色会从蓝色变为白色（取决于鼠标是否在文本上方）。

如果我点击，iconName会变成蓝色，但我希望看到它变为黑色。

我错过了什么吗？有提示吗？

谢谢！

Answer 1

MouseArea组件可能是意外的大小。为MouseArea组件着色以确保您在正确的位置单击，例如：

Item {
    id: topItem

    property var isEnabled: true;

    width: 50
    height:50

    Text {
        id: iconName
        color: topItem.isEnabled ?(mouseArea.containsMouse ? "blue": "white"): "black"
        text: "hello world!"
        font.pointSize: 20
    }
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        propagateComposedEvents: true
        hoverEnabled: true
        onClicked:{
                if(topItem.isEnabled){
                    topItem.isEnabled = false;
                }else{
                    topItem.isEnabled = true;
                }
            mouse.accepted = false;
        }

        Rectangle {
            anchors.fill: mouseArea
            color: "red"
            opacity: 0.2
        }
    }
}