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();

    //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 + ,
         SizeRole
     };

     AnimalModel(QObject *parent = );

     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() <  || 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;
 }

四、源码

　　源码路径：Examples\Qt-5.7\quick\models\abstractitemmodel