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 选择器类型
| 选择器类型 | 举例 | 说明 |
|---|---|---|
| 通配选择器 | * | 匹配所有控件 |
| 类型选择器 | QPushButton | 匹配所有QPushButton和其子类的对象 |
| 属性选择器 | QPushButton[flat="flase"] | 匹配所有属性flat的值为flase的QPushButton类型对象 |
| 类选择器 | .QPushButton | 匹配所有QPushButton的对象,但是不匹配其子类的对象 |
| ID选择器 | #myBtn | 匹配所有ID为myBtn的控件对象,此ID为对象的objectName属性 |
| 后代选择器 | QDialog QPushButton | 所有QDialog容器中包含QPushButton类型的对象,不管直接或间接包含 |
| 子选择器 | QDialog > QPushButton | 所有QDialog容器下所有QPushButton对象,必须是直接包含 |
- 以上选择器可以联合使用,并且支持一次设置多个选择器类型,用逗号隔开,如
#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属性的示例。
QLabel {
border-radius: 3px;
background-color: white;
qproperty-alignment: AlignCenter; /*或者是 "AlignHCenter|AlignVCenter"*/
qproperty-text:'This is a Text Mesage';
}
6 子控件
7 伪状态
| 伪状态 | 描述 |
|---|---|
| :active | 部件存于激活的窗口时，该状态有效 |
| :adjoins-item | This state is set when the ::branch of a QTreeView is adjacent to an item. |
| :alternate | This state is set for every alternate row whe painting the row of a QAbstractItemView when QAbstractItemView::alternatingRowColors() is set to true. |
| :bottom | The item is positioned at the bottom. For example, a QTabBar that has its tabs positioned at the bottom. |
| :checked | The item is checked. For example, the checked state of QAbstractButton. |
| :closable | The items can be closed. For example, the QDockWidget has the QDockWidget::DockWidgetClosable feature turned on. |
| :closed | The item is in the closed state. For example, an non-expanded item in a QTreeView |
| :default | The item is the default. For example, a default QPushButton or a default action in a QMenu. |
| :disabled | The item is disabled. |
| :editable | The QComboBox is editable. |
| :edit-focus | The item has edit focus (See QStyle::State_HasEditFocus). This state is available only for Qt Extended applications. |
| :enabled | The item is enabled. |
| :exclusive | The item is part of an exclusive item group. For example, a menu item in a exclusive QActionGroup. |
| :first | The item is the first (in a list). For example, the first tab in a QTabBar. |
| :flat | The item is flat. For example, a flat QPushButton. |
| :floatable | The items can be floated. For example, the QDockWidget has the QDockWidget::DockWidgetFloatable feature turned on. |
| :focus | The item has input focus. |
| :has-children | The item has children. For example, an item in a QTreeView that has child items. |
| :has-siblings | The item has siblings. For example, an item in a QTreeView that siblings. |
| :horizontal | The item has horizontal orientation |
| :hover | The mouse is hovering over the item. |
| :indeterminate | The item has indeterminate state. For example, a QCheckBox or QRadioButton is partially checked. |
| :last | The item is the last (in a list). For example, the last tab in a QTabBar. |
| :left | The item is positioned at the left. For example, a QTabBar that has its tabs positioned at the left. |
| :maximized | The item is maximized. For example, a maximized QMdiSubWindow. |
| :middle | 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. |
| :minimized | The item is minimized. For example, a minimized QMdiSubWindow. |
| :movable | The item can be moved around. For example, the QDockWidget has the QDockWidget::DockWidgetMovable feature turned on. |
| :no-frame | The item has no frame. For example, a frameless QSpinBox or QLineEdit. |
| :non-exclusive | The item is part of a non-exclusive item group. For example, a menu item in a non-exclusive QActionGroup. |
| :off | For items that can be toggled, this applies to items in the "off" state. |
| :on | For items that can be toggled, this applies to widgets in the "on" state. |
| :only-one | The item is the only one (in a list). For example, a lone tab in a QTabBar. |
| :open | The item is in the open state. For example, an expanded item in a QTreeView, or a QComboBox or QPushButton with an open menu. |
| :next-selected | The next item (in a list) is selected. For example, the selected tab of a QTabBar is next to this item. |
| :pressed | The item is being pressed using the mouse. |
| :previous-selected | The previous item (in a list) is selected. For example, a tab in a QTabBar that is next to the selected tab. |
| :read-only | The item is marked read only or non-editable. For example, a read only QLineEdit or a non-editable QComboBox. |
| :right | The item is positioned at the right. For example, a QTabBar that has its tabs positioned at the right. |
| :selected | The item is selected. For example, the selected tab in a QTabBar or the selected item in a QMenu. |
| :top | The item is positioned at the top. For example, a QTabBar that has its tabs positioned at the top. |
| :unchecked | The item is unchecked. |
| :vertical | The item has vertical orientation. |
| :window | The widget is a window (i.e top level widget) |
级联与冲突
资料
FAQ
继承QWidget后, setStyleSheet无效
解决方法:需要重载paintEvent函数,在该函数中加上以下代码:
QStyleOption opt;
opt.init(this);
QPainter p(this);
style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
QWidget::paintEvent(e);
