Qt GUI图形图像开发之QT表格控件QTableView,QTableWidget复杂表头(多行表头) 及冻结、固定特定的行的详细方法与实例

我们在开发过程中对于表格使用频率还是挺高的,使用QT框架开发时候我们使用QTableView或者QTableWidget创建表格。

其中表格分为 表格头与表格体:

对于简单地表格,我们可以设置表头来满足我们的要求(当然也可以隐藏表头),不过对于定制化的表头,我们能做的不是特别多。特别是对于复杂的表头,使用自带的表头,无论怎么设置都不太可能达到需求。例如我最近接到的一个项目,需求是:

我们分析一下这个表格有什么特点:

1.表头不是简单的一行,而是两行。

2.表头有单元格的合并。

3.部分表头中间有使用渐变的分隔线且分割线不是上下充满表格的。

如果能解决上面三个问题,我们基本都可以把这个表格做出来了。这个表头明显是一个比较复杂的表头。对于只对QT提供的API或者CSS上面三个问题,没有一个能够解决的。

这时候可能会有老师提出解决办法:给header 设置itemDelegate,自己在itemDelegate中重写paintEvent,自己画表头。 因为我们都知道,自己画单元格,要更灵活,满足更多需求。但是我们平时都是对单元格进行重绘,并不是对header的单元格进行重绘。于是就去搜索QT的帮助文档,惊喜的发现居然有设置itemdelegate的API,心里觉得有戏于是创建 ItemDelegate类,对header进行设置如下

tableWidget->horizontalHorizon()->setItemDelegate(new ItemDelegate());

可是结果却是令人失望的,没有一点效果。于是反身去查找QT 关于这部分的介绍,终于找到了原因:

结果就显而易见了,对于headerView,并不能使用ItemDelegate进行重绘。

那么我们就要另外想办法了,经过分析,刚开始提出了两种方案:

解决方案

  描述 优点 缺点
方案一
  • 隐藏表头
  • 前两行当做表头
  • 内容行从第三行开始
  • 对表格设置itemDelegate,对前两行的表头进行重绘
一个QTableWidget,实现起来方便一些。
  • 当出现滚动条,表头会随着着内容表格个移动,不符合大众习惯。
  • 改变了内容表格的整个原有序列,所有的行数都需要比原来大2,对所有的API进行重写工作难不高,复杂度比较高。
方案二
  • 使用一个QTableWidget命名为m_frozonTableWgt作为表头。
  • 使用另外一个QTableWidget作为内容显示的表格。
  • m_frozonTableWgt隐藏表头、隐藏滚动条、只显示2行的内容表格、显示到内容表格上方、只占据内容表的表头高度、设置ItemDelegate进行重绘。
  • 内容表格,显示表头,高度设置成m_frozonTableWgt前两行的高度。
最终效果更好,体验更好。
  • 需要对2个QTableWidget进行操作,比较麻烦。
  • 需要对表头的QTableWidget进行锁死(固定)。
  • 需要对2个QtableWidget进行联动设置

总结一下就是:

第一种方案比较简单,但是最终体验效果不太好。

第二种方案实现起来比较复杂,但是最终体验效果比较好。

本着成就客户与自我成长的态度,最终选择了第二种解决方案。

我们首先要做的就是创建一个继承于QTableWidget的一个类,命名为TDMSummaryTableWgt。

class TDMSummaryTableWgt : public QTableWidget

然后需要在TDMSummaryTableWgt类中,声明另外一个用于header的QTableWidget,命名为 m_frozenTableWgt;

private:
  QTableWidget *m_frozenTableWgt;// 使用TableWidget 作为header,并冻结

这个m_frozenTableWgt,就是作为表头,并且固定位置,不随着滚动条移动位置。

这个时候我们只需要解决两个问题,就可以搞定表头了:

1.表头位置锁定(固定、锁死)。

2.重绘表头。

对于第一个问题,表头位置的固定。我们应该从哪些方面考虑来解决?

1.从界面初始化开始,我们应当让表头m_frozenTableWgt具备: 不显示表头,不显示滚动条、设置rowcount为2行并隐藏2行后所有的元素、设置窗口层次在TDMSummaryTableWgt之前、对单元格进行合并等要素。

这里要特别注意的是,m_frozenTableWgt与TDMSummaryTableWgt设置的列数应该完全一致,每一列的尺寸与伸展方案也应该完全一致。

void TDMSummaryTableWgt::initFrozenFrame()
{
  m_frozenTableWgt = new QTableWidget(this);

  m_frozenTableWgt->horizontalHeader()->setVisible(false);//表头不可见
  m_frozenTableWgt->verticalHeader()->setVisible(false);//表头不可见
  m_frozenTableWgt->setShowGrid(false);//网格线不可见
  m_frozenTableWgt->setEditTriggers(QAbstractItemView::NoEditTriggers);//设置单元格不可编辑
  m_frozenTableWgt->horizontalHeader()->setStretchLastSection(true);//最后一个单元格扩展
  m_frozenTableWgt->setFocusPolicy(Qt::NoFocus);//解决选中虚框问题
  m_frozenTableWgt->setFrameShape(QFrame::NoFrame);//去除边框 尴尬
  m_frozenTableWgt->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);//隐藏滚动条
  m_frozenTableWgt->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);//
  m_frozenTableWgt->setHorizontalScrollMode(ScrollPerPixel);

  m_frozenTableWgt->setItemDelegate(new ItemDelegate(0));//设置绘画代理(主要在代理中画出来header)

  viewport()->stackUnder(m_frozenTableWgt);//设置窗口层次

  m_frozenTableWgt->setColumnCount(10);//header10列
  m_frozenTableWgt->setRowCount(2);//header2行

  m_frozenTableWgt->setRowHeight(0, 42);//第一行设置高度42px
  m_frozenTableWgt->setRowHeight(1, 42);//第二行设置高度42px

  for (int row = 2; row < m_frozenTableWgt->rowCount(); ++row)//隐藏2行后的行
     m_frozenTableWgt->setRowHidden(row, true);

  //===================设置header内容=================//
  //合并单元格
  m_frozenTableWgt->setSpan(0, 0, 2, 1);//老师ID
  m_frozenTableWgt->setSpan(0, 1, 2, 1);//老师姓名
  m_frozenTableWgt->setSpan(0, 2, 2, 1);//老师姓名
  m_frozenTableWgt->setSpan(0, 3, 1, 4);//最新日期(8月20)
  m_frozenTableWgt->setSpan(0, 7, 1, 2);//前一日(8月19)
  m_frozenTableWgt->setSpan(0, 9, 2, 1);//操作

  m_frozenTableWgt->setItem(0, 0, new QTableWidgetItem("老师ID"));
  m_frozenTableWgt->setItem(0, 1, new QTableWidgetItem("老师姓名"));
  m_frozenTableWgt->setItem(0, 2, new QTableWidgetItem("老师姓名"));
  m_frozenTableWgt->setItem(0, 3, new QTableWidgetItem("8月20日"));
  m_frozenTableWgt->setItem(0, 7, new QTableWidgetItem("8月19日"));
  m_frozenTableWgt->setItem(0, 9, new QTableWidgetItem("操作"));
  m_frozenTableWgt->setItem(1, 3, new QTableWidgetItem("续报率"));
  m_frozenTableWgt->setItem(1, 4, new QTableWidgetItem("新学员续报率"));
  m_frozenTableWgt->setItem(1, 5, new QTableWidgetItem("续报增长人数"));
  m_frozenTableWgt->setItem(1, 6, new QTableWidgetItem("续报增长率"));
  m_frozenTableWgt->setItem(1, 7, new QTableWidgetItem("续报增长率"));
  m_frozenTableWgt->setItem(1, 8, new QTableWidgetItem("新学员续报率"));

  //连接信号槽。用于滚动条联动
  connect(m_frozenTableWgt->verticalScrollBar(), &QAbstractSlider::valueChanged,
      verticalScrollBar(), &QAbstractSlider::setValue);
  connect(verticalScrollBar(), &QAbstractSlider::valueChanged,
      m_frozenTableWgt->verticalScrollBar(), &QAbstractSlider::setValue);

  updateFrozenTableGeometry();//更新位置
  m_frozenTableWgt->show();
}

