一、效果展示

　　本篇文章还是带来一个简单的qt示例分析，且看图1效果。

图1 贝塞尔曲线

二、源码分析

　　该示例代码所在目录quick\scenegraph\customgeometry，感兴趣的同学可以自己去找，这篇文章我还是主要讲解源码，不涉及其他方面。

　　废话不多述，下面开始源码剖析。本篇讲解的示例看似简单，却是在C++和qml之间的一座桥梁，他告诉我们C++和qml是怎么混合编程的，在这篇文章中有几个重要的函数或者宏，例如：qmlRegisterType、Q_PROPERTY。

　　1、main文件

1 int main(int argc, char **argv) 2 { 3     QGuiApplication app(argc, argv); 4  5     qmlRegisterType
     
      ("CustomGeometry", 1, 0, "BezierCurve");//注册自定义Quick控件到qml系统环境中 6  7     QQuickView view; 8     QSurfaceFormat format = view.format(); 9     format.setSamples(16);10     view.setFormat(format);11     view.setSource(QUrl("qrc:///scenegraph/customgeometry/main.qml"));12     view.show();13 14     app.exec();15 }
     

　　上述代码第5行使用了qmlRegisterType函数将C++中自定义的QQuickItem类型注册到qml环境中，4个参数分别是：包名、主版本号、子版本号和控件名称

　　qml文件可以通过QQuickView对象来加载，并展示。参考

　　2、自定义QQuickItem类型

1 class BezierCurve : public QQuickItem 2 { 3     Q_OBJECT 4  5     Q_PROPERTY(QPointF p1 READ p1 WRITE setP1 NOTIFY p1Changed)//使用Q_PROPERTY进行声明的宏可以通过属性系统进行操作，例如qss中qproperty-p1:1,1  qml中p1: Qt.point(0, 1) 6     Q_PROPERTY(QPointF p2 READ p2 WRITE setP2 NOTIFY p2Changed) 7     Q_PROPERTY(QPointF p3 READ p3 WRITE setP3 NOTIFY p3Changed) 8     Q_PROPERTY(QPointF p4 READ p4 WRITE setP4 NOTIFY p4Changed) 9 10     Q_PROPERTY(int segmentCount READ segmentCount WRITE setSegmentCount NOTIFY segmentCountChanged)//WRITE操作之后，发生NOTIFY指定的信号11 12 public:13     BezierCurve(QQuickItem *parent = 0);14     ~BezierCurve();15 16 //! [2]17     QSGNode *updatePaintNode(QSGNode *, UpdatePaintNodeData *);//qml文件中通过SequentialAnimation动画修改p2和p3的值，并触发update函数18 //! [2]19 20     QPointF p1() const { return m_p1; }21     QPointF p2() const { return m_p2; }22     QPointF p3() const { return m_p3; }23     QPointF p4() const { return m_p4; }24 25     int segmentCount() const { return m_segmentCount; }26 27     void setP1(const QPointF &p);28     void setP2(const QPointF &p);29     void setP3(const QPointF &p);30     void setP4(const QPointF &p);31 32     void setSegmentCount(int count);33 34 signals:35     void p1Changed(const QPointF &p);36     void p2Changed(const QPointF &p);37     void p3Changed(const QPointF &p);38     void p4Changed(const QPointF &p);39 40     void segmentCountChanged(int count);41 42 private:43     QPointF m_p1;44     QPointF m_p2;45     QPointF m_p3;46     QPointF m_p4;47 48     int m_segmentCount;49 };

　　自定义QQuickItem类型头文件函数中第5-8行都使用了Q_PROPERTY宏，该宏的作用是成员p可以用个p接口访问、通过setP接口设置，当成员p发生变化的时候会有pChanged信号发出。访问接口在头文件中已经实现，下边我们看一个设置接口的实现

1 void BezierCurve::setP1(const QPointF &p)2 {3     if (p == m_p1)4         return;5 6     m_p1 = p;7     emit p1Changed(p);8     update();9 }

　　设置接口也相对简单，当调用该接口的时候，发出指定信号。

　　3、qml文件中使用自定义类型

1 import QtQuick 2.0 2 import CustomGeometry 1.0 //导入自定义包 3 //! [1] //! [2] 4 Item { 5     width: 300 6     height: 200 7  8     BezierCurve {
   //直接使用控件名称   导入方式也可以改为import CustomGeometry 1.0 as MyCustom，那么控件使用方式改为MyCustom.BezierCurve 9         id: line10         anchors.fill: parent11         anchors.margins: 2012 //! [2] //! [3]13         property real t//自定义属性14         SequentialAnimation on t {
   //执行顺序动画15             NumberAnimation { to: 1; duration: 2000; easing.type: Easing.InOutQuad }16             NumberAnimation { to: 0; duration: 2000; easing.type: Easing.InOutQuad }17             loops: Animation.Infinite//无限循环18         }19 20         p2: Qt.point(t, 1 - t)//只有通过Q_PROPERTY宏声明过的属性才可以这样访问21         p3: Qt.point(1 - t, t)22     }23 //! [3] //! [4]24     Text {25         anchors.bottom: line.bottom26 27         x: 2028         width: parent.width - 4029         wrapMode: Text.WordWrap30 31         text: "This curve is a custom scene graph item, implemented using GL_LINE_STRIP"32     }33 }

总结：理解qmlRegisterType、Q_PROPERTY的功能非常重要， 他们是你学习qml很重要的一个环节。个人觉着C++和qml混编是一个趋势，虽然QWidget目前开发比较流行，但视图模型分离会让开发效率更高效。

 

注：该文章是个人学习之用，仅供参考。错误之处还请大家谅解