QT学习：视图(View)练习

最新推荐文章于 2023-10-13 00:00:00 发布
最新推荐文章于 2023-10-13 00:00:00 发布
阅读量625 收藏 3
点赞数
分类专栏： QT学习 文章标签： qt gui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42374938/article/details/118434553
版权

通过利用自定义的View，实现一个对TableModel的表格数据进行显示的柱状统计图例子，以此介绍如何应用自定义的View。
具体实现步骤如下。
（1）完成主窗体，以便显示View的内容。MainWindow 类继承自QMainWindow类，作为主窗体。以下是头文件“mainwindow.h”的具体代码。

#include <QMainWindow>
#include <QStandardItemModel>
#include <QTableView>
#include <QMenuBar>
#include <QMenu>
#include <QAction>
#include <QSplitter>
class MainWindow : public QMainWindow
{
    Q_OBJECT
public:
    MainWindow(QWidget *parent = 0);
    ~MainWindow();
    void createAction();
    void createMenu();
    void setupModel();
    void setupView();
private:
    QMenu *fileMenu;
    QAction *openAct;
    QStandardItemModel *model;
    QTableView *table;
    QSplitter *splitter;
};

（2）下面是源文件“mainwindow.cpp”中的具体代码：

#include "mainwindow.h"
#include <QItemSelectionModel>
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    createAction();
    createMenu();
    setupModel();
    setupView();
    setWindowTitle(tr("View Example"));
    resize(600,600);
}
MainWindow::~MainWindow()
{
}
void MainWindow::createAction()
{
    openAct = new QAction(tr("打开"),this);
}
void MainWindow::createMenu()
{
    fileMenu = new QMenu(tr("文件"),this);
    fileMenu->addAction(openAct);
    menuBar()->addMenu(fileMenu);
}

setupModel()函数新建一个Model，并设置表头数据，其具体实现代码如下：

void MainWindow::setupModel()
{
    model = new QStandardItemModel(4,4,this);
    model->setHeaderData(0,Qt::Horizontal,tr("部门"));
    model->setHeaderData(1,Qt::Horizontal,tr("男"));
    model->setHeaderData(2,Qt::Horizontal,tr("女"));
    model->setHeaderData(3,Qt::Horizontal,tr("退休"));
}

setupView()函数的具体实现代码如下：

void MainWindow::setupView()
{
    table = new QTableView;			//新建一个QTableView对象
    table->setModel(model);			//为QTableView对象设置相同的Model
    QItemSelectionModel *selectionModel=new QItemSelectionModel(model);	//新建一个QItemSelectionModel对象作为QTableView对象使用的选择模型。
    table->setSelectionModel(selectionModel);
    connect(selectionModel,SIGNAL(selectionChanged(QItemSelection, ItemSelection)),table,SLOT(selectionChanged(QItemSelection,QItemSelection)));	//连接选择模型的selectionChanged()信号与QTableView对象的selectionChanged()槽函数，以便使自定义的HistogramView对象中的选择变化能够反映到QTableView对象的显示中
    splitter = new QSplitter;
    splitter->setOrientation(Qt::Vertical);
    splitter->addWidget(table);
    setCentralWidget(splitter);
}

此时运行效果如图所示：
在这里插入图片描述
以上只是实现了简单的主窗体框架显示，还没有完成事件。具体实现步骤如下。
（1）在头文件“mainwindow.h”中添加代码如下：

public:
   void openFile(QString);
public slots:
   void slotOpen();

（2）在源文件mainwindow.cpp中添加代码如下：

#include <QFileDialog>
#include <QFile>
#include <QTextStream>
#include <QStringList>

其中，在createAction()函数中添加代码如下：

connect(openAct,SIGNAL(triggered()),this,SLOT(slotOpen()));

slotOpen()槽函数完成打开标准文件对话框，具体代码如下：

void MainWindow::slotOpen()
{
    QString name;
    name = QFileDialog::getOpenFileName(this,"打开",".","histogram files (*.txt)");
    if (!name.isEmpty())
          openFile(name);
}

openFile()函数完成打开所选的文件内容，其具体实现代码如下：

void MainWindow::openFile(QString path)
{
    if (!path.isEmpty())
    {
        QFile file(path);
         if (file.open(QFile::ReadOnly | QFile::Text))
         {
             QTextStream stream(&file);
             QString line;
             model->removeRows(0,model->rowCount(QModelIndex()),
                   QModelIndex());
             int row = 0;
             do 
{
                 line = stream.readLine();
                 if (!line.isEmpty())
                 {
                     	model->insertRows(row, 1, QModelIndex());
                     	QStringList pieces = line.split(",", QString
                            ::SkipEmptyParts);
                     	model->setData(model->index(row, 0, QModelIndex()),
                            pieces.value(0));
                     	model->setData(model->index(row, 1, QModelIndex()),
                            pieces.value(1));
                     	model->setData(model->index(row, 2, QModelIndex()),
                            pieces.value(2));
                     	model->setData(model->index(row,3, QModelIndex()),
                            pieces.value(3));
                     	row++;
                 }
             } while (!line.isEmpty());
           file.close();
         }
    }
}

新建一个文本文件，命名为“histogram.txt”，保存在项目build-ViewEx-Desktop_Qt_5_9_0_MinGW_32bit-Debug目录下，加载文件数据后的运行效果如图所示。
在这里插入图片描述
具体实现步骤如下。
（1）自定义HistogramView类继承自QAbstractItemView类，用于对表格数据进行柱状图显示。下面是头文件“histogramview.h”的具体代码。

#include <QAbstractItemView>
#include <QItemSelectionModel>
#include <QRegion>
#include <QMouseEvent>
class HistogramView : public QAbstractItemView
{
    Q_OBJECT
public:
    HistogramView(QWidget *parent=0);
    //虚函数声明											//visualRect()、scrollTo()、indexAt()、moveCursor()、horizontalOffset()、verticalOffset()、isIndexHidden()、setSelection()和visualRegionForSelection()：QAbstractItemView 类中的纯虚函数。这些纯虚函数不一定都要实现，可以根据需要选择性地实现，但一定要声明。
    QRect visualRect(const QModelIndex &index)const;
    void scrollTo(const QModelIndex &index,ScrollHint hint= EnsureVisible);
    QModelIndex indexAt(const QPoint &point)const;		//当鼠标在视图中单击或位置发生改变时被触发，它返回鼠标所在点的QModelIndex值。
   //为selections赋初值
    void setSelectionModel(QItemSelectionModel *selectionModel);
    QRegion itemRegion(QModelIndex index);
    void paintEvent(QPaintEvent *);
    void mousePressEvent(QMouseEvent *event);			//柱状统计图可以被鼠标单击选择，选中后以不同的方式显示。
protected slots:
    void selectionChanged(const QItemSelection &selected,
          const QItemSelection &deselected);				//当数据项选择发生变化时，此槽函数将响应。
    void dataChanged(const QModelIndex &topLeft,
          const QModelIndex &bottomRight);				//当模型中的数据发生变更时，此槽函数将响应。
protected:
    //虚函数声明
    QModelIndex moveCursor(QAbstractItemView::CursorAction cursorAction,
          Qt::KeyboardModifiers modifiers);
    int horizontalOffset()const;
    int verticalOffset()const;
    bool isIndexHidden(const QModelIndex &index)const;
    void setSelection(const QRect &rect,QItemSelectionModel:: SelectionFlags flags);															//将位于QRect内的数据项按照SelectionFlags（描述被选择的数据项以何种方式进行更新）指定的方式进行更新。
    QRegion visualRegionForSelection(const QItemSelection &selection) const;
    private:
    QItemSelectionModel *selections;					//用于保存与视图选择项相关的内容。
    QList<QRegion> MRegionList;							//用于保存其中某一类型柱状图的区域范围，而每个区域是QList中的一个值。
    QList<QRegion> FRegionList;
    QList<QRegion> SRegionList;
};

（2）源文件“histogramview.cpp”的具体代码如下：

