初识qml——PathView QQmlContext c++类与qml的数据交互

数据数据

要展示的数据如果是复杂点的，通过代码控制获取的，那肯定就不能是在qml中定义几串字符串那么简单了。

这时就可以编辑QAbstractListModel实现代码和qml中数据通信。

先想好数据类型，每个delegate需要一个图片地址，再加一个图片介绍吧。所以是一个链表，链表上的每个数据是两个字符串。

所以数据是这样：

typedef  struct dataMeta{QString url;QString info;
}m_data;typedef  QList<m_data> datalist;

然后整个类说白了就是服务于这条链表，在类里面定义的私有变量datalist dataList;

照着框架写

建立QAbstractListModel的子类，写好数据，当然数据还是挺简单的哈哈哈，但总有一天会有复杂的时候：

dataModel::dataModel(QObject *parent):QAbstractListModel(parent)
{QStringList infotemp;infotemp << "不知火曾经是离岛闻名天下的歌姬阿离，有着绝美的容颜。在一个即将失去生命的夜晚，她成为了大妖怪不知火。"<< "彼岸花是居住在冥界的妖怪，外表美艳动人，性格却难以捉摸。她常常出现在三途川边的彼岸花海中。虽然她曾经在人界生活过，但却很少提起自己的过去。"<< "曾经被称为“曜姬”的少女，如今却隐于夜幕之下。她昔日视为神明的女王，已失去了太阳的辉光。"<< "鬼切原是大江山之鬼，后被源赖光以自己的血为媒介封入守护刀，左眼被植入封闭记忆的契约。他在大江山、罗生门一战中记忆因妖气逐渐复苏，并开始向源赖光复仇。"<< "少羽大天狗为天狗一族，为身后孱弱的羽翼而感到自卑，渴望飞上群山之巅，内心却一直回响着消极的声音。终于在神秘的笛音中获得了内心坚定的力量，燃起内心的勇气，向崇天高云的风景发起了挑战，也回忆起自己的少年幼时。";for (int i = 0; i < 5; i++){m_data datatemp;datatemp.url = QString("qrc:/%1.jpg").arg(i+1);datatemp.info = infotemp.at(i);dataList << datatemp;}}

后面实现好框架定好的三个虚函数，就可以接入qml了。

QHash<int, QByteArray> roleNames() const

listmodel是类似键-键值的结构，这个函数需要写的就是键值名：

QHash<int, QByteArray> dataModel::roleNames() const {QHash<int, QByteArray> roleNames;roleNames[UrlRole] = QByteArrayLiteral("url");roleNames[InfoRole] = QByteArrayLiteral("info");return roleNames;
}

当然它用了hash数据结构，也不用自己操作什么，要做的就是定义好键名“url”和“info”。

而对应的第几个用一个枚举包含着，后续会用到：

enum dataRole {UrlRole = Qt::UserRole + 1,InfoRole
};

int rowCount(const QModelIndex &parent = QModelIndex()) const

这个函数是计算数据的数量，返回链表的长度即可。

int dataModel::rowCount(const QModelIndex &parent) const {return dataList.count();
}

要在pathview用到这个数据可以加一个Q_PROPERTY实现：

Q_PROPERTY(int count READ rowCount CONSTANT)

QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const

这个虚函数就是返回键值的时候了，role定位刚刚定义的枚举，index是model数据链表的第几个，定义好数据返回即可，千篇一律：

QVariant dataModel::data(const QModelIndex &index, int role) const {if (index.row() < 0 || index.row() >= dataList.count())return QVariant();switch (role) {case UrlRole:return dataList.at(index.row()).url;case InfoRole:return dataList.at(index.row()).info;default:break;}return QVariant();
}

接入

在quickview构造之后立刻传入即可，构造写好的dataModel并按照指针传入，并定义好标识名datamodel，qml里就可以使用这个名字了：

view->rootContext()->setContextProperty(QStringLiteral("datamodel"), model);

qml里PathView的model可以选定为datamodel。

加一个Text段，用于显示图片介绍，首先先建立delegate的文本变量接住model的info变量：

property string infoText: info

后续编辑Text的时候可以pathView.currentItem定位到当前delegate，显示对应文本了。

弄好位置，发现文本不换行，网上查定义了wrapMode的很多种换行模式Qml中的Text控件，这里就随便选一种了。

Text
{anchors.left: pathView.leftanchors.leftMargin: root.width/5anchors.bottom: root.bottomanchors.bottomMargin: 120width: pathView.width*3/5height: 80opacity: 0.7text: pathView.currentItem.infoTextcolor: "white"font.pixelSize: 22wrapMode: Text.WrapAnywhere
}

恭喜！

数据是接入成功滴：