那些行业需要做网站旅游营销推广方案

最近周末一有空就去图书馆，然后跟着网上qml课程学习一下qml怎么使用，感觉qml在工作中可能还是会用到的。

现在学习到了ListModel篇，跟着视频学一下，敲一下代码，现在分享下学习心得。

总所周知，ListView的model是一个数据模型，需要ListView显示什么样的数据，就得去设置model；

其中，model可以是指定的数字，也可以是ListModel等，但如果遇到复杂情况，使用默认的无法显示功能是，就得自己去自定义了；

本篇博客就是介绍如何在C++端简单的定义model给到qml端使用。

1 在C++端自定义model

首先在QT中新建Model类 MyListModel

新建之后，默认会生成三个函数：

// Header:
QVariant headerData(int section, Qt::Orientation orientation, int role = Qt::DisplayRole) const override;// 元素的个数 或者 model的大小/长度
int rowCount(const QModelIndex &parent = QModelIndex()) const override;// 处理数据
QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override;

其中，headerData不用管；rowCount主要用于返回元素个数；data用于处理数据返回的给qml的。

然后还需要再手动新建一个函数：

QHash<int, QByteArray> roleNames() const override;

该函数主要用于枚举与qml的映射关系。

既然是有映射关系，那么C++端可以使用枚举作为独立的键值，新建一个枚举：

enum MyRoleName {Name = Qt::DisplayRole  + 1,Value
};

这里取名为Name和Value，待会在roleNames函数中做映射关系时，映射给qml端使用的变量名也是name和value；

然后在roleNames函数处理映射关系：

QHash<int, QByteArray> MyListModel::roleNames() const
{// 定义映射关系，C++端的枚举映射QML端使用的变量QHash<int, QByteArray> mHash;mHash.insert(MyRoleName::Name, "name");     // 字符串是QML端使用mHash.insert(MyRoleName::Value, "value");   // 枚举是CPP端使用(用来判断)return mHash;
}

通过定义哈希容器，将C++端的枚举与字符串组成映射，那么在qml的model中就可以使用name和value；

那么name和value的值是什么呢？如何定义呢？

因为我们给qml端定义了两个映射值，就不能使用普通的QString去存储了，需要自定义一个容器或者类去存储：

class MyData {
public:MyData(QString s, int v) : m_string(s), m_value(v) {}QString m_string;int m_value;
};

在上述代码中，自定义类MyData，里面有QString和int两个元素，用于存储name和value的值；

有了数据结构，就得需要容器去存储，新建QList用于存储MyData：

private:QList<MyData> m_data;      // 存储元素

有了这些数据结构做支撑，就可以在data函数中，通过映射关系给qml端返回相应的值了：

QVariant MyListModel::data(const QModelIndex &index, int role) const
{if (!index.isValid())return QVariant();// 通过映射关系，将值返回给qml端使用if (MyRoleName::Name == role) {return m_data[index.row()].m_string;} else if (MyRoleName::Value == role) {return m_data[index.row()].m_value;}// FIXME: Implement me!return QVariant();
}

data的role参数，用于与枚举做判断，即可得出是哪一个的映射关系；

然后再通过index.row()索引，在m_data容器中获得数据返回回去即可；

注意，这里为什么是使用row()而不是使用column()呢，因为在ListView控件中，是没有用到column的，只用到了row用于标识索引；

m_data的数据是什么？

数据就需要自己插入赋值了，既然是在C++端处理的数据，这不就很简单了嘛；

为了方便，这边只在构造函数中给m_data赋值：

MyListModel::MyListModel(QObject *parent): QAbstractListModel(parent)
{m_data.append(MyData("张三", 111));m_data.append(MyData("李四", 222));m_data.append(MyData("王五", 333));m_data.append(MyData("赵六", 444));m_data.append(MyData("韩七", 555));}

最后，还剩一个rowCount函数没有处理，前面也说过了，该函数主要用于返回元素个数，所以：

int MyListModel::rowCount(const QModelIndex &parent) const
{// For list models only the root node (an invalid parent) should return the list's size. For all// other (valid) parents, rowCount() should return 0 so that it does not become a tree model.if (parent.isValid())return 0;return m_data.count();
}

