qml demo分析(customgeometry-贝塞尔曲线)
一、效果展示
本篇文章还是带来一个简单的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<BezierCurve>("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对象来加载，并展示。参考Qml文件的两种加载方式|启动Qt quick app的两种方法
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: line 10 anchors.fill: parent 11 anchors.margins: 20 12 //! [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.bottom 26 27 x: 20 28 width: parent.width - 40 29 wrapMode: Text.WordWrap 30 31 text: "This curve is a custom scene graph item, implemented using GL_LINE_STRIP" 32 } 33 }
总结：理解qmlRegisterType、Q_PROPERTY的功能非常重要， 他们是你学习qml很重要的一个环节。个人觉着C++和qml混编是一个趋势，虽然QWidget目前开发比较流行，但视图模型分离会让开发效率更高效。
注：该文章是个人学习之用，仅供参考。错误之处还请大家谅解