#include "histogramview.h"
#include <QPainter>
HistogramView::HistogramView(QWidget parent):QAbstractItemView(parent)
{
}
//paintEvent()函数具体完成柱状统计图的绘制工作
void HistogramView::paintEvent(QPaintEvent *)
{
    QPainter painter(viewport());					//以viewport()作为绘图设备新建一个QPainter对象。

    painter.setPen(Qt::black);
    int x0=40;
    int y0=250;
    /* 完成了x、y坐标轴的绘制，并标注坐标轴的变量 */
    //y坐标轴
    painter.drawLine(x0,y0,40,30);
    painter.drawLine(38,32,40,30);
    painter.drawLine(40,30,42,32);
    painter.drawText(20,30,tr("人数"));
    for(int i=1;i<5;i++)
    {
        painter.drawLine(-1,-i*50,1,-i*50);
        painter.drawText(-20,-i*50,tr("%1").arg(i*5));
    }
    //x坐标轴
    painter.drawLine(x0,y0,540,250);
    painter.drawLine(538,248,540,250);
    painter.drawLine(540,250,538,252);
    painter.drawText(545,250,tr("部门"));
    int posD=x0+20;
    int row;
    for(row=0;row<model()->rowCount(rootIndex());row++)
    {
        QModelIndex index=model()->index(row,0,rootIndex());
        QString dep=model()->data(index).toString();
        painter.drawText(posD,y0+20,dep);
        posD+=50;
    }
    /* 完成了表格第1列数据的柱状统计图的绘制 */
    //男
    int posM=x0+20;
    MRegionList.clear();
    for(row=0;row<model()->rowCount(rootIndex());row++)
    {
        QModelIndex index=model()->index(row,1,rootIndex());
        int male=model()->data(index).toDouble();
        int width=10;
        if(selections->isSelected(index))							//使用不同画刷颜色区别选中与未被选中的数据项。

            painter.setBrush(QBrush(Qt::blue,Qt::Dense3Pattern));
        else
            painter.setBrush(Qt::blue);
        painter.drawRect(QRect(posM,y0-male*10,width,male*10));		//根据当前数据项的值按比例绘制一个方形表示此数据项。
        QRegion regionM(posM,y0-male*10,width,male*10);
	   MRegionList.insert(row,regionM);            					//将此数据所占据的区域保存到MRegionList列表中，为后面的数据项选择做准备。
        posM+=50;
    }
    /* 完成了表格第2列数据的柱状统计图的绘制 */							//完成了表格第2列数据的柱状统计图的绘制。同样，使用不同的画刷颜色区别选中与未被选中的数据项，同时保存每个数据项所占的区域至FRegionList列表中。
    //女
    int posF=x0+30;
    FRegionList.clear();
    for(row=0;row<model()->rowCount(rootIndex());row++)
    {
        QModelIndex index=model()->index(row,2,rootIndex());
        int female=model()->data(index).toDouble();
        int width=10;
        if(selections->isSelected(index))
            painter.setBrush(QBrush(Qt::red,Qt::Dense3Pattern));
        else
            painter.setBrush(Qt::red);
        painter.drawRect(QRect(posF,y0-female*10,width,female*10));
        QRegion regionF(posF,y0-female*10,width,female*10);
	   FRegionList.insert(row,regionF);
        posF+=50;
    }
    /* 完成了表格第3列数据的柱状统计图的绘制 */							//完成了表格第3列数据的柱状统计图的绘制。
    //退休
    int posS=x0+40;
    SRegionList.clear();
    for(row=0;row<model()->rowCount(rootIndex());row++)
    {
        QModelIndex index=model()->index(row,3,rootIndex());
        int retire=model()->data(index).toDouble();
        int width=10;
        if(selections->isSelected(index))
            painter.setBrush(QBrush(Qt::green,Qt::Dense3Pattern));
        else
            painter.setBrush(Qt::green);
        painter.drawRect(QRect(posS,y0-retire*10,width,retire*10));
        QRegion regionS(posS,y0-retire*10,width,retire*10);
	   SRegionList.insert(row,regionS);
        posS+=50;
    }
}

