×
Namespaces

Variants
Actions

动态创建QML组件

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata

代码示例
兼容于
平台:
Symbian

文章
hozhou 在 24 Mar 2011 创建
最后由 hamishwillee 在 13 Jun 2012 编辑

Contents

引言

有些时候在程序中我们需要动态地创建QML组件,这时候我们应该怎么做呢?本文就以一个例子程序为例为大家介绍一种动态创建QML组件的方式。


主要代码分析

要创建组件,那么我们首先要有组件。因此这里我们写了一个名为Bubble.qml的文件,这样程序其他地方就可以访问组件Bubble了。

import QtQuick 1.0
 
BorderImage {
id: name
source: "bubble.png"
border.left: 5; border.top: 5
border.right: 5; border.bottom: 5
width: 10 + 40*Math.random()
height: width
property bool rising: false
property real pointx: 0
property real pointy: -10
y: rising ? pointy : pointy + Math.random()* 640
x: (!rising) ? pointx : Math.random()* 360
 
Behavior on x {
id: xBehavior
SmoothedAnimation {
velocity: 100+Math.random()*100
}
}
Behavior on y {
id: yBehavior
SmoothedAnimation {
velocity: 100+Math.random()*100
}
}
Timer {
interval: 80+Math.random()*40
repeat: true
running: true
onTriggered: {
if (rising) {
if (y > appWindow.height || y < 0) {
yBehavior.enabled = false;
rising = false;
yBehavior.enabled = true;
rising = true;
}
}
}
}
}




然后我们看一下我们的主程序文件main.qml:

import QtQuick 1.0
import "core/componentCreation.js" as MyScript
Rectangle{
id: appWindow
width: 360
height: 640
gradient: Gradient {
GradientStop { position: 0.0; color: Qt.rgba(157,206,255,0.5) }
GradientStop { position: 0.8; color: "blue" }
GradientStop { position: 1.0; color: "darkblue" }
}
Rectangle {
id: myButton
anchors { bottom: parent.bottom; bottomMargin: 5; right: parent.right; rightMargin: 5; }
width: 130; height: 30
radius: 6
color: "green"
signal clicked
MouseArea { id: mouseArea; anchors.fill: parent; onClicked: myButton.clicked() }
Text {
id: buttonLabel; text: "New Component"; font.pointSize: 10; font.bold: true
anchors.centerIn: parent;
}
onClicked: MyScript.createMyObjects();
}
}

这里我们import了一个JavaScript文件componentCreation.js,并且调用了他的createMyObjects()方法用于创建Component Bubble。




下面我们看一下componentCreation.js里createMyObjects()具体是怎么创建Bubble的:

var component;
var myBubble;
 
function createMyObjects() {
 
component = Qt.createComponent("core/Bubble.qml");
if (component.status == Component.Ready)
{
finishCreation();
 
}
else if (component.status == Component.Error)
{
console.log("component Error:", component.errorString());
}
else{
component.statusChanged.connect(finishCreation);
}
}
 
function finishCreation() {
if (component.status == Component.Ready) {
myBubble = component.createObject(appWindow);
if (myBubble == null) {
console.log("component createObject failed");
} else {
myBubble.rising = true;
}
}
else if (component.status == Component.Error) {
console.log("Error loading component:", component.errorString());
}
}

这里使用了 Qt.createComponent() 来加载QML component。之后我们首先判断component的状态status,只有当其状态为Component.Ready时才说明component加载成功了,这是为了应对加载的qml文件是来自于网络上的情况。如果component还没加载成功,我们就将component的statusChanged信号连接到finishCreation()函数上,但状态发生改变时再继续进行判断。

当Component.Ready时,我们才调用component的createObject()方法,并要给他传一个parent,我们这里传递的是appWindow 这个Element,这样新创建的myBubble 就成为主窗口的孩子了,否则myBubble 无法显示到主窗口中。


程序截图

程序中我们点一下绿色的New Component按钮就会随机生成一个气泡。

MyBubble.png

下载例程

Media:DynamicComponent.zip
Media:DynamicComponent_2.zip

相关链接

This page was last modified on 13 June 2012, at 13:59.
250 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×