Question

我希望在QML中有一个按钮，它有3种状态：关闭，按下和打开。现在我有以下代码，但它不起作用。现在我有一个切换功能，根据以前的状态设置新状态，但如果先前的状态是“按下”，那么如何在按下切换按钮之前检测状态？

以下不是全班，只是相关功能和鼠标区

    Rectangle {
        id: button1
        function toggle(){
            var tempstate = button1.state
            if (tempstate=="on") {tempstate = "off"; } else { tempstate ="on"}
        }

        MouseArea {
            anchors.fill: parent
            onPressed: parent.state = "pressed"
            onReleased: parent.toggle()
        }

Answer 1

我使用三元条件语句解决了这个问题。而不是使用3个状态，我使用2个状态，其中每个状态都有一个基于MouseArea.pressed属性的条件。

如果这对于QML有点不明智或不合适，请用更惯用的解决方案纠正我。

Rectangle的color属性可以替换为图像项中的source，或其他属性来创建其他＆＃34; 3状态＆＃34;可点击的项目。

Here is the link to QML's documentation我意识到这可以做到。

示例代码：

Rectangle {
    id: button1
    state: "off"
    color: "red"
    MouseArea {
        id: button1area
        anchors.fill: parent
        onReleased: parent.state == "on" ? parent.state = "off" : parent.state = "on"
    }
    states: [
        State {
            name: "off"
            PropertyChanges { target: button1; color: button1area.pressed ? "red" : "blue" }
        },
        State {
            name: "on"
            PropertyChanges { target: button1; color: button1area.pressed ? "green" : "blue" }
        }
    ]
}

Answer 2

你考虑过使用Button吗？它可以被检查，因此它就像打开/关闭状态，并且它具有“按下”属性，指示当前是否按下了按钮。

import QtQuick.Controls 1.3
Button {
    checkable: true
    text: pressed ? "pressed" : (checked ? "on" : "off")
}

Answer 3

尝试使用它：

Rectangle {
   id: button1

   function toggle(){
       var tempstate = button1.state;  //write var if is local variable
       if (tempstate=="on") {state = "off"; } else { state = "on"}
   }

   MouseArea {
   anchors.fill: parent
   onPressed: parent.state = "pressed"
   onReleased: parent.toggle()
}

“tempstate”持有字符串的状态名称。它没有对象参考。您可以直接访问函数中的state属性。

QML按钮切换

3 个答案: