qt之qml与C++数据交互

我是一名Android开发出生，在大学学的是javaweb方向的开发，不能说javaweb方向的东西都精通，可是至少应该能捡的起来。由于我的的爱好“喜欢看到一些看起来炫酷的东西”因此开始了漫长的接近四年的开发之旅。也是由于工做的缘由，开始接触linux的应用层开发。

学习的心得：从android学习的过程当中，我明白了一件事，懂得站在巨人的肩膀上。在查询资料的过程当中也发现，纵然qml的起源比android要早的多，可是网上关于qml的学习资料却没有android的多。做为一名android过来的，我开始分享工做中接触到的东西，但愿对更多人有所帮助，试一次总结，也是一次分享。

记得有个门外汉，曾经问过我一个问题：“若是有个代码仓库，是否是全部的程序员都是从里面根据本身的须要复制黏贴就能够了？” 。个人回答是确定的，只是目前对于代码仓库的筛选与查找是咱们的工做。

在我作Android的时候我发现，不少原来能够从github上面找到的功能本身写了还有一堆的bug，并且很是痛苦，因此真的建议你们在写具体的功能以前，先去github上面找找，也许能帮助你。github上面能够过滤语言，你们能够过滤一下qml进行查看，目前基本上都是一些example。不过也很是的有帮助。

在我作公司安排的项目的时候，本着沿用android上面能够复用的知识点的原则，架构方面我选用了广受好评的facebook出的flux，有不懂的能够自行百度一下，原则就一个“事件分发，单向流动”。

qml界面和c++界面之间传递数据

qml与c++之间的交互自然的与flux架构一致。能够直接套用，全部的事件经过信号进行分发。与android的EventBus差很少。

qml传递数据给c++

通常用于传递qml【View】上面的一些操做。比方说点击事件，请求发起事件等等。

我使用的方式是，统一交给ActionCrateor.qml进行分发，这里涉及qml的单例方式，能够看这篇文章 要记得单例的使用要使用相对路径，比方说我本地的代码结构是

因此在别的目录里面使用就须要使用相对路径

// /a/b/xxx.qml 相对于 /action/XActionCreator.qml的位置

import "../../action"

复制代码

为了保持一致，我这边都是使用json进行传递，而不使用对象类型进行传递

//qmldir

singleton ActionCreator 1.0 XActionCreator.qml
singleton Constant 1.0 Constant.qml
复制代码

// XActionCreator.qml

pragma Singleton
import QtQuick 2.0
import SigDispatcher 1.0

Item {
    //"send_xxx(做用）" 命名的规则

    //发送事件
    function send_initData(){
        //统一发送
        //调用某个对象的信号
        dispatcher.sendEvent("active","");
    }

    //切换专辑，从新请求
    function send_getAlbumData(param){
        //param 参数，请求参数，页数？cid？
        dispatcher.sendEvent("album_get_new",param);
    }
    //c++的对象
    SigDispatcher{
        id:dispatcher
    }

}
复制代码

此时须要在主入口处加上SigDispatcher

qmlRegisterType <SigDispatcher> ("SigDispatcher", 1, 0, "SigDispatcher");
复制代码

准备

//SigDispatcher.h

#ifndef SIG_DISPATCHER_H
#define SIG_DISPATCHER_H
#include <QObject>
#include <QString>
#include <QHash>
#include <QVector>
#include <QVariant>

#include "sig/signalreceiver.h"

class SigDispatcher : public QObject
{
    Q_OBJECT
public:
    explicit SigDispatcher(QObject *parent = 0);

    //注册事件
    static void addRegister(SignalReceiver * );
    static void removeRegister(SignalReceiver *);
    static void removeAll();
signals:

public slots:
    void sendEvent(QString cmd,const QVariant&);

private:
    //命令,遍历获取是否支持该命令字
    static QVector<SignalReceiver *> registers;
    //QHash<void*,QString> registers;
};

#endif // SIG_DISPATCHER_H

复制代码

//SigDispatcher.cpp

#include "sigdispatcher.h"
#include "txz_common.h"