dataChanged()函数实现当Model中的数据更改时，调用绘图设备的update()函数进行更新，反映数据的变化。具体实现代码如下：

void HistogramView::dataChanged(const QModelIndex &topLeft,
       const QModelIndex &bottomRight)
{
    QAbstractItemView::dataChanged(topLeft,bottomRight);
    viewport()->update();
}

setSelectionModel()函数为selections赋初值，具体代码如下：

void HistogramView::setSelectionModel(QItemSelectionModel *selectionModel)
{
    selections=selectionModel;
}

setSelection()函数的具体代码如下：

void HistogramView::setSelection(const QRect &rect,QItemSelectionModel
::SelectionFlags flags)
{
    int rows = model()->rowCount(rootIndex());		//获取总行数
    int columns = model()->columnCount(rootIndex());	//获取总列数
    QModelIndex selectedIndex;				//用于保存被选中的数据项的Index值。此处只实现用鼠标单击选择，而没有实现用鼠标拖曳框选，因此，鼠标动作只可能选中一个数据项。若需实现框选，则可使用QModelIndexList来保存所有被选中的数据项的Index值。

    for(int row=0; row<rows; ++row)			//确定在rect中是否含有数据项。此处采用遍历的方式将每个数据项的区域与rect区域进行intersected操作，获得两者之间的交集。若此交集不为空，则说明此数据项被选中，将它的Index值赋给selectedIndex。
    {
        for(int column=1; column<columns; ++column)
        {
            QModelIndex index=model()->index(row,column,rootIndex());
            QRegion region=itemRegion(index);		//返回指定index的数据项所占用的区域。

            if(!region.intersected(rect).isEmpty())
                selectedIndex = index;
        }
    }
    if(selectedIndex.isValid())				//完成select()函数的调用，即完成最后对选择项的设置工作。select()函数是在实现setSelection()函数时必须调用的。
        selections->select(selectedIndex,flags);
    else
    {
        QModelIndex noIndex;
        selections->select(noIndex,flags);
    }
}

indexAt()函数的具体内容如下：

QModelIndex HistogramView::indexAt(const QPoint &point)const
{
    QPoint newPoint(point.x(),point.y());
    QRegion region;
    //男 列
    foreach(region,MRegionList)							//检查当前点是否处于第1列（男）数据的区域中。

    {
        if(region.contains(newPoint))
        {
            int row = MRegionList.indexOf(region);
            QModelIndex index = model()->index(row,1,rootIndex());
            return index;
        }
    }
    //女 列
    foreach(region,FRegionList)							//检查当前点是否处于第2列（女）数据的区域中。

    {
        if(region.contains(newPoint))
        {
            int row = FRegionList.indexOf(region);
            QModelIndex index = model()->index(row,2,rootIndex());
            return index;
        }
    }
    //合计 列
    foreach(region,SRegionList)							//检查当前点是否处于第3列（合计）数据的区域中。

    {
        if(region.contains(newPoint))
        {
            int row = SRegionList.indexOf(region);
            QModelIndex index = model()->index(row,3,rootIndex());
            return index;
        }
    }
    return QModelIndex();
}

由于本例未用到以下函数的功能，所以没有实现具体内容，但仍然要写出函数体的框架，代码如下：

QRect HistogramView::visualRect(const QModelIndex &index)const{}
void HistogramView::scrollTo(const QModelIndex &index,ScrollHint){}
QModelIndex HistogramView::moveCursor(QAbstractItemView::CursorAction cursor Action, Qt::KeyboardModifiers modifiers){}
int HistogramView::horizontalOffset()const{}
int HistogramView::verticalOffset()const{}
bool HistogramView::isIndexHidden(const QModelIndex &index)const{}
QRegion HistogramView::visualRegionForSelection(const QItemSelection & selection)
const{}

itemRegion()函数的具体代码如下：

