如何在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;
    } 
}

如您所见，这个函数中，我调用了n（在这里是3）次另一个JS函数来动态创建若干个QML对象并添加到场景中：

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

这很好运作。但是创建的对象（Symbol）会以翻译动画（约1秒钟）的形式出现在windowApp中，我希望在创建第二个对象之前等待第一个对象的动画完成...

由于我们无法在QML中使用JavaScript函数setTimeOut()，所以我想知道如何实现这一点。我不知道如何利用QML Timer对象甚至PauseAnimation...

有人知道如何在两个QML JavaScript操作之间添加延迟吗？

- Benoit

Answer 1

我认为这个QML计时器类型可以帮助您实现所需的功能。

import QtQuick 2.0
Item {
       Timer {
               interval: 500; running: true; repeat: true
               onTriggered: time.text = Date().toString()
             }

       Text { id: time }
} 

- Redanium

Answer 2

你可能可以这样做，只需在按钮操作中创建一个“Symbol”，并在新对象上的某个事件触发新的符号。也许动画结束会触发一个事件，你可以利用它吗？

- onion

---

嗨，感谢您的帮助。实际上，我可以通过在结尾处插入scriptAction来等待动画完成。然而，我想在创建符号后调用的函数可能会因程序运行而异，这将破坏我最初的步骤（在_actionOnButtonClicked()_函数中执行）。请注意，在我的代码示例中，我故意使用了_for_来在该函数中创建多个对象以简化操作，但是该函数实际上在不同对象之间执行多个操作... - Benoit

Answer 3

已经有一段时间了，我想念QML。但是让我尝试提供一种解决方案。如果你正在Component.onCompleted事件中调用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;

}

- RajaRaviVarma