备案控制台
探索云世界
开发者社区 数据库 文章 正文

【QT】QT模型/视图

2022-05-12 220
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【QT】QT模型/视图

模型/视图编程

Qt中的模型/视图架构用来实现大量的数据存储、处理及显示。

MVC(Model-View-Controller)包括了3个组件：模型(model)是应用对象，用来表示数据；视图(View)是模型的用户界面，用来显示数据；控制(Controller)定义了用户界面对用户输入的反应方式。

委托(Delegate)用于定制数据的渲染和编辑方式。

image-20220203134951360

模型

所有的模型都基于QAbstractItemModel类，该类提供了十分灵活的接口来处理各种视图，这些视图的数据表现形式为表格(table)、列表(list)、树(tree)。

Qt提供了一些现成的模型来处理数据项:

QStringListModel存储简单的QString项目列表;

QStandardItemModel管理复杂的属性结构数据项，每一个数据项可以包含任意的数据；

QFileSystemModel、QSqlTableModel和QSqlRelationTableModel用来访问数据库。

当标准模型还无法满足需要时，可子类化QAbstractItemModel、QAbstractListModel或QAbstractTableModel来创建自定义的模型。

常见的3种模型为列表模型、表格模型、树模型，如下图所示:
image-20220203161907307

为确保数据的表示与数据获取相分离，Qt引入了模型索引的概念，输入和委托均可通过模型索引来请求数据并显示。只有模型需要知道怎样获取数据，被模型管理的数据类型可以被广泛的定义。模型索引包含一个指针，指向创建他们的模型，使用多个模型时可避免混淆。模型索引QModeIIndex类提供对一块数据的临时引用， 用来修改或检索模型中的数据，获取一个数据项的模型索引必须指定模型的3个属性：行号、列号和父项的模型索引。如:

QModelIndex index = model->index(row,column,parent)；

也可以通过模型指定的相关数据项对应的模型索引以及特定的角色来获取需要的类型数据，如:
QVariant value = model->data(index,role);

常用的角色类型:
image-20220203174738323

示例:
image-20220203174829807

#include<QApplication>
#include<QDebug>
#include<QTreeView>
#include<QStandardItemModel>
int main(int argc,char* argv[])
{
    QApplication a(argc,argv);
    //创建标准项模型
    QStandardItemModel model;
    //获取标准项模型的根项，跟项式不可见的
    QStandardItem* parentItem = model.invisibleRootItem();
    //创建标准箱item0，并设置文本
    QStandardItem* item0 = new QStandardItem;
    item0->setText(QString("A"));
    QPixmap pixmap0(50,50);
    pixmap0.fill(Qt::red);
    item0->setIcon(QIcon(pixmap0));
    item0->setToolTip(QString("A项"));
    //将item0作为父项的子项
    parentItem->appendRow(item0);
    parentItem = item0;
    //创建item0的子项
    QStandardItem* item1 = new QStandardItem;
    item1->setText(QString("B"));
    QPixmap pixmap1(50,50);
    pixmap1.fill(Qt::blue);
    item1->setIcon(pixmap1);
    item1->setToolTip(QString("B项"));

    QStandardItem* item2 = new QStandardItem;
    QPixmap pixmap2(50,50);
    pixmap2.fill(Qt::green);
    item2->setData("C",Qt::EditRole);
    item2->setData("indexC",Qt::ToolTipRole);
    item2->setData(QIcon(pixmap2),Qt::DecorationRole);

    parentItem->appendRow(item1);
    parentItem->appendRow(item2);
    //在树视图中显示数据
    QTreeView view;
    view.setModel(&model);
    view.show();
    //模型问数据
    QModelIndex indexA = model.index(0,0,QModelIndex());
    qDebug()<<"indexA row count:"<<model.rowCount(indexA);
    QModelIndex indexB = model.index(0,0,indexA);
    qDebug()<<"indexB text:"<<model.data(indexB,Qt::EditRole).toString();
    qDebug()<<"indexB toolTip:"<<model.data(indexB,Qt::ToolTipRole).toString();
    return a.exec();
}

视图

Qt提供了QListView、QTabelView视图、QTreeView视图分别实现列表、表格与树视图效果。QListView将数据项显示为一个列表；QTableView将模型中的数据显示在一个表格中；QTreeView将模型中的数据项显示在具有层次的列表中。QTableView和QTreeView在显示项目的时候同时还可以显示标头，通过QHeaderView类实现。自定义视图类是基于QAbstractItemView抽象基类，如实现条形图，饼状图等特殊显示方式。

image-20220204121337670

示例1:

image-20220204121752455

#include<QApplication>
#include<QAbstractItemModel>
#include<QAbstractItemView>
#include<QDirModel>
#include<QTreeView>
#include<QListView>
#include<QTableView>
#include<QSplitter>
int main(int argc,char* argv[])
{
    QApplication app(argc,argv);
    //创建模型
    QDirModel model;
    //创建树视图、列表视图、表格视图
    QTreeView tree;
    QListView list;
    QTableView table;
     //视图设置模型
     tree.setModel(&model);
     list.setModel(&model);
     table.setModel(&model);
    //设置视图对象的选择方式为多选，list/table选择方式同tree
     tree.setSelectionMode(QAbstractItemView::MultiSelection);
     list.setSelectionMode(tree.selectionMode());
     table.setSelectionMode(tree.selectionMode());
    //树视图双击信号发射后，列表及表格视图刷新内容
    QObject::connect(&tree,SIGNAL(doubleClicked(QModelIndex)),&list,SLOT(setRootIndex(QModelIndex)) );
    QObject::connect(&tree,SIGNAL(doubleClicked(QModelIndex)),&table,SLOT(setRootIndex(QModelIndex)) );
     QSplitter* splitter = new QSplitter;
     splitter->addWidget(&tree);
     splitter->addWidget(&list);
     splitter->addWidget(&table);
     splitter->setWindowTitle(QString("模型/视图"));
     splitter->show();
     return app.exec();
}

示例2:

image-20220204115328476

#include "weaponmodel.h"

Weaponmodel::Weaponmodel(QObject* parent):QAbstractTableModel(parent)
{
    armyMap[1] = QString("空军");
    armyMap[2] = QString("海军");
    armyMap[3] = QString("陆军");
    armyMap[4] = QString("海军陆战队");
    weaponMap[1] = QString("战斗机1");
    weaponMap[2] = QString("战斗机2");
    weaponMap[3] = QString("战斗机3");
    weaponMap[4] = QString("战斗机4");
    weaponMap[5] = QString("战斗机5");
    weaponMap[6] = QString("战斗机6");
    weaponMap[7] = QString("战斗机7");
    weaponMap[8] = QString("战斗机8");
    populateModel();

}

int Weaponmodel::rowCount(const QModelIndex &parent)const
{
    return army.size();
}

int Weaponmodel::columnCount(const QModelIndex &parent)const
{
    return 3;
}

//返回指定索引的数据
QVariant Weaponmodel::data(const QModelIndex &index, int role) const
{
    if(!index.isValid())
    {
        return QVariant();
    }
    if(role == Qt::DisplayRole)
    {
        switch (index.column()) {
        case 0:
            return army[army[index.row()]];
            break;
        case 1:
            return weaponMap[weaponType[index.row()]];
            break;
        case 2:
            return weapon[index.row()];
            break;
        default:
            return QVariant();
            break;
        }
    }
    return QVariant();
}

QVariant Weaponmodel::headerData(int section, Qt::Orientation orientation, int role) const
{
    if(role == Qt::DisplayRole && orientation == Qt::Horizontal)
    {
        return header[section];
    }
    return QAbstractTableModel::headerData(section,orientation,role);
}


void Weaponmodel::populateModel()
{
     header<<QString("军种")<<QString("种类")<<QString("武器");
     army<<1<<2<<3<<4<<2<<4<<3<<1;
     weaponType<<1<<3<<5<<7<<4<<8<<6<<2;
     weapon<<QString("B-2")<<QString("尼尔兹级")<<QString("阿帕奇")<<QString("黄蜂级")<<QString("比例伯克级")<<QString("AAAV")<<QString("M1A1")<<QString("F-22");
}

示例3

image-20220205110959913

#include "stringlistmodel.h"

int StringListModel::rowCount(const QModelIndex &parent) const
{
    return m_stringList.count();
}

QVariant StringListModel::data(const QModelIndex &index, int role) const
{
    if(!index.isValid())
    {
        return QVariant();
    }
    if(index.row() == m_stringList.size())
    {
          return QVariant();
    }
    if(role == Qt::DisplayRole || role == Qt::EditRole)
    {
          return m_stringList.at(index.row());
    }
    else
    {
          return  QVariant();
    }

}

QVariant StringListModel::headerData(int section, Qt::Orientation orientation, int role) const
{
    if(role != Qt::DisplayRole)
    {
        return QVariant();
    }
    //水平表头
    if(orientation == Qt::Horizontal)
    {
        return QString("column %1").arg(section);
    }
    else
    {
        return QString("Row %1").arg(section);
    }
}

Qt::ItemFlags StringListModel::flags(const QModelIndex &index) const
{
    if(!index.isValid())
    {
        return Qt::ItemIsEnabled;
    }
    return QAbstractItemModel::flags(index) | Qt::ItemIsEditable;
}

bool StringListModel::setData(const QModelIndex &index, const QVariant &value, int role)
{
    //检测索引有效且项目可编辑
    if(index.isValid() && role == Qt::EditRole)
    {
        m_stringList.replace(index.row(),value.toString());
        emit dataChanged(index,index);
        return true;
    }
    return false;
}

bool StringListModel::inseratRows(int position, int rows, const QModelIndex &index)
{
    //告知其它组建指定的行开始插入操作
    beginInsertRows(QModelIndex(),position,position + rows -1 );
    for(int row = 0 ; row < rows; row++)
    {
        m_stringList.insert(position,QString("你好"));
    }
    //告知其它组件完成操作
    endInsertRows();
    return true;
}

bool StringListModel::removeRows(int position, int rows, const QModelIndex &index)
{
    //告知其他组件指定的行开始删除操作
    beginRemoveRows(QModelIndex(),position,position + rows - 1);
    for(int row = 0 ; row < rows;row++)
    {
        m_stringList.removeAt(position);
    }
    //告知其它组件完成操作
    endRemoveRows();
    return true;
}

#include<QApplication>
#include"stringlistmodel.h"
#include<QListView>
#include<QTableView>
int main(int argc,char* argv[])
{
    QApplication app(argc,argv);
    QStringList list;
    list<<QString("太阳")<<QString("地球")<<QString("月亮")<<QString("木星");
    StringListModel model(list);//创建模型
    model.insertRows(3,2);
    model.removeRows(0,1);

    QListView  listView;//创建列表视图
    listView.setModel(&model);//视图设置模型
    listView.show();//视图显示

    QTableView tableView;//创建表格视图
    tableView.setModel(&model);//视图设置模型
    tableView.show();//视图显示
    return app.exec();
}

示例4:

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include<QStandardItem>
#include<QDebug>
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    //创建标准项模型，7行4列
    QStandardItemModel* model = new QStandardItemModel(7,4,this);
    for(int row = 0 ; row <7 ;row++)
    {
        for(int colum= 0;colum < 4;colum++)
        {
            QStandardItem* item = new QStandardItem(QString("%1").arg(row+4 +colum));
            //标准模型设置数据项
            model->setItem(row,colum,item);
        }
    }
    m_tableView = new QTableView;
    m_tableView->setModel(model);
    setCentralWidget(m_tableView);//设置主窗口的中心部件为表格视图
    QItemSelectionModel *selectionModel = m_tableView->selectionModel();//获取视图的选择模式
    QModelIndex topLeft;//左上角模型索引
    QModelIndex bottomRight;//右下角模型索引
    topLeft = model->index(1,1);
    bottomRight = model->index(5,2);
    //创建模型选择
    QItemSelection selection(topLeft,bottomRight);
    //以选择的方式来选择项目
    selectionModel->select(selection,QItemSelectionModel::Select);
    //添加动作addAction(动作文本，响应者，槽方法)
    ui->menuBar->addAction(QString("当前项目"),this,&MainWindow::getCurrenItemData);
    ui->menuBar->addAction(QString("切换选择"),this,&MainWindow::toggleSection);

    //关联选择模型的选择改变、当前项改变的信号
    connect(selectionModel,&QItemSelectionModel::selectionChanged,this,&MainWindow::updateSelection);
    connect(selectionModel,&QItemSelectionModel::currentChanged,this,&MainWindow::changeCurrent);

    m_tableView2 = new QTableView;
    m_tableView2 ->setWindowTitle("tableview2");
    m_tableView2->resize(400,300);
    m_tableView2->setModel(model);
    m_tableView2->setSelectionModel(selectionModel);
    m_tableView2->show();

}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::getCurrenItemData()
{
    qDebug()<<QString("当前项数据:")<<m_tableView->selectionModel()->currentIndex().data().toString();
}

void MainWindow::toggleSection()
{
    //左上角模型索引
    QModelIndex topLeft = m_tableView->model()->index(0,0,QModelIndex());
    //右下角模型索引
    QModelIndex bottomRight = m_tableView->model()->index(m_tableView->model()->rowCount((QModelIndex))-1,m_tableView->model()->columnCount(QModelIndex())-1,QModelIndex());
    //项选择
    QItemSelection curSelection(topLeft,bottomRight);
    m_tableView->selectionModel()->select(curSelection,QItemSelectionModel::Toggle);
}

void MainWindow::updateSelection(const QItemSelection &selected, const QItemSelection &deselected)
{
    QModelIndex index;
    //indexes返回所有选择项的模型索引
    QModelIndexList list = selected.indexes();
    //给现在选择的项目填充数据
    foreach (index,list)
    {
        QString text = QString("%1,%2").arg(index.row()).arg(index.column());
        m_tableView->model()->setData(index,text);
    }
    //清空 上一次选择的内容
    list = deselected.indexes();
    foreach (index,list)
    {
        m_tableView->model()->setData(index,"");
    }
}

void MainWindow::changeCurrent(const QModelIndex &current, const QModelIndex &previous)
{
    qDebug()<<QString("从(%1,%2)到(%3,%4)").arg(previous.row()).arg(previous.column()).arg(current.row()).arg(current.column());
}

委托

在模型/视图框架中，QAbstractItemDelegate是委托类的抽象基类，Qt默认的委托实现由QStyledItemDelegate类提供，这也被用作Qt标准视图的默认委托，选择 QStyledItemDelegate或QItemDelegate中其一来为视图中的项目绘制和提供编辑器。不同的是QStyledItemDelegate使用当前的样式来绘制项目，实现自定义委托建议使用QStyledItemDelegate作为基类。

Qt提供了项目试图的便捷类，这些类底层通过模型/视图框架实现。这些部件分别是QListWidget提供一个项目列表，QTreeWidget显示一个多层次的树结构，QTableWidget提供了一个以项目作为单元的表格。它们每一个类都继承了QAbstractItemView类的行为。之所以成为便捷因其用起来比较简单，使用于少量的数据的存储和显示。因没有将视图与模型分离，所以没有视图类灵活，不能和任意的模型一起使用。

通过自定义委托来实现更高级的渲染。

示例：QSpinbox

image-20220206170615666

#include "spinboxdelexgate.h"
#include<QSpinBox>

SpinBoxDelexgate::SpinBoxDelexgate(QObject* parent):QItemDelegate(parent)
{

}

QWidget *SpinBoxDelexgate::createEditor(QWidget *parent, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
    QSpinBox *editor = new QSpinBox(parent);
    editor->setMinimum(0);//最小值
    editor->setMaximum(100);//最大值
    return editor;
}

void SpinBoxDelexgate::setEditorData(QWidget *editor, const QModelIndex &index) const
{
      int value = index.model()->data(index,Qt::EditRole).toInt();
      //类型转换:QWidget* 转QSpinBox*
      QSpinBox* spinBox = static_cast<QSpinBox*>(editor);
      //编辑器设置数据
      spinBox->setValue(value);
}

void SpinBoxDelexgate::updateEditorGeometry(QWidget *editor, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
    //视图设置自定义委托
    editor->setGeometry(option.rect);
}

便捷部件类

示例:
image-20220206174702701

 #include<QApplication>
#include<QDebug>
#include<QListWidget>
#include<QTreeWidget>
#include<QTableWidget>

int main(int argc,char* argv[])
{
    QApplication app(argc,argv);
    QListWidget listWidget;
    //添加项目
    new QListWidgetItem("天涯",&listWidget);

    QListWidgetItem* listWidgetItem = new QListWidgetItem;
    listWidgetItem->setText("海角");

    QPixmap pixmap(50,50);
    pixmap.fill(Qt::blue);
    listWidgetItem->setIcon(QIcon(pixmap));
    listWidgetItem->setToolTip("大海的角落");

    //部件插入项目
    listWidget.insertItem(1,listWidgetItem);
    //部件设置排序(降序)
    listWidget.sortItems(Qt::DescendingOrder);

    listWidget.show();

    //创建树部件
    QTreeWidget treeWidget;
    //设置列数
    treeWidget.setColumnCount(2);
    QStringList headers;
    headers<<"名字"<<"数量";
    //设置头
    treeWidget.setHeaderLabels(headers);
    //添加项目
    QTreeWidgetItem *item1 = new QTreeWidgetItem(&treeWidget);//指定父项
    item1->setText(0,"开心超人");
    QTreeWidgetItem *item11 = new QTreeWidgetItem(item1);
    item11->setText(0,"甜心超人");
    item11->setText(1,"小心超人");
    //添加项目，并指定它的前一个项目是item1
    QTreeWidgetItem* item2 = new QTreeWidgetItem(&treeWidget,item1);
    item2->setText(0,"小小怪");
    treeWidget.show();


    //创建表格部件
    QTableWidget tableWidget(3,2);
    QTableWidgetItem *tableWidgetem = new QTableWidgetItem("Tom");
    tableWidget.setItem(1,1,tableWidgetem);
    //创建表格项目，作为表头
    QTableWidgetItem* headerV = new QTableWidgetItem("Cat");
    tableWidget.setVerticalHeaderItem(0,headerV);
    QTableWidgetItem* headerH = new QTableWidgetItem("What");
    tableWidget.setHorizontalHeaderItem(0,headerH);
    tableWidget.show();
    return app.exec();
}
文章标签：
前端开发
索引
数据库
存储
关键词：
Qt视图
半生瓜のblog
目录
相关文章
turbolove
|
1月前
|
存储
QT图形视图框架绘制曲线图和Smith图
QT图形视图框架绘制曲线图和Smith图
turbolove
18 0
丶布布
|
4月前
|
存储 数据可视化 测试技术
[Qt5] QGraphics图形视图框架概述(Item、Scene和View)
[Qt5] QGraphics图形视图框架概述(Item、Scene和View)
丶布布
153 0
丶布布
|
4月前
[Qt5] 矩形、圆和多边形ROI区域的交互（List View列表视图，halcon实现）
[Qt5] 矩形、圆和多边形ROI区域的交互（List View列表视图，halcon实现）
丶布布
56 0
丘比特惩罚陆
|
6月前
嵌入式 QT QListWidget 显示列表视图的小部件类
嵌入式 QT QListWidget 显示列表视图的小部件类
丘比特惩罚陆
41 0
嵌入式 QT QListWidget 显示列表视图的小部件类
turbolove
|
8月前
QT图形视图系统 - 使用一个项目来学习QT的图形视图框架 - 终篇
接上一篇，我们需要继续完成以下的效果； 先上个效果图：
turbolove
93 0
turbolove
|
8月前
|
图形学 容器
QT5图形视图框架
GraphicsView (图形视图)框架结构取代了之前版本中的QCanvas模块，它提 供基于图元的模型/视图编程，类似于QtlnterView的模型/视图结构，只是这里的数据是图形。
turbolove
102 0
跑不了的你
|
存储 数据库 索引
Qt5入门学习——模型/视图结构
Qt5入门学习——模型/视图结构
跑不了的你
139 0
Qt5入门学习——模型/视图结构
跑不了的你
|
定位技术 图形学 容器
Qt5入门学习——图形视图框架
Qt5入门学习——图形视图框架
跑不了的你
290 0
Qt5入门学习——图形视图框架
游客fcvboot535try
|
Windows
Qt模型视图框架——列表视图
Qt模型视图框架——列表视图
游客fcvboot535try
420 0
游客fcvboot535try
|
存储 前端开发 C++
Qt模型/视图框架（一）
Qt模型/视图框架（一）
游客fcvboot535try
163 0

