在QML中呼叫c++方法並接收訊號

繼續上一篇的內容使用C++建立新的QML型別，接下來我們在PieChart 這個類中新增一個函式"clearChart()" 和一個訊號"chartCleared"，這樣在app.qml中就可以像下面一樣呼叫這個函式，並接收這個訊號了：

import Charts 1.0
import QtQuick 1.0
 
 Item {
     width: 300; height: 200
 
     PieChart {
         id: aPieChart
         anchors.centerIn: parent
         width: 100; height: 100
         color: "red"
 
         onChartCleared: console.log("The chart has been cleared")
     }
 
     MouseArea {
         anchors.fill: parent
         onClicked: aPieChart.clearChart()
     }
 
     Text {
         anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter; bottomMargin: 20 }
         text: "Click anywhere to clear the chart"
     }
 }

File:SimpleChart2.png‎
為c++類新增被呼叫的方法和訊號

下面我們就來看一下在C++的類中我們具體應該怎麼做：

class PieChart : public QDeclarativeItem
 {
     ...
 public:
     ...
     Q_INVOKABLE void clearChart();
 
 signals:
     void chartCleared();
     ...
 };

使用Q_INVOKABLE 使得Qt Meta-Object 系統可以訪問到clearChart() 方法，於是QML也可以訪問到這個方法了。請注意，由於槽函式（slots）也可以被QML呼叫，因此clearChart() 也可以被宣告為一個Qt slot 而不使用Q_INVOKABLE。這兩種方式都是有效的。

clearChart() 方法將繪製扇形圖的畫筆顏色設定成Qt::transparent（透明），並重繪扇形圖，最後發出chartCleared()訊號：

void PieChart::clearChart()
 {
     setColor(QColor(Qt::transparent));
     update();
 
     emit chartCleared();
 }

執行程式

現在我們可以啟動這個應用程式並點選其視窗區域，於是視窗上的扇形圖就消失了，並且應用程式有如下輸出：

The chart has been cleared

大家可以在 Qt 的 examples/tutorials/extending/chapter2-methods目錄中找到這個程式的完整程式碼。