qml与c++数据绑定教程

参照 view-model 模型，qml作为 view，c++中的对象作为 model，实现业务逻辑和界面的分离。

暴露单个c++类的属性

通过这种方法，qml中可以直接访问注册到上下文中的c++类实例，并且是注册到qml的全局（具体是注册到一个 qquickview 或者 engine）。以自定义一个 name 类，类包括一个 data 属性为例。

类定义

需要暴露给qml访问的类需要有特殊的定义：

/*name.h*/
#include 

class name : public qobject //继承自qobject
{
    q_object//qobject宏
    q_property(qstring data read data write setdata notify datachanged)
public:
    name(qobject *parent = nullptr);//默认构造函数
    name(qstring _name);//构造函数

    qstring data() const;//read 接口
    void setdata(const qstring& _data);//write 接口

signals:
    qstring datachanged();//notify 信号（不需实现）

private:
    qstring m_data;//私有属性
};

可以通过右键项目->新建文件->c++ class 来添加新类，继承自 qobject 并且自动添加文件到项目中。

warning：不要在 cpp 文件中直接定义类，因为 q_object 宏需要经过 moc 处理，非.h文件不会被 moc 处理，编译时出现“无法识别的符号”错误

q_property(qstring data read data write setdata notify datachanged)

这一行代码定义了暴露给qml访问的接口，这里我们提供的对象是一个 qstring，read 接口是一个名为 data 的函数， write 接口是一个名为 setdata 的函数，notify 接口用于通知的绑定，只有设置了 notify 接口，qml 才能自动与 c++ 中的属性同步。这里的命名方式最好与默认的统一。

类实现

/*name.cpp*/
#include "name.h"

name::name(qobject *parent) : qobject(parent)
{//默认构造函数
}

name::name(qstring _data) : m_data(_data)
{//自定义构造函数，初始化私有对象m_data
}

qstring name::data() const
{
    return m_data;//read 接口实现，返回私有对象
}

void name::setdata(const qstring& _data)
{
    if(_data != m_data){//write 接口实现，更新m_data并发出信号
        m_data = _data;
        emit datachanged();
    }
}

在 setdata 中，必须判断数据是否更新，只有当数据真正改变时才发出信号，否则有无限递归的风险。

注册到上下文

然后是实例化一个 name 类并注册到上下文。注册需要在读取.qml文件之前完成。

/*main.cpp*/
name a_name("test");

qqmlapplicationengine engine;
qqmlcontext* rootcontex = engine.rootcontext();//拿到engine的根上下文
rootcontex->setcontextproperty("name",  qvariant::fromvalue(a_name));//注册
engine.load(qurl(qstringliteral("qrc:/main.qml")));

在 qml 中读取

qml 中可以读取到接口返回的属性，直接给属性赋值，并且监听到属性变化。

/*main.qml*/
rectangle {
    text {
        text:name.data //相当于调用name.data()这个接口

        connections {//建立一个到notify接口的连接
            target: name
            ondatachanged:{//对应notify接口
                console.log("data has beed changed!");
            }
        }
    }

    button {
        text:"changedata"
        onclicked: {
            name.data = "haschanged!";
        }
    }
}

当点击按钮时，text 的文字会发生变化，同时控制台输出 “data has beed changed!”，闭环达成。

connections 用来监听事件，监听的 target 是定义了 notify 的对象（注意 ondatachanged 这个 event handler 的驼峰命名法和原 notify 定义时的命名。

使用 qlist 作为 model

更常见的需求是，暴露一组对象的属性，并通过 qml 中的 view 来自动渲染。例如我们把 name 类放进一个 qlist 列表，作为 model 传给 qml 中的 listview。

/*main.cpp*/
qlist namelist;
namelist.append(new name("name1"));
namelist.append(new name("name2"));//增加两个name对象在数组中

qqmlapplicationengine engine;
qqmlcontext* rootcontex = engine.rootcontext();//拿到engine的根上下文
rootcontex->setcontextproperty("namelist",  qvariant::fromvalue(namelist));//注册
engine.load(qurl(qstringliteral("qrc:/main.qml")));

/*main.qml*/
listview{
    width: parent.width
    height: 300
    model: namelist
    delegate: rectangle {
        height: 30
        width: parent.width
        color: "#000000"
        text {
            text: model.data //调用每个对象的data()方法
            color: "#ffffff"
            connections{
                target: model //监听这个对象
                ondatachanged:{
                    console.log("changed!");
                }
            }
        }
    }
}

这样就得到了一个列表渲染。此时渲染出来的列表在注册到上下文的时候就已经确定，列表项name动态的修改会体现到界面上，但是动态增删数组元素不会发生变化（因为 qlist 本身并没有 notify 接口）。

注册类型到qml上下文中

当前的 name 类已经完备的实现了注册到 qml 上下文中的接口，所以可以在 c++ 中调用