热门文章

最新文章

  • 1
    【Qt 底层机制之图形渲染引擎】深入理解 Qt 的 渲染机制：从基础渲染到高级图形
  • 2
    【Qt 底层机制之信号和槽 】深入探究Qt信号和槽背后的原理
  • 3
    【Qt 并发 】理解Qt中事件循环与并发机制的协同工作
  • 4
    【Qt 底层之事件驱动系统】深入理解 Qt 事件机制：主事件循环与工作线程的交互探究，包括 QML 的视角
  • 5
    深入对比：Qt 的 QFile/QFileInfo 和与 C++17 Filesystem 和标准文件流 的细节剖析
  • 6
    【Qt 应用开发 】初步理解 Qt窗口中的模态性应用
  • 7
    Qt中实现界面回放的艺术：从理论到代码“ (“The Art of Implementing UI Playback in Qt: From Theory to Code
  • 8
    【Qt 元对象系统 01 】深入探索Qt的元对象系统：核心地位、功能与构成
  • 9
    基于Qt的简易PDF阅读器设计与实现
  • 10
    Qt编码之谜：乱码问题的成因与解决策略
  • 1
    【Qt】—— Qt开发环境的搭建
    29
  • 2
    imx6ull开发板之qt应用编程读取AP3216c(光照，距离)数据。
    20
  • 3
    QT5.14.2 视频分帧：QT与FFmpeg的高效结合
    61
  • 4
    QT5.14.2 VS2022环境下FFmpeg与QT的完美邂逅
    59
  • 5
    Qt5.14.2 轻松掌握Qt中的压缩与解压缩：QuaZIP的神秘面纱与实战演练之使用QuaZIP
    44
  • 6
    Qt5.14.2 轻松掌握Qt中的压缩与解压缩：QuaZIP的神秘面纱与实战演练之windows环境编译
    77
  • 7
    Qt5.14.2揭秘Qt与SSL/TLS的完美邂逅：打造坚不可摧的网络安全防线
    27
  • 8
    Qt 5.14.2 网络编程揭秘：构建高效HTTP客户端与文件下载器
    65
  • 9
    Qt 5.14.2 深度解析：打造高效JSON处理利器
    25
  • 10
    QT 5.14.2版本 MAC环境安装部署流程
    51

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册

    • 推荐镜像

    更多
  • qt
  • libreoffice
  • blender
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）