//SigDispatcher::registers = new QVector<SignalReceiver *>();

QVector<SignalReceiver *> SigDispatcher::registers;

SigDispatcher::SigDispatcher(QObject *parent) : QObject(parent)
{
}

void SigDispatcher::addRegister(SignalReceiver * regiseter)
{
    registers.append(regiseter);
}

void SigDispatcher::removeRegister(SignalReceiver *regiseter)
{
    registers.removeAll(regiseter);
}

void SigDispatcher::removeAll()
{
    registers.clear();
}

void SigDispatcher::sendEvent(QString cmd,const QVariant& data)
{

    //auto_ptr<SigDispatcher> i(new SigDispatcher);
    for(SignalReceiver* iter:registers){
        if(iter->needInvoke(cmd.toStdString())){
            TXZ_LOGD("transform cmd: %s ,params: %s",cmd.toStdString().c_str(),data.toString().toStdString().c_str());
            //须要处理这个事件
            iter->invoke(cmd.toStdString(),(void*)(data.toString().toStdString().c_str()));
        }
    }
}

复制代码

//SignalReceiver.h

#ifndef SIGNALRECEIVER_H
#define SIGNALRECEIVER_H

#include <string>
#include <list>
class SignalReceiver {
public:
    SignalReceiver(){

    }

public:
    /** * @brief 是否须要拦截 * @param cmd * @return */
    bool needInvoke(std::string cmd){
        std::list<std::string>::iterator j;
        //遍历
        for(j = cmds.begin();j!= cmds.end();j++){
            if(*j == cmd){
                return true;
            }
        }
        return false;
    }

    /** * @brief 处理， * @param cmd * @param data */
    virtual void invoke(std::string cmd,void * data) =0;
protected:
    std::list<std::string> cmds;
};

#endif // SIGNALRECEIVER_H

复制代码

c++接收数据

以上就能够将全部的qml传递的信息所有转换成c++能够识别的void*，若是你传递的是json则须要进行转换，以下(其中的json.h是网上找的json的源码)【若是集成有问题，能够给我留言，我把我这边的json.h提供出来】

//AlbumModel.cpp

#include "json.h"

void AlbumModel::invoke(std::string cmd, void *data)
{
    TXZ_LOGD("cmd:%s",cmd.c_str());

    if(cmd == strCmdAlbumMore){

    }else if (cmd == strCmdAlbumNew){
        //两次的cid不一样才须要响应

        TXZ_LOGD("data:%s",(char*)(data));
        startRequestData(std::string((char*)(data)));
    }
}

void AlbumModel::startRequestData(std::string param)
{
    //填写参数
    Json::Value recvJson;
    Json::Reader().parse(param,recvJson, false); //str to json
    //Json::Reader().parse(str.toStdString().c_str(),str.toStdString().c_str()+str.toStdString().length(),recvJson, false); //char* to json
    //std::string stdStr = Json::FastWriter::writeFast(recvJson); //json to str
    //可使用qml传递过来的值了。
    TXZ_LOGD("json:%d",recvJson["cid"].asInt());
}
复制代码

qml发送数据

qml怎么传递json过去呢？这里也是我踩得一个坑。

//a.qml

import "../../action"

