Question

我有以下QML Rectangle：

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

现在，此Rectangle有两种状态，第一次点击Rectangle不在两种状态中。首次点击后，这是调试打印：

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

正如您所看到的，onCompleted处的状态正常，但是当我第一次单击Rectangle时，状态将获得emtpy字符串。为什么呢？！

Answer 1

我认为您正在更改MouseArea的状态，而不是Rectangle。

根据documentation，

每个基于项目的组件都具有状态属性和默认状态。默认状态是空字符串（＆＃34;＆＃34;）并包含所有的字符串 item的初始属性值。

如果没有任何引用，您将在此行中打印MouseArea状态：

print("onClicked state: "+state)

因此，您应该使用Rectangle标识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)
    }

虽然在我看来，我们也应该使用id中的Component.onCompleted，因为它可以让代码更容易理解。但这并不是必要的。

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

Rectangle的MouseArea.onClicked第一次鼠标点击状态属性为空

1 个答案: