qml demo分析(abstractitemmodel-数据分离)

一、概述

　　qt5之后qml也可以被用于桌面程序开发，今天我就拿出qt demo中的一个qml示例程序进行分析。这个demo主要是展示了qml数据和展示分离的使用方式，qml只专注于快速高效的绘制界面，而数据存储、数据加工都交由qt来做(也可以认为是C++来实现复杂的逻辑)，这样的话qml和qt关系就像是html和js的关系，以后使用qt我们也可以高效的开发出绚丽的桌面程序。

二、效果展示

　　如图1所示，数据展示使用了qml中的ListView控件，而数据存储使用的是QAbstractListModel。

图1 qml动态数据展示图

三、源码分析

1、main.cpp文件，添加定时器是为了动态添加数据，具体效果请看图1

int main(int argc, char ** argv)
{
    QGuiApplication app(argc, argv);

    AnimalModel model;
    model.addAnimal(Animal("Wolf", "Medium"));
    model.addAnimal(Animal("Polar bear", "Large"));
    model.addAnimal(Animal("Quoll", "Small"));

    QQuickView view;
    view.setResizeMode(QQuickView::SizeRootObjectToView);
    QQmlContext *ctxt = view.rootContext();
    ctxt->setContextProperty("myModel", &model);
//![0]

    view.setSource(QUrl("qrc:view.qml"));
    view.show();

    QTimer time;
    QObject::connect(&time, &QTimer::timeout, ctxt, [&model]{
    model.addAnimal(Animal("Quoll", "Small")); });
    time.start(1000);

    //qml嵌入QWidget方式
    //QWidget * widget = QWidget::createWindowContainer(&view);
    //widget->show();

    return app.exec();
}

2、头文件

//自定义动物结构体，包含类型和大小两个字段
class Animal
{
public:
    Animal(const QString &type, const QString &size);

    QString type1() const;//返回动物类型
    QString size2() const;//返回动物大小

private:
    QString m_type;
    QString m_size;
};
//自定义model，用于存储List数据
class AnimalModel : public QAbstractListModel
{
    Q_OBJECT
public:
    enum AnimalRoles {
        TypeRole = Qt::UserRole + 1,
        SizeRole
    };

    AnimalModel(QObject *parent = 0);

    void addAnimal(const Animal &animal);//新增一个动物

    int rowCount(const QModelIndex & parent = QModelIndex()) const;//返回指定索引包含的行数

    QVariant data(const QModelIndex & index, int role = Qt::DisplayRole) const;//返回索引的指定数据类型

protected:
    QHash<int, QByteArray> roleNames() const;//各字段名称
private:
    QList<Animal> m_animals;//动物列表
};

3、实现文件

Animal::Animal(const QString &type, const QString &size)
    : m_type(type), m_size(size)
{
}

QString Animal::type1() const
{
    return m_type;
}

QString Animal::size2() const
{
    return m_size;
}

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

void AnimalModel::addAnimal(const Animal &animal)
{
    beginInsertRows(QModelIndex(), rowCount(), rowCount());//model底层插入数据时必须调用该接口   第二个和第三个参数标示插入的开始和结束行
    m_animals << animal;
    endInsertRows();//标示插入结束
}

int AnimalModel::rowCount(const QModelIndex & parent) const {
    Q_UNUSED(parent);
    return m_animals.count();
}

QVariant AnimalModel::data(const QModelIndex & index, int role) const {
    if (index.row() < 0 || index.row() >= m_animals.count())
        return QVariant();

    const Animal &animal = m_animals[index.row()];
    if (role == TypeRole)
        return animal.type1();
    else if (role == SizeRole)
        return animal.size2();
    return QVariant();
}

QHash<int, QByteArray> AnimalModel::roleNames() const {
    QHash<int, QByteArray> roles;//返回列名称
    roles[TypeRole] = "type2";
    roles[SizeRole] = "size";
    return roles;
}

四、源码

　　源码路径：ExamplesQt-5.7quickmodelsabstractitemmodel