如何才能使当值超出特定范围时按钮开始闪烁，并且当它返回时它是 QML 中的默认颜色

Question

正如标题所说，我正在尝试在 qml 中编写一些代码，每当一个值超出设置为“正常”的值时，基本上就会启动警告闪烁，并且当它返回到该范围内时，它会返回到指定的颜色。 我教给动画一个 id，并在 if 语句返回 false 时执行 id.start，但 .start 和 .start() 不起作用并不断导致错误。现在，按照我的方式，它从红色开始，当它应该变成绿色时，动画开始（我在该文件外部运行一个循环，以使值从 0 爬升至无穷大）。

Rectangle{
 x: -90
 width:  40
 height: 40
 color: (value1 <= 110) && (value2 >= 70) ? Qt.rgba(0,1,0,1) : Qt.rgba(1,0,0,1)
 radius: 35

Behavior on color {
  SequentialAnimation {
  id: anim
  loops: Animation.Infinite
   ColorAnimation {from: "white"; to: "red"; duration: 300 }
   ColorAnimation { from: "red"; to: "white";  duration: 300 }
}
}

   }

}

Answer 1

您可以基于状态，例如正常和警报，因此在某些条件下从一个状态切换到另一个状态，例如：

ColumnLayout {
    spacing: 10
    anchors.centerIn: parent
    Rectangle {
        id: lamp
        Layout.alignment: Qt.AlignHCenter
        width: 50
        height: 50
        radius: 25
        border.width: 5
        border.color: "#999"
        state:  "normal"
        states: [
            State {
                name: "normal";
                PropertyChanges { target: lamp; color: "#DEDEDE"; }
            },
            State {
                name: "alarmed";
            }
        ]
        transitions: [
            Transition {
                from: "normal"
                to: "alarmed"
                SequentialAnimation {
                    loops: Animation.Infinite
                    ColorAnimation { target: lamp; from: "yellow"; to: "red"; duration: 200 }
                    ColorAnimation { target: lamp; from: "red"; to: "yellow"; duration: 200 }
                }
            }
        ]
    }
    
    Text {
        text: "accepted only: 3 >= x <= 7"
        Layout.alignment: Qt.AlignHCenter
    }
    
    SpinBox {
        id: valueBox
        Layout.alignment: Qt.AlignHCenter
        from: 0
        to: 10
        value: 5
        onValueChanged: {
            if(valueBox.value < 3 || valueBox.value > 7)
            {
                lamp.state = "alarmed";
            }
            else
            {
                lamp.state = "normal";
            }
        }
    }
}