C++暴露数据给QML

在C++代码中的int或者char之类的简单数据类型或者复合数据类型如Class,Struct之类,与GUI上的QML代码交互.

QML是基于JavaScript的,这两种语言交织在一起,可以产生一些非常令人激动的功能,如绑定.

恐怕只有Qt这个团队才能如此地给人惊喜了,借助Qt的信号-槽机制,实现这些功能是如此地优雅,简单.

cdataobject.h----------------------------------------

#ifndef CDATAOBJECT_H
#define CDATAOBJECT_H

#include <QObject>

class CDataObject : public QObject
{
    Q_PROPERTY( QString mstrName READ getName WRITE setName NOTIFY nameChanged )

    Q_OBJECT
public:
    explicit CDataObject(QObject *parent = 0);

    /*mstrName get,set*/
    QString getName() const;        void setName(const QString& strName);

private:
    QString mstrName;
    
signals:
    void nameChanged(QString);
    
public slots:
    
};

#endif // CDATAOBJECT_H

  
  


  
  

Qt中将C++里面的数据供QML使用的过程,称为数据暴露(data exposing),这依赖一种叫做上下文属性的技术,这个交互的底层机理我不是很了解,这里也不敢乱说.

Q_PROPERTY( QString mstrName READ getName WRITE setName NOTIFY nameChanged )

此一行将mstrName声明为一个QObject属性,这样在QML里面就是可以做属性绑定,所有要使用Qt信号-槽,属性系统的类型必须继承自QObject,并且加入Q_OBJECT这个宏,其实Q_PROPERTY也是一个带参宏,具体的格式说明,在Qt Assistant上有,就不赘述了,就看看这里的这个格式,QString表明这个mstrName属性值是一个QString,READ 表明了这个变量的getter,WRITE表明了这个变量的setter,NOTIFY表明如果这个变量的值被更改,将发出什么信号,这个信号是需要我们自己编码发射的

cdataobject.cpp------------------------------

#include "cdataobject.h"

CDataObject::CDataObject(QObject *parent) :
    QObject(parent)
{
    this->mstrName = QString("shawhen");
    this->mstrColor = QString("black");
}

/*mstrName get,set*/
QString CDataObject::getName() const {
    return (this->mstrName);
}
void CDataObject::setName(const QString& strName) {
    if( this->mstrName != strName ) {
        this->mstrName = strName;
        emit nameChanged(this->mstrName);
    }
}
  
  


  
  

QtQuick2ApplicationViewer::QtQuick2ApplicationViewer(QWindow *parent)
    : QQuickView(parent)
    , d(new QtQuick2ApplicationViewerPrivate())
{
    connect(engine(), SIGNAL(quit()), SLOT(close()));
    setResizeMode(QQuickView::SizeRootObjectToView);
    
    this->mpDataObject = new CDataObject();

    this->rootContext()->setContextProperty( "dataObject",this->mpDataObject );
}

import QtQuick 2.0

Rectangle {
    width: 360;     height: 360

    ListView {
        width: 60;      height:200;
        model: dataObject;
        delegate: Rectangle{
            width: 60;      height:20;
            color: "lightblue";
            Text {
                text: model.modelData.mstrName;
            }
        }
    }
}

   
   


   
   

main.cpp----------------------

#include <QtGui/QGuiApplication>
#include "qtquick2applicationviewer.h"

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

    QtQuick2ApplicationViewer viewer;
    viewer.setMainQmlFile(QStringLiteral("qml/GridQML/main.qml"));
    viewer.showExpanded();

    //viewer.mpDataObject->setName("went");

    return app.exec();
}

放开注释后可以发现,mpDataObject的mstrNam