Qt之QSS样式表

一、简介

1、Qt样式表是一种强大的机制，它允许您自定义小部件的外观，而不仅仅是通过子类化QStyle已经可以实现的功能。Qt样式表的概念、术语和语法与HTML的CSS样式表类似。

2、样式表是文本规范，可以使用QApplication::setStyleSheet()在整个应用程序上设置，也可以使用QWidget::setStyleSheet()在特定小部件(及其子部件)上设置。如果在不同级别上设置了多个样式表，Qt将从所有设置的样式表派生有效样式表。这称为级联。

二、样式表语法

样式的规则1：样式规则由选择器和声明组成。选择器指定哪些小部件受规则影响;声明指定应该在小部件上设置哪些属性。

如：QPushButton { color : red }。

其中QPushButton就是选择器，'{ color : red }'是声明部分。 color就是属性，red就是指定给该属性的值。

该语句的意思是QPushButton及其子类的前景色是红色。

注意：Qt样式表通常不区分大小写，除了类名、对象名和Qt属性名。

样式的规则2：可以为同一个声明指定多个选择器，使用逗号(，)分隔选择器。

QPushButton, QLineEdit, QComboBox {color: red}

样式的规则3：声明多个属性。在{}里面用 ; 分割

QPushButton { color: red; background-color: white }

样式的规则4：选择器的不同写法

用法	例子	详解
通配选择器	*	通配所有的控件
类选择器	QPushButton	匹配QPushButton及其子类
属性选择器	QPushButton[flat="false"]
类选择器	.QPushButton	匹配QPushButton的实例，但不匹配其子类的实例。
id选择器	QPushButton#okButton	匹配对象名称（object name）为okButton的所有QPushButton实例。
后代选择器	QDialog QPushButton	只匹配QDialog中的所有层级的QPushbutton的样式（这种层级是指qobject树所表示的层级）
子选择器	QDialog > QPushButton	只匹配QDialog中的第一层级的QPushbutton的样式（这种层级是指qobject树所表示的层级）

样式的规则5：控件中的子控件的样式设置。

对于一个复杂的控件，很有必要去控制这个控件的子控件。比如QComboBox的下拉按钮和QSpinBox的上下调整大小的箭头按钮。选择器可以包含子控件，这些子控件可以将规则的应用程序限制为特定的小部件子控件。如：

QComboBox::drop-down { image: url(dropdown.png) }。指定了下拉按钮的填充图片

样式的规则6：伪状态。选择器可能包含伪状态，这些伪状态表示根据小部件的状态限制规则的应用。伪状态出现在选择器的末尾，中间有一个冒号(:)。如：

QPushButton:hover { color: white } 表示当鼠标悬停时颜色为白色

伪状态可以使用感叹号！操作符进行否定。如：

QRadioButton:!hover { color: red } 表示当鼠标不是悬停时颜色为红色

还可以有多个伪状态一起使用：

QCheckBox:hover:checked { color: white } 表示 当鼠标悬停 并且 该复选框被选中的时候颜色为白色

QCheckBox:hover, QCheckBox:checked { color: white } 表示当鼠标悬停或着被选中的时候 颜色为白色

样式的规则7：优先顺序的确定。如：

QPushButton#okButton { color: gray }

QPushButton { color: red }

这两条规则都会应用到名为okButton的按钮上，但是他们为同一个属性设置了不同的颜色，这会有冲突，那么要解决这样的冲突就必须考虑到选择器的特异性(这个词怎么理解，我理解为这个特异性为更加特殊，实际上CSS上用权重表示这里的特异性)，显然QPushButton#okButton仅仅针对对象名为okButton的控件有效果，而QPushButton却对所有的QPushButton的实例或者是其子类的实例有效果，显然QPushButton#okButton选择器更加特殊，也就是更具有特异性。所以最终okButton前景色被应用为灰色。如果两条规则的特异性一样，那么就选择放在后面的那一条。

