QT开发（六十四）——QT样式表（三）
六、QT样式表实例
1、样式表的使用
A、定制前景色和背景色
设置应用程序中的所有QLineEdit组件的背景色为黄色
qApp->setStyleSheet("QLineEdit { background-color: yellow }");
如果只想要属性用于具体某个对话框的QLineEdit及子类组件。
myDialog->setStyleSheet("QLineEdit { background-color: yellow }");
如果只想将属性用于某个具体的QLineEdit组件，可以使用QObject::setObjectName() 和ID选择器。
myDialog->setStyleSheet("QLineEdit#nameEdit { background-color: yellow }");
可以直接设置QLieEdit组件的background-color属性，忽略选择器
nameEdit->setStyleSheet("background-color: yellow");
为了确保对比效果，应该指定文本合适的颜色
nameEdit->setStyleSheet("color: blue; background-color: yellow");
修改选中文本的颜色如下：
nameEdit->setStyleSheet("color: blue;"
"background-color: yellow;"
"selection-color: yellow;"
"selection-background-color: blue;");
B、使用动态属性定制样式
为了提示用户字段是必填的，对这些字段使用黄色作为背景色。要使用QT样式表是现实很容易的。首先，应该使用应用程序的样式表：
*[mandatoryField="true"] { background-color: yellow }
这意味着mandatoryField字段设置为true的组件的背景色为黄色。
对于每个必备字段组件，我们匆忙中简单创建了一个mandatoryField属性并设置为true。
QLineEdit *nameEdit = new QLineEdit(this);
nameEdit->setProperty("mandatoryField", true);
QLineEdit *emailEdit = new QLineEdit(this);
emailEdit->setProperty("mandatoryField", true);
QSpinBox *ageSpinBox = new QSpinBox(this);
ageSpinBox->setProperty("mandatoryField", true);
C、使用盒子模型定制QPushButton
本节我们展示如何创建一个红色的按钮。
QPushButton#evilButton
{
background-color: red;
border-style: outset;
border-width: 2px;
border-radius: 10px;
border-color: beige;
font: bold 14px;
min-width: 10em;
padding: 6px;
}
QPushButton#evilButton:pressed
{
background-color: rgb(224, 0, 0);
border-style: inset;
}
D、定制按钮菜单指示器子控件
子控件可以访问组件的子元素。例如，按钮会使用QPushButton::setMenu()关联菜单与菜单指示器。定制红色按钮的菜单指示器如下：
QPushButton#evilButton::menu-indicator
{
image: url(myindicator.png);
}
默认，菜单指示器定位在衬底区域的右下角。通过改变subcontrol-position、subcontrol-origin属性可以定位指示器。
QPushButton::menu-indicator
{
image: url(myindicator.png);
subcontrol-position: right center;
subcontrol-origin: padding;
left: -2px;
}
Myindicator.png的位置在按钮衬底区域的右中心。
E、复杂选择器示例
设置应用程序样式表中QLineEdit文本为红色。
QLineEdit { color: red }
然而，想要设置一个只读QLineEdit的文本颜色为灰色如下：
QLineEdit { color: red }
QLineEdit[readOnly="true"] { color: gray }
某些情况下，如果要求注册表单中的所有QLineEdit为棕色。
QLineEdit { color: red }
QLineEdit[readOnly="true"] { color: gray }
#registrationDialog QLineEdit { color: brown }
如果要求所有对话框中的QLineEdit为棕色。
QLineEdit { color: red }
QLineEdit[readOnly="true"] { color: gray }
QDialog QLineEdit { color: brown }
2、定制特殊组件
本节提供使用样式表定制特定组件的实例。
（1）、定制QAbstractScrollArea
任何QAbstractScrollArea组件(项视图、QTextEdit、QTextBrowser)的背景都可以使用bakcground属性设置。例如，设置带有滚动条滚动的背景图属性如下：
QTextEdit, QListView
{
background-color: white;
background-image: url(draft.png);
background-attachment: scroll;
}
如果设置background-image属性在视口中固定。
QTextEdit, QListView
{
background-color: white;
background-image: url(draft.png);
background-attachment: fixed;
}
（2）、定制QCheckBox
进行QCheckBox样式设置与QRadioButton样式设置相同。主要区别在于三态的QCheckBox有一个模糊态。
QCheckBox
{
spacing: 5px;
}
QCheckBox::indicator
{
width: 13px;
height: 13px;
}
QCheckBox::indicator:unchecked
{
image: url(:/images/checkbox_unchecked.png);
}
QCheckBox::indicator:unchecked:hover
{
image: url(:/images/checkbox_unchecked_hover.png);
}
QCheckBox::indicator:unchecked:pressed
{
image: url(:/images/checkbox_unchecked_pressed.png);
}
QCheckBox::indicator:checked
{
image: url(:/images/checkbox_checked.png);
}
QCheckBox::indicator:checked:hover
{
image: url(:/images/checkbox_checked_hover.png);
}
QCheckBox::indicator:checked:pressed
{
image: url(:/images/checkbox_checked_pressed.png);
}
QCheckBox::indicator:indeterminate:hover
{
image: url(:/images/checkbox_indeterminate_hover.png);
}
QCheckBox::indicator:indeterminate:pressed {
image: url(:/images/checkbox_indeterminate_pressed.png);
}
（3）、定制组合框QComboBox
QComboBox {
border: 1px solid gray;
border-radius: 3px;
padding: 1px 18px 1px 3px;
min-width: 6em;
}
QComboBox:editable {
background: white;
}
QComboBox:!editable, QComboBox::drop-down:editable {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
}
/* QComboBox gets the "on" state when the popup is open */
QComboBox:!editable:on, QComboBox::drop-down:editable:on {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #D3D3D3, stop: 0.4 #D8D8D8,
stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1);
}
QComboBox:on { /* shift the text when the popup opens */
padding-top: 3px;
padding-left: 4px;
}
QComboBox::drop-down {
subcontrol-origin: padding;
subcontrol-position: top right;
width: 15px;
border-left-width: 1px;
border-left-color: darkgray;
border-left-style: solid; /* just a single line */
border-top-right-radius: 3px; /* same radius as the QComboBox */
border-bottom-right-radius: 3px;
}
QComboBox::down-arrow {
image: url(/usr/share/icons/crystalsvg/16x16/actions/1downarrow.png);
}
QComboBox::down-arrow:on { /* shift the arrow when popup is open */
top: 1px;
left: 1px;
}
组合框的弹出菜单是QAbstractItemView，使用后代选择器进行样式设置。
QComboBox QAbstractItemView {
border: 2px solid darkgray;
selection-background-color: lightgray;
}
（4）、定制QDockWidget
QDockWidget的标题栏和按钮可以按如下进行样式设置。
QDockWidget
{
border: 1px solid lightgray;
titlebar-close-icon: url(close.png);
titlebar-normal-icon: url(undock.png);
}
QDockWidget::title
{
text-align: left; /* align the text to the left */
background: lightgray;
padding-left: 5px;
}
QDockWidget::close-button, QDockWidget::float-button
{
border: 1px solid transparent;
background: darkgray;
padding: 0px;
}
QDockWidget::close-button:hover, QDockWidget::float-button:hover
{
background: gray;
}
QDockWidget::close-button:pressed, QDockWidget::float-button:pressed
{
padding: 1px -1px -1px 1px;
}
如果要移动停靠组件按钮到左侧，可以使用如下样式表设置：
QDockWidget
{
border: 1px solid lightgray;
titlebar-close-icon: url(close.png);
titlebar-normal-icon: url(float.png);
}
QDockWidget::title
{
text-align: left;
background: lightgray;
padding-left: 35px;
}
QDockWidget::close-button, QDockWidget::float-button
{
background: darkgray;
padding: 0px;
icon-size: 14px; /* maximum icon size */
}
QDockWidget::close-button:hover, QDockWidget::float-button:hover
{
background: gray;
}
QDockWidget::close-button:pressed, QDockWidget::float-button:pressed
{
padding: 1px -1px -1px 1px;
}
QDockWidget::close-button
{
subcontrol-position: top left;
subcontrol-origin: margin;
position: absolute;
top: 0px; left: 0px; bottom: 0px;
width: 14px;
}
QDockWidget::float-button
{
subcontrol-position: top left;
subcontrol-origin: margin;
position: absolute;
top: 0px; left: 16px; bottom: 0px;
width: 14px;
}
（5）、定制QFrame
QFrame, QLabel, QToolTip
{
border: 2px solid green;
border-radius: 4px;
padding: 2px;
background-image: url(images/welcome.png);
}
（6）、定制QGroupBox
QGroupBox
{
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E0E0E0, stop: 1 #FFFFFF);
border: 2px solid gray;
border-radius: 5px;
margin-top: 1ex; /* leave space at the top for the title */
}
QGroupBox::title
{
subcontrol-origin: margin;
subcontrol-position: top center; /* position at the top center */
padding: 0 3px;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #FF0ECE, stop: 1 #FFFFFF);
}
QGroupBox::indicator
{
width: 13px;
height: 13px;
}
QGroupBox::indicator:unchecked
{
image: url(:/images/checkbox_unchecked.png);
}
（7）、定制QHeaderView
QHeaderView::section
{
background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
stop:0 #616161, stop: 0.5 #505050,
stop: 0.6 #434343, stop:1 #656565);
color: white;
padding-left: 4px;
border: 1px solid #6c6c6c;
}
QHeaderView::section:checked
{
background-color: red;
}
QHeaderView::down-arrow
{
image: url(down_arrow.png);
}
QHeaderView::up-arrow
{
image: url(up_arrow.png);
}
（8）、定制QLineEdit
QLineEdit的框架使用盒子模型进行样式设置。
QLineEdit
{
border: 2px solid gray;
border-radius: 10px;
padding: 0 8px;
background: yellow;
selection-background-color: darkgray;
}
QLineEdit的密码字符使用QLineEdit::Password显示模式设置。
QLineEdit[echoMode="2"]
{
lineedit-password-character: 9679;
}
只读QLineEdit的背景可以如下修改：
QLineEdit:read-only
{
background: lightblue;
}