×
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.
319 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.

×