×
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.
239 page views in the last 30 days.
×