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

发布于:2025-04-11 ⋅ 阅读:(38) ⋅ 点赞:(0)

要为 `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 文件中进一步扩展。