Qml 矩形'；s MouseArea.onClicked on first mouse click state属性为空

我有以下QML

矩形

：

import QtQuick 2.5
import QtQuick.Layouts 1.1

Rectangle
{
    id: uePlaceSwitcher

    property string ueParamUserImage
    property string ueParamUserName
    property string ueParamPlaceName

    signal ueSignalPlaceSwitcherReleased
    signal ueSignalPlaceSwitcherPressed

    radius: 16
    border.color: "#4682b4"
    border.width: 1
    antialiasing: true

    Layout.fillWidth: true
    Layout.fillHeight: true

    Layout.minimumWidth: 128
    Layout.preferredWidth: 384
    Layout.maximumWidth: 384

    enabled: false

    gradient: Gradient
    {
        GradientStop
        {
            id: uePlaceSwitcherGradientPosition0

            position: 0
            color: "#000000"

            ParallelAnimation on color
            {
                id: uePlaceSwitcherReleasedAnimation

                loops: 1
                running: false

                ColorAnimation
                {
                    from: "#4682b4"
                    to: "#000000"
                    duration: 100
                }   // ColorAnimation
            }   // ParallelAnimation

            ParallelAnimation on color
            {
                id: uePlaceSwitcherPressedAnimation

                loops: 1
                running: false

                ColorAnimation
                {
                    from: "#000000"
                    to: "#4682b4"
                    duration: 100
                }   // ColorAnimation
            }   // ParallelAnimation
        }   // GradientStop

        GradientStop
        {
            id: uePlaceSwitcherGradientPosition1

            position: 1
            color: "#ffffff"
        }   // GradientStop
    }   // Gradient

    RowLayout
    {
        id: ueMainLayout

        anchors.fill: parent
        anchors.margins: 8

        spacing: 8

        Image
        {
            id: ueUserImage

            antialiasing: true

            clip: true

            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter

            source: ueParamUserImage

            smooth: true

            fillMode: Image.PreserveAspectFit

            horizontalAlignment: Image.AlignHCenter
            verticalAlignment: Image.AlignVCenter
        }   // Image

        ColumnLayout
        {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter

            Text
            {
                color: "#ffffff"

                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.alignment: Qt.AlignLeft|Qt.AlignTop

                antialiasing: true

                text: ueParamUserName

                font.family: "Courier"
                font.bold: true
                font.pointSize: 16

                clip: true

                textFormat: Text.RichText

                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
            }   // Text

            Text
            {
                color: "#ffffff"

                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.alignment: Qt.AlignLeft|Qt.AlignBottom

                antialiasing: true

                text: ueParamPlaceName

                font.family: "Courier"
                font.bold: true
                font.pointSize: 16

                clip: true

                textFormat: Text.RichText

                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
            }   // Text
        }   // ColumnLayout
    }   // RowLayout

    MouseArea
    {
        anchors.fill: parent

        onClicked:
        {
            print("onClicked state: "+state)
            if(state==="uePlaceSwitcherStateReleased")
            {
                state="uePlaceSwitcherStatePressed"
                uePlaceSwitcherPressedAnimation.running=true
                ueSignalPlaceSwitcherPressed()
            }
            else
            {
                state="uePlaceSwitcherStateReleased"
                uePlaceSwitcherReleasedAnimation.running=true
                ueSignalPlaceSwitcherReleased()
            }   // if
        }   // onClicked
    }   // MouseArea

    states:
    [
        State
        {
            name: "uePlaceSwitcherStatePressed"
        },  // State

        State
        {
            name: "uePlaceSwitcherStateReleased"
        }   // State
    ]   // states

    Component.onCompleted:
    {
        state="uePlaceSwitcherStateReleased"
        enabled=true
        print("Component.onCompleted state: "+state)
    }
}   // Rectangle

现在，这个

矩形

有两种状态，在第一次单击时，矩形不处于这两种状态。以下是首次单击后的调试打印：

qml:Component.onCompleted状态：uePlaceSwitcherStateReleased
qml:onClicked状态：

---

正如您所看到的，

onCompleted

处的状态是可以的，但是当我第一次单击

矩形时，状态得到emtpy字符串。为什么
 我认为您正在更改
鼠标earea
的状态，而不是
矩形的状态

据报道,

每个基于项的组件都有一个状态属性和一个默认状态。
默认状态为空字符串（“”），包含所有
项的初始属性值

在没有任何引用的情况下，您正在打印此行中的
MouseArea
状态：

print("onClicked state: "+state)

因此，您应该使用其
id
标识
矩形的状态。在您的情况下：
uePlaceSwitcher.state

我已经测试了下面的代码，效果很好

    MouseArea
    {
        anchors.fill: parent

        onClicked:
        {
            print("onClicked state: " + uePlaceSwitcher.state)
            if(uePlaceSwitcher.state==="uePlaceSwitcherStateReleased")
            {
                uePlaceSwitcher.state="uePlaceSwitcherStatePressed"
                uePlaceSwitcherPressedAnimation.running=true
                ueSignalPlaceSwitcherPressed()
            }
            else
            {
                uePlaceSwitcher.state="uePlaceSwitcherStateReleased"
                uePlaceSwitcherReleasedAnimation.running=true
                ueSignalPlaceSwitcherReleased()
            }   // if
        }   // onClicked
    }   // MouseArea

    states:
    [
        State
        {
            name: "uePlaceSwitcherStatePressed"
        },  // State

        State
        {
            name: "uePlaceSwitcherStateReleased"
        }   // State
    ]   // states

    Component.onCompleted:
    {
        state="uePlaceSwitcherStateReleased"
        enabled=true
        print("Component.onCompleted state: "+state)
    }

虽然在我看来，我们也应该在
组件.onCompleted
中使用
id
，因为它使代码更容易理解。不过，这是没有必要的

Component.onCompleted:
{
    uePlaceSwitcher.state="uePlaceSwitcherStateReleased"
    enabled=true
    print("Component.onCompleted state: " + uePlaceSwitcher.state)
}

@果仁恐慌（太棒了！）快乐编码！；）