欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

QTableView表格控件区域选择-自绘选择区域

程序员文章站 2022-03-21 21:43:08
[TOC] 原文链接: "QTableView表格控件区域选择 自绘选择区域" 一、开心一刻 陪完客户回到家,朦胧之中,看到我妈正在拖地,我掏出200块塞到我妈手里,说道:妈,给你点零花钱,别让我媳妇知道。 我妈接过钱,大吼:你是不是又喝酒了? 我:嘘,你怎么知道的? 老妈:你看清楚了,我是你媳妇, ......

目录

原文链接:qtableview表格控件区域选择-自绘选择区域

一、开心一刻

陪完客户回到家,朦胧之中,看到我妈正在拖地,我掏出200块塞到我妈手里,说道:妈,给你点零花钱,别让我媳妇知道。

我妈接过钱,大吼:你是不是又喝酒了?

我:嘘,你怎么知道的?

老妈:你看清楚了,我是你媳妇,还有。这200块钱是哪来的,说!我:啊……

二、概述

最近优化了一个小功能,主要是模仿excel相关的操作,觉得还挺不错的,因此在这里进行了整理,分享给有需要的朋友。今天主要是说一下区域选择这项功能,qt自带的表格控件是具有区域选择功能的,但是他并不美观,不能支持我们自定义边框色和一些细节上的调整。

今天博主就来讲解下自己是怎么自定义这个区域选择功能的。

主要使用的方式还是自绘,下面先来看下效果,是不是你想要的。

三、效果展示

如下图所示,是一个自绘选择区域的效果展示,除此之外demo中还有一些其他的效果,但不是本篇文章所要讲述的内容。

本篇文章的重点就是讲述怎么实现区域选择框绘制

QTableView表格控件区域选择-自绘选择区域

四、实现思路

看过效果图之后,接下来开始分析怎么绘制矩形选择框。下面以问题的形式来进行分析,这样更有利于理解。

那么先来思考如下几个很问题

  1. 怎么确定绘制区域
  2. 怎么确定绘制的边框
  3. 谁去绘制更好

以上三个问题搞懂了,那么今天的主要内容也就差不多了。

1、绘制区域

学习qt的第一步便是看帮助文档,不得不说qt的帮助文档那是做的相当好,非常齐全。既然如此那还等什么,直接打开qt 助手看看如下几个类都有哪些信号把。

qtableview

//qabstractitemview
void activated(const qmodelindex &index)
void clicked(const qmodelindex &index)
void doubleclicked(const qmodelindex &index)
void entered(const qmodelindex &index)
void iconsizechanged(const qsize &size)
void pressed(const qmodelindex &index)
void viewportentered()

qtableview是表格控件基类,我们的表格也是基于这个控件进行开发。再看这个类的包含的信号(其中都是他的父窗口信号),对于本小结开始提出的3个问题好像没有特别大的作用。那么我们继续往下看,看看他的数据存储类。

qstandarditemmodel

void itemchanged(qstandarditem *item)

//parent qabstractitemmodel

void columnsabouttobeinserted(const qmodelindex &parent, int first, int last)
void columnsabouttobemoved(const qmodelindex &sourceparent, int sourcestart, int sourceend, const qmodelindex &destinationparent, int destinationcolumn)
void columnsabouttoberemoved(const qmodelindex &parent, int first, int last)
void columnsinserted(const qmodelindex &parent, int first, int last)
void columnsmoved(const qmodelindex &parent, int start, int end, const qmodelindex &destination, int column)
void columnsremoved(const qmodelindex &parent, int first, int last)
void datachanged(const qmodelindex &topleft, const qmodelindex &bottomright, const qvector<int> &roles = qvector<int> ())
void headerdatachanged(qt::orientation orientation, int first, int last)
void layoutabouttobechanged(const qlist<qpersistentmodelindex> &parents = qlist<qpersistentmodelindex> (), qabstractitemmodel::layoutchangehint hint = qabstractitemmodel::nolayoutchangehint)
void layoutchanged(const qlist<qpersistentmodelindex> &parents = qlist<qpersistentmodelindex> (), qabstractitemmodel::layoutchangehint hint = qabstractitemmodel::nolayoutchangehint)
void modelabouttobereset()
void modelreset()
void rowsabouttobeinserted(const qmodelindex &parent, int start, int end)
void rowsabouttobemoved(const qmodelindex &sourceparent, int sourcestart, int sourceend, const qmodelindex &destinationparent, int destinationrow)
void rowsabouttoberemoved(const qmodelindex &parent, int first, int last)
void rowsinserted(const qmodelindex &parent, int first, int last)
void rowsmoved(const qmodelindex &parent, int start, int end, const qmodelindex &destination, int row)
void rowsremoved(const qmodelindex &parent, int first, int last)

qstandarditemmodel便是qtableview的数据模型了,一眼扫过好像都是模型数据发生变化了的一些信号。这个时候发现m和v好像没有我们需要的东西,qt不会真这么挫吧。答案当然是“否”,仔细翻阅qt的帮助文档就会发现qabstractitemview类可以返回一个selectionmodel,看其名字好像是我们需要的东西。

qitemselectionmodel * selectionmodel() const

随继续翻阅帮助文档,我们得到以下信息

void currentchanged(const qmodelindex &current, const qmodelindex &previous)
void currentcolumnchanged(const qmodelindex &current, const qmodelindex &previous)
void currentrowchanged(const qmodelindex &current, const qmodelindex &previous)
void modelchanged(qabstractitemmodel *model)
void selectionchanged(const qitemselection &selected, const qitemselection &deselected)

哈哈哈,果然找到了我们需要的信号,看信号名称就知道,当前项发生变化时触发,然后我们就可以去统计哪些项被选中。

到这里,我们的第一个问题就算回答了,我们可以通过selectionmodel的selectionchanged信号来统计可能需要绘制border的单元格。

//连接信号
connect(m_pvew->selectionmodel(), &qitemselectionmodel::selectionchanged, this, &exctablewidget::selectionchanged);

2、绘制边框

信号连接上后,开始处理信号。

思路大致是这样的:

  1. 使用gridcell记录所有的单元格
  2. 循环遍历选中的单元格
  3. 判断当前单元格哪个边是需要绘制的
  4. 结果存储于gridposints结构中

判断逻辑也比较简单,逻辑比较简单,可以直接看代码。这里我举一个例子,比如说是否需要绘制左border,那么就是需要看这个cell左边是否有cell,或者自己已经是第一列。

gridposints是qmap<qmodelindex, qvector>类型,键存储单元格索引,值存储4个边的状态(是否需要绘制)

void exctablewidget::selectionchanged(const qitemselection &selected, const qitemselection &deselected)
{
    qmodelindexlist indexs = m_pvew->selectionmodel()->selectedindexes();

    qdebug() << indexs;

    int row = getmodel()->rowcount();
    int column = getmodel()->columncount();

    qvector<qvector<bool>> gridcell(row, qvector<bool>(column));

    for each (const qmodelindex & index in indexs)
    {
        gridcell[index.row()][index.column()] = true;
    }

    qmap<qmodelindex, drawtypes> datas;
    qmap<qmodelindex, qvector<gridpoint>> gridposints;
    for each (const qmodelindex & index in indexs)
    {
        drawtypes types;
        bool topline = true, rightline = true, bottomline = true, leftline = true;
        if (index.row() == 0)
        {
            types |= top;
        }
        else
        {
            int abovecell = index.row() - 1;
            if (gridcell[abovecell][index.column()] == false)
            {
                types |= top;
            }
            else
            {
                topline = false;
            }
        }

        if (index.column() == getmodel()->columncount() - 1)
        {
            types |= right;
        }
        else
        {
            int rightcell = index.column() + 1;
            if (gridcell[index.row()][rightcell] == false)
            {
                types |= right;
            }
            else
            {
                rightline = false;
            }
        }

        if (index.row() == getmodel()->rowcount() - 1)
        {
            types |= bottom;
        }
        else
        {
            int belovecell = index.row() + 1;
            if (gridcell[belovecell][index.column()] == false)
            {
                types |= bottom;
            }
            else
            {
                bottomline = false;
            }
        }

        if (index.column() == 0)
        {
            types |= left;
        }
        else
        {
            int leftcell = index.column() - 1;
            if (gridcell[index.row()][leftcell] == false)
            {
                types |= left;
            }
            else
            {
                leftline = false;
            }
        }

        datas[index] = types;

        gridposints[index].push_back({ top, topline });
        gridposints[index].push_back({ right, rightline });
        gridposints[index].push_back({ bottom, bottomline });
        gridposints[index].push_back({ left, leftline });
    }

    m_pvew->setcelldatas(gridposints);
    selectstyle * style = m_pvew->getdelegate();
    style->setcelldatas(datas);

    m_pvew->update();
}

到这里,我们的第二个问题就算回答了,我们需要绘制边框的单元格总算是计算出来了。

3、绘制

数据都有了,绘制还会远吗?

接下来继续往下看,qt提供的绘制逻辑机制还是很强大滴,我们可以通过以下方式重绘

1、重写qstyleditemdelegate

qstyleditemdelegate是绘图代理,大多数的绘制操作最终都会在这里被执行,看参数就知道每一个cell绘制时都会来这里。

virtual void paint(qpainter * painter, const qstyleoptionviewitem & option, const qmodelindex & index) const override;

但是这里有一个问题,那就是这个函数可绘制的区域问题,只能在这个cell里边绘制,如果绘制在border上将会被覆盖,不信看如下堆栈。

QTableView表格控件区域选择-自绘选择区域

