当前位置：首页 > news >正文

`QTabWidget` 的标签页头设置样式，可以通过在 QSS 文件中定义 `QTabBar::tab` 的样式

news 来源：原创 2025/8/22 8:00:38

要为 `QTabWidget` 的标签页头设置样式，可以通过在 QSS 文件中定义 `QTabBar::tab` 的样式来实现。以下是完整的代码示例和 QSS 文件内容，展示如何为标签页头设置背景颜色、文本颜色、悬停效果和选中效果。

### **代码示例**
```cpp
#include <QApplication>
#include <QTabWidget>
#include <QWidget>
#include <QListWidget>
#include <QVBoxLayout>
#include <QFile>

int main(int argc, char *argv[]) {
QApplication app(argc, argv);

// 创建主窗口
QWidget window;
window.resize(800, 600);
window.show();

// 创建 QListWidget 显示日志
QListWidget *logListWidget = new QListWidget(&window);
logListWidget->setObjectName("logListWidget");

// 创建 QTabWidget
QTabWidget *logTab = new QTabWidget(&window);
logTab->setObjectName("logTab");

// 创建页面
QWidget *logPage = new QWidget();
logPage->setObjectName("logPage");
logPage->setProperty("style-type", "D");

// 设置布局
QVBoxLayout *logLayout = new QVBoxLayout(logPage);
logLayout->addWidget(logListWidget);

// 添加标签页
logTab->addTab(logPage, "日志");

// 加载 QSS 文件
QFile file("styles.qss");
if (file.open(QFile::ReadOnly)) {
QString styleSheet = QLatin1String(file.readAll());
app.setStyleSheet(styleSheet);
file.close();
}

return app.exec();
}
```

### **QSS 文件（styles.qss）**
```qss
/* 标签页头样式 */
QTabBar::tab {
background-color: #f0f0f0; /* 标签页背景颜色 */
color: black; /* 标签页文本颜色 */
border: 1px solid #ccc; /* 标签页边框 */
padding: 8px 16px; /* 标签页内边距 */
margin: 2px; /* 标签页外边距 */
}

QTabBar::tab:hover {
background-color: #e0e0e0; /* 鼠标悬停时的背景颜色 */
}

QTabBar::tab:selected {
background-color: #d0d0d0; /* 选中标签页的背景颜色 */
color: #333; /* 选中标签页的文本颜色 */
border-color: #999; /* 选中标签页的边框颜色 */
}

/* 标签页内容区域样式 */
QTabWidget::pane {
background-color: white; /* 内容区域背景颜色 */
border: 1px solid #ccc; /* 内容区域边框 */
}
```

### **解释**
1. **标签页头样式**：
- `QTabBar::tab`：选择标签页头，设置其背景颜色、文本颜色、边框和内边距。
- `QTabBar::tab:hover`：设置鼠标悬停时的背景颜色。
- `QTabBar::tab:selected`：设置选中标签页的背景颜色、文本颜色和边框颜色。

2. **内容区域样式**：
- `QTabWidget::pane`：选择标签页内容区域，设置其背景颜色和边框。

通过以上代码和 QSS 文件，你可以为 `QTabWidget` 的标签页头设置背景颜色、文本颜色、悬停效果和选中效果。如果需要更复杂的样式，可以在 QSS 文件中进一步扩展。

相关文章：