[cpp] view plain copy
Item {
<strong>id: root</strong>
width: units.gu(100)
height: units.gu(75)
signal redLightOn
signal greenLightOn
signal yellowLightOn
Rectangle {
id: background
anchors.fill: parent
color: "black"
property int size: width*0.7
我們可以看到我們已經定義了三個信號。它們分別是"redLightOn", "greenLightOn"及“yellowLightOn”。我們定義這三個信號的目的是為了當紅色，黃色及綠色的燈亮的時候，我們用這些信號來發送壹個通知。這樣只要有興趣的代碼可以對它進行截獲，並處理。這裏必須註意的是信號的第壹個字母為小寫！
接下來，我們在我們的JS代碼中來發送這些信號。代碼如下：
[cpp] view plain copy
Timer {
interval: 1000
running: true
repeat: true
property int count: 0
onTriggered: {
if (parent.state == "red_on" && count >= 5)
{
parent.state = "red_yellow_on"
<strong> root.redLightOn();
root.yellowLightOn();</strong>
count = 0
}
else if ( parent.state == "red_yellow_on" )
{
parent.state = "green_on"
<strong>root.greenLightOn();</strong>
count++
}
else if ( parent.state == "green_on" && count >= 5 )
{
parent.state = "yellow_on"
<strong> root.yellowLightOn();</strong>
count ++
}
else if ( parent.state == "yellow_on" ) {
parent.state = "red_on"
redLightOn();
count = 0
}
else {
count++
}
}
}
發送信號其實非常簡單。直接發送，就像調用壹個方法壹樣。
為了在我們的代碼部分截取這個應用，我們可以使用如下的方法。在“TrafficLight.qml”中，修改代碼為：
[cpp] view plain copy
import QtQuick 2.0
import Ubuntu.Components 0.1
import "ui"
MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"
// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "com.ubuntu.developer.liu-xiao-guo.TrafficLight"
/*
This property enables the application to change orientation
when the device is rotated. The default is false.
*/
//automaticOrientation: true
width: units.gu(120)
height: units.gu(80)
Page {
id:main
anchors.fill: parent
Row {
id: myrow
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
spacing: units.gu(5)
MyLight {
id:light
width: main.width/5
height: width*3
onRedLightOn: {
console.log("red light is on")
}
}
Connections {
target: light
onYellowLightOn: {
console.log("yellow light is on")
}
}
}
function greenLightOn() {
console.log("green light is on")
}
Component.onCompleted: {
light.greenLightOn.connect(greenLightOn);
}
}
}
為了說明清楚，我寫了三種方法。壹種是直接把信號的第壹個字母變為大寫， 並同時在前面加上"on“。第二種方法使用”Connections"來實現槽的連接。第三種方法，我們可以直接 把信號連接到壹個JS的函數上。運行程序，我們可以在應用的輸出窗口看到如下的輸出：
[cpp] view plain copy
green light is on
yellow light is on
red light is on
red light is on
yellow light is on
green light is on
yellow light is on
red light is on
red light is on
yellow light is on
事實上所有的控件的property都可以發出壹個信號。讓我們來看壹下我們先前完成的“color” property。
[cpp] view plain copy
void TrafficLight::setColor(const QColor &color)
{
if ( color == m_color )
return;
else {
m_color = color;
update(); // repaint with the new color
emit colorChanged();
}
}
從這裏可以看出，每當property的值發生改變時，就會發生壹個叫做“colorChanged”的信號。我們可以在我們的QML中截獲這個信號。比如在我們的代碼中，我們可以使用如下的代碼：
[cpp] view plain copy
TrafficLight{
id: redlight
width: background.size
height: background.size
color:"red"
onColorChanged: {
console.log("Color is changed to " + color);
}
}
當我們運行時，我們可以看到好多的顏色變化的事件。這是由於顏色在transition時發生很多的顏色的變化。同樣我們也可以對任何壹個property進行事件的捕獲。比如：
[cpp] view plain copy
TrafficLight{
id: redlight
width: background.size
height: background.size
color:"red"
onColorChanged: {
console.log("Color is changed to " + color);
}
onWidthChanged: {
console.log("width is changed to " + width);
}
}
這段代碼可以對"width"的變化進行捕獲！