Question

我正在构建一个基于QML的 C ++应用程序。

简化：

在我的主QML文件中，我点击了一个按钮（Rectangle）调用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）出现在带有翻译动画的windowApp中（大约1秒），我想在创建第二个动画之前等待第一个对象的动画完成... < / p>

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

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

Answer 1

我认为QML Timer type可以帮助您实现自己想要的目标。

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

       Text { id: time }
}

Answer 2

您可以这样做，这样您只需从按钮操作创建一个“符号”，并在新对象的某个事件上触发新符号。也许动画结尾会触发您可以使用的事件？

Answer 3

已经有一段时间了，我已经错过了QML。但是，让我尝试提出一个解决方案。如果你在translationAnimation.running = true事件中调用Component.onComlpeted，我想这可行。我之前发过一个愚蠢的回答。现在我用一种懒惰/丑陋的方式来替换它。这可能不是正确的方法，尽管此代码可能有助于您的用例。

<强> 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;

}

如何在QML中延迟JavaScript操作？

3 个答案: