QTableView设置样式表/选中行颜色， QTableView美化

御坂主机

1. 引言

在使用 Qt 框架进行桌面应用程序开发时，QTableView 是一个常用的组件，用于显示和操作表格数据。为了提升用户体验和界面的美观度，我们可以通过设置样式表（stylesheet）和选中行颜色来美化 QTableView。本文将详细介绍如何实现这些功能。

1.1 QTableView 简介

QTableView 是 Qt 提供的一个视图组件，用于显示二维表格数据。它与模型（model）相结合，可以方便地展示和操作数据。默认情况下，QTableView 的外观较为简单，但通过样式表，我们可以对其进行自定义美化。

1.2 样式表和选中行颜色

样式表是一种用来描述组件外观的语言，类似于 HTML 的 CSS。通过样式表，我们可以设置 QTableView 的背景色、字体、边框等属性。选中行颜色则用于高亮显示用户选中的行，提升交互体验。

2. 基础设置

2.1 安装和配置 Qt

首先，需要确保安装了 Qt 开发环境。可以从 Qt 官方网站下载并安装最新版本的 Qt。安装完成后，创建一个新的 Qt Widgets 应用程序。

2.2 创建 QTableView

在项目的主窗口（MainWindow）中，添加一个 QTableView 组件。可以通过 Qt Designer 或直接在代码中创建：

1.     QTableView *tableView = new QTableView(this);
   
2.     setCentralWidget(tableView);

复制代码

3. 设置样式表

3.1 基本样式表

可以通过 setStyleSheet 方法为 QTableView 设置样式表。例如，设置表格背景色和字体颜色：

1.     tableView->setStyleSheet("QTableView { background-color: #f0f0f0; color: #333333; }");

复制代码

3.2 设置选中行颜色

选中行颜色可以通过 QTableView::item:selected 来设置。例如，设置选中行的背景色为蓝色，字体颜色为白色：

1.     tableView->setStyleSheet(
   
2.         "QTableView::item:selected { background-color: #3399ff; color: #ffffff; }"
   
3.     );
   

复制代码

3.3 设置表头样式

可以通过 QHeaderView 来设置表头的样式。例如，设置表头背景色和字体颜色：

1.     tableView->setStyleSheet(
   
2.         "QHeaderView::section { background-color: #dcdcdc; color: #333333; padding: 4px; border: 1px solid #dddddd; }"
   
3.     );

复制代码

4. QTableView 美化示例

结合上述样式表设置，可以实现一个美化的 QTableView。以下是一个综合示例：

1.     QTableView *tableView = new QTableView(this);
   
2.     tableView->setStyleSheet(
   
3.         "QTableView { background-color: #f0f0f0; color: #333333; gridline-color: #dddddd; }"
   
4.         "QTableView::item:selected { background-color: #3399ff; color: #ffffff; }"
   
5.         "QHeaderView::section { background-color: #dcdcdc; color: #333333; padding: 4px; border: 1px solid #dddddd; }"
   
6.         "QTableCornerButton::section { background-color: #dcdcdc; border: 1px solid #dddddd; }"
   
7.     );
   
8.     setCentralWidget(tableView);

复制代码

4.1 设置模型和数据

为了使 QTableView 显示数据，需要设置模型（model）。以下是一个简单的 QStandardItemModel 示例：

1.     QStandardItemModel *model = new QStandardItemModel(5, 3, this);
   
2.     model->setHorizontalHeaderLabels({"Column 1", "Column 2", "Column 3"});
   
3. 
   
4.     for (int row = 0; row < 5; ++row) {
   
5.         for (int column = 0; column < 3; ++column) {
   
6.             QStandardItem *item = new QStandardItem(QString("Item %1").arg(row * 3 + column + 1));
   
7.             model->setItem(row, column, item);
   
8.         }
   
9.     }
   
10. 
    
11.     tableView->setModel(model);

复制代码

5. 进阶美化

5.1 设置行高和列宽

可以通过 setRowHeight 和 setColumnWidth 方法来设置行高和列宽：

1.     tableView->setRowHeight(0, 40);
   
2.     tableView->setColumnWidth(0, 150);

复制代码

5.2 设置网格线样式

通过样式表可以设置网格线的颜色和样式：

1.     tableView->setStyleSheet(
   
2.         "QTableView { gridline-color: #dddddd; }"
   
3.     );

复制代码

5.3 自定义选中行效果

如果希望更复杂的选中行效果，可以使用 QStyledItemDelegate 来自定义绘制逻辑。以下是一个简单示例：

1.     class CustomDelegate : public QStyledItemDelegate
   
2.     {
   
3.     public:
   
4.         void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const override
   
5.         {
   
6.             QStyleOptionViewItem opt = option;
   
7.             if (opt.state & QStyle::State_Selected) {
   
8.                 painter->fillRect(opt.rect, QColor("#3399ff"));
   
9.                 opt.palette.setColor(QPalette::Text, QColor("#ffffff"));
   
10.             }
    
11.             QStyledItemDelegate::paint(painter, opt, index);
    
12.         }
    
13.     };
    
14. 
    
15.     tableView->setItemDelegate(new CustomDelegate);

复制代码

6. 总结

通过本文的介绍，我们了解了如何通过设置样式表和选中行颜色来美化 QTableView。样式表提供了一种简单而强大的方式来定制组件的外观，而通过自定义代理，可以实现更复杂的效果。希望这篇指南能帮助你在 Qt 项目中创建美观且功能丰富的表格视图。

7. 参考文献

1. Qt 官方文档
2. QTableView 组件使用指南
3. 样式表设计教程
4. QStyledItemDelegate 使用示例