Qt样式表概述

Qt样式表(Qt Style Sheets)是基于CSS的样式系统，允许开发者以类似于Web前端的方式定制Qt应用程序的外观。这一特性极大地简化了Qt应用的界面定制，提供了比MFC更强大、更灵活的界面样式控制能力。

核心特点

0. 类CSS语法 - 采用与Web CSS相似的语法，易于学习和使用
1. 选择器机制 - 支持类、ID、属性等多种选择器
2. 伪状态 - 支持hover、pressed等交互状态的样式定义
3. 层叠规则 - 遵循样式优先级和特异性规则
4. 统一控制 - 可应用于整个应用或特定控件
5. 动态更新 - 可在运行时修改样式

与MFC的对比

样式表基础

基本语法

Qt样式表的基本语法与CSS非常相似：

 /* 控件类型选择器 */
 QPushButton {
     background-color: #3498db;
     color: white;
     border: 2px solid #2980b9;
     border-radius: 5px;
     padding: 5px;
     font: bold 14px;
 }
 
 /* 伪状态 */
 QPushButton:hover {
     background-color: #2980b9;
 }
 
 QPushButton:pressed {
     background-color: #1a5276;
 }
 
 /* 禁用状态 */
 QPushButton:disabled {
     background-color: #bdc3c7;
     border-color: #95a5a6;
     color: #7f8c8d;
 }

应用样式表

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

 // 应用于整个应用程序
 QApplication app(argc, argv);
 app.setStyleSheet("QPushButton { background-color: yellow; }");
 
 // 应用于特定窗口
 QWidget window;
 window.setStyleSheet("QLabel { color: blue; }");
 
 // 应用于特定控件
 QPushButton *button = new QPushButton("样式按钮");
 button->setStyleSheet("background-color: green; color: white;");
 
 // 从文件加载样式表
 QFile file(":/styles/dark.qss");
 if (file.open(QFile::ReadOnly | QFile::Text)) {
     QTextStream stream(&file);
     app.setStyleSheet(stream.readAll());
 }

子控件样式

可以为控件的子部件设置样式：

 /* QComboBox下拉箭头样式 */
 QComboBox::drop-down {
     width: 20px;
     border-left: 1px solid #bdc3c7;
     background: #ecf0f1;
 }
 
 /* QComboBox下拉箭头图标 */
 QComboBox::down-arrow {
     image: url(:/images/arrow_down.png);
     width: 14px;
     height: 14px;
 }
 
 /* QScrollBar样式 */
 QScrollBar:vertical {
     background: #f5f5f5;
     width: 12px;
     margin: 0px;
 }
 
 QScrollBar::handle:vertical {
     background: #c0c0c0;
     min-height: 30px;
     border-radius: 3px;
 }
 
 QScrollBar::handle:vertical:hover {
     background: #a0a0a0;
 }

基本选择器

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

 /* 1. 类型选择器 - 应用于所有QPushButton */
 QPushButton {
     background-color: #3498db;
 }
 
 /* 2. 类选择器 - 应用于具有"warning"类的控件 */
 .warning {
     color: red;
 }
 
 /* 3. ID选择器 - 应用于objectName为"mainButton"的控件 */
 #mainButton {
     font-weight: bold;
 }
 
 /* 4. 属性选择器 - 应用于具有特定属性值的控件 */
 QPushButton[flat="true"] {
     border: none;
 }
 
 /* 5. 后代选择器 - 应用于QDialog内的QPushButton */
 QDialog QPushButton {
     border-radius: 3px;
 }
 
 /* 6. 子选择器 - 应用于QFrame的直接子QLabel */
 QFrame > QLabel {
     font-style: italic;
 }

应用类选择器

使用setProperty方法设置控件的类：

 QPushButton *warningBtn = new QPushButton("警告按钮");
 warningBtn->setProperty("class", "warning");
 
 // 在样式表中使用
 /*
 .warning {
     background-color: #e74c3c;
     color: white;
     font-weight: bold;
 }
 */

伪状态

Qt控件的不同状态可以使用伪状态选择器定义样式：

 /* 鼠标悬停 */
 QPushButton:hover {
     background-color: #2980b9;
 }
 
 /* 鼠标按下 */
 QPushButton:pressed {
     background-color: #1a5276;
 }
 
 /* 获得焦点 */
 QLineEdit:focus {
     border: 2px solid #3498db;
 }
 
 /* 选中状态 */
 QCheckBox:checked {
     color: #2ecc71;
 }
 
 /* 交替行 */
 QTableView::item:alternate {
     background-color: #f0f0f0;
 }
 
 /* 组合状态 */
 QPushButton:hover:disabled {
     background-color: #95a5a6;
 }

样式属性

