本系列所有文章可以在這里查看[http://blog.csdn.net/cloud_castle/article/category/2123873](http://blog.csdn.net/cloud_castle/article/category/2123873) 接上文[Qt5官方demo解析集18——Chapter 4: Using Custom Property Types](http://blog.csdn.net/cloud_castle/article/details/36896525) 上個例子向我們展示了如何為QML調用的C++類型添加自定義類型的屬性，在這個例子中我們更進一步，將這個類型更換為一個PieSlice的列表，以此得到更豐富的處理能力。 項目文件與上個例子是一樣的。 還是先看看piechart.h: ~~~ #ifndef PIECHART_H #define PIECHART_H #include <QtQuick/QQuickItem> class PieSlice; // 由于這里只使用了PieSlice的指針，我們可以使用前向聲明 //![0] class PieChart : public QQuickItem { Q_OBJECT Q_PROPERTY(QQmlListProperty<PieSlice> slices READ slices) // 我們使用QQmlListProperty<PieSlice>來定義slices屬性的類型 //![0] // 該屬性是一個PieSlice的列表，而QQmlListProperty則為我們提供了在QML中擴充該列表成員的能力 Q_PROPERTY(QString name READ name WRITE setName) // 由于QQmlListProperty的機制，即使我們沒有定義該屬性的WRITE功能，它也是可改變的 //![1] public: //![1] PieChart(QQuickItem *parent = 0); QString name() const; void setName(const QString &name); //![2] QQmlListProperty<PieSlice> slices(); // 我們在屬性中僅僅定義了可讀性，因此這里并沒有聲明setSlices()函數 private: static void append_slice(QQmlListProperty<PieSlice> *list, PieSlice *slice); // 一個向向列表中添加屬性成員的函數 QString m_name; QList<PieSlice *> m_slices; // 定義一個對應的數據成員 }; //![2] #endif ~~~ piechart.cpp: ~~~ #include "piechart.h" #include "pieslice.h" PieChart::PieChart(QQuickItem *parent) : QQuickItem(parent) { } QString PieChart::name() const { return m_name; } void PieChart::setName(const QString &name) { m_name = name; } //![0] QQmlListProperty<PieSlice> PieChart::slices() // 用來返回列表中的屬性 { return QQmlListProperty<PieSlice>(this, 0, &PieChart::append_slice, 0, 0, 0); // 該函數原型如下圖 } void PieChart::append_slice(QQmlListProperty<PieSlice> *list, PieSlice *slice) // 每當我們向slices中添加一個PieSlice都會調用這個靜態的內部函數 { PieChart *chart = qobject_cast<PieChart *>(list->object); // 取得列表的父對象 if (chart) { // 并設置為新屬性成員的父對象 slice->setParentItem(chart); chart->m_slices.append(slice); } } //![0] ~~~  pieslice.h: ~~~ #ifndef PIESLICE_H #define PIESLICE_H #include <QtQuick/QQuickPaintedItem> #include <QColor> //![0] class PieSlice : public QQuickPaintedItem { Q_OBJECT Q_PROPERTY(QColor color READ color WRITE setColor) Q_PROPERTY(int fromAngle READ fromAngle WRITE setFromAngle) // 添加了扇形的起始角與角度范圍屬性 Q_PROPERTY(int angleSpan READ angleSpan WRITE setAngleSpan) // 用來繪制餅狀圖的多個扇形的不同顏色 //![0] public: PieSlice(QQuickItem *parent = 0); QColor color() const; void setColor(const QColor &color); int fromAngle() const; void setFromAngle(int angle); int angleSpan() const; void setAngleSpan(int span); void paint(QPainter *painter); private: QColor m_color; int m_fromAngle; // 注意與定義的屬性類型對應 int m_angleSpan; }; #endif ~~~ pieslice.cpp: ~~~ #include "pieslice.h" #include <QPainter> PieSlice::PieSlice(QQuickItem *parent) : QQuickPaintedItem(parent) { } QColor PieSlice::color() const { return m_color; } void PieSlice::setColor(const QColor &color) { m_color = color; } int PieSlice::fromAngle() const { return m_fromAngle; } void PieSlice::setFromAngle(int angle) { m_fromAngle = angle; } int PieSlice::angleSpan() const { return m_angleSpan; } void PieSlice::setAngleSpan(int angle) { m_angleSpan = angle; } void PieSlice::paint(QPainter *painter) { QPen pen(m_color, 2); painter->setPen(pen); painter->setRenderHints(QPainter::Antialiasing, true); painter->drawPie(boundingRect().adjusted(1, 1, -1, -1), m_fromAngle * 16, m_angleSpan * 16); } ~~~ app.qml: ~~~ import Charts 1.0 import QtQuick 2.0 Item { width: 300; height: 200 PieChart { anchors.centerIn: parent width: 100; height: 100 slices: [ // 使用中括號括起列表中的成員 PieSlice { anchors.fill: parent color: "red" fromAngle: 0; angleSpan: 110 }, PieSlice { anchors.fill: parent color: "black" fromAngle: 110; angleSpan: 50 }, PieSlice { anchors.fill: parent color: "blue" fromAngle: 160; angleSpan: 100 } ] } } ~~~ 運行效果如下：