demo下载地址在最后
================================分割线======================================
对于所有前端开发人员会留意到，我们在开发过程中对于表格使用频率还是挺高的，使用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进行重绘。
那么我们就要另外想办法了，经过分析，刚开始提出了两种方案：
| 描述 | 优点 | 缺点 | |
| 方案一 |
|
|
|
| 方案二 |
|
|
|
总结一下就是：
本着成就客户与自我成长的态度，最终选择了第二种解决方案。
我们首先要做的就是创建一个继承于QTableWidget的一个类，命名为TDMSummaryTableWgt。
class TDMSummaryTableWgt : public QTableWidget
然后需要在TDMSummaryTableWgt类中，声明另外一个用于header的QTableWidget，命名为 m_frozenTableWgt;
-
private:
-
QTableWidget *m_frozenTableWgt;
// 使用TableWidget 作为header，并冻结
这个m_frozenTableWgt,就是作为表头，并且固定位置，不随着滚动条移动位置。
这个时候我们只需要解决两个问题，就可以搞定表头了：
一.表头位置锁定（固定、锁死）。
二.重绘表头。
对于第一个问题，表头位置的固定。我们应该从哪些方面考虑来解决？
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里面的难题。
=================================分割线========================================
demo下载地址：https://download.csdn.net/download/xiezhongyuan07/10694125 （没有积分的小伙伴评论上写邮箱，我发给你们）
=================================分割线========================================
5
48
条评论
12-03 阅读数 305
文章目录多行表头效果逻辑使用资源 多行表头 Qt不提供默认的多行表头控件， 网上大多也是用2个QTableWidget组合来实现，最近在网上看到一份资源。他的思路是使用Model/View，通过使用重... 博文 来自： w18758879921的博客
① QTableView是基于MVC架构，QTableView表格用来做显示，QStandardItemModel用来做数据模…
博文
来自： 我欲乘风归去
Qt学习之QTableView和QTableWidget的具体区别
12-13
阅读数
2503
在使用QTableView和QTableWidget的时候总是分不清他们的具体区别，今天进行一下总结：
区别点
QTableView
QTableWi…
博文
来自： 郭小郭的专栏
QTableWidget表头样式
10-27
阅读数
2622
转载请注明出处：http://www.cnblogs.com/dachen408/p/7742680.html
QTableView
{
background-color: rgba(255, 2…
博文
来自： neochan1108的专栏
Qt中设置QTableWidget的表头高度
09-18
阅读数
1399
关键就是
ui->tableWidget->horizontalHeader()->setMinimumHeight(30);
ui->…
博文
来自： Qt自定义控件大全+UI定制+输入法
QTableWidget与QTableView的区别
12-18
阅读数
1660
QTableWidget与QTableView的区别
QTableWidget继承自QTableView。QSqlTableModel能与QTableView绑定，但不能于QTableWidget绑…
博文
来自： zyc_csdn的博客
Qt之QTableWidget的使用及常用设置
06-08
阅读数
9637
[原]Qt之QTableWidget的使用及常用设置
2014-5-25阅读379 评论0
各种软件设计中，表格的使用非常频繁，下面介绍的是关于QTableWidget的使用以及常用属…
博文
来自： 笨师兄
QTableWidget的样式和表头
10-26
阅读数
4813
//设置该单元格为屏蔽状态，不能编辑和选中。
ui->tableWidget->item(0,0)->setFlags(Qt::ItemIsEditable);//取消表头的在选中单元格时的高亮状…
博文
来自： shengzhe8688的专栏
QTableWidget详解（样式、右键菜单、表头塌陷、多选等）
12-18
阅读数
619
QTableWidget详解（样式、右键菜单、表头塌陷、多选等）
在Qt的开发过程中，时常会用到表单（QTableWidget）这个控件，网上的资料不少，但是都是最基本的，有一些比较经常遇到的问…
博文
来自： zyc_csdn的博客
QTableWidget 表头样式设置
10-22
阅读数
3848
最近纠结了好长时间了，在Designer中设置了QWidget｛font：……｝的样式表，程序中的所有的控件的字体均按要求显示了，只有QTableWidget表头显示不正常。
而且我的界面中很很多个…
博文
qtabwidget表头字体大小、字体颜色、背景颜色设置
08-31
阅读数
1万+
如下是对tabwidget表头的设置。background-color是对表头背景颜色的设置。font是对字体大小，字体颜色，字体格式设置。
ui.tableWidget_grid->horizont…
博文
来自： 蜗牛的专栏
QT 修改QTableWidget表头
03-31
阅读数
5040
void NodeConfigDlg::initNodeTable()
{
m_pNodeTable = new QTableWidget(this);
QStringList hea…
博文
来自： 笑秋水
Qt学习之QListWidget删除Item
03-21
阅读数
1万+
将QListWidgetItem从QListWidget列表中删除有两种方法可以做到，但也要根据自己的需要进行选择。
第一种是QListWidgetItem *takeItem(int row);使用…
博文
来自： GreenArrowMan-CSDN博客
Qt——取消表头，行标题设置，删除行标题，隐藏行
12-04
阅读数
5707
取消行表头#include //除了QTableWidget还需要引用QHeaderView
verticalHeader()->hide();
行标题的设置
QTableWidgetItem …
博文
来自： mmdaphne的专栏
QListWidget与QTableWidget的使用以及样式设置
06-24
阅读数
3万+
//一、QListWidgetlist_widget = new QListWidget();//list_widget->resize(200,300);
list_widget->setFixed…
博文
来自： Code搬运工
在QTableWidget的列头增加Checkbox
11-06
阅读数
9363
新建一个类，继承QHeaderView：#include
#include
#include
#include class CCheckBoxHeaderView : public QHeade…
博文
来自： 阳光柠檬_的技术笔记
QTableView中表头宽度设置
10-27
阅读数
2547
QTableView中表头宽度设置."标题"列宽度随窗口大小变化而变化，其他列宽度不变
//喜欢
resizeColumnToContents(SEQ_FAVOURITE);
…
博文
来自： DLove0502的专栏
QTableWidget属性及美化总结
10-25
阅读数
3574
(1). QTableWidget创建及属性设置
tableWidget = new QTableWidget(this);
tableWidget->setRowCount(10);
tableW…
博文
来自： fanyun的博客
对QTableWidget标题的操作
09-01
阅读数
3824
table->verticalHeader()->hide();//竖的标题隐藏
table->horizontalHeader()->hide();//顶上的标题隐藏
tablewidg…
博文
来自： HSL、部落
QTableWidget的使用详细介绍和美工总结
06-15
阅读数
2万+
基本外观设置
FriendTable->setFrameShape(QFrame::NoFrame); //设置边框
FriendTable->setHorizontalHeaderLabels…
博文
来自： leo115的专栏
媒体大神和科技大佬的团聚，你来吗？
年青人因科技而团聚，4月28日，我们在杭州云栖小镇2050大会等你
Qt Table 的表头合并
09-27
阅读数
4474
最近接到了开发表格的需求，一般来说网上有很多不错的例子。表格的开发多半使用QtableWeiget或者Qtableview。为了美观，有很多样式设置的代码行。
基本外观设置
FriendTab…
博文
来自： u014430031的博客
Qt QTableWidget的用法
01-10
阅读数
1万+
简述：
表格类是Qt中常用的控件，如QTableWidget,QTableView。QTableWidget是QTableView的子类，主要区别是QTableView可以使用自定义的数据模型来显示…
博文
来自： hebbely的博客
媒体大神和科技大佬的团聚，你来吗？
年青人因科技而团聚，4月28日，我们在杭州云栖小镇2050大会等你。
QTableView，支持拖拽列，冻结列，多行表头，绘制表格，复选框，按钮等操作
08-05
阅读数
1055
封装QTableView，支持以下操作
1、拖拽表列
2、冻结表列
3、多行表头
4、绘制表格包含功能（绘制复选框 、绘制按钮，点击响应 、支持字体指定颜色的设置 、绘制表头，支持排序、全选
绘制…
博文
来自： u012765446的专栏
QTableView 设置列头 setHeaderView（）
09-30
阅读数
6667
//创建HeadView列头
void TradeTableView::InitView()
{
//设置列头
QHe…
博文
来自： 证券指标的专栏
一 QT之QTableView用QHeaderView添加横向表头
10-18
阅读数
1万+
QTableView的表头用QHeaderView来添加，为了提高QTableView从sqlite数据库中提取数据的数据，通过设置QSqlQueryModel来添加。
1) 若是在表头不增加任何控…
博文
来自： CoolCode
媒体大神和科技大佬的团聚，你来吗？
年青人因科技而团聚，4月28日，我们在杭州云栖小镇2050大会等你
QT QTableView表格左上角样式
07-11
阅读数
2093
在设置完QTableView的表头样式后，发现表格左上角是一片空白，如下图：
我们希望左上角的区域也是和表头的颜色一致，可以设置此处样式：/QTableView 左上角样式/
QTableVie…
博文
来自： David
如何在ArcGIS Online中构建自己的应用程序模板初级篇-显示地图
11-21
阅读数
4万+