Qt Style Sheets (类CSS样式表)

Qt样式表是Qt框架提供的一种强大的应用程序样式化机制，允许开发者使用类似CSS的语法定义控件外观。这是MFC所不具备的强大功能，让MFC开发者迁移到Qt时可以更自由地定制应用界面外观。

基本概念

样式表使用选择器和属性声明来定义控件外观：

 /* 基本语法 */
 selector {
     property: value;
     property: value;
 }

选择器类型

Qt样式表支持多种类型的选择器：

1. 通用选择器

针对所有控件应用样式：

 * {
     font-family: Arial;
     color: #333333;
 }

2. 类型选择器

应用于特定类型的控件：

 QPushButton {
     background-color: #4a86e8;
     color: white;
     border-radius: 4px;
     padding: 5px;
 }
 
 QLineEdit {
     border: 1px solid #cccccc;
     padding: 3px;
 }

3. 类选择器

使用.前缀应用于特定的类及其子类：

 .QWidget {
     background-color: #f5f5f5;
 }

4. ID选择器

使用#前缀应用于特定对象名称的控件：

 #loginButton {
     font-weight: bold;
     min-width: 80px;
 }

5. 后代选择器

应用于特定控件内的子控件：

 QGroupBox QLabel {
     color: #555555;
 }

6. 子选择器

使用>仅应用于直接子控件：

 QDialog > QPushButton {
     margin-right: 5px;
 }

7. 属性选择器

基于控件属性值应用样式：

 QPushButton[flat="true"] {
     border: none;
 }

伪状态

Qt样式表支持基于控件状态的样式化：

 QPushButton:hover {
     background-color: #5a96f8;
 }
 
 QPushButton:pressed {
     background-color: #3a76d8;
 }
 
 QCheckBox:checked {
     color: green;
 }
 
 QLineEdit:focus {
     border: 2px solid #4a86e8;
 }
 
 QComboBox::drop-down:disabled {
     width: 0px;  /* 禁用状态下隐藏下拉按钮 */
 }

主要伪状态包括：:disabled, :enabled, :focus, :hover, :checked, :unchecked, :pressed, :selected等。

常用样式属性

边框与轮廓

 QFrame {
     border: 1px solid #999999;
     border-radius: 4px;
     border-top-left-radius: 8px;
     border-style: outset;
     border-width: 2px;
 }

背景

 QWidget {
     background-color: white;
     background-image: url(:/images/background.png);
     background-repeat: repeat-xy;
     background-position: center;
     background-attachment: fixed;
 }

字体与文本

 QLabel {
     color: #333333;
     font-family: "Microsoft YaHei", Arial;
     font-size: 14px;
     font-weight: bold;
     font-style: italic;
     text-decoration: underline;
     text-align: center;
 }

尺寸与布局

 QPushButton {
     min-height: 30px;
     max-width: 150px;
     padding: 5px 10px;
     margin: 2px;
 }

子控件定制

Qt样式表可以针对复杂控件的子部分应用样式：

 /* QComboBox下拉按钮样式 */
 QComboBox::drop-down {
     width: 20px;
     border-left: 1px solid #cccccc;
 }
 
 /* QScrollBar滑块样式 */
 QScrollBar::handle:vertical {
     background: #888888;
     min-height: 20px;
     border-radius: 5px;
 }
 
 /* QTabWidget选项卡样式 */
 QTabBar::tab {
     background: #e0e0e0;
     padding: 5px 10px;
     margin-right: 2px;
 }
 
 QTabBar::tab:selected {
     background: white;
     border-bottom: 2px solid #4a86e8;
 }

在应用程序中使用样式表

样式表可以在多个层级应用：

1. 应用于整个应用程序

 // main.cpp
 int main(int argc, char *argv[])
 {
     QApplication app(argc, argv);
     
     // 从文件加载样式表
     QFile styleFile(":/styles/main.qss");
     styleFile.open(QFile::ReadOnly);
     QString styleSheet = QLatin1String(styleFile.readAll());
     app.setStyleSheet(styleSheet);
     
     MainWindow w;
     w.show();
     return app.exec();
 }

2. 应用于特定窗口或控件

 // 直接设置样式表
 ui->pushButton->setStyleSheet("background-color: red; color: white;");
 
 // 组合多个样式
 QString buttonStyle = "QPushButton {"
                       "  background-color: #4a86e8;"
                       "  color: white;"
                       "  border-radius: 4px;"
                       "  padding: 5px 10px;"
                       "}"
                       "QPushButton:hover {"
                       "  background-color: #5a96f8;"
                       "}"
                       "QPushButton:pressed {"
                       "  background-color: #3a76d8;"
                       "}";
 ui->pushButton->setStyleSheet(buttonStyle);

3. 动态切换样式

 void MainWindow::switchTheme(Theme theme)
 {
     QString styleFile;
     switch (theme) {
     case Theme::Light:
         styleFile = ":/styles/light.qss";
         break;
     case Theme::Dark:
         styleFile = ":/styles/dark.qss";
         break;
     case Theme::Blue:
         styleFile = ":/styles/blue.qss";
         break;
     }
     
     QFile file(styleFile);
     file.open(QFile::ReadOnly);
     QString styleSheet = QLatin1String(file.readAll());
     qApp->setStyleSheet(styleSheet);
 }

与MFC自定义绘制对比

Qt内置主题和自定义主题

除了样式表，Qt还提供了完整的样式引擎系统，用于创建和应用主题。

Qt内置样式

Qt内置多种预定义样式，可以轻松切换：

 // 设置应用程序样式
 QApplication::setStyle(QStyleFactory::create("Fusion"));
 
 // 获取可用样式列表
 QStringList styles = QStyleFactory::keys();
 // 通常包括: "Windows", "WindowsVista", "Fusion", "Macintosh" 等

主要内置样式：

0. Windows - 模拟Windows传统外观
1. WindowsVista/Windows7 - 模拟Vista/7外观
2. Fusion - 现代跨平台外观
3. Macintosh - 模拟macOS外观
4. Android/iOS - 移动平台样式

创建暗色主题

使用Fusion样式和调色板可以轻松创建暗色主题：

 void MainWindow::setDarkTheme()
 {
     // 设置Fusion样式作为基础
     QApplication::setStyle(QStyleFactory::create("Fusion"));
     
     // 创建暗色调色板
     QPalette darkPalette;
     QColor darkColor = QColor(45, 45, 45);
     QColor disabledColor = QColor(127, 127, 127);
     
     darkPalette.setColor(QPalette::Window, darkColor);
     darkPalette.setColor(QPalette::WindowText, Qt::white);
     darkPalette.setColor(QPalette::Base, QColor(18, 18, 18));
     darkPalette.setColor(QPalette::AlternateBase, darkColor);
     darkPalette.setColor(QPalette::ToolTipBase, Qt::white);
     darkPalette.setColor(QPalette::ToolTipText, Qt::white);
     darkPalette.setColor(QPalette::Text, Qt::white);
     darkPalette.setColor(QPalette::Disabled, QPalette::Text, disabledColor);
     darkPalette.setColor(QPalette::Button, darkColor);
     darkPalette.setColor(QPalette::ButtonText, Qt::white);
     darkPalette.setColor(QPalette::Disabled, QPalette::ButtonText, disabledColor);
     darkPalette.setColor(QPalette::BrightText, Qt::red);
     darkPalette.setColor(QPalette::Link, QColor(42, 130, 218));
     darkPalette.setColor(QPalette::Highlight, QColor(42, 130, 218));
     darkPalette.setColor(QPalette::HighlightedText, Qt::black);
     darkPalette.setColor(QPalette::Disabled, QPalette::HighlightedText, disabledColor);
     
     // 应用调色板
     QApplication::setPalette(darkPalette);
     
     // 添加一些额外的样式表调整
     QApplication::setStyleSheet("QToolTip { color: #ffffff; background-color: #2a82da; "
                                "border: 1px solid white; }");
 }

自定义样式引擎

对于需要更高度自定义的情况，可以创建自己的QStyle子类：

 class MyCustomStyle : public QProxyStyle
 {
 public:
     MyCustomStyle(QStyle *baseStyle = nullptr) : QProxyStyle(baseStyle) {}
     
     // 重写绘制原语
     void drawPrimitive(PrimitiveElement element, const QStyleOption *option,
                        QPainter *painter, const QWidget *widget = nullptr) const override
     {
         if (element == PE_FrameFocusRect) {
             // 自定义焦点矩形绘制
             painter->setPen(QPen(QColor(0, 120, 215), 2));
             painter->drawRect(option->rect.adjusted(1, 1, -1, -1));
             return;
         }
         QProxyStyle::drawPrimitive(element, option, painter, widget);
     }
     
     // 重写控件大小计算
     QSize sizeFromContents(ContentsType type, const QStyleOption *option,
                            const QSize &size, const QWidget *widget) const override
     {
         QSize s = QProxyStyle::sizeFromContents(type, option, size, widget);
         if (type == CT_PushButton) {
             // 增加按钮高度
             s.setHeight(s.height() + 5);
             s.setWidth(s.width() + 10);
         }
         return s;
     }
     
     // 自定义控件像素指标
     int pixelMetric(PixelMetric metric, const QStyleOption *option,
                     const QWidget *widget) const override
     {
         if (metric == PM_ButtonMargin) {
             return 6; // 自定义按钮边距
         }
         return QProxyStyle::pixelMetric(metric, option, widget);
     }
 };
 
 // 应用自定义样式
 QApplication::setStyle(new MyCustomStyle());

主题与样式表组合

最有效的方案是组合使用Qt样式引擎和样式表：

 void applyTheme(Theme theme)
 {
     // 首先设置基础样式
     QApplication::setStyle(QStyleFactory::create("Fusion"));
     
     // 然后设置调色板
     QPalette palette;
     switch (theme) {
     case Theme::Light:
         // 设置浅色调色板
         break;
     case Theme::Dark:
         // 设置深色调色板
         break;
     }
     QApplication::setPalette(palette);
     
     // 最后应用样式表做细节调整
     QFile file(getThemeStylesheetPath(theme));
     file.open(QFile::ReadOnly);
     QString styleSheet = QLatin1String(file.readAll());
     qApp->setStyleSheet(styleSheet);
 }

主题管理最佳实践

0. 分层次管理样式
1. 基础样式设置（QStyle）
2. 调色板定义（QPalette）
3. 样式表微调（QSS）
4. 主题文件组织
5. 每个主题独立的QSS文件
6. 公共样式和特定主题样式分离
7. 使用Qt资源系统嵌入样式文件
8. 动态主题切换
9. 提供用户选择主题的界面
10. 保存用户主题偏好
11. 启动时自动应用上次主题
12. 适应系统主题
13. 检测系统深色/浅色模式
14. 自动切换匹配系统主题
15. 提供覆盖系统主题的选项

动态样式切换

实现在应用程序运行时无缝切换主题和样式是Qt的一大优势。

基于用户操作切换主题

 // MainWindow.h
 class MainWindow : public QMainWindow
 {
     Q_OBJECT
 public:
     enum class Theme { Light, Dark, Blue };
     
 private slots:
     void onThemeActionTriggered();
     void applyTheme(Theme theme);
     
 private:
     QAction *lightThemeAction;
     QAction *darkThemeAction;
     QAction *blueThemeAction;
 };
 
 // MainWindow.cpp
 void MainWindow::setupThemeMenu()
 {
     QMenu *themeMenu = menuBar()->addMenu(tr("主题"));
     
     lightThemeAction = themeMenu->addAction(tr("浅色"));
     lightThemeAction->setCheckable(true);
     connect(lightThemeAction, &QAction::triggered, this, [this]() {
         applyTheme(Theme::Light);
     });
     
     darkThemeAction = themeMenu->addAction(tr("深色"));
     darkThemeAction->setCheckable(true);
     connect(darkThemeAction, &QAction::triggered, this, [this]() {
         applyTheme(Theme::Dark);
     });
     
     blueThemeAction = themeMenu->addAction(tr("蓝色"));
     blueThemeAction->setCheckable(true);
     connect(blueThemeAction, &QAction::triggered, this, [this]() {
         applyTheme(Theme::Blue);
     });
     
     QActionGroup *themeGroup = new QActionGroup(this);
     themeGroup->addAction(lightThemeAction);
     themeGroup->addAction(darkThemeAction);
     themeGroup->addAction(blueThemeAction);
     
     // 默认使用浅色主题
     lightThemeAction->setChecked(true);
     applyTheme(Theme::Light);
 }

保存和恢复主题设置

 void MainWindow::saveThemeSettings()
 {
     QSettings settings;
     int themeIndex = 0;
     
     if (darkThemeAction->isChecked())
         themeIndex = 1;
     else if (blueThemeAction->isChecked())
         themeIndex = 2;
     
     settings.setValue("app/theme", themeIndex);
 }
 
 void MainWindow::loadThemeSettings()
 {
     QSettings settings;
     int themeIndex = settings.value("app/theme", 0).toInt();
     
     switch (themeIndex) {
     case 0:
         lightThemeAction->setChecked(true);
         applyTheme(Theme::Light);
         break;
     case 1:
         darkThemeAction->setChecked(true);
         applyTheme(Theme::Dark);
         break;
     case 2:
         blueThemeAction->setChecked(true);
         applyTheme(Theme::Blue);
         break;
     }
 }

跟随系统主题

在现代操作系统中，可以检测系统主题并相应调整应用外观：

 #ifdef Q_OS_WIN
 #include <Windows.h>
 #endif
 
 bool isSystemInDarkMode()
 {
 #ifdef Q_OS_WIN
     // Windows 10 1903+
     QSettings settings("HKEY_CURRENT_USER\\Software\\Microsoft\\Windows\\CurrentVersion\\Themes\\Personalize", 
                       QSettings::NativeFormat);
     return settings.value("AppsUseLightTheme", 1).toInt() == 0;
 #elif defined(Q_OS_MACOS)
     // macOS 10.14+
     QProcess process;
     process.start("defaults", QStringList() << "read" << "-g" << "AppleInterfaceStyle");
     process.waitForFinished();
     QString output = process.readAllStandardOutput();
     return output.contains("Dark");
 #else
     // 其他系统，默认使用浅色
     return false;
 #endif
 }
 
 void MainWindow::initTheme()
 {
     // 检查是否应跟随系统主题
     QSettings settings;
     bool followSystem = settings.value("app/followSystemTheme", true).toBool();
     
     if (followSystem) {
         if (isSystemInDarkMode()) {
             darkThemeAction->setChecked(true);
             applyTheme(Theme::Dark);
         } else {
             lightThemeAction->setChecked(true);
             applyTheme(Theme::Light);
         }
     } else {
         // 加载用户保存的设置
         loadThemeSettings();
     }
 }

主题切换的平滑过渡

为了让主题切换更加平滑，可以添加动画效果：

 void MainWindow::applyThemeWithAnimation(Theme theme)
 {
     // 创建背景色过渡动画
     QColor startColor = this->palette().color(QPalette::Window);
     QColor targetColor;
     
     switch (theme) {
     case Theme::Light:
         targetColor = QColor(240, 240, 240);
         break;
     case Theme::Dark:
         targetColor = QColor(45, 45, 45);
         break;
     case Theme::Blue:
         targetColor = QColor(220, 230, 245);
         break;
     }
     
     QPropertyAnimation *animation = new QPropertyAnimation(this, "backgroundColor");
     animation->setDuration(300);
     animation->setStartValue(startColor);
     animation->setEndValue(targetColor);
     
     animation->start(QAbstractAnimation::DeleteWhenStopped);
     
     // 连接动画完成信号以应用完整主题
     connect(animation, &QPropertyAnimation::finished, this, [this, theme]() {
         applyTheme(theme);
     });
 }

这需要添加自定义属性和相应的设置方法。

从MFC迁移的样式考虑

对于从MFC迁移的应用程序，以下是样式相关的主要考虑点：

1. 控件对应关系

MFC中手动绘制的自定义控件在Qt中可以通过样式表简化实现：

2. 老旧界面现代化

许多MFC应用使用传统Windows界面，可通过以下方式现代化：

• 使用Fusion样式作为基础
• 应用现代配色方案
• 增加适当的圆角和阴影
• 调整控件间距和内边距
• 使用现代图标集

3. 从Owner-Draw到样式表

MFC中常用的Owner-Draw方式在Qt中可转换为样式表：

 // MFC Owner-Draw 按钮
 void CMyButton::DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct)
 {
     CDC* pDC = CDC::FromHandle(lpDrawItemStruct->hDC);
     // 绘制按钮背景
     pDC->FillSolidRect(&lpDrawItemStruct->rcItem, RGB(0, 120, 215));
     // 绘制按钮文本
     pDC->SetTextColor(RGB(255, 255, 255));
     // ...
 }
 
 // Qt样式表等效方式
 QString buttonStyle =
     "QPushButton {"
     "  background-color: #0078d7;"
     "  color: white;"
     "  border: none;"
     "  padding: 5px 10px;"
     "  border-radius: 3px;"
     "}"
     "QPushButton:hover {"
     "  background-color: #1a88e7;"
     "}"
     "QPushButton:pressed {"
     "  background-color: #006cc1;"
     "}";
 button->setStyleSheet(buttonStyle);

4. 图形资源转换

将MFC中的图形资源转换到Qt：

• 位图(BMP)和图标(ICO)转换为PNG或SVG
• 资源文件(.rc)中的图像转移到Qt资源系统(.qrc)
• 图像列表转换为QIcon或QPixmap集合
• 工具栏图像转换为QAction图标或QToolButton样式

5. 打印和报表样式

MFC报表控件的样式可通过以下方式在Qt中实现：

• 使用样式表定制QTableView或QTreeView
• 对于复杂报表，使用QTextDocument的HTML能力
• 利用QPainter直接绘制到QPrinter
• 考虑使用第三方报表组件如QtReport