Qt表格美化笔记

发布于:2025-03-16 ⋅ 阅读:(14) ⋅ 点赞:(0)

介绍

表格是一种常见的数据管理界面形式,在大批量的数据交互情形下使用的比较多

表格

可以通过样式表设置线条以及边框的颜色

QTableWidget
{ 
    gridline-color : rgb(55, 60, 62); 
    border: 1px solid rgb(62,112,181);
 }

表头

如果表头和第一行的分割线显示,请设置一下表头的样式表

QHeaderView::section 
{
    border: 1px solid gray; 
}

表头不是必须的,可以设置horizontalHeaderVisiable属性把它隐藏掉

在这里插入图片描述

列的数目:columnCount

在这里插入图片描述

列序号,比较不美观,最好隐藏掉:verticalHeaderVisible -> false

在这里插入图片描述

列宽控制

for (int i = 0; i < ui->tableWidget->columnCount(); ++i) {
    ui->tableWidget->horizontalHeader()->setSectionResizeMode(i, QHeaderView::Fixed);
    ui->tableWidget->setColumnWidth(i, width);
}

行的数目:rowCount

在这里插入图片描述

行高控制

for (int i = 0; i < tableWidget->rowCount(); ++i) {
    ui->tableWidget->setRowHeight(i, 30); 
}

单元格

样式表修改,只要指定item项,便可以修改相关的文字颜色背景色字体大小文字对齐等样式

QTableWidget::item
{
    color: red;    
    background-color: blue;
    font-size: 14px;
    text-align: center;
}

设置只读状态

item = new QTableWidgetItem;
item->setText(QString::number(p->suggestedFlow, 'f', 2));
item->setFlags(item->flags() & ~Qt::ItemIsEditable);

插入自定义控件

auto itemWidget = new QComboBox;
itemWidget->addItem("OFF");
itemWidget->addItem("ON");
itemWidget->setCurrentIndex(p->speedup);
ui->tableWidget->setCellWidget(5, 1, itemWidget);

获取单元格数据:1.自带item;2.自定义控件item

// 如果是一个text item
m_pid.gamma = ui->tableWidget->item(row, 1)->text().toFloat();
// 如果是一个widget item
m_pid.type = qobject_cast<QComboBox *>(ui->tableWidget->cellWidget(row, 1))->currentIndex();

单元格改变

connect(ui->tableWidget, &QTableWidget::cellChanged, this, [=](int row, int column) {
    this->onCellChanged(row, column);
});

禁止单元格多选

ui->tableWidget->setSelectionMode(QAbstractItemView::SingleSelection);

滚动条

水平滚动条:一般都是设置为关闭,开启的话比较丑陋

在这里插入图片描述

垂直滚动条:自带的比较丑,如果开启的话需要自定义一下样式表

在这里插入图片描述

滚动条样式参考

// 水平滚动条
ui->tableWidget->horizontalScrollBar()->setStyleSheet("QScrollBar{background:rgb(43, 44, 49);height:20px;border: 1px solid rgb(43, 44, 49);}\
QScrollBar::handle{border: 1px solid rgb(62 ,73 ,84);}");

// 垂直滚动条
ui->tableWidget->verticalScrollBar()->setStyleSheet("QScrollBar{background:rgb(43, 44, 49);width:20px;border: 1px solid rgb(43, 44, 49);}\
QScrollBar::handle{border: 1px solid rgb(62 ,73 ,84);}");

问题

问题一

点击单元格的时候,整个表格可能会有左右偏移的现象

在这里插入图片描述

这是整个滑动区域的宽度(所有的列宽和)大于表格的宽度导致的漂移,需要:1.指定列宽;2.固定表头列宽

int width = ui->tableWidget1->width() / 2 - 1;
for (int i = 0; i < ui->tableWidget1->columnCount(); ++i) {
    ui->tableWidget1->horizontalHeader()->setSectionResizeMode(i, QHeaderView::Fixed);
    ui->tableWidget1->setColumnWidth(i, width);
}

for (int i = 0; i < ui->tableWidget2->columnCount(); ++i) {
    ui->tableWidget2->horizontalHeader()->setSectionResizeMode(i, QHeaderView::Fixed);
    ui->tableWidget2->setColumnWidth(i, width);
}

上下偏移也与此同理,只要不超过表格控件的高度就行

问题二

编辑动作的捕获:有cellChangedcloseEditor两个信号,前者是单元格内容发生变化时触发,但这个当控件新建时也会触发;如果想要单纯的捕获编辑动作本身,建议用后者

connect(ui->tableWidget->itemDelegate(), &QAbstractItemDelegate::closeEditor, this, [=]() {
    int row = ui->tableWidget->currentRow();
    int column = ui->tableWidget->currentColumn();
    this->onCellChanged(row, column);
});

如果单元格插入了一些自定义的控件,例如QComboBox,需要统一一个专门处理单元格的函数,将row和column的参数传到同一的接口处理

itemWidget = new QComboBox;
itemWidget->addItem("禁用");
itemWidget->addItem("固定时间");
itemWidget->addItem("固定坡度");
itemWidget->setCurrentIndex(p->rampMode);
ui->tableWidget->setCellWidget(6, 1, itemWidget);
connect(itemWidget, QOverload<int>::of(&QComboBox::currentIndexChanged), this, [=](int) {
    this->onCellChanged(6, 1);
});