以上为语法部分。

————————————————————————————————————————————————————————

以下为Qt中的实例应用：

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    //为应用程序中所有QLineEdit设置前景色和背景色
//    qApp->setStyleSheet("QLineEdit{color:red;background-color:yellow}");
    //仅限某个控件下的QLineEdit设置前景颜色和背景色
//    this->setStyleSheet("QLineEdit{color:yellow;background-color:red}");
    //仅限某个控件下的objectname为nameEdit的控件设置设置背景色
//    this->setStyleSheet("QLineEdit#nameEdit{background-color:blue}");

    //某个控件的属性设置为某个值时，应用此样式表
//    qApp->setStyleSheet("*[mandatoryField=\"true\"]{background-color: yellow}");
    //指定边框属性
//    qApp->setStyleSheet("QPushButton#evilButton{background-color:red;"
//                        "border-style:outset;border-width:2px;border-color:beige;"
//                        "border-radius:10px;font: bold 14px;min-width:10em;padding:6px;}"
//                        "QPushButton#evilButton:pressed{background-color:rgb(224, 0, 0);border-style: inset;}"
//                        "QPushButton::menu-indicator {"
//                        "image: url(:/20190123165357.png);"
//                        "subcontrol-position: right center;"
//                        "subcontrol-origin: padding;"
//                        "left: -2px;}");
    //
//    this->setStyleSheet("QLineEdit{color:red}"
//                        "QLineEdit[readOnly=\"true\"]{color:gray}"
//                        "#registrationDialog QLineEdit{color:brown}"
//                        "QDialog QLineEdit{color:brown}");
    this->setStyleSheet("QTextEdit,QListView{"
                        "background-color:white;"
                        "background-image:url(:/20190123165357.png);"
                        "background-attachment:fixed}");



    QVBoxLayout *mainLayout = new QVBoxLayout;
    setLayout(mainLayout);

    mainLayout->addWidget(new QLineEdit("1111"));
    QLineEdit *objectNameLineEdit = new QLineEdit("2222");
    objectNameLineEdit->setObjectName("nameEdit");
    //直接在该控件下指定样式
    objectNameLineEdit->setStyleSheet("color: blue;"
                                      "background-color: yellow;"
                                      "selection-color: yellow;"
                                      "selection-background-color: blue;");
    mainLayout->addWidget(objectNameLineEdit);

    QFormLayout *formLayout = new QFormLayout;
    QLineEdit *password = new QLineEdit;
    password->setProperty("mandatoryField",true);
    formLayout->addRow("密码:",password);
    mainLayout->addLayout(formLayout);

    QPushButton *evilButton = new QPushButton("邪恶按钮");
    evilButton->setObjectName("evilButton");
    mainLayout->addWidget(evilButton);
    QMenu *menu = new QMenu("菜单");
    evilButton->setMenu(menu);

    QLineEdit *readOnly = new QLineEdit("只读");
    readOnly->setReadOnly(true);
    mainLayout->addWidget(readOnly);

    QLineEdit *registrationDialog1 = new QLineEdit("registrationDialog1");
    registrationDialog1->setObjectName("registrationDialog");
    QLineEdit *registrationDialog2 = new QLineEdit("registrationDialog2");
    registrationDialog2->setObjectName("registrationDialog");
    mainLayout->addWidget(registrationDialog1);
    mainLayout->addWidget(registrationDialog2);

//    MyDialog *dialog = new MyDialog(this);
//    dialog->show();

    QTextEdit *textEdit = new QTextEdit("这是文本编辑框");
    mainLayout->addWidget(textEdit);
    QListView *listView = new QListView;
    QStringList list;
    list << "1111" << "2222" << "3333" << "4444";
    QStringListModel *model = new QStringListModel;
    model->setStringList(list);
    listView->setModel(model);
    mainLayout->addWidget(listView);
}