盒模型属性

控制控件的大小、边距、边框和填充：

 QWidget {
     /* 大小 */
     min-width: 100px;
     max-width: 500px;
     min-height: 30px;
     max-height: 200px;
     
     /* 边距 */
     margin: 5px;              /* 四边统一边距 */
     margin-top: 10px;         /* 单边边距 */
     margin-right: 10px;
     margin-bottom: 10px;
     margin-left: 10px;
     
     /* 内边距 */
     padding: 10px;            /* 四边统一填充 */
     padding-top: 5px;         /* 单边填充 */
     padding-right: 5px;
     padding-bottom: 5px;
     padding-left: 5px;
     
     /* 边框 */
     border: 1px solid black;  /* 宽度、样式、颜色 */
     border-width: 2px;        /* 边框宽度 */
     border-style: solid;      /* 边框样式: solid, dashed, dotted */
     border-color: red;        /* 边框颜色 */
     
     /* 圆角 */
     border-radius: 5px;       /* 四角统一圆角 */
     border-top-left-radius: 10px;    /* 单角圆角 */
     border-top-right-radius: 10px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
 }

背景与前景

 QPushButton {
     /* 背景颜色 */
     background-color: #3498db;                  /* 纯色背景 */
     
     /* 背景渐变 */
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #3498db, stop: 1 #2980b9);
     
     /* 背景图片 */
     background-image: url(:/images/background.png);
     background-repeat: no-repeat;               /* 不重复 */
     background-position: center;                /* 居中 */
     
     /* 前景色（文本颜色） */
     color: white;
 }
 
 /* 使用径向渐变 */
 QLabel {
     background: qradialgradient(cx: 0.5, cy: 0.5, radius: 1, fx: 0.5, fy: 0.5,
                                 stop: 0 white, stop: 1 #3498db);
 }
 
 /* 使用圆锥渐变 */
 QProgressBar {
     background: qconicalgradient(cx: 0.5, cy: 0.5, angle: 0,
                                 stop: 0 #3498db, stop: 0.5 #2ecc71, stop: 1 #e74c3c);
 }

字体与文本

QLabel {
    /* 字体系列 */
    font-family: "Arial", sans-serif;
    
    /* 字体大小 */
    font-size: 14px;
    
    /* 字体粗细 */
    font-weight: bold;        /* normal, bold, 100-900 */
    
    /* 字体样式 */
    font-style: italic;       /* normal, italic, oblique */
    
    /* 字体组合简写 */
    font: italic bold 14px "Arial";
    
    /* 文本对齐 */
    text-align: center;       /* left, right, center, justify */
    
    /* 文本装饰 */
    text-decoration: underline;   /* none, underline, overline, line-through */
    
    /* 字母间距 */
    letter-spacing: 2px;
}

定位与布局

/* 绝对定位 */
QLabel#title {
    position: absolute;
    top: 10px;
    left: 20px;
    width: 200px;
    height: 30px;
}

/* Z轴顺序 */
QWidget {
    z-index: 10;    /* 控制叠放顺序，值越大越靠前 */
}

高级样式技巧

自定义复杂控件样式

以下是为QTabWidget设置样式的示例：

/* 标签栏样式 */
QTabWidget::pane {
    border: 1px solid #bdc3c7;
    background: white;
    top: -1px;
}

QTabBar::tab {
    background: #ecf0f1;
    border: 1px solid #bdc3c7;
    border-bottom: none;
    padding: 6px 12px;
    margin-right: 2px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

QTabBar::tab:selected {
    background: white;
    margin-bottom: -1px;
    padding-bottom: 7px;
}

QTabBar::tab:hover:!selected {
    background: #d6dbdf;
}

表格样式

QTableView {
    background-color: white;
    alternate-background-color: #f9f9f9;     /* 交替行背景色 */
    selection-background-color: #3498db;     /* 选中项背景色 */
    selection-color: white;                  /* 选中项文本色 */
    gridline-color: #dcdcdc;                 /* 网格线颜色 */
}

/* 表头样式 */
QHeaderView::section {
    background-color: #f0f0f0;
    border: 1px solid #dcdcdc;
    padding: 4px;
    font-weight: bold;
}

/* 奇数行样式 */
QTableView::item:alternate {
    background-color: #f9f9f9;
}

/* 选中行样式 */
QTableView::item:selected {
    background-color: #3498db;
    color: white;
}

/* 悬停样式 */
QTableView::item:hover {
    background-color: #e6f3ff;
}

模拟主题切换

创建不同的主题样式表并在运行时切换：

// 主题管理类
class ThemeManager : public QObject
{
    Q_OBJECT
public:
    enum Theme { Light, Dark, Blue };
    
    static ThemeManager* instance()
    {
        static ThemeManager instance;
        return &instance;
    }
    
    void applyTheme(Theme theme)
    {
        QString styleSheet;
        switch (theme) {
        case Light:
            styleSheet = loadStyleSheet(":/styles/light.qss");
            break;
        case Dark:
            styleSheet = loadStyleSheet(":/styles/dark.qss");
            break;
        case Blue:
            styleSheet = loadStyleSheet(":/styles/blue.qss");
            break;
        }
        
        qApp->setStyleSheet(styleSheet);
        emit themeChanged(theme);
    }
    
signals:
    void themeChanged(Theme theme);
    
private:
    QString loadStyleSheet(const QString &path)
    {
        QFile file(path);
        if (file.open(QFile::ReadOnly | QFile::Text)) {
            QTextStream stream(&file);
            return stream.readAll();
        }
        return QString();
    }
};

// 使用方法
ThemeManager::instance()->applyTheme(ThemeManager::Dark);

使用图像资源

在样式表中使用图像资源：

/* 使用Qt资源系统中的图像 */
QPushButton#addButton {
    border: none;
    background-image: url(:/images/add.png);
    background-repeat: no-repeat;
    background-position: center;
    min-width: 24px;
    min-height: 24px;
}

/* 使用状态相关图像 */
QPushButton#homeButton {
    border: none;
    background-image: url(:/images/home_normal.png);
}

