Question

我有一个QML项目，那里有一个Timer类。当我运行代码时，只有白色的窗口没有任何东西。我预期当我按下“向上”按钮时会出现一个黄色的矩形，显示5秒钟，然后在该矩形上写入数字“ 5” 1秒钟，然后写入“ 4” 1秒钟，依此类推，并在5秒钟后这个矩形会消失。

但是我的代码工作方式不同，我真的很困惑。

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
   visible: true
   width: 640
   height: 480

   Timer {
        id: timer
        function setTimeout(cb, delayTime) { 
            timer.interval = delayTime;
            timer.repeat = true;
            timer.triggered.connect(cb);
            timer.start();
        }
    }

    Rectangle{ // This is invisible rectangle 
        width: 100
        height: 100
        focus: true 
        Keys.onPressed: { //
            if (event.key == Qt.Key_Up){ // this is function where I change values of number
                console.log(tf.counter); //this is for debugging 
                tf.counter = 5; // tf is id of Text
                test.visible = true; // test is id of yellow rectangle
                timer.setTimeout(function(){ //setTimeout is function defined in Timer
                    tf.counter--;
                    if (tf.counter > 0){
                        tf.text = tf.counter;
                    }
                    else {
                        tf.counter = 5;
                        tf.text = tf.counter;
                        test.visible = false;
                        timer.stop();
                    }

                }, 1000);
            }
        }

    }

    Rectangle{

        id: test 
        visible: false // now this is invisible
        color:  "yellow"
        width: 100
        height: 100
        x: 200
        y: 200

        Text {
            x: 5
            y: 5
            property int counter: 5 // this is custom property wich I assign to tf.text 
            id: tf
            text: "5"
        }
    }
}

当我第一次按下“向上”按钮时，它完全可以正常工作，但是随后我第二次按下“向上”按钮，此后它如此奇怪，我不明白为什么。第二次，它给我“ 5”，然后是“ 3”，然后是“ 1”。第三次，它给我“ 4”，“ 1”。然后我的矩形只显示一秒钟，并且上面总是有随机数。请帮我。我非常努力地解决了为什么此代码无法正常工作的问题。

Answer 1

您正在使逻辑复杂化，如果建立了以下规则，则逻辑很简单：

按向上键时，必须启动计时器并使Rect可见。
使用计时器每隔一秒，计数器将减少1。
当计数器达到0时，必须停止计时器，Rect不可见，并且计数器再次设置为0。

*。qml

Window {
    visible: true
    width: 640
    height: 480
    Timer {
        id: timer
        onTriggered: tf.counter--; // 2
        interval: 1000
        repeat: true
    }
    Rectangle{ // This is invisible rectangle
        width: 100
        height: 100
        focus: true
        Keys.onPressed: if (event.key === Qt.Key_Up){rect.visible = true; timer.start()} // 1
    }
    Rectangle{
        id: rect
        visible: false
        color:  "yellow"
        width: 100
        height: 100
        x: 200
        y: 200
        Text {
            id: tf
            x: 5
            y: 5
            property int counter: 5
            onCounterChanged: if(counter == 0){rect.visible = false; timer.stop(); counter=5} // 3
            text: counter
        }
    }
}

另一种解决方案：

Window {
    visible: true
    width: 640
    height: 480
    Timer {
        id: timer
        onTriggered: tf.counter--;
        interval: 1000
        repeat: true
        running: tf.counter > 0
    }
    Rectangle{ // This is invisible rectangle
        width: 100
        height: 100
        focus: true
        Keys.onPressed: if (event.key === Qt.Key_Up && !timer.running){tf.counter = 5}
    }
    Rectangle{
        id: rect
        visible: timer.running
        color:  "yellow"
        width: 100
        height: 100
        x: 200
        y: 200
        Text {
            x: 5
            y: 5
            property int counter: 0
            id: tf
            text: counter
        }
    }
}

带计时器的Qml功能工作错误

1 个答案: