Qt 自定义表头

[Qt 自定义表头（最实用、最通用、可直接运行）](#Qt 自定义表头（最实用、最通用、可直接运行）)

[一、最简单：纯 QSS 自定义表头（推荐 90% 场景）](#一、最简单：纯 QSS 自定义表头（推荐 90% 场景）)

直接给你成品样式，复制即用

使用方法

二、进阶：代码自定义表头（高度、文字、对齐、排序）

[1. 设置表头高度](#1. 设置表头高度)

[2. 设置表头文字对齐](#2. 设置表头文字对齐)

[3. 设置列宽自适应](#3. 设置列宽自适应)

[4. 开启排序点击](#4. 开启排序点击)

[三、高级：真正的自定义表头控件（继承 QHeaderView）](#三、高级：真正的自定义表头控件（继承 QHeaderView）)

[1. 头文件 MyHeaderView.h](#1. 头文件 MyHeaderView.h)

[2. 实现文件 MyHeaderView.cpp](#2. 实现文件 MyHeaderView.cpp)

[3. 使用自定义表头](#3. 使用自定义表头)

四、最常用的自定义表头效果（直接复制）

[1. 表头左对齐 + 内边距](#1. 表头左对齐 + 内边距)

[2. 表头居中](#2. 表头居中)

[3. 表头无边框](#3. 表头无边框)

[4. 表头渐变背景](#4. 表头渐变背景)

五、可以：

Qt 自定义表头（最实用、最通用、可直接运行）

完整可运行的自定义表头实现，包含：✅ 自定义文字、颜色、字体、对齐✅ 自定义图标、排序箭头、复选框✅ 自定义背景、边框、分割线✅ 支持点击、悬浮、按下效果✅ 支持 QTableWidget / QTableView

不用复杂继承，直接用 QSS + 简单代码就能实现！

一、最简单：纯 QSS 自定义表头（推荐 90% 场景）

直接给你成品样式，复制即用

css

复制代码

/* ===================== 自定义表头 ===================== */
QHeaderView::section:horizontal {
    background-color: #2D3744;       /* 深色背景 */
    color: #FFFFFF;                 /* 白色文字 */
    font-size: 14px;
    font-family: "Microsoft YaHei";
    font-weight: bold;
    border: none;
    border-right: 1px solid #444C58;
    min-height: 38px;                /* 表头高度 */
    padding-left: 10px;
    text-align: left;                /* 文字左对齐 */
}

/* 去掉最后一列右边框 */
QHeaderView::section:horizontal:last {
    border-right: none;
}

/* 表头悬浮效果 */
QHeaderView::section:horizontal:hover {
    background-color: #404B5A;
}

/* 表头按下效果 */
QHeaderView::section:horizontal:pressed {
    background-color: #1E252E;
}

/* 排序选中样式 */
QHeaderView::section:horizontal:checked {
    background-color: #1677FF;
    color: #FFF;
}

/* 排序箭头 */
QHeaderView::up-arrow {
    width: 10px;
    height: 8px;
    image: url(:/icons/arrow_up_white.png);
    margin-right: 6px;
}
QHeaderView::down-arrow {
    width: 10px;
    height: 8px;
    image: url(:/icons/arrow_down_white.png);
    margin-right: 6px;
}

使用方法

cpp

运行

复制代码

ui->tableWidget->setStyleSheet(R"(
    把上面 QSS 粘贴这里
)");

二、进阶：代码自定义表头（高度、文字、对齐、排序）

1. 设置表头高度

cpp

运行

复制代码

// 固定表头高度 38px
ui->tableWidget->horizontalHeader()->setFixedHeight(38);

2. 设置表头文字对齐

cpp

运行

复制代码

ui->tableWidget->horizontalHeader()->setDefaultAlignment(Qt::AlignLeft | Qt::AlignVCenter);

3. 设置列宽自适应

cpp

运行

复制代码

// 平均分配
ui->tableWidget->horizontalHeader()->setSectionResizeMode(QHeaderView::Stretch);

// 或 自适应内容
ui->tableWidget->horizontalHeader()->setSectionResizeMode(QHeaderView::ResizeToContents);

4. 开启排序点击

cpp

运行

复制代码

ui->tableWidget->setSortingEnabled(true);
ui->tableWidget->horizontalHeader()->setSortIndicatorShown(true);

三、高级：真正的自定义表头控件（继承 QHeaderView）

如果你需要 在表头加按钮、复选框、图标、进度条、多行文字，就用这种方式。

1. 头文件 MyHeaderView.h

cpp

运行

复制代码

#ifndef MYHEADERVIEW_H
#define MYHEADERVIEW_H

#include <QHeaderView>
#include <QPainter>

class MyHeaderView : public QHeaderView
{
    Q_OBJECT
public:
    explicit MyHeaderView(Qt::Orientation orientation, QWidget *parent = nullptr);

protected:
    // 重写绘制 → 实现完全自定义表头
    void paintSection(QPainter *painter, const QRect &rect, int logicalIndex) const override;
};

#endif // MYHEADERVIEW_H

2. 实现文件 MyHeaderView.cpp

cpp

运行

复制代码

#include "MyHeaderView.h"

MyHeaderView::MyHeaderView(Qt::Orientation orientation, QWidget *parent)
    : QHeaderView(orientation, parent)
{
    setFixedHeight(40); // 表头高度
}

// 自定义绘制表头（核心）
void MyHeaderView::paintSection(QPainter *painter, const QRect &rect, int logicalIndex) const
{
    // 1. 绘制背景
    painter->fillRect(rect, QColor("#2D3744"));

    // 2. 绘制边框
    painter->setPen(QColor("#444C58"));
    painter->drawRect(rect.adjusted(0,0,-1,-1));

    // 3. 绘制文字
    painter->setPen(Qt::white);
    painter->setFont(QFont("Microsoft YaHei", 10, QFont::Bold));

    QString text = model()->headerData(logicalIndex, orientation()).toString();
    painter->drawText(rect.adjusted(10,0,0,0), Qt::AlignLeft | Qt::AlignVCenter, text);

    // 你可以在这里画：图标、复选框、箭头、图片...
}

3. 使用自定义表头

cpp

运行

复制代码

#include "MyHeaderView.h"

// 设置自定义表头
MyHeaderView* header = new MyHeaderView(Qt::Horizontal, ui->tableWidget);
ui->tableWidget->setHorizontalHeader(header);

四、最常用的自定义表头效果（直接复制）

1. 表头左对齐 + 内边距

css

复制代码

QHeaderView::section {
    text-align: left;
    padding-left: 10px;
}

2. 表头居中

css

复制代码

QHeaderView::section {
    text-align: center;
}

3. 表头无边框

css

复制代码

QHeaderView::section {
    border: none;
}

4. 表头渐变背景

css

复制代码

QHeaderView::section {
    background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
                                stop:0 #409EFF, stop:1 #1677FF);
}

五、可以：

✅ 带复选框的全选表头 ✅ 带图标的表头 ✅ 带按钮的表头 ✅ 多行文字表头 ✅ 可拖动、可隐藏列表头