Qt界面美化QSS——(一)使用方式、语法(选择器、伪状态)
QSS——Qt Style Sheet,Qt通过样式表设置控件样式进行个性化定制、界面美化。
1.使用方式
1.1.Qt Designer
在Qt Designer中,每个控件都有styleSheet
属性,通过键入样式表,即可设置该控件的样式。如下图:
使用该方式的好处在于,可以直观看到设计效果,通过Ctrl+R
就可以预览窗体设计。并且在编辑样式表
窗口中添加资源、添加渐变、添加颜色、添加字体
,方便直接编辑特定样式的颜色。此类方式编辑的样式表会作用于当前控件及其所有子控件
。
1.2.QSS文件
使用QFile
读入样式表,使用setStyleSheet
进行设置。示例代码如下:
QApplication app(argc, argv);
QFile qss("StyleSheet.qss");
qss.open(QFile::ReadOnly);
app.setStyleSheet(qss.readAll());
qss.close();
此通过加载StyleSheet文件,对整个软件的所有控件样式进行设置。这种方式“一劳永逸”,可以设计自己的风格,所有软件重复使用。
Qt Designer方便直接界面调试,并且可以对颜色进行编辑。适合设计时使用
,当然也可以直接用作界面美化。当Qt Desinger编辑的样式表固定好之后,可以组织保存到QSS文件中,直接代码加载即可。
2.语法
2.1.基础语法
QSS同CSS语法规则类似,形式如下:
selector{attribute:value};
其中:
selector
选择器:通常情况下为控件类名(如QPushButton
);
attribute
属性:待设置的样式表属性(如background-color
);
value
值:属性赋值(如rgb(40, 85, 20);
);
QPushButton { color: red }
Qt样式表通常不区分大小写(即,color、Color、color和color指的是同一属性)。但是是类名、对象名和Qt属性名,它们区分大小写。
2.2.共享属性
对于共享属性部分可以使用下面形式:
QCheckBox,QComboBox,QSpinBox
{
color:rgb(255,0,0);
background-color:rgb(255,255,255);
font:bold;
}
这样就设置了所有作用范围内的QCheckBox、QComboBox、QSpinBox的前景色、背景色和字体。
2.3.选择器(selector)
Qt样式表支持CSS2中定义的所有选择器。下表总结了最有用的选择器类型。
选择器 | 举例 | 解释 |
---|---|---|
通用选择器 | * | 所有 Qt 的 widget,即不声明选择器时,属性作用于所有组建 |
类型选择器 | QPushButton | 作用于QPushButton及其子类的实例。 |
属性选择器 | QPushButton[flat=“false”] | 作用于非平面(flat=“false”)的QPushButton实例。 |
类选择器 | .QPushButton | 作用于QPushButton的实例,但不匹配其子类的实例。(加了个’.’) |
ID选择器 | QPushButton#okButton | 作用于对象名称为okButton的所有QPushButton实例。 |
后代选择器 | QDialog QPushButton | 匹配作为QDialog的子体(子级、孙级等)的所有QPushButton实例。 |
子选择器 | QDialog > QPushButton | 匹配作为QDialog的直接子级的所有QPushButton实例。 |
子控制 | QComboBox::drop-down | 要设置复杂 widget 的样式,需要访问 widget 的子控件,如QComboBox的下拉按钮或QSpinBox的上下箭头。选择器可以包含子控件,从而可以将规则的应用限制到特定的 widget 子控件。 |
2.4.伪状态(Pseudo-States)
用户在操作时,可以根据不同的交互状态展示不同的用户样式,界面能够识别用户操作,不需要代码控制即可响应不同状态下的样式。例如:
QPushButton {
border: 1px solid #555;
padding: 4px;
min-width: 65px;
min-height: 12px;
}
QPushButton:hover {
background-color: #999;
}
QPushButton:pressed {
background-color: #333;
border-color: #555;
color: #AAA;
}
QPushButton:disabled {
color: #333333;
}
QPushButton在hover、pressed、disabled
状态时,分别展示不同的样式。
下列是从qt-5/stylesheet-reference中翻译过来的所有伪状态
。
Pseudo-State | Description |
---|---|
:active | 此状态在widget驻留在活动窗口中时设置。 |
adjoins-item | 此状态在QTreeView的::branch与项相邻时设置。 |
:alternate | 当QAbstractItemView::ternatingRowColors()设置为true时,将为绘制QAbstractItemView的行时的每隔一行设置此状态。 |
:bottom | 该项目位于底部。例如,标签位于底部的QTabBar。 |
:checked | 该项目已选中。例如,QAbstractButton的选中状态。 |
:closable | 这些项目可以关闭。例如,QDockWidget打开了QDockWidget::DockWidgetClosable功能。 |
:default | 该项目为默认值。例如,QMenu中的默认QPushButton或默认操作。 |
:disabled | 该项目已禁用。 |
:editable | QComboBox是可编辑的。 |
:edit-focus | 该项具有编辑焦点(请参见QStyle::State_HasEditFocus)。此状态仅适用于Qt扩展应用程序。 |
:enabled | 该项目已启用。 |
:exclusive | 该项目是独占项目组的一部分。例如,独占QActionGroup中的菜单项。 |
:first | 该项目是(列表中的)第一个项目。例如,QTabBar中的第一个选项卡。 |
:flat | 这件物品是平的。例如,平面QPushButton。 |
:floatable | 这些项目可以浮动。例如,QDockWidget打开了QDockWidget::DockWidgetFloatable功能。 |
:focus | 该项具有输入焦点。 |
:has-children | 该项目具有子项。例如,QTreeView中具有子项的项。 |
:has-siblings | 该项目有同级。例如,QTreeView中的同级项。 |
:horizontal | 该项目具有水平方向 |
:hover | 鼠标悬停在该项目上。 |
:indeterminate | 该项具有不确定状态。例如,部分选中QCheckBox或QRadioButton。 |
:last | 该项是(列表中的)最后一项。例如,QTabBar中的最后一个选项卡。 |
:left | 该项目位于左侧。例如,选项卡位于左侧的QTabBar。 |
:maximized | 该项目将最大化。例如,最大化的QMdiSubWindow。 |
:middle | 项目在中间(在列表中)。例如,QTabBar中不在开头或结尾的制表符。 |
:minimized | 该项目被最小化。例如,最小化的QMdiSubWindow。 |
:movable | 物品可以四处移动。例如,QDockWidget打开了QDockWidget::DockWidgetMoovable功能。 |
:no-frame | 该项目没有框架。例如,无框架的QSpinBox或QLineEdit。 |
:non-exclusive | 该项是非独占项组的一部分。例如,非独占QActionGroup中的菜单项。 |
:off | 对于可以切换的项目,这适用于处于“关闭”状态的项目。 |
:on | 对于可以切换的项目,这适用于处于“打开”状态的widget。 |
:only-one | 该项目是(列表中的)唯一项目。例如,QTabBar中的一个单独的选项卡。 |
:open | 该项目处于打开状态。例如,QTreeView中的展开项,或具有打开菜单的QComboBox或QPushButton。 |
:next-selected | 选择下一项(在列表中)。例如,QTabBar的选定选项卡紧挨着该项。 |
:pressed | 正在使用鼠标按下该项。 |
:previous-selected | 选择上一项(在列表中)。例如,QTabBar中选定选项卡旁边的选项卡。 |
:read-only | 该项目标记为只读或不可编辑。例如,只读QLineEdit或不可编辑的QComboBox。 |
:right | 该项目位于右侧。例如,选项卡位于右侧的QTabBar。 |
:selected | 该项目即被选中。例如,QTabBar中的选定选项卡或QMenu中的选定项目。 |
:top | 该项目位于顶部。例如,选项卡位于顶部的QTabBar。 |
:unchecked | 该项目处于取消选中状态。 |
:vertical | 该项目具有垂直方向。 |
:window | widget是窗口(即顶层小部件) |
更多推荐
所有评论(0)