QPushButton#homeButton:hover {
    background-image: url(:/images/home_hover.png);
}

QPushButton#homeButton:pressed {
    background-image: url(:/images/home_pressed.png);
}

自定义属性与选择器

使用自定义属性创建更灵活的样式选择器：

// 在C++代码中设置自定义属性
QPushButton *infoButton = new QPushButton("信息");
infoButton->setProperty("buttonType", "info");

QPushButton *warningButton = new QPushButton("警告");
warningButton->setProperty("buttonType", "warning");

QPushButton *errorButton = new QPushButton("错误");
errorButton->setProperty("buttonType", "error");

/* 在样式表中使用自定义属性选择器 */
QPushButton[buttonType="info"] {
    background-color: #3498db;
    color: white;
}

QPushButton[buttonType="warning"] {
    background-color: #f39c12;
    color: white;
}

QPushButton[buttonType="error"] {
    background-color: #e74c3c;
    color: white;
}

样式表与Qt Designer集成

在Designer中应用样式表

Qt Designer提供了直接编辑样式表的功能：

0. 在属性编辑器中设置样式表：
1. 选择控件，在属性编辑器中找到"styleSheet"属性
2. 点击"..."按钮打开样式表编辑器
3. 输入CSS样式规则
4. 使用样式表编辑器：
5. 提供语法高亮
6. 支持属性自动完成
7. 可立即预览效果

在项目中管理样式表

将样式表作为资源文件管理：

0. 创建.qrc资源文件：
1. <!DOCTYPE RCC>
   <RCC version="1.0">
   <qresource prefix="/styles">
   <file>default.qss</file>
   <file>dark.qss</file>
   <file>light.qss</file>
   </qresource>
   </RCC>
2. 在代码中加载样式表：
3. QFile file(":/styles/default.qss");
   if (file.open(QFile::ReadOnly | QFile::Text)) {
   QTextStream stream(&file);
   qApp->setStyleSheet(stream.readAll());
   }
4. 允许用户选择主题：
5. QAction *defaultThemeAction = new QAction("默认主题", this);
   connect(defaultThemeAction, &QAction::triggered, [=]() {
   loadStyleSheet(":/styles/default.qss");
   });
   QAction *darkThemeAction = new QAction("暗色主题", this);
   connect(darkThemeAction, &QAction::triggered, [=]() {
   loadStyleSheet(":/styles/dark.qss");
   });
   // 添加到菜单
   QMenu *themeMenu = menuBar()->addMenu("主题");
   themeMenu->addAction(defaultThemeAction);
   themeMenu->addAction(darkThemeAction);

样式表调试与性能

调试技巧

0. 设置可见边框：
1. /* 临时将所有控件添加边框，便于查看布局 */
   * {
   border: 1px solid red;
   }
2. 使用QSS Inspector工具：
3. 可视化查看应用的样式继承和覆盖关系
4. 实时修改样式并查看效果
5. 不正确的选择器：
6. 检查控件类名是否正确（如QWidget而不是Widget）
7. 检查objectName是否正确（区分大小写）

性能考虑

0. 避免过度复杂的选择器：
1. 嵌套层级过多会降低性能
2. 尝试减少使用后代选择器（空格）
3. 限制样式表大小：
4. 分割大型样式表为多个主题文件
5. 仅在需要时加载特定样式
6. 避免频繁更新样式表：
7. 样式表更新会触发控件重绘
8. 批量更新样式而不是频繁小更新

