qml 引入js_在QML中利用Javascript动态生成画面

标签：

在这篇文章中介绍如何使用Javascript来动态生产画面。 我们在先前的例子中“如何使用QML动态产生Component来完成我们的气球游戏 (2)”已经对动态生产QML做了一些描述。也许那个项目比较复制，现在我来用一些简单的例子来说明一下，这样更加直观。更多的说明可以参阅文章“Dynamic

QML Object Creation from JavaScript”。

1)创建我们的动态QML文件

这个文件将被用来被Javascript来动态生产。这是一个模版尽管每次生成的object的属性可能会不一样。

dynamic-image.qml

import QtQuick 2.0

Image {

width: 400

height: 225

source: "images/image1.jpg"

Image {

id: overlay

anchors.fill: parent

source: "images/image2.jpg"

opacity: 0;

Behavior on opacity { NumberAnimation { duration: 300 } }

}

MouseArea {

anchors.fill: parent

onClicked: {

if (overlay.opacity === 0)

overlay.opacity = 1;

else

overlay.opacity = 0;

}

}

}

这是一个很简单的QML文件。它显示了一个画面，当我们点击画面时，overlay中的画面将会交叉显示或隐藏。

2)创建动态生产QML Object的Javascript

create-component.js

var component;

function createImageObject(x, y) {

component = Qt.createComponent("dynamic-image.qml");

if (component.status === Component.Ready || component.status === Component.Error)

finishCreation(x, y);

else

componen