本系列所有文章可以在這里查看[http://blog.csdn.net/cloud_castle/article/category/2123873](http://blog.csdn.net/cloud_castle/article/category/2123873) 前面我們說到了QML的粒子系統，它可以創造豐富多彩的粒子特效。但是更多的情況下，我們的QML界面是配合C++進行工作的：QML負責界面渲染，C++負責邏輯事務。甚至有時，我們還會利用QML來繪制C++代碼中定義的可視化組件，或者使用C++代碼來訪問QML中對象的屬性等。從這篇博文開始，我們介紹了Qt官方Demo中的“Chapter”系列，它介紹了在QML文件中使用一個C++類的方法。接下來，我們會介紹Extending QML系列，它則向我們展示了如何使用C++代碼訪問QML對象。 OK，接下來先看Chapter的第一個demo：Creating a New Type 先看下工程目錄：  可以看到，在這個工程中有一個自定義的piechart類，它繼承自QQuickPaintedItem，并定義了自己的繪制效果。在main函數中我們將這個PieChart類注冊為一個qml類型，并賦予其一個命名空間"Charts"。qml文件放在資源文件中，名為app.qml，在這個文件里我們使用了這個piechart，并繪制在我們的窗口上。 首先來看piechart.h: ~~~ #ifndef PIECHART_H #define PIECHART_H //![0] #include <QtQuick/QQuickPaintedItem> #include <QColor> class PieChart : public QQuickPaintedItem // 為了基于QPainter API實現自定義的繪制效果，我們需要繼承這個類。如果不需要使用QPainter API，我們可以繼承QQuickItem，甚至如果連可視化也不需要，QObject以及它的子類都可以作為我們繼承的對象 { Q_OBJECT // 因為需要使用到Qt的元對象系統 Q_PROPERTY(QString name READ name WRITE setName) // 注冊兩個自定義屬性 Q_PROPERTY(QColor color READ color WRITE setColor) public: PieChart(QQuickItem *parent = 0); // 作為可視化組件我們需要將其父對象設置為QQuickItem QString name() const; // 定義屬性的讀寫函數 void setName(const QString &name); QColor color() const; void setColor(const QColor &color); void paint(QPainter *painter); // 最后我們重載QQuickPaintedItem的paint函數，實現我們的自定義繪圖 private: QString m_name; QColor m_color; }; //![0] #endif ~~~ 實現代碼如下piechart.cpp: ~~~ #include "piechart.h" #include <QPainter> //![0] PieChart::PieChart(QQuickItem *parent) : QQuickPaintedItem(parent) { } //![0] QString PieChart::name() const { return m_name; } void PieChart::setName(const QString &name) { m_name = name; } QColor PieChart::color() const { return m_color; } void PieChart::setColor(const QColor &color) { m_color = color; } //![1] 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); // 餅狀圖在矩形范圍內的位置與角度。角度的精度為1/16度。 } //![1] ~~~ 接下來，我們需要將這個類注冊為QML類型main.cpp: ~~~ #include "piechart.h" #include <QtQuick/QQuickView> #include <QGuiApplication> int main(int argc, char *argv[]) { QGuiApplication app(argc, argv); qmlRegisterType<PieChart>("Charts", 1, 0, "PieChart"); // 我們使用模板函數注冊了這個類型，"Charts"為import的命名空間，PieChart為類型名，1,0即是版本號1.0。 QQuickView view; // 然后創建一個QQuickView來顯示QML組件 view.setResizeMode(QQuickView::SizeRootObjectToView); // 窗口大小設置為根目錄大小 view.setSource(QUrl("qrc:///app.qml")); // 調用資源中的app.qml view.show(); return app.exec(); } ~~~ 最后就是我們的QML文件了app.qml: ~~~ import Charts 1.0 // 首先我們引入上面定義的命名空間 import QtQuick 2.0 Item { width: 300; height: 200 PieChart { // 接著我們就可以使用"PieChart"這個類型 id: aPieChart anchors.centerIn: parent width: 100; height: 100 name: "A simple pie chart" color: "red" // color屬性會與QColor類型自動對應起來，很多屬性有這種對應關系 } Text { // 然后再定義一個Text來顯示PieChart的name屬性的值 anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter; bottomMargin: 20 } text: aPieChart.name } } ~~~ 最后我們運行，這個PieChart就被繪制出來了~