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

QML和C++混合编程 （一）

简介 ：

本教程介绍在C++应用程序中扩展使用QML。着重介绍了QML的核心特性：如属性、信号和槽。还有通过插件来销毁这些扩展。

翻译来自Qt的官方的英文教程。

Qt QML 提供了一些API，使得可以通过C++进行扩展。你可以自行书写这些扩展，来增加到你自己的QML类型中。简而言之，QML的类型可以通过C++进行扩展。

该部分的内容可详细参考《Integrating QML and C++》，该文档下的两片子目录，你可能会更喜欢：
1、 Exposing Attributes of C++ Classes to QML
2、Defining QML Types from C++.

教程一的运行效果如下：

下面介绍如何来创建一个QML的新类型。

Chapter 1: Creating a New Type

通常我们会遇到这样的一个任务：
扩展一个QML的新类型，而且该类型支持自定义的操作函数。
例如，该类型用来操作一些特殊的数据模型，或者自定义的图像类型，或者系统操作类型如网络通信的操作。

  我们先从创建一个简单的类型，名为“PieChart”开始吧。
  该类型包含两个属性： 名称（name）、颜色（color）
  我们将该类型指定一个命名空间称为“Chart”, 且版本号定义为v1.0。
  具体代码定义如下：

 import Charts 1.0

 PieChart {
     width: 100; height: 100
     name: "A simple pie chart"
     color: "red"
 }

我们需要定义一个C++类来概括这个PieChart类型以及该类型的两个属性。因为QML的扩展需要用到Qt的Meta Object System，所以我们需要：
1、继承QObject
2、通过Q_PROPERTY marco 来声明该属性。

这里我们在piechart.h 中定义

 #include 
 #include 

 class PieChart : public QQuickPaintedItem
 {
     Q_OBJECT
     Q_PROPERTY(QString name READ name WRITE setName)
     Q_PROPERTY(QColor color READ color WRITE setColor)

 public:
     PieChart(QQuickItem *parent = 0);

     QString name() const;
     void setName(const QString &name);

     QColor color() const;
     void setColor(const QColor &color);

     void paint(QPainter *painter);

 private:
     QString m_name;
     QColor m_color;
 };

该类型继承了QQuickPaintedItem ，因为我们需要重载该QQuickPaintedItem ：:paint()。如果类型仅仅是为了数据处理，而不是图形。那么可以简单的继承自QObject.如果我们仅仅是为了扩展QObject-based 类的功能函数，纳闷我们继承QObject就可以了。如果我们需要创建一个可视图形项，但是该可视图形项不需要自定义，那么我们可以继承自QQuickItem.

在piechart.cpp中简单的实现了 m_name 和m_color 的属性值，然后重写了paint()函数来绘制pie 图形。而且关闭了 QGraphicsItem::ItemHasNoContents 的标志来使能绘制图形。

 PieChart::PieChart(QQuickItem *parent)
     : QQuickPaintedItem(parent)
 {
 }
 ...
 void PieChart::paint(QPainter *painter)
 {
     QPen pen(m_color, 2);
     painter->setPen(pen);
     painter->setRenderHints(QPainter::Antialiasing, true);
     painter->drawPie(boundingRect().adjusted(1, 1, -1, -1), 90 * 16, 290 * 16);
 }

这样我们就定义好了PieChart 类。我们可以通过QML来使用它。文件app.qml创建了PieChart图形项来显示：

 import Charts 1.0
 import QtQuick 2.0

 Item {
     width: 300; height: 200

     PieChart {
         id: aPieChart
         anchors.centerIn: parent
         width: 100; height: 100
         name: "A simple pie chart"
         color: "red"
     }

     Text {
         anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter; bottomMargin: 20 }
         text: aPieChart.name
     }
 }

注意到尽管color 的定义是一个字符串，它是自动通过QColor 对象来设定的。

我们需要创建C++应用程序，通过QQuickView来运行和显示app.qml，该应用程序需要使用qmlRegisterType() 函数来注册PieChart类型，这样是为了有权允许使用QML的类型。

main.cpp 函数如下：

 #include "piechart.h"
 #include 
 #include 

 int main(int argc, char *argv[])
 {
     QGuiApplication app(argc, argv);

     qmlRegisterType<PieChart>("Charts", 1, 0, "PieChart");

     QQuickView view;
     view.setResizeMode(QQuickView::SizeRootObjectToView);
     view.setSource(QUrl("qrc:///app.qml"));
     view.show();
     return app.exec();
 }

最后，我们来书写工程文件.pro 来关联相关文件和库

 QT += qml quick

 HEADERS += piechart.h
 SOURCES += piechart.cpp \
            main.cpp

 RESOURCES += chapter1-basics.qrc

 DESTPATH = $$[QT_INSTALL_EXAMPLES]/qml/tutorials/extending-qml/chapter1-basics
 target.path = $$DESTPATH

 qml.files = *.qml
 qml.path = $$DESTPATH

 INSTALLS += target qml

本篇翻译子Qt官方教程
tutorials/extending-qml/chapter1-basics/