Qt 之 QSS技巧

这里默认大家已经会html 和 CSS的一些基本的东西，如果不会的话，花个半天的时间找个网站学习一下就差不多入门了。

我们知道html里面可以设置id 和 class属性来分别区分同一种类型的控件，Qt虽说支持QSS，但是它毕竟是C++开发的，怎么去区分呢？这里就用到了Qt的元对象，每一个QObject的子类都可以自定义属性，然后我们通过属性选择器就可以实现这个功能了。

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QPushButton>
#include <QHBoxLayout>

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    QPushButton *m_red_btn;
    QPushButton *m_blue_btn;
    QHBoxLayout *m_main_layout;
};
#endif // WIDGET_H

#include "widget.h"
#include <QString>
#include <QVariant>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    QString qss = "QPushButton[id=\"blue\"]{background-color:#40bad5;color:#ffffff} QPushButton[id=\"red\"]{background:#f6acc8;color:#ffffff}";

    m_red_btn = new QPushButton(tr("红"), this);
    m_red_btn->setProperty("id", QVariant("red"));
    m_blue_btn = new QPushButton(tr("蓝"), this);
    m_blue_btn->setProperty("id", QVariant("blue"));
    m_main_layout = new QHBoxLayout(this);
    m_red_btn->setStyleSheet(qss);
    m_blue_btn->setStyleSheet(qss);

    m_main_layout->addWidget(m_red_btn);
    m_main_layout->addWidget(m_blue_btn);
    setLayout(m_main_layout);
}

Widget::~Widget()
{
}

效果如图：

这里贴上基本的选择器
1）类选择器 QPushButton 匹配QPushButton及其子类
2）属性选择器 QPushButton[flat=“false”]（博主当时这个用的比较的多）
3）类选择器 .QPushButton 匹配QPushButton的实例，但不匹配其子类的实例。
4）后代选择器 QDialog QPushButton 只匹配QDialog中的所有层级的QPushbutton的样式（这种层级是指qobject树所表示的层级）
5）子选择器 QDialog > QPushButton 只匹配QDialog中的第一层级的QPushbutton的样式（这种层级是指qobject树所表示的层级）

这样有什么好处呢？可以减少QSS文件的数目，本来命名就已经够头疼的了，干嘛还要给自己添加麻烦，对吧！