绘图代理qstyleditemdelegate的paint函数是被qtableview的paintevent函数进行回调。

既然绘图代理中绘制cell项时不能绘制到cell外边去,那么刚好,我们可以在这里进行选择区域的填充

void selectstyle::drawselected(qpainter * painter, const qrect & rect, const qmodelindex & index) const
{
    if (m_indexs.contains(index) == false)
    {
        return;
    }

    painter->save();

    qpen pen = painter->pen();
    pen.setwidth(1);
    pen.setcolor(m_color);
    painter->setpen(pen);

    painter->fillrect(rect, qcolor(100, 0, 0, 100));

    painter->restore();
}

填充完选择区域后,接下来便是绘制选择区域的border。

2、重写paintevent
看了函数调用堆栈后,大家心里应该也比较清楚qtableview是怎么绘制的了吧。既然绘制代理不能完成需求,那么我们就只能在paintevent这座大山中进行绘制。

这里需要注意一点就是,我们需要先试用qtableview本身的paintevent把原有的绘制走一遍,保证界面上的信息都是全的,然后在执行我们自己的定制代码。

如下图所示,父类的paintevent函数执行完毕后,我们绘制了border边线




QTableView表格控件区域选择-自绘选择区域


之前在selectionmodel的selectionchanged信号中,我们已经获取到了需要绘制border的cell信息,下面绘制时只需要根据缓存数据绘制即可,看这代码很长,但速度杠杠滴。

void freezetableview::paintevent(qpaintevent * event)
{
    qtableview::paintevent(event);

    //绘制网格线
    qpainter painter(viewport());
    painter.save();
    qpen pen = painter.pen();
    pen.setwidth(1);
    pen.setcolor(m_pselectborder->getlinecolor());
    painter.setpen(pen);

    for (auto iter = m_indexs.begin(); iter != m_indexs.end(); ++iter)
    {
        qmodelindex index = iter.key();
        qvector<gridpoint> celltyeps = iter.value();
        qrect rect = visualrect(index);
        qrect tmprect = rect;
        tmprect.adjust(-1, -1, 1, 1);
        if (index.column() == 0)
        {
            tmprect.adjust(1, 0, 0, 0);
        }
        if (index.row() == 0)
        { 
            tmprect.adjust(0, 1, 0, 0);
        }

        for (int i = 0; i < celltyeps.size(); ++i)
        {
            const gridpoint & point = celltyeps.at(i);

            if (point.type == top && point.line)
            {
                painter.drawline(tmprect.topleft(), tmprect.topright());
            }
            if (point.type == right && point.line)
            {
                painter.drawline(tmprect.topright(), tmprect.bottomright());
            }
            if (point.type == bottom && point.line)
            {
                painter.drawline(tmprect.bottomleft(), tmprect.bottomright());
            }
            if (point.type == left && point.line)
            {
                painter.drawline(tmprect.topleft(), tmprect.bottomleft());
            }
        }
    }

    for (auto iter = m_indexsborder.begin(); iter != m_indexsborder.end(); ++iter)
    {
        qmodelindexlist indexs = iter.key();
        for each (const qmodelindex & index in indexs)
        {
            qrect rect = visualrect(index);
            rect.adjust(-1, -1, 0, 0);
            if (index.column() == 0)
            {
                rect.adjust(1, 0, 0, 0);
            }
            if (index.row() == 0)
            {
                rect.adjust(0, 1, 0, 0);
            }
            painter.setpen(iter.value());
            painter.drawrect(rect);
        }
    }

    painter.restore();
}

有了以上核心代码,自绘选择区域的功能基本上也就可以实现了。

五、相关文章

  1. qt实现表格控件-支持多级列表头、多级行表头、单元格合并、字体设置等

  2. qt高仿excel表格组件-支持冻结列、冻结行、内容自适应和合并单元格

  3. 属性浏览器控件qttreepropertybrowser编译成动态库(设计师插件)

  4. 超级实用的属性浏览器控件--qttreepropertybrowser

  5. qt之表格控件蚂蚁线

  6. qrowtable表格控件-支持hover整行、checked整行、指定列排序等

  7. qrowtable表格控件(二)-红涨绿跌


值得一看的优秀文章:

  1. qt定制控件列表
  2. 牛逼哄哄的qt库





如果您觉得文章不错,不妨给个打赏,写作不易,感谢各位的支持。您的支持是我最大的动力,谢谢!!!








QTableView表格控件区域选择-自绘选择区域 QTableView表格控件区域选择-自绘选择区域






很重要--转载声明

  1. 本站文章无特别说明,皆为原创,版权所有,转载时请用链接的方式,给出原文出处。同时写上原作者: or twowords

  2. 如要转载,请原文转载,如在转载时修改本文,请事先告知,谢绝在转载时通过修改本文达到有利于转载者的目的。