qmlregistertype("com.myapp.name", 1, 0, "name");
//包名，大版本号，小版本号，类型名

进行注册，在 qml 文件中加入引用后就可以直接使用 name 类以及其属性。

import com.myapp.name 1.0

name {
    data: "foo"
}

封装一组数据暴露给 qml

与直接放入 qlist 不同，通过更高级的封装可以实现动态绑定的列表渲染。避免使用qqmllistproperty这个方法，文档有问题且相关资料少

线性表封装为抽象列表类型

朴素的 c++ 线性表类型（数组或者 vector 模板类等等）通过封装就可以成为被 qml 直接访问的 model。封装成的类可以是继承自 qabstractlistmodel 或者更复杂的 qabstracttablemodel。关键在于继承后实现几个作为 qml 调用接口的虚函数（完整的虚函数表参照文档）：

/*必须实现的虚函数*/
int rowcount(const qmodelindex &parent) const;//返回数据行数
qvariant data(const qmodelindex &index, int role) const;//返回根据index和role请求的数据
qhash rolenames()  const;//返回数据别名

通过实现更多的虚函数可以完成更复杂的面向 qml 功能。

抽象类型定义

假定我们有一个 qlist 内部的每个元素都是 name 类型，注意 name 已经完成了对 qml 访问所必须的封装。于是一个可在qml中渲染的 name 类型的线性表封装成的类应该长这样：

/*namelist.h*/
#include 
#include 
#include 
#include "name.h"

class namelist : public qabstractlistmodel
{
    q_object
public:
    enum datatype {
        type1 = 0
    };
    namelist(qobject *parent);
    namelist(){
        addname("test1");
        addname("test2");
    }

    /*必须实现的虚函数 供qml引擎调用*/
    int rowcount(const qmodelindex &parent) const;//返回数据行数
    qvariant data(const qmodelindex &index, int role) const;//返回所求的数据
    qhash rolenames()  const;//返回数据别名

    /*其他接口*/
    q_invokable bool pushdata(qstring a_name);

private:
    qlist _namelist;//被封装的数组
};

首先类内声名了一个枚举类型，每个类型对应数据项中被访问的一个属性。name 类只有一个 data 属性，所以只定义了一种类型。

然后是rowcount(const qmodelindex &parent)，qml引擎查询列表时通过这个函数取得列表项的数量。

qvariant data(const qmodelindex &index, int role)是qml引擎用来访问每个列表项的接口，访问的时候会通过index表明索引，role表明查找的属性（对应枚举类型datatype）。

qhash rolenames()返回role的别名（暂时不是特别重要）。,>

抽象类型实现

/*namelist.cpp*/
#include 
#include 
#include "namelist.h"

namelist::namelist(qobject *parent)
{
}

int namelist::rowcount(const qmodelindex &parent) const
{
    return _namelist.count();//返回私有列表数据量
}

qvariant namelist::data(const qmodelindex &index, int role) const
{
    qdebug() << role;
    int row = index.row();//index包含.row()和.count()等属性
    return qvariant::fromvalue(_namelist.at(row));//数据项包装成qvariant返回
}

qhash namelist::rolenames() const
{
    qhash  d;
    d[datatype::type1] = "foo";//给tpye1设置别名
    return  d;
}

bool namelist::pushdata(qstring a_name)
{
    name* cache = new name(a_name);
    begininsertrows(qmodelindex(), _namelist.count(), _namelist.count());
    _namelist.append(cache);
    endinsertrows();
    return true;
}

列表被封装以后，在进行增删的时候需要先调用begininsertrows(qmodelindex, int , int)，第一个参数对应 model 数据，通过qmodelindex()得到这个model的虚拟rootitem；后两个参数代表所改动的行数范围：例如在第二行加入3个数据，则两个参数分别是\( (2, 4) \). 修改完成后还要调用endinsertrows()声名修改完毕。

注册到上下文

/*main.cpp*/
namelist thelist;//实例化一个类

qqmlapplicationengine engine;
qqmlcontext* rootcontex = engine.rootcontext();
rootcontex->setcontextproperty("namelist", &thelist);//注册到上下文
engine.load(qurl(qstringliteral("qrc:/main.qml")));

在 qml 中读取

/*main.qml*/
listview{
    width: parent.width
    height: 300
    model: namelist //把抽象类作为model
    delegate: rectangle {
        height: 30
        width: parent.width
        color: "#999999"
        text {
            text: model.modeldata.name //name是每个item的属性
            color: "#ffffff"
        }
        button {
            anchors.right: parent.right
            width: 50
            height: 30
            font.family: "fontawesome"
            font.pixelsize: 24
            text: "\uf019"

            onclicked: {
                model.modeldata.name = textfield.text;//可以直接给item修改属性
            }
        }
    }
}