QT学习笔记3（QSS编写）

ゞ浴缸里的玫瑰 2022-12-25 00:52 223阅读 0赞

## 1 QSS概述 ##

QSS(Qt Style Sheets)是Qt的样式表,为Qt提供许多的属性、伪状态、子控件等机制来自定义控件的外观,与HTML中的CSS类似.

## 2 使用方法 ##

### 2.1 在Qt Designer中设置stylesheet ###

### 2.2 在代码中调用控制的`stylesheet()`接口来设置样式 ###

### 2.3 将QSS内容保存到文件中，通过代码读取该文件内容。 ###

void MainWindow::load_style_sheet(const QString &fileName)
    {
        QFile file(fileName);
        if(file.open(QFile::ReadOnly)) {
            qApp->setStyleSheet(file.readAll());
            file.close();
        }
    }

### 2.4 使用命令行参数"-stylesheet"来指定要加载的QSS文件 ###

./QtDemo -stylesheet test.qss

## 3 语法规则 ##

QSS的语法规则与CSS类型。

## 4 选择器类型 ##

<table> 
 <thead> 
  <tr> 
   <th>选择器类型</th> 
   <th>举例</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>通配选择器</td> 
   <td>*</td> 
   <td>匹配所有控件</td> 
  </tr> 
  <tr> 
   <td>类型选择器</td> 
   <td>QPushButton</td> 
   <td>匹配所有QPushButton和其子类的对象</td> 
  </tr> 
  <tr> 
   <td>属性选择器</td> 
   <td>QPushButton[flat="flase"]</td> 
   <td>匹配所有属性flat的值为flase的QPushButton类型对象</td> 
  </tr> 
  <tr> 
   <td>类选择器</td> 
   <td>.QPushButton</td> 
   <td>匹配所有QPushButton的对象,但是不匹配其子类的对象</td> 
  </tr> 
  <tr> 
   <td>ID选择器</td> 
   <td>#myBtn</td> 
   <td>匹配所有ID为<code>myBtn</code>的控件对象,此ID为对象的objectName属性</td> 
  </tr> 
  <tr> 
   <td>后代选择器</td> 
   <td>QDialog QPushButton</td> 
   <td>所有QDialog容器中包含QPushButton类型的对象,不管直接或间接包含</td> 
  </tr> 
  <tr> 
   <td>子选择器</td> 
   <td>QDialog &gt; QPushButton</td> 
   <td>所有QDialog容器下所有QPushButton对象,必须是直接包含</td> 
  </tr> 
 </tbody> 
</table>

*  以上选择器可以联合使用,并且支持一次设置多个选择器类型,用逗号隔开,如`#object1,#object2,#object3`表示所有这个ID使用同个规则;`QDialog #object1`表示选择所有QDialog下所有ID为object1的对象.

## 5 属性 ##

在QSS中设置的属性分为两种:

*  样式表的属性, 如border、border-radius、background-color等属性，即为CSS标准的一部分属性
 *  QObject系统的属性，如QLable::alignment、QLabel::text、QLabel::wordWrap等属性，即在QObject框架中使用“Q\_PROPERTY”申明的属性。

在设置QSS时，不仅可以设置样式表属性，也可以设置QObject定义的属性，设置QOjbect属性时，需要在属性名前面加上"qproperty-"。比如要设置QLabel::alignment属性时在QSS中需要写成`qproperty-alignment`，如果属性有多个值组成，需要将这个值用单引号和双引号括起来。

以下是使用QSS属性和QObject属性的示例。

QPushButton * pushButton = new QPushButton(this);
    
        pushButton->setObjectName("pushButton");
    
        pushButton->setStyleSheet("#pushButton{"
                                  "background-color:red;"
                                  "color:white;"
                                  "width:300px;"
                                  "height:30px;"
                                  "}");

## 6 子控件 ##

## 7 伪状态 ##

