本系列所有文章可以在這里查看[http://blog.csdn.net/cloud_castle/article/category/2123873](http://blog.csdn.net/cloud_castle/article/category/2123873) 接上文[Qt5官方demo解析集16——Chapter 2: Connecting to C++ Methods and Signals](http://blog.csdn.net/cloud_castle/article/details/36882625) 在C++中我們通常將用戶的交互與處理函數用信號槽綁定起來，比如窗口尺寸的變化，顏色的變化等，但在QML中，我們更多的使用屬性綁定來完成這些功能。我們可以將這個屬性值綁定到另一個對象或者本身的屬性值上，這樣當后者改變時，前者也能夠跟著發生改變，而不需要我們在一個專門的onXXX()函數中進行這樣的處理。 同樣的，這個工程進一步在上一個例子上進行擴展，雖然代碼只有簡單的改動，我們還是將其全部貼出來piechart.h: ~~~ #ifndef PIECHART_H #define PIECHART_H #include <QColor> #include <QtQuick/QQuickPaintedItem> //![0] class PieChart : public QQuickPaintedItem { //![0] Q_OBJECT Q_PROPERTY(QString name READ name WRITE setName) //![1] Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged) // 我們為Q_PROPERTY添加了NOTIFY特性 public: // 告訴編譯器該屬性值發生變化時"colorChanged"信號將被發出 //![1] // 這樣我們不再需要特別為該信號寫onColorChanged()處理函數 PieChart(QQuickItem *parent = 0); QString name() const; void setName(const QString &name); QColor color() const; void setColor(const QColor &color); void paint(QPainter *painter); Q_INVOKABLE void clearChart(); //![2] signals: void colorChanged(); //![2] private: QString m_name; QColor m_color; //![3] }; //![3] #endif ~~~ PieChart.cpp: ~~~ #include "piechart.h" #include <QPainter> PieChart::PieChart(QQuickItem *parent) : QQuickPaintedItem(parent) { } QString PieChart::name() const { return m_name; } void PieChart::setName(const QString &name) { m_name = name; } QColor PieChart::color() const { return m_color; } //![0] void PieChart::setColor(const QColor &color) // 動態賦予顏色 { if (color != m_color) { m_color = color; update(); // repaint with the new color emit colorChanged(); // 發出信號 } } //![0] 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); } void PieChart::clearChart() { setColor(QColor(Qt::transparent)); update(); } ~~~ app.qml: ~~~ import Charts 1.0 import QtQuick 2.0 Item { width: 300; height: 200 Row { anchors.centerIn: parent spacing: 20 PieChart { id: chartA width: 100; height: 100 color: "red" // 初始化賦為紅色 } PieChart { id: chartB width: 100; height: 100 color: chartA.color // 屬性綁定 } } MouseArea { anchors.fill: parent onClicked: { chartA.color = "blue" } // 點擊后將A賦為藍色，B由于屬性綁定也變成藍色 } Text { anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter; bottomMargin: 20 } text: "Click anywhere to change the chart color" } } //![0] ~~~