带有 Timer 的 Qml 函数工作错误

Posted 2023-02-16

【中文标题】带有 Timer 的 Qml 函数工作错误

【英文标题】：Qml function with Timer works wrong

【发布时间】：2019-01-06 17:21:45

【问题描述】：

我有一个 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”。然后我的矩形只显示一秒钟，上面总是有随机数。请帮我。我非常努力地解决了为什么这段代码不能正常工作。

【参考方案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