如何在QML中延遲JavaScript操作？

Question

我正在構建基於QML的C++應用程序。

爲了使簡單：

在我的主QML文件，我有一個按鈕（矩形）調用JavaScript函數（在一個外部JS文件中定義），點擊時：

// My JS file linked to the main QML window 
[...] 
function actionOnButtonClicked() 
{ 
    var x = 0; 
    var y = 0; 
    for(var i = 0; i < 3; i++) 
    { 
     createObject(x, y); 
     x = x + 10; 
     y = y + 10; 
    } 
} 

正如你可以看到，在此功能，我稱之爲ñ（= 3這裏）時期的另外一個JS函數來動態地創建幾個 QML對象添加到場景：

function createObject(xPosition, yPosition) 
{ 
    component = Qt.createComponent("Symbol.qml"); 
    component.createObject(windowApp, {"x": xPosition, "y": yPosition}); 
} 

這工作正常。 但是創建的對象（Symbol）以翻譯動畫（約1秒）出現在windowApp中，並且我想在創建第二個對象之前等待第一個對象的動畫完成...

因爲我們不能使用setTimeOut（） QML中的JavaScript函數，我想知道如何實現這一點。我看不出我如何使用QML Timer對象，甚至是PauseAnimation ...

有人知道如何在2個QML JavaScript操作之間添加延遲嗎？

Answer 1

您可以這樣做，以便您只從按鈕操作中創建一個「符號」，並在新對象中的某個事件上觸發新符號。也許動畫結局觸發了一個你可以使用的事件？

Answer 2

它已經有一段時間了，我錯過了QML。但讓我試着提出一個解決方案。我想這可能會起作用，如果你在Component.onComlpeted事件中調用translationAnimation.running = true。我之前發佈了一個愚蠢的答案。現在我用一種懶惰/醜陋的方式取代它來做到這一點。這可能不是正確的做法，儘管此代碼可能有助於您的用例。

CreateObject.js

.pragma library 

var objects = null; 
var objectCount = 0; 
var i = 0; 
var mainWin; 
var x = 0; 
var y = 0; 

function calledOnbuttonAction(parentWindow) 
{ 
    if(objects === null) 
    { 
     mainWin = parentWindow; 
     x = 0; 
     y = 0; 
     objects = new Array(); 
     createObject(x,y); 
    } 

    else 
    { 
     if(x <= mainWin.width) 
      x = x + 28; 
     else 
     { 
      x = 0; 
      if(y <= mainWin.height) 
       y = y + 28; 
      else 
      { 
       console.debug("Exceeded window area!") 
       return; 
      } 
     } 
     createObject(x,y); 
    } 

} 

function createObject(xPos, yPos) 
{ 
    i++; 
    var component = Qt.createComponent("Object.qml"); 
    objects[objectCount++] = component.createObject(mainWin, {"x": xPos, "y": yPos}); 
} 

main.qml

import QtQuick 1.1 
import "CreateObjects.js" as CreateObject 

Rectangle { 
    id: mainWindow 
    width: 360 
    height: 360 

    Text { 
     text: qsTr("Click inside window") 
     anchors.centerIn: parent 
     font.pixelSize: 18 
    } 
    MouseArea { 
     anchors.fill: parent 
     onClicked: { 
      CreateObject.calledOnbuttonAction(mainWindow); //passing the parent window object 
     } 
    } 

} 

Object.qml //符號在你的情況

//The Symbol 

import QtQuick 1.1 
import "CreateObjects.js" as CreateObject 
Rectangle { 

    id: obj 
    width: 25 
    height: 25 

    gradient: Gradient { 
     GradientStop { 
      position: 0 
      color: "#d11b1b" 
     } 

     GradientStop { 
      position: 1 
      color: "#ea4848" 
     } 
    } 

    property alias animationStatus: completedAnimation 

    NumberAnimation { 
     id: completedAnimation; 
     target: obj; 
     property: "opacity"; 
     duration: 800; 
     from: 0; 
     to: 1.0; 
     onRunningChanged: { 
      if(!running && CreateObject.i < 900) // Decrease or increase the value according to the number of objects you want to create 
      { 
       CreateObject.calledOnbuttonAction(); 
      } 
     } 
    } 

    Component.onCompleted: completedAnimation.running = true; 

} 

Answer 3

我認爲這QML Timer type可以幫助你實現你想要的。