qml demo分析(objectlistmodel-自定义qml数据)

一、效果展示

　　如图1所示，是一个ListView窗口，自定义了文本内容和项背景色。

　图1 ListView

二、源码分析

　　代码比较简单，主要使用了QQmlContext类的setContextProperty方法，在当前context上下文中新增名字为name的属性，并为其赋值，该属性可以在qml系统中使用，注册代码如下，也是该示例的main函数

 int main(int argc, char ** argv)
 {
     QGuiApplication app(argc, argv);

     QList<QObject*> dataList;
     dataList.append(new DataObject("Item 1", "red"));
     dataList.append(new DataObject("Item 2", "green"));
     dataList.append(new DataObject("Item 3", "blue"));
     dataList.append(new DataObject("Item 4", "yellow"));

     QQuickView view;
     view.setResizeMode(QQuickView::SizeRootObjectToView);
     QQmlContext *ctxt = view.rootContext();
     ctxt->setContextProperty("myModel1", QVariant::fromValue(dataList));//将数据设置到myModel属性中
 //![0]

     view.setSource(QUrl("qrc:view.qml"));
     view.show();

     return app.exec();
 }

　　DataObject为自定义对象，继承自QObject类，如果自定义的C++类需要注册到qml系统则必须继承自QObject，并且需要声明Q_OBJECT宏。DataObject头文件声明如下，主要作用是自定义了name和color两个属性，并为其添加了set和get接口，并使用Q_PROPERTY宏将其注册到qml系统中。

 class DataObject : public QObject
 {
     Q_OBJECT

     Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged)//注册属性到qml系统
     Q_PROPERTY(QString color READ color WRITE setColor NOTIFY colorChanged)
 //![0]

 public:
     DataObject(QObject *parent=);
     DataObject(const QString &name, const QString &color, QObject *parent=);

     //属性get和set方法
     QString name() const;
     void setName(const QString &name);

     //属性get和set方法
     QString color() const;
     void setColor(const QString &color);

 signals:
     void nameChanged();
     void colorChanged();

 private:
     QString m_name;
     QString m_color;
 //![1]
 };

　　使用setContextProperty接口注册后属性可以直接被qml系统使用，具体代码如下

 ListView {
     width: ; height: 

     model: myModel1
     delegate: Rectangle {
         height:
         width: parent.width
         color: model.modelData.color//或者modelData.color 不能像name一样直接使用属性名称  因为color值和color属性重名
         Text { text: name }//自定义DataObject结构中  使用Q_PROPERTY属性注册的属性名
     }
 }

　　在ListView控件中，我们指定了model的数据源为我们注册的属性，在ListView的绘制代理中我们可以直接访问我们注册的自定义类DataObject，访问方式是直接访问属性名称，就想上述代码第9行那样，第8行代码之所以加上作用于限定是因为属性名color重复了，当直接访问属性名称时，其实就等同于访问属性的get方法，设置属性时就等同于访问属性的set方法。

　　这篇示例代码在Qt5.7.0_vs2013\Examples\Qt-5.7\quick\models\objectlistmodel目录下。我使用的qt5.6.1-1版本，该版本为自行编译版本，编译参考：msvc2013编译qt5.6源码