为在QML中使用的C++ 类添加属性绑定

为在QML中使用的C++ 类添加属性绑定

使用 QML 属性绑定

继续上一节（如何在QML中调用C++的方法并接收C++的信号）的内容，本节我们讨论如何为在QML中使用的C++ 类（PieChart）添加属性绑定。

属性绑定是QML的一个强大特性，它使得不同元素的值能够自动同步。当属性值发生改变的时候，它就用信号去通知并更新其他元素所使用的自身的值。

我们先为PieChart 的color属性添加属性绑定。于是我们在QML中就可以这样使用：

import Charts 1.0
import QtQuick 1.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" }
     }
 
     Text {
         anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter; bottomMargin: 20 }
         text: "Click anywhere to change the chart color"
     }
 }

"color: chartA.color" 这条语句将chartB 的color值和 chartA的color值绑定起来。在 MouseArea中的onClicked 处理函数中改变了chartA的颜色，于是也就把两个扇形图的颜色都设成了蓝色。

实现属性绑定

为color属性实现属性绑定是很容易的。我们给它的Q_PROPERTY()声明添加一个NOTIFY就可以了，这表明每当color的值发生变化的的时候，都会发出一个"colorChanged"信号。

class PieChart : public QDeclarativeItem
 {
     ...
     Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged)
 public:
     ...
 signals:
     void colorChanged();
     ...
 };

然后我们在setColor(const QColor &color) 里面发出这个信号：

void PieChart::setColor(const QColor &color)
 {
     if (color != m_color) {
         m_color = color;
         update();   // repaint with the new color
         emit colorChanged();
     }
 }

在发出colorChanged()信号之前检查color的值是否真的发生了变化是很重要的。这避免了不必要的信号发送并且防止了循环（比如如果有其他元素也响应之一变化）。

在QML中使用绑定是很重要的。我们应当总是为可以实现的属性添加NOTIFY 信号，这样这个属性就可以使用绑定了。不能绑定的属性不能自动更新，在QML中也得不到灵活应用。并且由于在QML中绑定被频繁使用，如果你的自定义QML类型没有实现绑定的话使用它们的时候会觉得有些异常。

大家可以在 Qt 的 examples/declarative/tutorials/extending/chapter3-bindings 目录中找到本程序的完整代码。