QML和C++混合编程--（二）

QML和C++混合编程–（二）之QML连接C++方法和信号

简介：

在上一篇中，我们讲到PieChart类的自定义，并且将该图形显示出来。本篇我们在QML中添加“ "clearChart()"方法，使能能够删除图形。
效果如下：


一、修改app.qml 文件

那么首先我们需要在app.qml中能够调用clearChart() 方法，并且接收chartCleared()信号。

修改代码如下：

 import Charts 1.0
 import QtQuick 2.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"
     }
 }

二、修改c++中的类

我们在c++ 类中添加clearChart()方法和chartCleared() 信号

 class PieChart : public QQuickPaintedItem
 {
     ...
 public:
     ...
     Q_INVOKABLE void clearChart();

 signals:
     void chartCleared();
     ...
 };

这里，因为是Qt Meta-Object system,，我们用到Q_INVOKABLE来使得clearChart()方法可用。

当然，在QML中 可声明为槽也是可行的。这两种方法都是行得通的。

要clearChart() 方法很简单，只需要将color设置为Qt::transparent，然后重绘chart，然后再发送chartCleared()信号：

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

     emit chartCleared();
 }

现在，我们来运行下应用程序，单击窗体，可以看到pie chart 消失了，且应用程序输出了一串文本消息:
qml: The chart has been cleared

本篇翻译自Qt 的官方文档
Writing QML Extensions with C++ 之 Chapter2