Use qml Tableview, fetch data in c ++ for interface display

1. Assemble a table structure in c ++ and assign it to the tableview model

The specific method is as follows:

1. Create a record data table class

2. Create a model that inherits QAbstractListModel

3. Main.cpp add the model into qml, single-class form, a model is bound to a 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. Process the logic in C ++, add the data to the model, and after loading, send a signal to notify the qml interface to update the data

5. Binding c ++ signal in qml, assigning model, and following new interface

Specific examples are as follows:

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);
    // This part of the logic can be put into the C ++ business logic. After updating the data, it sends a signal to the interface
      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;
  }
Interface use 

veiw.qml

import QtQuick 2.0

 
  ListView {

id:view

      width: 200; height: 250
 
      model: myModel // The model can be assigned by receiving the signal after the data update
      delegate: Text {text: "Animal:" + type + "," + size} // The delegate can be customized here

    //E.g:

 // TableViewColumn describes each column of the table
            TableViewColumn{role: "type"; title: ""; width: 56; resizable: false; movable:false; delegate: view.itemDelegateText}
 Component{
                    id: itemDelegateText          
                    Text {
 
                        id:textComponent
                        color: styleData.selected?"#000000":"#4A4D5B"
                         Elida: 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;
                        }
 
                    }
 
        }
 
  }
Wow
Published 206 original articles · praised 18 · 70,000 views

Guess you like

Origin blog.csdn.net/lvmengzou/article/details/105330124