QML 中的 ListView 中的隐藏秘技

QML 中的 ListView 中的隐藏秘技

应该是 ListView 中 delegate 的秘技。

ListView 代理中获取下标

ListView {
    model: 10
    delegate: Text {
        text: "index"+index
    }
}

使用 index 来获取代理在视图中展示的是哪个数据。（只此一条方法）

ListView 代理中获取到一条模型记录的某个字段

ListView {
    width: 400
    height: 400
    model: ListModel {
        ListElement {
            age: 1
        }
        ListElement {
            age: 2
        }
        ListElement {
            age: 3
        }
        ListElement {
            age: 4
        }
    }
    delegate: Text {
        text: age
    }
}

如上所写，只要在 delegate 中写上对应的字段名（角色名）即可。

但是如果模型设置为 JavaScript 数组的时候，上诉写法就会报错了。如下：

ListView {
    width: 400
    height: 400
    model: [
        { "age":1},
        { "age":2},
        { "age":3},
        { "age":4},
    ]
    delegate: Text {
        text: age            // ReferenceError: age is not defined
    }
}

这个时候就需要获取一条模型记录，然后再取对应的字段（角色）了。

ListView 代理中获取一条模型记录

如何在代理中获取 model 的一条记录呢？

这里先说说 ListView::model 所能接受的数据类型吧。

• int

• QList<T>

• QList<QObject*>

• QListString

• QAbstractItemModel

• js array

• ListModel

大概有七种类型，如果将 model 设置为数字的话，就会进行简单的类型转换，转成成 QList<int> 这种序列类型，并从小到大的进行数据填充。

视图通过代理将模型中数据一个一个进行绘制。那么代理中怎么获取到一条模型记录呢？

且看如下代码：

ListView {
    anchors.fill: parent
    model: [
        {
            "age": 1
        },
        {
            "age": 2
        },
        {
            "age": 3
        },
        {
            "age": 4
        }
    ]
    delegate: Text {
        property var item: modelData
        property int age: item && item.age
        text: age
    }
}

ListView 在实例化代理中的图元时，会为每一个代理图元植入对应下标的 modelData ，这个就是一条模型记录，通过捕获 modelData 这个属性，然后在访问对应字段。

但是在 ListView 设置为 ListModel 的话，就无法使用 modelDate 这个属性了。然后直接给出兼容代码：

 // 本方法不适合在 QAbstractItemModel* 及其子类中使用，除非 QAbstractItemModel* 及其子类有设定 modelData 这个角色
property var item: try {
                       // modelData 适用与 list<QtObject> 类型， js 数组类型，数字等
                       // 注意 QtObject* 除 QAbstractItemModel* 外都会转换成 list<QtObject> 这种类型

                       // console.debug(typeof modelData)
                       return modelData;
                   } catch(e) {
                       return ListView.view.model.get(index);
                   }

上诉代码不能和 QAbstractItemModel* 这个模型配套。

这时需要对 QAbstractItemModel* 的子类做一些功夫。首先设置 modelData 这个角色，然后在 QAbstractItemModel::data 这个函数中返回对应到 modelData 的记录，这个记录可以使用一个结构体存放，或者使用 QJasonObject 存放。

具体代码如下：

CppListModel ：

#ifndef CPPLISTMODEL_H
#define CPPLISTMODEL_H

#include <QAbstractListModel>

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

    enum Roles{
        NameRole = Qt::UserRole + 1,            // name
        AgeRole,                                // age
        ModelDataRole,                          // modelData
    };

    QHash<int, QByteArray> roleNames() const;
    int rowCount(const QModelIndex &parent) const;
    QVariant data(const QModelIndex &index, int role) const;
};

#endif // CPPLISTMODEL_H

实现：

#include "cpplistmodel.h"
#include <QJsonObject>
#include <QtDebug>

CppListModel::CppListModel(QObject *parent):
    QAbstractListModel(parent)
{  }

QHash<int, QByteArray> CppListModel::roleNames() const
{
    QHash<int, QByteArray> roleNames;
    roleNames.insert(NameRole, "name");
    roleNames.insert(AgeRole, "age");
    roleNames.insert(ModelDataRole, "modelData");
    return roleNames;
}

int CppListModel::rowCount(const QModelIndex &parent) const
{
    Q_UNUSED(parent);
    // 返回固定
    return 5;
}

QVariant CppListModel::data(const QModelIndex &index, int role) const
{
    if (!index.isValid() || index.row() < 0)
        return QVariant();

    if (index.row() >= 5) {
        qWarning() << "SatelliteModel: Index out of bound";
        return QVariant();
    }

    switch (role)
    {
    case NameRole:
        return QString("this name from cpp");
    case AgeRole:
        return 551;
    case ModelDataRole:
        return QJsonObject {
            { "name", "this name from cpp"},
            { "age", 551 }
        };
    default:
        break;
    }
    return QVariant();
}

在 QML 中使用：

import QtQuick 2.5
import QtQuick.Controls 1.4
import TestModel 1.0

ApplicationWindow {
    visible: true
    width: 360
    height: 640
    title: qsTr("Hello World")

    CppListModel {
        id: cppListModel
        // name, age
    }

    ListView {
        anchors.fill: parent
        model: cppListModel
        delegate: itemDelegate
    }

    Component {
        id: itemDelegate
        Item {

            // 本方法不适合在 QAbstractItemModel* 及其子类中使用，除非 QAbstractItemModel* 及其子类有设定 modelData 这个角色
            property var item: try {
                                   // modelData 适用与 list<QtObject> 类型， js 数组类型，数字等
                                   // 注意 QtObject* 除 QAbstractItemModel* 外都会转换成 list<QtObject> 这种类型

                                   console.debug("typeof modelData", typeof modelData)
                                   return modelData;
                               } catch(e) {
                                   return ListView.view.model.get(index);
                               }

            property string name    : item && item.age
            property string age     : item && item.age
            Text {
                anchors.centerIn: parent
                text: name + age
            }
        }
    }
}

---

Using C++ Models with Qt Quick Views