qml Tableview 使用 ，c++中取数据供界面显示

1.c++中组装一个表结构体赋值给Tableview的model

具体方法如下：

1.创建一个一条记录的数据表类

2.创建一个model 继承QAbstractListModel

3.main.cpp中将该model加入进qml，单类形式加入，一个model绑定一个tableview

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

4.在c++中处理逻辑，将数据加入该model中，加载完后，发送一个信号通知qml界面进行数据更新

5.qml中绑定c++信号，进行model赋值，跟新界面

具体例子如下：

main.cpp

#include "model.h"

  #include <QGuiApplication>

  #include <qqmlengine.h>

  #include <qqmlcontext.h>

  #include <qqml.h>

  #include <QtQuick/qquickitem.h>

  #include <QtQuick/qquickview.h>

  int main(int argc, char ** argv)

  {

      QGuiApplication app(argc, argv);

    // 此部分逻辑可以放入c++业务逻辑中，更新完数据后给界面发送一个信号

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

model.h

  #include <QAbstractListModel>
  #include <QStringList>

  class Animal
  {
  public:
      Animal(const QString &type, const QString &size);

      QString type() const;
      QString size() const;

  private:
      QString m_type;
      QString m_size;
  };

  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;

     

    void clear(){    beginResetModel();

                     m_animals.clear();

                     endResetModel();}

  protected:
      QHash<int, QByteArray> roleNames() const;
  private:
      QList<Animal> m_animals;
  };
 
 

      ctxt->setContextProperty("myModel", &model);

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

      view.show();

      return app.exec();

  }

model.cpp

#include "model.h"

  Animal::Animal(const QString &type, const QString &size)

      : m_type(type), m_size(size)

  {

  }

  QString Animal::type() const

  {

      return m_type;

  }

  QString Animal::size() const

  {

      return m_size;

  }

  AnimalModel::AnimalModel(QObject *parent)

      : QAbstractListModel(parent)

  {

  }

  void AnimalModel::addAnimal(const Animal &animal)

  {

      beginInsertRows(QModelIndex(), rowCount(), rowCount());

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

      else if (role == SizeRole)

          return animal.size();

      return QVariant();

  }

  QHash<int, QByteArray> AnimalModel::roleNames() const {

      QHash<int, QByteArray> roles;

      roles[TypeRole] = "type";

      roles[SizeRole] = "size";

      return roles;

  }

界面使用 

veiw.qml

import QtQuick 2.0

  ListView {

id：view

      width: 200; height: 250

      model: myModel  // 该处model 可以通过接受到数据更新完后信号进行赋值操作

      delegate: Text { text: "Animal: " + type + ", " + size } // 此处可以定制delegate

    //例如：

 //TableViewColumn 描述表格的每一列

            TableViewColumn{role: "type"; title: ""; width: 56; resizable: false; movable:false; delegate: view.itemDelegateText}

 Component{

                    id:itemDelegateText          

                    Text {

                        id:textComponent

                        color: styleData.selected?"#000000":"#4A4D5B"

                         elide: Text.ElideRight

                        text: styleData.value

                        font.pixelSize: 14

                        verticalAlignment: Text.AlignVCenter

                        visible:  true

                        ToolTip {

                            id: control

                            text: styleData.value;

                            visible: true;

                            contentItem: Text {

                                text: control.text

                                font.pixelSize: 12;

                                color: "#4A4D5B"

                            }

                            background: Rectangle {

                                color: "#ffffff";

                                border.color: "#000000"

                                border.width: 1;

                            }

                        }

                        MouseArea {

                            id: ma

                            anchors.fill: parent

                            hoverEnabled: true

                            acceptedButtons: Qt.NoButton;

                        }

                    }

        }

  }