2.除了上面的考虑之外,我们就需要考虑m_frozenTableWgt与TDMSummaryTableWgt之间的联动问题了,主要包括表格的尺寸变化、滚动条移动、界面平移等问题。

我们首先要写一个方法,来确定m_frozenTableWgt与TDMSummaryTableWgt位置。

void TDMSummaryTableWgt::updateFrozenTableGeometry()
{
  m_frozenTableWgt->setGeometry(frameWidth(),
                 frameWidth(),
                 viewport()->width(),
                 horizontalHeader()->height());

}

我们需要重写3个上面提到问题解决方案的函数,在每个方法里都要重新执行updateFrozenTableGeometry();

protected:
  /**
   * @brief resizeEvent        重载虚函数 resize事件,同时更新m_frozenTableWgt的位置
   * @param event
   */
  virtual void resizeEvent(QResizeEvent *event) Q_DECL_OVERRIDE;

  /**
   * @brief moveCursor        重载虚函数 鼠标移动事件
   * @param cursorAction
   * @param modifiers
   * @return
   */
  virtual QModelIndex moveCursor(CursorAction cursorAction, Qt::KeyboardModifiers modifiers) Q_DECL_OVERRIDE;

  /**
   * @brief scrollTo         TableWidget移动事件
   * @param index
   * @param hint
   */
  void scrollTo (const QModelIndex & index, ScrollHint hint = EnsureVisible) Q_DECL_OVERRIDE;

对上面这三个虚函数,我们需要特别注意的重点是moveCursor方法。这个方法里我们应该重点关注鼠标向上移动的情景:只有当鼠标向上移动,并且TDMSummaryTableWgt还未显示到第一行,并且可视区域的顶点应该小于m_frozenTableWgt的第一行,才允许继续向上移动:

QModelIndex TDMSummaryTableWgt::moveCursor(QAbstractItemView::CursorAction cursorAction, Qt::KeyboardModifiers modifiers)
{
  QModelIndex current = QTableView::moveCursor(cursorAction, modifiers);

  if (cursorAction == MoveUp && current.row() > 0
      && visualRect(current).topLeft().y() < m_frozenTableWgt->rowHeight(1) ){
     const int newValue = verticalScrollBar()->value() + visualRect(current).topLeft().y()
                - m_frozenTableWgt->rowHeight(0) - m_frozenTableWgt->rowHeight(1);
     verticalScrollBar()->setValue(newValue);
  }
  return current;
}

做完上面这几部,基本解决了第一个问题,就是将m_frozenTableWgt的固定行(冻结)的功能。

要完成m_frozenTableWgtde 的样式重绘,就是第二个要解决的问题了。

这个问题,我们要新建一个继承于QStyledItemDelegate的代理类,我们叫ItemDelegate。并且重写paint方法,在paint方法里绘制m_frozenTableWgt;

m_frozenTableWgt->setItemDelegate(new ItemDelegate(0));//设置绘画代理(主要在代理中画出来header)

 

class ItemDelegate : public QStyledItemDelegate
{
  Q_OBJECT
public:
  ItemDelegate(int type, QObject *parent=0);

  void paint(QPainter *painter,
        const QStyleOptionViewItem &option, const QModelIndex &index) const;

private:

};