QRegion HistogramView::itemRegion(QModelIndex index)
{
    QRegion region;
    if(index.column() == 1)		//男
        region = MRegionList[index.row()];
    if(index.column() == 2)		//女
        region = FRegionList[index.row()];
    if(index.column() == 3)		//退休
        region = SRegionList[index.row()];
    return region;
}

（4）在头文件“mainwindow.h”中添加代码如下：

#include "histogramview.h"
private:
    HistogramView *histogram;

（5）在源文件“mainwindow.cpp”中添加代码，其中，setupView()函数的代码修改如下：

void MainWindow::setupView()
{
    splitter = new QSplitter;
    splitter->setOrientation(Qt::Vertical);
    histogram = new HistogramView(splitter);
			//新建一个HistogramView对象
    histogram->setModel(model);			//为HistogramView对象设置相同的Model
    table = new QTableView;	
    table->setModel(model);
    QItemSelectionModel *selectionModel=new QItemSelectionModel (model);
    table->setSelectionModel(selectionModel);
    histogram->setSelectionModel(selectionModel);				//新建的QItemSelectionModel对象作为QTableView对象和HistogramView对象使用的选择模型。
    splitter->addWidget(table);
    splitter->addWidget(histogram);
    setCentralWidget(splitter);
connect(selectionModel,SIGNAL(selectionChanged(QItemSelection,QItemSelection)),table,SLOT(selectionChanged(QItemSelection,QItemSelection)));
connect(selectionModel,SIGNAL(selectionChanged(QItemSelection,QItemSelection)),histogram,SLOT(selectionChanged(QItemSelection,QItemSelection)));															//连接选择模型的selection Changed()信号与HistogramView对象的selectionChanged()槽函数，以便使QTableView对象中的选择变化能够反映到自定义的HistogramView对象的显示中。
}

运行效果如图所示：
在这里插入图片描述