Item{
    property var currentCid: -1
    //加载专辑数据
    function loadAlbum(cid){
        currentCid = cid;
        console.log("loadAlbum:",cid)
        //这里注意不用加双引号，js的语法，声明json的方式
        var data = {
            cid:cid } //这里注意要使用JSON.stringify ActionCreator.send_getAlbumData(JSON.stringify(data)) } } 复制代码

c++传递数据给到qml

传递给qml的类型必须是QXXX的，eg: QString,QJsonArray,QJsonObject 不然传递不到，这里注意一下

准备

须要传递数据则须要在qml中绑定c++的事件，以下

//main.cpp

 QQmlApplicationEngine engine;
 //将c++对象传递给qml进行使用
 engine.rootContext()->setContextProperty("$resultActionType", &(ResultActionType::getInstance()));
复制代码

//ResultActionType.h

#ifndef RESULTACTIONTYPE_H
#define RESULTACTIONTYPE_H

#include <QObject>
#include <QVariant>
#include <QJsonArray>
#include <QJsonObject>
#include <QString>
#include "base_type.h"
class ResultActionType : public QObject
{
    Q_OBJECT
private:
    explicit ResultActionType(QObject *parent = 0);

public:
    //单例
    static ResultActionType& getInstance();

signals:
    //激活
    void sig_active_success();
    void sig_active_error(int);

    //分类
    void sig_get_category_success(QJsonArray);
    void sig_get_category_error(int);

    //专辑
    void sig_get_album_success(QJsonArray);
    void sig_get_album_error(int);

    //专辑详情

    //音频
    void sig_get_audio_success(QJsonArray);
    void sig_get_audio_error(int);

    //音频详情
    void sig_get_audio_info_success(QJsonObject);
    void sig_get_audio_info_error(int);
    void sig_get_current_progress(QString,QString,QString,QString);
    void sig_get_current_status(int);
    void sig_get_notify_current_play_list(int ,QJsonArray);

    //搜索


public slots:
};

#endif // RESULTACTIONTYPE_H

复制代码

#include "resultactiontype.h"
#include <QDebug>


ResultActionType::ResultActionType(QObject *parent):QObject(parent)
{

}

//这里要注意单例的写法：
ResultActionType& ResultActionType::getInstance()
{
    static ResultActionType resultActionType;
    return resultActionType;
}
复制代码

qml接收数据并展现

Item{
    Component.onDestruction: {
        console.log("onDestruction")
        //解绑
        $resultActionType.sig_get_audio_info_success.disconnect(showAudioInfo);
        $resultActionType.sig_get_album_error.disconnect(retryAudioInfo);
        $resultActionType.sig_get_current_progress.disconnect(showProgress);
        $resultActionType.sig_get_current_status.disconnect(showStatus);
        $resultActionType.sig_get_notify_current_play_list.disconnect(getPlayList);
    }
    
    Component.onCompleted: {
        playAudio(viewData[1])

        //绑定监听
        $resultActionType.sig_get_audio_info_success.connect(showAudioInfo);
        $resultActionType.sig_get_album_error.connect(retryAudioInfo);
        $resultActionType.sig_get_current_progress.connect(showProgress);
        $resultActionType.sig_get_current_status.connect(showStatus);
        $resultActionType.sig_get_notify_current_play_list.connect(getPlayList);
        //
    }

    ListView {
        id: listView
        width: parent.width/2-50
        height: parent.height
        delegate: Item {
            x: 5
            width: parent.width
            height: 40
            Text {
                id: tvPlayListAudioName
                text: audioName
            }
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    console.log("hello world",index);
                    //点击播放
                    if(currentAudioId !== playList[index].audioId){
                        playAudio(playList[index].audioId);
                    }

                }
            }
        }
        model: ListModel {
            id:playlistDataListModel
        }
    }

//这里举一个例子，还有其余的相似showAudioInfo，retryAudioInfo，showProgress，showStatus
    function getPlayList(type,playlistData){
        for (var i=0; i<playlistData.length; i++){
            playlistDataListModel.append(playlistData[i])
        }
    }
}
复制代码

note: 上面的getPlayList方法里面的playlistData是一个json因此传递个ListModel的时候须要有相应的key才能显示出来，比方说上面的例子中ListView中的delegate 里面的tvPlayListAudioName 须要名为audioName的key来显示数据，注意此时的playlistDataListModel若是指定了不一样Key的ListElement会致使显示不出来。

C++发数据

#include <QJsonObject>
#include "resultactiontype.h"

// 显示音频播单
void _show_play_list_info() {
    int size = 10;
    //建立QJsonArray进行传递
    QJsonArray jsonArray;
    for(int i = 0; i < size; i++) {
        QJsonObject object;
        object.insert("audioName","hello");
        jsonArray.append(object);
    }

    emit ResultActionType::getInstance().sig_get_notify_current_play_list(type,jsonArray);
}

复制代码