QML - 发生事件时动态创建定时器

Question

我有一个ListView，其代表是一个红色按钮。当按钮的颜色发生变化时，我希望程序动态创建一个定时器（特定于该代表），该定时器在5秒后再次将颜色设置为红色。然后我想让程序销毁计时器。我该怎么做？

这里是我的实际代码：

ListView { 
    id: myListView 
    model: myListModel 
    anchors.fill: parent 
    anchors.leftMargin: 20; anchors.rightMargin: 20 
    orientation: Qt.Vertical 
    clip: true 
    spacing: 8 
    delegate: Button { 
     id: myDelegate 
     property int myDelegateIndex: index + 1 
     width: 100; height: 50 
     text: "Push" 
     background: Rectangle { 
      id: myDelegateBackground 
      color: "red" 
      onColorChanged: { 
       myTimer.start(); 
      } 
     } 

     Timer { 
      id: myTimer 
      interval: 5000 
      running: true 
      repeat: true 
      onTriggered: { 
       myDelegateBackground.color = "red"; 
      } 
     } 
    } 
} 

谢谢大家了很多！

Answer 1

您创建一个组件

SelfdestroyingTimer.qml

Timer { 
    property var action // Assing a function to this, that will be executed 
    running: true 
    onTriggered: { 
     action() 
     this.destroy() // If this timer is dynamically instantitated it will be destroyed when triggered 
    } 
} 

而且具有这样的功能：

function createOneShotTimer(duration, action) { 
    var comp = Qt.createComponent('SelfdestroyingTimer.qml') 
    comp.createObject(root, { action: action, interval: duration }) 
} 

或在同一文件中声明组件（所以你不需要每次你想要一个实例时创建它），它看起来像这样：

import QtQuick 2.5 
import QtQuick.Controls 1.4 
import QtQuick.Controls.Styles 1.4 
import QtQuick.Window 2.0 
import QtQuick.Dialogs 1.2 

ApplicationWindow { 
    id: window 
    visible: true 
    width: 600 
    height: 600 

    Component { 
     id: singleShot 
     Timer { 
      property var action 
      running: true 
      onTriggered: { 
       if (action) action() // To check, whether it is a function, would be better. 
       this.destroy() 
      } 
      // This proves, it will be destroyed. 
      Component.onDestruction: console.log('Timer says bye bye!') 
     } 
    } 


    Button { 
     onClicked: { 
      singleShot.createObject(this, { action: function() { console.log('ACTION!!!') }, interval: 2000 }) 
     } 
    } 
} 

Answer 2

似乎没有必要动态创建定时器。为每个委托创建一个Timer并通过调用restart（）来重用它。

见下面的例子：

ListView { 
    id: myListView 
    model: 20 
    anchors.fill: parent 
    anchors.leftMargin: 20; anchors.rightMargin: 20 
    orientation: Qt.Vertical 
    clip: true 
    spacing: 8 
    delegate: Button { 
     id: myDelegate 
     property int myDelegateIndex: index + 1 
     width: 100; height: 50 
     text: "Push" 
     background: Rectangle { 
      id: myDelegateBackground 
      color: "red" 
      onColorChanged: { 
       myTimer.restart(); 
      } 

      Timer { 
       id: myTimer 
       interval: 5000 
       running: false 
       repeat: false 
       onTriggered: { 
        myDelegateBackground.color = "red"; 
       } 
      } 
     } 
     onClicked: { 
      background.color = "blue" 
     } 
    } 
} 

不管你选择这样做有什么机制，你将有造成破坏的ListView滚动哪出的ListView的可见区域的代表问题。当委托被破坏并重新创建时，它将具有其原始颜色，并且计时器将处于默认状态。

有两个选项来处理这样的场景：

• 保存委托给列表的状态（在JavaScript VAR）委托的范围之内。
• 增加Listview cacheBuffer，以便ListView不会在代理不在可见区域时销毁代理。