响应式布局与样式

结合布局管理器和样式表实现响应式UI：

// 使用样式表设置最小/最大尺寸和伸缩规则
void MainWindow::resizeEvent(QResizeEvent *event)
{
    int width = event->size().width();
    
    if (width < 600) {
        // 小屏幕样式
        setStyleSheet("QToolBar { icon-size: 16px; } "
                     "QLabel { font-size: 10px; }");
    } else if (width < 1000) {
        // 中等屏幕样式
        setStyleSheet("QToolBar { icon-size: 24px; } "
                     "QLabel { font-size: 12px; }");
    } else {
        // 大屏幕样式
        setStyleSheet("QToolBar { icon-size: 32px; } "
                     "QLabel { font-size: 14px; }");
    }
    
    QMainWindow::resizeEvent(event);
}

与平台原生风格集成

继承平台风格

在保持平台原生外观的同时自定义部分控件：

// 获取当前平台的默认样式表
QString platformStyle = qApp->styleSheet();

// 添加自定义样式，保留平台特性
QString customStyle = "QPushButton { background-color: #3498db; color: white; }";
qApp->setStyleSheet(platformStyle + customStyle);

选择性覆盖

仅为特定控件应用自定义样式，其他保持平台风格：

/* 只修改QPushButton，其他控件保持默认样式 */
QPushButton {
    background-color: #3498db;
    color: white;
    border-radius: 5px;
    padding: 5px 10px;
}

/* 特定ID的控件单独设置样式 */
#loginButton {
    background-color: #2ecc71;
}

从MFC迁移的建议

1. 功能映射

2. 迁移策略

0. 识别可样式化的元素：
1. 查找MFC代码中的OnPaint和DrawItem实现
2. 识别自定义控件类和特殊绘制代码
3. 转换为样式表：
4. 将GDI绘制边框转为border样式
5. 将背景填充转为background-color
6. 将字体设置转为font系列属性
7. 将状态相关绘制转为伪状态样式
8. 组织样式表：
9. 为不同的控件类型创建基本样式
10. 使用ID和类选择器处理特殊情况
11. 考虑创建多个主题样式表
12. 调整和优化：
13. 测试不同平台和分辨率下的外观
14. 添加响应式设计元素
15. 优化性能和加载时间

3. 常见陷阱

0. 选择器特异性：
1. 了解样式优先级规则以避免样式覆盖问题
2. 使用更具体的选择器解决冲突
3. 平台差异：
4. 某些样式属性在不同平台的行为可能不同
5. 跨平台测试样式表效果
6. 性能问题：
7. 复杂选择器和大量样式可能影响性能
8. 谨慎使用动态样式生成
9. 调试困难：
10. 样式应用问题可能难以诊断
11. 使用临时边框和颜色辅助调试

示例：MFC到Qt样式表转换

MFC自定义按钮实现:

// MFC代码
class CCustomButton : public CButton
{
protected:
    virtual void DrawItem(LPDRAWITEMSTRUCT lpDrawItemStruct)
    {
        CDC* pDC = CDC::FromHandle(lpDrawItemStruct->hDC);
        CRect rect = lpDrawItemStruct->rcItem;
        
        // 绘制边框
        pDC->Rectangle(rect);
        
        // 根据状态绘制不同背景
        if (lpDrawItemStruct->itemState & ODS_SELECTED)
            pDC->FillSolidRect(rect, RGB(0, 0, 200));  // 按下时为深蓝色
        else
            pDC->FillSolidRect(rect, RGB(0, 0, 255));  // 正常时为蓝色
        
        // 绘制文本
        CString str;
        GetWindowText(str);
        pDC->SetTextColor(RGB(255, 255, 255));  // 白色文本
        pDC->DrawText(str, rect, DT_CENTER | DT_VCENTER | DT_SINGLELINE);
    }
};

转换为Qt样式表:

/* Qt样式表 */
QPushButton {
    background-color: #0000ff;  /* 蓝色背景 */
    color: white;               /* 白色文本 */
    border: 1px solid black;    /* 黑色边框 */
    padding: 5px;
}

QPushButton:pressed {
    background-color: #0000c8;  /* 深蓝色背景 */
}

应用样式表:

 // Qt代码
 QPushButton *button = new QPushButton("按钮文本", this);
 // 应用样式表
 button->setStyleSheet(
     "QPushButton {"
     "    background-color: #0000ff;"
     "    color: white;"
     "    border: 1px solid black;"
     "    padding: 5px;"
     "}"
     "QPushButton:pressed {"
     "    background-color: #0000c8;"
     "}"
 );