标签：
在这篇文章中介绍如何使用Javascript来动态生产画面。 我们在先前的例子中“如何使用QML动态产生Component来完成我们的气球游戏 (2)”已经对动态生产QML做了一些描述。也许那个项目比较复制，现在我来用一些简单的例子来说明一下，这样更加直观。更多的说明可以参阅文章“Dynamic QML Object Creation from JavaScript”。
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;
}
}
}
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
component.statusChanged.connect(finishCreation);
}
function finishCreation(x, y) {
if (component.status === Component.Ready)
{
var image = component.createObject(container, {"x": x, "y": y, width: 300, height:200});
if (image == null)
console.log("Error creating image");
}
else if (component.status === Component.Error)
console.log("Error loading component:", component.errorString());
}
import QtQuick 2.0
import Ubuntu.Components 1.1
import "create-component.js" as ImageCreator
/*!
\brief MainView with a Label and Button elements.
*/
MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"
// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "dynamicqml.liu-xiao-guo"
/*
This property enables the application to change orientation
when the device is rotated. The default is false.
*/
//automaticOrientation: true
// Removes the old toolbar and enables new features of the new header.
useDeprecatedToolbar: false
width: units.gu(60)
height: units.gu(85)
Page {
id: root
title: i18n.tr("dynamicqml")
property int position: 0
Flickable {
width: parent.width
height: parent.height
clip:true
contentHeight: container.childrenRect.height
Column {
id: container
anchors.centerIn: parent
}
}
Row {
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottomMargin: units.gu(1)
spacing: units.gu(1)
Button {
text: "Create New"
onClicked: {
ImageCreator.createImageObject(0, root.position);
root.position += 200;
}
}
Button {
text: "Create from string"
onClicked: {
var newObject = Qt.createQmlObject('import QtQuick 2.0;
Image {source: "images/image3.jpg"; width: 300; height: 200}',
container, "dynamicSnippet1");
newObject.x = 0;
newObject.y = root.position;
}
}
}
Component.onCompleted: {
ImageCreator.createImageObject(0, 0);
root.position += 200
}
}
}
Button {
text: "Create New"
onClicked: {
ImageCreator.createImageObject(0, root.position);
root.position += 200;
}
}
Button {
text: "Create from string"
onClicked: {
var newObject = Qt.createQmlObject('import QtQuick 2.0;
Image {source: "images/image3.jpg"; width: 300; height: 200}',
container, "dynamicSnippet1");
newObject.x = 0;
newObject.y = root.position;
}
}
ListModel {
id: objectsModel
} function itemAdded(obj, source) {
objectsModel.append({"obj": obj, "source": source})
}
Row {
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottomMargin: units.gu(1)
spacing: units.gu(1)
Button {
text: "Create New"
onClicked: {
var image = ImageCreator.createImageObject(0, root.position);
itemAdded(image, "dynamic-image.qml");
root.position += 200;
}
} Button {
text: "Clear objects"
onClicked: {
while(objectsModel.count > 0) {
objectsModel.get(0).obj.destroy();
objectsModel.remove(0);
}
}
}
版权声明：本文为博主原创文章，未经博主允许不得转载。
标签：
原文地址：http://blog.csdn.net/ubuntutouch/article/details/47019631
