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）、定制组合框QComboBoxQComboBox {
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）、定制QDockWidgetQDockWidget的标题栏和按钮可以按如下进行样式设置。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）、定制QFrameQFrame, QLabel, QToolTip { border: 2px solid green; border-radius: 4px; padding: 2px; background-image: url(images/welcome.png);}（6）、定制QGroupBoxQGroupBox{ 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）、定制QHeaderViewQHeaderView::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）、定制QLineEditQLineEdit的框架使用盒子模型进行样式设置。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;}