心若向阳，何谓悲伤
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Qt View
Kiryee的博客
03-03 244
无
qt tableview使用
11-13
该实例代码演示了tableview的使用。包括添加和删除数据，支持把tableview导出为png图片
Qt Model/View(模型/视图)--笔记
进击的小程序员
04-23 956
简介：Model/View (模型/试图) 结构是Qt中用界面组件显示与编辑数据的一种结构，视图(View)是显示和编辑数据的界面组件，模型(Model)是视图与原始数据之间的接口。 GUI应用程序的一个很重要的功能是由用户在界面上编辑和修改数据，典型的如数据库应用程序，数据库应用程序中，用户在界面上执行各种操作，实际上是修改了界面组件所关联的数据库内的数据。 将界面组件与所编辑的数据分离开来，又通过数据源的方式连接起来，是处理界面与数据的一种较好的方式。Qt使用Model/View 结构来处理这种关系，M
Qt之视图（View）
m0_73443478的博客
02-20 479
qt视图
学习QT之视图（View）
贝勒里恩的博客
04-18 942
实现自定义的View，可继承自QAbstractItemView，对所需的纯虚函数进行重定义和实现，对于QAbstractItemView类中的纯虚函数，在子类中必须进行重定义，但不一定要实现，可根据需要选择实现。 1、运行效果 二、具体代码 histogramview.h #ifndef HISTOGRAMVIEW_H #define HISTOGRAMVIEW_H #include &...
40个Qt学习练习小案例
01-30
这是一份关于Qt开发小案例的资料，是对我在学习Qt框架时做的一些小练习进行了简单的整理，小例子大都比较简单，代码配有详细注释，对Qt初学者十分友好，当然最好是要有C++基础。
QT图形视图框架(QGraphicsView)绘图并调用libusb通讯
11-15
介绍 通过Qt的图形视图框架进行2D绘图并调用libusb进行通讯 ...主要介绍了Qt的视图框架QGraphicsView、QGraphicsScene和QGraphicsItems的基本使用； 利用QT的视图框架进行了基本图形的绘制，比如画点、画线、画矩形等。
Qt3D学习：Qt3D学习
02-05
Qt3D学习：Qt3D学习
cardview:卡片视图的Qt实现
06-12
卡片视图库卡片视图的 Qt 实现。 包括自定义模型的包装代理和用于在卡片中显示模型数据的 QAbstractItemView 的实现。
QT_RadioTower:个人快速练习项目
04-02
QT_RadioTower 02.04.2021 11:33
QT GraphicsView例子
01-25
基于QT GraphicsView三层架构所写的例子，通俗易懂，很经典的教程。代码简单易懂，便于初学者学习。
Qt视图组件
qq_45698138的博客
08-08 389
Model/View（模型/视图）结构是 Qt 中用界面组件显示与编辑数据的一种结构，视图（View）是显示和编辑数据的界面组件，模型（Model）是视图与原始数据之间的接口。数据（Data）是实际的数据，如数据库的一个数据表或SQL查询结果，内存中的一个 StringList，或磁盘文件结构等。视图或视图组件（View）是屏幕上的界面组件，视图从数据模型获得每个数据项的模型索引（model index），通过模型索引获取数据，然后为界面组件提供显示数据。......
QT学习笔记-Qt Model/View
kouqi627的博客
03-09 5615
目录前言一、Qt模型视图结构简介二、Qt模型概念Model indexes行列父项**数据项角色**三、Qt视图概念使用已有视图使用模型操作被选项四、Qt委托使用已有委托一个简单的自定义委托五、创建模型设计模型 前言 因工作需要，要实现一个小型的数据管理系统。本着想捡起来QT技能的想法，学习下QT模型视图的操作。 一、Qt模型视图结构简介 模型/视图结构，仍然分离了数据与呈现给用户的方式，但提供了基于相同原理的简单框架。这种分离使得它可以在几个不同的视图中显示相同的数据，并且实现新类型的视图，而无需改变
QT：模型视图结构----View
小鱼-YHQ的博客
06-15 333
柱状图类 声明： class HistogramView : public QAbstractItemView { Q_OBJECT public: HistogramView(QWidget *parent=0); //虚函数声明 //(a) QRect visualRect(con...
QT中的View Model模型
JMaliex
04-12 1490
[转载自：]https://blog.csdn.net/tgzjz/article/details/45972273 介绍 Qt 4推出了一组新的item view类，它们使用model/view结构来管理数据与表示层的关系。这种结构带来的功能上的分离给了开发人员更大的弹性来定制数据项的表示，它也提供一个标准的mode...
Qt 模型(model)/视图(view)详解
qq_30150579的博客
12-19 4162
详细说命了如何利用Qt 中的model/view进行数据的展示
QT 项目视图（QListView&QTreeView&QTableView）和项目部件（QListWidget&QTreeWidget&QTableWidget）详解
最新发布
wei_Embedded_z的博客
10-13 3183
QT 项目视图（QListView&QTreeView&QTableView）和项目部件（QListWidget&QTreeWidget&QTableWidget）详解
Qt中视图类View的使用
a15322910600的博客
12-10 1412
视图类 View 概念： 在模型/视图体系结构中，视图从模型中获取数据项并呈现给用户。数据呈现的方式与模型提供的数据表示方式不同，也可能与用于存储数据项的基础数据结构完全不同。 内容和表示的分离是通过使用QAbstractItemModel提供的标准模型接口、QAbstractItemView提供的标准视图接口以及使用以一般方式表示数据项的模型索引实现的。 视图通常管理从模型获取的数据的总体布局。它们可以呈现数据本身的单个项，或使用委托来处理渲染和编辑要素。 除了显示数据，视图还处理项之间的导航以及项选择的
Qt 中 setModel 设置数据类型和 setView 函数设置视图
qq_46017342的博客
05-27 3123
Qt 中 setModel 设置数据类型和 setView 函数设置视图
Qt::QueuedConnection 或 Qt::AutoConnection
05-11
Qt::QueuedConnection 和 Qt::AutoConnection 都是 Qt 框架中用于信号和槽连接的方式。 Qt::QueuedConnection 是一种异步连接方式，它会将信号发送到接收者所在的线程的事件队列中，等待该线程空闲时再执行，从而...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值