<table> 
 <thead> 
  <tr> 
   <th>伪状态</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:active</td> 
   <td>部件存于激活的窗口时，该状态有效</td> 
  </tr> 
  <tr> 
   <td>:adjoins-item</td> 
   <td>This state is set when the ::branch of a QTreeView is adjacent to an item.</td> 
  </tr> 
  <tr> 
   <td>:alternate</td> 
   <td>This state is set for every alternate row whe painting the row of a QAbstractItemView when QAbstractItemView::alternatingRowColors() is set to true.</td> 
  </tr> 
  <tr> 
   <td>:bottom</td> 
   <td>The item is positioned at the bottom. For example, a QTabBar that has its tabs positioned at the bottom.</td> 
  </tr> 
  <tr> 
   <td>:checked</td> 
   <td>The item is checked. For example, the checked state of QAbstractButton.</td> 
  </tr> 
  <tr> 
   <td>:closable</td> 
   <td>The items can be closed. For example, the QDockWidget has the QDockWidget::DockWidgetClosable feature turned on.</td> 
  </tr> 
  <tr> 
   <td>:closed</td> 
   <td>The item is in the closed state. For example, an non-expanded item in a QTreeView</td> 
  </tr> 
  <tr> 
   <td>:default</td> 
   <td>The item is the default. For example, a default QPushButton or a default action in a QMenu.</td> 
  </tr> 
  <tr> 
   <td>:disabled</td> 
   <td>The item is disabled.</td> 
  </tr> 
  <tr> 
   <td>:editable</td> 
   <td>The QComboBox is editable.</td> 
  </tr> 
  <tr> 
   <td>:edit-focus</td> 
   <td>The item has edit focus (See QStyle::State_HasEditFocus). This state is available only for Qt Extended applications.</td> 
  </tr> 
  <tr> 
   <td>:enabled</td> 
   <td>The item is enabled.</td> 
  </tr> 
  <tr> 
   <td>:exclusive</td> 
   <td>The item is part of an exclusive item group. For example, a menu item in a exclusive QActionGroup.</td> 
  </tr> 
  <tr> 
   <td>:first</td> 
   <td>The item is the first (in a list). For example, the first tab in a QTabBar.</td> 
  </tr> 
  <tr> 
   <td>:flat</td> 
   <td>The item is flat. For example, a flat QPushButton.</td> 
  </tr> 
  <tr> 
   <td>:floatable</td> 
   <td>The items can be floated. For example, the QDockWidget has the QDockWidget::DockWidgetFloatable feature turned on.</td> 
  </tr> 
  <tr> 
   <td>:focus</td> 
   <td>The item has input focus.</td> 
  </tr> 
  <tr> 
   <td>:has-children</td> 
   <td>The item has children. For example, an item in a QTreeView that has child items.</td> 
  </tr> 
  <tr> 
   <td>:has-siblings</td> 
   <td>The item has siblings. For example, an item in a QTreeView that siblings.</td> 
  </tr> 
  <tr> 
   <td>:horizontal</td> 
   <td>The item has horizontal orientation</td> 
  </tr> 
  <tr> 
   <td>:hover</td> 
   <td>The mouse is hovering over the item.</td> 
  </tr> 
  <tr> 
   <td>:indeterminate</td> 
   <td>The item has indeterminate state. For example, a QCheckBox or QRadioButton is partially checked.</td> 
  </tr> 
  <tr> 
   <td>:last</td> 
   <td>The item is the last (in a list). For example, the last tab in a QTabBar.</td> 
  </tr> 
  <tr> 
   <td>:left</td> 
   <td>The item is positioned at the left. For example, a QTabBar that has its tabs positioned at the left.</td> 
  </tr> 
  <tr> 
   <td>:maximized</td> 
   <td>The item is maximized. For example, a maximized QMdiSubWindow.</td> 
  </tr> 
  <tr> 
   <td>:middle</td> 
   <td>The item is in the middle (in a list). For example, a tab that is not in the beginning or the end in a QTabBar.</td> 
  </tr> 
  <tr> 
   <td>:minimized</td> 
   <td>The item is minimized. For example, a minimized QMdiSubWindow.</td> 
  </tr> 
  <tr> 
   <td>:movable</td> 
   <td>The item can be moved around. For example, the QDockWidget has the QDockWidget::DockWidgetMovable feature turned on.</td> 
  </tr> 
  <tr> 
   <td>:no-frame</td> 
   <td>The item has no frame. For example, a frameless QSpinBox or QLineEdit.</td> 
  </tr> 
  <tr> 
   <td>:non-exclusive</td> 
   <td>The item is part of a non-exclusive item group. For example, a menu item in a non-exclusive QActionGroup.</td> 
  </tr> 
  <tr> 
   <td>:off</td> 
   <td>For items that can be toggled, this applies to items in the "off" state.</td> 
  </tr> 
  <tr> 
   <td>:on</td> 
   <td>For items that can be toggled, this applies to widgets in the "on" state.</td> 
  </tr> 
  <tr> 
   <td>:only-one</td> 
   <td>The item is the only one (in a list). For example, a lone tab in a QTabBar.</td> 
  </tr> 
  <tr> 
   <td>:open</td> 
   <td>The item is in the open state. For example, an expanded item in a QTreeView, or a QComboBox or QPushButton with an open menu.</td> 
  </tr> 
  <tr> 
   <td>:next-selected</td> 
   <td>The next item (in a list) is selected. For example, the selected tab of a QTabBar is next to this item.</td> 
  </tr> 
  <tr> 
   <td>:pressed</td> 
   <td>The item is being pressed using the mouse.</td> 
  </tr> 
  <tr> 
   <td>:previous-selected</td> 
   <td>The previous item (in a list) is selected. For example, a tab in a QTabBar that is next to the selected tab.</td> 
  </tr> 
  <tr> 
   <td>:read-only</td> 
   <td>The item is marked read only or non-editable. For example, a read only QLineEdit or a non-editable QComboBox.</td> 
  </tr> 
  <tr> 
   <td>:right</td> 
   <td>The item is positioned at the right. For example, a QTabBar that has its tabs positioned at the right.</td> 
  </tr> 
  <tr> 
   <td>:selected</td> 
   <td>The item is selected. For example, the selected tab in a QTabBar or the selected item in a QMenu.</td> 
  </tr> 
  <tr> 
   <td>:top</td> 
   <td>The item is positioned at the top. For example, a QTabBar that has its tabs positioned at the top.</td> 
  </tr> 
  <tr> 
   <td>:unchecked</td> 
   <td>The item is unchecked.</td> 
  </tr> 
  <tr> 
   <td>:vertical</td> 
   <td>The item has vertical orientation.</td> 
  </tr> 
  <tr> 
   <td>:window</td> 
   <td>The widget is a window (i.e top level widget)</td> 
  </tr> 
 </tbody> 
</table>

## 级联与冲突 ##

## 资料 ##

*  《[QSS总结][QSS]》
 *  [官方参考文档][Link 1]

## FAQ ##

### 继承QWidget后, setStyleSheet无效 ###

解决方法:需要重载paintEvent函数,在该函数中加上以下代码:

QStyleOption opt;
    opt.init(this);
    QPainter p(this);
    style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
    QWidget::paintEvent(e);

[QSS]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.cnblogs.com%2Fwangqiguo%2Fp%2F4960776.html%23_label0
[Link 1]: https://links.jianshu.com/go?to=http%3A%2F%2Fdoc.qt.io%2Fqt-5%2Fstylesheet-reference.html