×
Namespaces

Variants
Actions

QML入门教程(2)

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

兼容于
平台:
Symbian

文章
bugatcuteqt 在 28 May 2010 创建
最后由 hamishwillee 在 13 Jun 2012 编辑

在上一篇文章里我们使用了最基础的QML类型实现了文字Hello,World的显示。这篇文章中将会增加颜色选项面板,用户可以给Hello,World设置不同的颜色,如下图显示
Qml2.png

QML组件

从图中可以看到选项面板由6个颜色小块组成,它们唯一的区别就是颜色不一样。那么我们就可以用组件(Component)来实现一个颜色块,然后在需要的时候使用这个组件就可以了。组件其实和其它编程语言中的宏,函数,类,结构体等功能差不多,就是代码复用。作为程序员,我知道你懂的。 组件由一个单独的QML文件名组成,文件名总是以大写字母开头,要使用该组件的时候直接使用该文件名就可以了。关于如何定义自己的组件,请访问Defining new Components。我们为一个颜色块定义了一个Cell.qml文件,然后使用Cell作为一个去访问它。


Cell.qml的内容

import Qt 4.7
 
Item {
id: container
property alias cellColor: rectangle.color
signal clicked(color cellColor)
width: 40; height: 25
Rectangle {
id: rectangle
border.color: "white"
anchors.fill: parent
}
MouseArea {
anchors.fill: parent
onClicked: container.clicked(container.cellColor)
}
}

挨个看代码~

Item {
id: container
property alias cellColor: rectangle.color
signal clicked(color cellColor)
 
width: 40; height: 25

Item是最常使用的QML类型,一般用作其它类型的容器,可以理解成最顶级的父类,功能类似于QtGui中的QWidget。用一个属性别名访问其内嵌对象rectangle的color属性。在其它文件中可以用Cell对象的cellColor获得rectangle的color值。 signal clicked(color cellColor)则为对象定义了一个信号,在代码的其它部分可以发出这个信号。

Rectangle {
id: rectangle
border.color: “white”
anchors.fill: parent
}

这一部分没有特别好说的,在Item中内嵌了一个id为rectangle白边框的矩形区域,大小占满整个Item。

MouseArea {
anchors.fill: parent
onClicked: container.clicked(container.cellColor)
}

MouseArea则为Item增加了一块鼠标响应区,看它的anchors知道,在整个Item区域内都是鼠标活动区,都能侦听到鼠标事件。onClicked那一行则相当于为鼠标单击事件增加了一个处理行为,这里是发出了一个clicked()的信号。这个信号正是我们在Item里定义的那个signal。 Cell.qml写完了,再来看看程序的主文件。


main.qml的内容

import Qt 4.7
Rectangle {
id: page
width: 500; height: 200
color: "lightgray"
 
Text {
id: helloText
text: "Hello world!"
y: 30
anchors.horizontalCenter: page.horizontalCenter
font.pointSize: 24; font.bold: true
}
Grid {
id: colorPicker
x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
rows: 2; columns: 3; spacing: 3
 
Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
}
}

这里在原来的基础上增加了一个Grid网格。x坐标是4,底部挨着page的底部,所以我们看到的是在左下角。 新增的6个Cell,名字和Cell.qml是一样的。通过cellColor属性将颜色传给了每个颜色块。 当Cell接收到onClicked事件的时候,关联的代码回去修改Hello,World上的颜色。细心的朋友可能会注意到Cell只是定义了clicked()的信号,并没有定义onClicked()啊,是的这就是Component的语法规则了。如果你在Cell.qml里定义的是clicked(),那么你在main.qml中引用的时候就该用onClicked()了。

好了,代码也不少了,随便改动改动,你会了解更多QML的秘密的:)

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