上位机数据可视化：Qt表格美化

介绍

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

表格

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

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

行高控制

1
2
3

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;
}

设置只读状态

1
2
3

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();

单元格改变

1
2
3

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

禁止单元格多选

1	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);
}

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

问题二

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

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);
});

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。