23、Qt样式表（QSS）：让界面真正“活”起来

说实话，我刚开始用Qt做界面开发时，对QSS是有点不屑的。心想：不就是CSS那一套搬到C++里吗？能有多大花头？直到有一次，客户要求三天内把一套土黄土黄的工业软件界面，改成科技蓝风格——我硬是只改了QSS文件，一行C++代码没动，就搞定了。嗯，从那天起，我对QSS的态度彻底变了。

今天咱们就来聊聊Qt样式表，也就是QSS。它不是什么高深技术，但用好了，能让你的界面从“能用”变成“好看”。

23.1 QSS语法：跟CSS几乎一样

QSS的语法规则很简单，说白了就是：选择器 + 属性声明。

QPushButton {
    background-color: #3498db;
    color: white;
    border-radius: 6px;
    padding: 8px 16px;
}

每个属性用冒号赋值，分号结尾。花括号里可以写一堆属性。我个人的习惯是，同类属性放一起，比如背景相关的放一块，字体相关的放一块，这样改起来好找。

23.2 选择器：精准定位你的控件

选择器就是告诉Qt：你要给哪个控件化妆。常用的有这么几种：

我在项目中遇到过一个问题：用类型选择器给QComboBox的下拉箭头改样式，死活没效果。后来才发现，下拉箭头是QComboBox的子控件，得用子控件选择器才行。嗯，这个坑我踩过，你们别踩了。

23.3 常见属性：从背景到边框

QSS支持的属性很多，但常用的就那么几个。我给你们列一下：

• 背景相关：background-color、background-image、background-repeat
• 边框相关：border、border-radius、border-color
• 字体相关：font-family、font-size、font-weight、color
• 内边距：padding（上右下左）
• 外边距：margin
• 宽高：min-width、max-width、min-height、max-height

QLineEdit {
    border: 2px solid #bdc3c7;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 14px;
    background-color: #ecf0f1;
}

QLineEdit:focus {
    border-color: #3498db;
    background-color: white;
}

你看，上面这个例子用了伪状态 :focus。QSS支持很多伪状态，比如 :hover、:pressed、:checked、:disabled。你想想看，一个按钮在不同状态下有不同颜色，是不是比死板的灰色按钮舒服多了？

23.4 动态样式切换：运行时换肤

QSS最爽的一点是什么？是可以在程序运行时动态切换样式。说白了，就是换肤功能。

// 白天模式
QString lightStyle = R"(
    QMainWindow { background-color: #f5f5f5; }
    QPushButton { 
        background-color: #3498db; 
        color: white; 
        border-radius: 4px;
    }
)";

// 夜间模式
QString darkStyle = R"(
    QMainWindow { background-color: #2c3e50; }
    QPushButton { 
        background-color: #e74c3c; 
        color: white; 
        border-radius: 4px;
    }
)";

// 切换
void MainWindow::switchToDarkMode() {
    qApp->setStyleSheet(darkStyle);
}

我做过一个项目，用户要求能一键切换三种主题。我就在设置界面放了三个单选按钮，每个按钮对应一套QSS字符串。切换时调用 qApp->setStyleSheet()，瞬间生效。用户反馈说“这软件真高级”。其实背后就是几行QSS的事。

23.5 自定义控件外观：QSS的终极玩法

有些控件长得太死板，比如QCheckBox、QRadioButton、QSlider。QSS可以让你彻底改变它们的样子。

举个例子，自定义一个开关样式的复选框：

QCheckBox::indicator {
    width: 40px;
    height: 20px;
    border-radius: 10px;
    background-color: #bdc3c7;
}

QCheckBox::indicator:checked {
    background-color: #2ecc71;
}

QCheckBox::indicator:unchecked:hover {
    background-color: #95a5a6;
}

你看，通过 ::indicator 子控件选择器，我们把复选框的勾选框变成了一个圆角矩形。再配合伪状态，就能做出类似手机开关的效果。

我做过一个音乐播放器，音量滑块默认是那种细长条，太丑了。我用QSS把滑块轨道改成了渐变色的圆角条，滑块按钮改成了圆形带阴影。效果嘛，跟主流播放器差不多。

23.6 知识体系总览

下面这张图，是我自己总结的QSS知识结构。你看一眼，心里就有数了：

QSS这东西，说难不难，说简单也不简单。你只要记住：选择器定位控件，属性定义样式，伪状态处理交互，子控件改造细节。把这四点吃透了，Qt界面美化这块你就出师了。

我个人建议，刚开始学的时候别贪多。先拿一个按钮练手，改背景、改圆角、改悬停效果。搞定了再扩展到其他控件。一步一步来，比一口气吃成胖子强。

公众号:蓝海资料掘金营，微信deep3321