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"

1
 
1
  #include <QGuiApplication>
1
  #include <qqmlengine.h>
1
  #include <qqmlcontext.h>
1
  #include <qqml.h>

1
  #include <QtQuick/qquickitem.h>
1
  #include <QtQuick/qquickview.h>
1
 
1
  int main(int argc, char ** argv)
1
  {
1
      QGuiApplication app(argc, argv);
1
    // 此部分逻辑可以放入c++业务逻辑中，更新完数据后给界面发送一个信号
1
      AnimalModel model;
1
      model.addAnimal(Animal("Wolf", "Medium"));
1
      model.addAnimal(Animal("Polar bear", "Large"));
1
      model.addAnimal(Animal("Quoll", "Small"));
1
 
1
      QQuickView view;
1
      view.setResizeMode(QQuickView::SizeRootObjectToView);
1
      QQmlContext *ctxt = view.rootContext();

model.h

#include
#include

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;

1
    void clear(){    beginResetModel();
1
                     m_animals.clear();
1
                     endResetModel();}

protected:
QHash roleNames() const;
private:
QList m_animals;
};

1
      ctxt->setContextProperty("myModel", &model);
1
 
1
      view.setSource(QUrl("qrc:view.qml"));
1
      view.show();
1
 
1
      return app.exec();
1
  }

model.cpp

#include "model.h"

1
 
1
  Animal::Animal(const QString &type, const QString &size)
1
      : m_type(type), m_size(size)
1
  {
1
  }
1
 
1
  QString Animal::type() const
1
  {
1
      return m_type;
1
  }
1
 
1
  QString Animal::size() const
1
  {
1
      return m_size;
1
  }
1
 
1
  AnimalModel::AnimalModel(QObject *parent)
1
      : QAbstractListModel(parent)
1
  {
1
  }
1
 
1
  void AnimalModel::addAnimal(const Animal &animal)
1
  {
1
      beginInsertRows(QModelIndex(), rowCount(), rowCount());
1
      m_animals << animal;
1
      endInsertRows();
1
  }
1
 
1
  int AnimalModel::rowCount(const QModelIndex & parent) const {
1
      Q_UNUSED(parent);
1
      return m_animals.count();

1
  }
1
 
1
  QVariant AnimalModel::data(const QModelIndex & index, int role) const {
1
      if (index.row() < 0 || index.row() >= m_animals.count())
1
          return QVariant();
1
 
1
      const Animal &animal = m_animals[index.row()];
1
      if (role == TypeRole)
1
          return animal.type();
1
      else if (role == SizeRole)
1
          return animal.size();
1
      return QVariant();
1
  }
1
 
1
  QHash<int, QByteArray> AnimalModel::roleNames() const {
1
      QHash<int, QByteArray> roles;
1
      roles[TypeRole] = "type";
1
      roles[SizeRole] = "size";
1
      return roles;
1
  }
1
界面使用

veiw.qml

import QtQuick 2.0

1
 
1
  ListView {

id：view

1
      width: 200; height: 250
1
 
1
      model: myModel  // 该处model 可以通过接受到数据更新完后信号进行赋值操作
1
      delegate: Text { text: "Animal: " + type + ", " + size } // 此处可以定制delegate

//例如：

1
 //TableViewColumn 描述表格的每一列
1
            TableViewColumn{role: "type"; title: ""; width: 56; resizable: false; movable:false; delegate: view.itemDelegateText}
1
 Component{
1
                    id:itemDelegateText
1
                    Text {
1
 
1
                        id:textComponent
1
                        color: styleData.selected?"#000000":"#4A4D5B"
1
                         elide: Text.ElideRight
1
                        text: styleData.value
1
                        font.pixelSize: 14
1
                        verticalAlignment: Text.AlignVCenter
1
                        visible:  true
1
                        ToolTip {
1
                            id: control
1
                            text: styleData.value;
1
                            visible: true;
1
                            contentItem: Text {
1
                                text: control.text
1
                                font.pixelSize: 12;
1
                                color: "#4A4D5B"
1
                            }
1
                            background: Rectangle {
1
                                color: "#ffffff";
1
                                border.color: "#000000"
1
                                border.width: 1;
1
                            }
1
                        }
1
 
1
                        MouseArea {
1
                            id: ma
1
                            anchors.fill: parent
1
                            hoverEnabled: true
1
                            acceptedButtons: Qt.NoButton;
1
                        }
1
 
1
                    }
1
 
1
        }
1
 
1
  }