QAbstractListModel与QML交互简单示例

1.抽象类为了扩展元素类型

#ifndef ABSTRACTELEMENT_H
#define ABSTRACTELEMENT_H

#include <QString>
#include <QColor>

class AbstractElement
{
public:
    AbstractElement(const QString &str , const QColor &color , const int &number);
    ~AbstractElement();
    QString GetString() const ;
    QColor GetColor()  const ;
    int GetNumber() const ;

private:
    QString  userStr ;
    QColor  userColor ;
    int      userNumber ;


};
#endif // ABSTRACTELEMENT_H

2.与QML交互类

#ifndef MYABSTRACTLISTVIEW_H
#define MYABSTRACTLISTVIEW_H

#include <QAbstractListModel>
#include <QList>
#include "abstractelement.h"
class MyAbstractListModel : public QAbstractListModel
{
    Q_OBJECT
public:
    MyAbstractListModel();
    ~MyAbstractListModel();

    virtual QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const ;
    virtual QHash<int, QByteArray> roleNames() const ;
    virtual int rowCount(const QModelIndex &parent = QModelIndex())  const ;

private:
    enum AbstractRoleName{
         itemName ,
         itemColor,
         itemNumber
    };
    QList <AbstractElement> elementList;

public slots:
    void  addItem(QString str,QColor color,int number);
    void  removeFirstItem();

};


#endif // MYABSTRACTLISTVIEW_H`

3.具体实现

#include "abstractelement.h"
AbstractElement::AbstractElement(  const QString &str , const QColor &color , const int &number )
    : userStr(str), userColor(color),userNumber(number){
}
AbstractElement :: ~AbstractElement(){}
QString AbstractElement :: GetString() const {
    return userStr ;
}
QColor AbstractElement :: GetColor() const {
    return userColor ;
}
int AbstractElement :: GetNumber() const {
    return userNumber ;
}

#include "myabstractlistmodel.h"
MyAbstractListModel::MyAbstractListModel(){}
MyAbstractListModel :: ~MyAbstractListModel(){}


QVariant MyAbstractListModel :: data(const QModelIndex &index, int role) const{
    switch(role){
      case  AbstractRoleName ::itemName : return elementList[index.row()].GetString();
      case  AbstractRoleName ::itemColor : return elementList[index.row()].GetColor();
      case  AbstractRoleName ::itemNumber : return elementList[index.row()].GetNumber();
      default : break ;
    }
    return QVariant();
}


QHash <int,QByteArray> MyAbstractListModel :: roleNames() const{
    QHash <int,QByteArray> temp ;
    temp.insert(AbstractRoleName :: itemName,"itemName");
    temp.insert(AbstractRoleName :: itemColor,"itemColor");
    temp.insert(AbstractRoleName :: itemNumber,"itemNumber");
    return temp ;
}


int MyAbstractListModel  :: rowCount(const QModelIndex &parent) const {
    Q_UNUSED(parent);
    return elementList.length();
}


void MyAbstractListModel :: addItem(QString str,QColor color,int number)  {
    beginInsertRows(QModelIndex(),rowCount(),rowCount());
    elementList<< AbstractElement(str,color,number);
    endInsertRows();
}


void MyAbstractListModel :: removeFirstItem(){
    if(rowCount() > 0){
        beginRemoveRows(QModelIndex(),0,0);
        elementList.removeFirst();
        endRemoveRows();
    }
}

4.引进C++接口

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "myabstractlistmodel.h" // 引进头文件
int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);
  /*只加下面这一句*/
    qmlRegisterType<MyAbstractListModel>("MyAbstractListModelPackage",0,0,"MyAbstractListModel");
    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;


    return app.exec();
}

然后QML界面我分为以下几个文件{MyListView,MyListViewDelegate,js}
js

import QtQuick 2.0


Item {
    property int counts: 0
    function add(){
        myAbstractListModel.addItem("test:","yellow",counts++)
    }
    function removeFirst(){
        myAbstractListModel.removeFirstItem()
        counts--
    }
}

MyListViewDelegate

import QtQuick 2.0
Text{
    text: itemName  +  itemNumber
    color: itemColor
    font.pointSize: 20
}

MyListView

import QtQuick 2.0
import MyAbstractListModelPackage 0.0
ListView{

    //封装一层接口供外部逻辑使用
    function add(){
        js.add()
    }
    function removeFirst(){
        js.removeFirst()
    }

    //js实现
    Myjs{ id: js}

    id: myListView
    implicitWidth: 300 ; implicitHeight: 300
    model: MyAbstractListModel{ id:myAbstractListModel }
    delegate: MyListViewDelegate{}
}

5.最后调用文件

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.5
import "./" as MyQML
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    color: "gray"
 Column{
   anchors.centerIn: parent
   MyQML.MyListView{
       id: myListView
   }
   Row{
       spacing: 20
       Button{
           width: 200 ; height: 100
           text: "add"
           onClicked:{ myListView.add() }
       }
       Button{
           width: 200 ; height: 100
           text: "remove"
           onClicked:{ myListView.removeFirst()}
       }
    }
  }
}