最后，为了方便注册时使用，再加上一个单例函数即可：

static MyListModel *getInstance();MyListModel *MyListModel::getInstance()
{static MyListModel *obj = new MyListModel;return obj;
}

至此，在C++端自定义model已经实现完毕。

2 将自定义model注册到qml端使用

在main函数中，engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); 加载前，进行注册：

qmlRegisterSingletonInstance("MyModel", 1, 0, "MyListModel", MyListModel::getInstance());

3 在qml端使用自定义model

首先导入自定义模块：import MyModel 1.0

ListView {width: 300height: 500spacing: 10model: MyListModeldelegate: Text {id: txttext: name + "   " + value}
}

在ListView的model中，直接使用自定义的MyListModel；

然后在delegate中设置文本，就可以直接使用在自定义model中映射的name和value了。

至此，简单的自定义model已经介绍完毕！

4 代码整合

4.1 MyListModel

mylistmodel.h

#ifndef MYLISTMODEL_H
#define MYLISTMODEL_H#include <QAbstractListModel>class MyData {
public:MyData(QString s, int v) : m_string(s), m_value(v) {}QString m_string;int m_value;
};class MyListModel : public QAbstractListModel
{Q_OBJECTpublic:enum MyRoleName {Name = Qt::DisplayRole  + 1,Value};explicit MyListModel(QObject *parent = nullptr);static MyListModel *getInstance();// Header:QVariant headerData(int section, Qt::Orientation orientation, int role = Qt::DisplayRole) const override;// Basic functionality: 元素的个数 或者 model的大小/长度int rowCount(const QModelIndex &parent = QModelIndex()) const override;// 处理数据返回给qml使用QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override;// 生成映射关系QHash<int, QByteArray> roleNames() const override;private:QList<MyData> m_data;      // 存储元素
};#endif // MYLISTMODEL_H

mylistmodel.cpp

#include "mylistmodel.h"MyListModel::MyListModel(QObject *parent): QAbstractListModel(parent)
{m_data.append(MyData("张三", 111));m_data.append(MyData("李四", 222));m_data.append(MyData("王五", 333));m_data.append(MyData("赵六", 444));m_data.append(MyData("韩七", 555));}MyListModel *MyListModel::getInstance()
{static MyListModel *obj = new MyListModel;return obj;
}QVariant MyListModel::headerData(int section, Qt::Orientation orientation, int role) const
{// FIXME: Implement me!
}// 一般用于返回元素个数
int MyListModel::rowCount(const QModelIndex &parent) const
{// For list models only the root node (an invalid parent) should return the list's size. For all// other (valid) parents, rowCount() should return 0 so that it does not become a tree model.if (parent.isValid())return 0;return m_data.count();
}QVariant MyListModel::data(const QModelIndex &index, int role) const
{if (!index.isValid())return QVariant();// 通过映射关系，将值返回给qml端使用if (MyRoleName::Name == role) {return m_data[index.row()].m_string;} else if (MyRoleName::Value == role) {return m_data[index.row()].m_value;}// FIXME: Implement me!return QVariant();
}QHash<int, QByteArray> MyListModel::roleNames() const
{// 定义映射关系，C++端的枚举映射QML端使用的变量QHash<int, QByteArray> mHash;mHash.insert(MyRoleName::Name, "name");     // 字符串是QML端使用mHash.insert(MyRoleName::Value, "value");   // 枚举是CPP端使用(用来判断)return mHash;
}

4.2 注册

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>#include "mylistmodel.h"int main(int argc, char *argv[])
{QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);QGuiApplication app(argc, argv);QQmlApplicationEngine engine;// 注册qmlRegisterSingletonInstance("MyModel", 1, 0, "MyListModel", MyListModel::getInstance());engine.load(QUrl(QStringLiteral("qrc:/main.qml")));if (engine.rootObjects().isEmpty())return -1;return app.exec();
}

4.3 使用

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.14import MyModel 1.0Window {id: rootvisible: truewidth: 800height: 500title: qsTr("Hello World")color: "white"objectName: "window"ListView {width: 300height: 500spacing: 10model: MyListModeldelegate: Text {id: txttext: name + "   " + value}}
}