在paint方法中,根据每个单元格的背景不同进行绘制背景

  int rowIndex = index.row();//行号
  int colIndex = index.column();//列号
  if (rowIndex == 0 || rowIndex == 1)//前两行作为header
  {
    //背景
    QColor color;

    if (rowIndex == 0 && (colIndex == 0 || //老师ID
               colIndex == 1 || //老师姓名
               colIndex == 2 || //课程类型
               colIndex == 9)) //操作
    {
      color.setRgb(231, 238, 251);
    }
    else if ((rowIndex == 0 && colIndex == 3) || //8月20日
         (rowIndex == 1 && (colIndex == 3 || //续报率
                  colIndex == 4 || //新学员续报率
                  colIndex == 5 || //续报增长人数
                  colIndex == 6))) //续报增长率
    {
      color.setRgb(214, 228, 253);
    }
    else if ((rowIndex == 0 && colIndex == 7) || //8月19日
         (rowIndex == 1 && (colIndex == 7 || //续报率
                  colIndex == 8))) //新学员续报率
    {
      color.setRgb(203, 221, 255);
    }

    //绘制背景
    painter->setPen(color);
    painter->setBrush(QBrush(color));
    painter->drawRect(option.rect);

根据每个单元格要求绘画是否需要右侧的渐变的分隔线。

    //右侧spacer
    if ((rowIndex == 0 && (colIndex == 0 || colIndex == 1) )) {
      int startX = option.rect.right();
      int startY = option.rect.y() + (option.rect.height() - 40) / 2;
      int endX = startX;
      int endY = startY + 40;
      QLinearGradient linearGradient(startX, startY, endX, endY);
      linearGradient.setColorAt(0, QColor(164, 188, 240, 0));
      linearGradient.setColorAt(0.5, QColor(164, 188, 240, 255));
      linearGradient.setColorAt(1, QColor(164, 188, 240, 0));
      painter->setBrush(linearGradient);
      painter->drawRect(option.rect.right()- 2, startY, 2, 40);

    }
    else if (rowIndex == 1 && (colIndex == 3 ||
                  colIndex == 4 ||
                  colIndex == 5 ||
                  colIndex == 7 )) {

      int startX = option.rect.right();
      int startY = option.rect.y() + (option.rect.height() - 28) / 2;
      int endX = startX;
      int endY = startY + 28;
      QLinearGradient linearGradient(startX, startY, endX, endY);
      linearGradient.setColorAt(0, QColor(164, 188, 240, 0));
      linearGradient.setColorAt(0.5, QColor(164, 188, 240, 255));
      linearGradient.setColorAt(1, QColor(164, 188, 240, 0));
      painter->setBrush(linearGradient);
      painter->drawRect(option.rect.right()- 2, startY, 2, 28);
    }

最后将每个单元格的字体画出来

    //字体
    painter->setPen(QColor(51, 51, 51));
    QTextOption op;
    op.setAlignment(Qt::AlignHCenter | Qt::AlignVCenter);

    QFont font;
    font.setFamily("Microsoft YaHei");
    font.setPixelSize(14);
    font.setBold(true);
    painter->setFont(font);
    painter->drawText(option.rect, index.data(Qt::DisplayRole).toString(), op);

这样就解决了header里面的难题。

本文完整实例源码在这里下载

本文主要讲解了QT表格控件QTableView,QTableWidget复杂表头(多行表头) 及冻结、固定特定的行的详细方法与实例,更多关于Qt GUI图形图像开发知识请查看下面的相关链接

(0)

相关推荐

  • Qt GUI图形图像开发之Qt表格控件QTableView简单使用方法及QTableView与QTableWidget区别

    QTableView是Qt中用来把数据集以表格形式提供给用户的一个控件 QTableView类实现表格视图,QTableView的数据由继承QAbstractItemModel的子类models来提供 #include<QStandardItemModel> QStandardItemModel *model = new QStandardItemModel(); ui->tableView->setModel(model); 一.添加表头: model->setColumn

  • Qt串口通信开发之QSerialPort模块简单使用方法与实例

    我这里主要是对串口类的简单使用,实现的功能是以读写方式打开串口,点击发送数据按钮将发送区的数据发送到缓冲区,然后在接收区显示出来,界面如下:(源码可以在这里下载) 这里使用了QSerialPort模块提供的两个类:QSerialPort类和QSerialPortInfo类,QSerialPort类提供了对串口的操作,QSerialPortInfo类提供了对串口信息的获取.下面是主要代码,包含了对串口类的简单使用. 首先,一定要在.pro文件中添加:QT += serialport 串口初始化如下

  • Qt图形图像开发之曲线图表模块QChart库读取/设置X轴的显示区间

    设置初始的显示的区间,常用的有两种方法 (1)自动 lineseries = new QLineSeries();//声明折线数据集 lineseries->append(4, 10); //填充数据集 *lineseries << QPointF(13, 5) << QPointF(17, 6); lineChart = new QChart();//创建图表 lineChart->addSeries(lineseries); // 将 数据集 添加至图表中 line

  • Qt图形图像开发之曲线图模块QCustomplot库生成静态、动态曲线详细教程图解

    Qt曲线图模块QCustomPlot库介绍 QCustomPlot是一个小型的Qt画图标类,支持绘制静态曲线.动态曲线.多重坐标曲线,柱状图,蜡烛图等.只需要在项目中加入头文件qcustomplot.h和qcustomplot.cpp文件,然后使一个widget提升为QCustomPlot类,即可使用. QCustomPlot官网:   http://www.qcustomplot.com/ QCustomPlot下载地址:   http://www.qcustomplot.com/index.

  • Qt图形图像开发之高性能曲线图模块QCustomplot库详细使用方法与实例(支持动、静曲线图)

    Qt曲线图模块QCustomPlot库介绍 QCustomPlot是一个小型的Qt画图标类,支持绘制静态曲线.动态曲线.多重坐标曲线,柱状图,蜡烛图等 前段时间用QChart模块画图,一条曲线上面放8000条数据就会卡的不行必须要换个其他的控件,后来找到了曲线图模块QCustomplot库 这个库性能非常好,画曲线图折线图柱状图动态静态,放大缩小,都很好用,10w条数据量无压力秒画出来一点也不卡 下载地址 https://www.qcustomplot.com/index.php/downloa

  • Qt串口通信开发之Qt串口通信模块QSerialPort开发完整实例(串口助手开发)

    之前自己写了用于上位机做基本收发的界面,独立出来相当于一个串口助手,先贴图: 功能作为串口助手来说还算完善,五个发送槽,一个接收槽,可以检测可用串口并加上相关标志,串口设置,记数功能,还有菜单栏上的文件操作和一些选择功能. 下面说一说这个项目: 做这个串口助手分为两步,第一步是设计界面,第二部是功能的代码实现. 一.界面设计 界面设计用Qt Designer,当然用Qt Creator的界面编辑器也可以,只不过感觉Qt Designer更好用一点,因为可以随时运行查看你的界面效果而不用编译整个项

  • Qt图形图像开发曲线图表模块QChart库基本用法、各个类之间的关系说明

    如何编译安装QChart请查看下面文章 Qt图形图像开发之曲线图表库QtChart编译安装详细方法与使用实例 使用Qt曲线图表模块Chart库首先要注意3点: (1)在.pro文件中添加:QT += charts. (2)用到QChart的文件中添加:QT_CHARTS_USE_NAMESPACE,或者:using namespace QtCharts; 在ui界面中拖入一个graphicsView控件,然后右击提升为QChartView类,写提升为的类:QtCharts::QChartView

  • Qt串口通信开发之QSerialPort模块详细使用方法与实例

    Qt串口通信基础及名词说明 串口通信(Serial Communications)的概念非常简单,串口按位(bit)发送和接收字节.尽管比按字节(byte)的并行通信慢,但是串口可以在使用一根线发送数据的同时用另一根线接收数据.它很简单并且能够实现远距离通信.比如IEEE488定义并行通行状态时,规定设备线总长不得超过20米,并且任意两个设备间的长度不得超过2米: 而对于串口而言,长度可达1200米.典型地,串口用于ASCII码字符的传输.通信使用3根线完成,分别是地线.发送.接收.由于串口通信

  • Qt图形图像开发之曲线图表库QtChart编译安装详细方法与使用实例

    Qt曲线图表库QtChart简介 Qt的线性绘图控件有大名鼎鼎的Qwt,ChartDirector,小巧玲珑的QCustomPlot,当然还有自家的QtChart.长久以来QtChart在Qt家族里一直是收费的模块,只有商业版才可以使用,但Qt5.7之后将开放其权限,可参见:Qt 5.7 亮瞎眼的更新.下面将介绍如何安装QtChart并进行简单的绘图. Qt曲线图表库QtChart下载 这里用git下载QtChart,参考Qt Charts 5.7.0 安装教程 Git地址:https://gi

  • Qt图形图像开发之曲线图表模块QChart库一个chart中显示两条曲线详细方法与实例

    首先要了解QChartView.QChart.QLineSeries.QValueAxis的实体之间的关系,例如一个QChartView中可以包含几个QValueAxis?这些可参考 Qt图形图像开发曲线图表模块QChart库基本用法.各个类之间的关系说明 每个chart可以包含多个QLineSeries数据系列,每个QLineSeries数据系列又包含了2个QValueAxis数值轴或QDateTimeAxis时间轴. 那么这个chart中的多个数据系列,一起显示在同一个chart中,会是什么

  • Qt图形图像开发之曲线图表模块QChart库坐标轴和数据不对应、密集的散点图无法显示问题解决方法

    QChart坐标轴和数据不对应问题描述: lineseries->append(4, 10); lineseries->append(5, 8); Chart->addSeries(lineseries); // 将 series 添加至图表中 axisX->setRange(0, 15);//设置X的显示范围 axisY->setRange(-20, 20); lineChart->setAxisX(axisX);//把轴添加到图表中 lineChart->se

  • Qt图形图像开发之QT滚动区控件(滚动条)QScrollArea的详细方法用法图解与实例

    QT滚动区控件(滚动条控件)QScrollArea简介 滚动区域控件QScrollArea用于显示一个画面中的子部件的内容.如果部件超过画面的大小,视图可以提供滚动条,这样就可以看到部件的整个区域. QScrollArea属于控件容器类,可以直接在ui中拖出来. 对于QScrollArea,最难搞懂的就是:如何控制它,才能让它在我们想要出现滚动条的时候出现滚动条. 我们拖入一个QScrollArea,再向他里面拖入4个button,观察信息如下: 可以发现,4个button并不是直接位于QScr

  • Qt图形图像开发之Qt曲线图美化QChart QScatterSeries 空心点阵图,鼠标移动到上面显示数值,鼠标移开数值消失效果实例

    最近接到一个Qt QChart曲线图美化的需求,画一个折线图,关键点使用空心的圆点标识出来,鼠标移动到关键点上,显示出当前数值:鼠标移走数值消失. 效果图如下: 我们遇到这个需求的时候,第一时间就会想到使用 QLineSeries 画折线图. 首先初始化 QChart *chart = new QChart(); chart->legend()->setVisible(false); ui->chartView->setChart(chart); ui->chartView-

  • Qt图形图像开发曲线图表模块QChart库缩放/平移详细方法与实例

    1.使用QChartView来缩放 (1)用鼠标框选一个矩形,把图放大到这个矩形 QChartView::setRubberBand(QChartView::RectangleRubberBand);//XY方向同时放大到鼠标画出的矩形大小(也可以设置为只放大X轴或Y轴) (2)setRubberBand函数同时也能使鼠标右键,具备缩小图的功能. 2.使用Qchart来平移和缩放 QChart::scroll(-10, 5);//整体平移(-10, 5),两个参数分别为Δx和Δy QChart:

  • Qt串口通信开发之QSerialPort模块Qt串口通信接收数据不完整的解决方法

    在使用串口接收数据时,当数据量大的时候会出现数据接收不完整的情况. 因为串口数据获取函数readAll()由readyRead()信号触发,但readyRead()信号在串口读到起始标志时立即发送,并不保证一定是当前所发数据的起始部分. 因此串口通信双方在通信前应制定好通信协议,规定好数据的起始和结束标志,串口当读到完整的起始和结束标志之后,才认定读完一条完整的数据. 本例中用串口定时发送当前时间,用"#"表示数据的结尾,定时时间为0毫秒,即能发多快就发多快. 发送 void Widg

随机推荐