QT开发（六十四）——QT样式表（三）

2025-02-28 技术教程

六、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

{

p_w_picpath: url(myindicator.png);

}

默认，菜单指示器定位在衬底区域的右下角。通过改变subcontrol-position、subcontrol-origin属性可以定位指示器。

QPushButton::menu-indicator

{

p_w_picpath: 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 }

QDialogQLineEdit{ color: brown }

2、定制特殊组件

本节提供使用样式表定制特定组件的实例。

（1）、定制QAbstractScrollArea

任何QAbstractScrollArea组件(项视图、QTextEdit、QTextBrowser)的背景都可以使用bakcground属性设置。例如，设置带有滚动条滚动的背景图属性如下：

QTextEdit, QListView

{

background-color: white;

background-p_w_picpath: url(draft.png);

background-p_w_upload: scroll;

}

如果设置background-p_w_picpath属性在视口中固定。

QTextEdit, QListView

{

background-color: white;

background-p_w_picpath: url(draft.png);

background-p_w_upload: fixed;

}

（2）、定制QCheckBox

进行QCheckBox样式设置与QRadioButton样式设置相同。主要区别在于三态的QCheckBox有一个模糊态。

QCheckBox

{

spacing: 5px;

}

QCheckBox::indicator

{

width: 13px;

height: 13px;

}

QCheckBox::indicator:unchecked

{

p_w_picpath: url(:/p_w_picpaths/checkbox_unchecked.png);

}

QCheckBox::indicator:unchecked:hover

{

p_w_picpath: url(:/p_w_picpaths/checkbox_unchecked_hover.png);

}

QCheckBox::indicator:unchecked:pressed

{

p_w_picpath: url(:/p_w_picpaths/checkbox_unchecked_pressed.png);

}

QCheckBox::indicator:checked

{

p_w_picpath: url(:/p_w_picpaths/checkbox_checked.png);

}

QCheckBox::indicator:checked:hover

{

p_w_picpath: url(:/p_w_picpaths/checkbox_checked_hover.png);

}

QCheckBox::indicator:checked:pressed

{

p_w_picpath: url(:/p_w_picpaths/checkbox_checked_pressed.png);

}

QCheckBox::indicator:indeterminate:hover

{

p_w_picpath: url(:/p_w_picpaths/checkbox_indeterminate_hover.png);

}

QCheckBox::indicator:indeterminate:pressed {

p_w_picpath: url(:/p_w_picpaths/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 {

p_w_picpath: 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，使用后代选择器进行样式设置。

QComboBoxQAbstractItemView{

border: 2px solid darkgray;

selection-background-color: lightgray;

}

（4）、定制QDockWidget

QDockWidget的标题栏和按钮可以按如下进行样式设置。

QDockWidget

{

border:1pxsolidlightgray;

titlebar-close-icon:url(close.png);

titlebar-normal-icon:url(undock.png);

}

QDockWidget::title

{

text-align:left;/*alignthetexttotheleft*/

background:lightgray;

padding-left:5px;

}

QDockWidget::close-button,QDockWidget::float-button

{

border:1pxsolidtransparent;

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-1px1px;

}

如果要移动停靠组件按钮到左侧，可以使用如下样式表设置：

QDockWidget

{

border:1pxsolidlightgray;

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;/*maximumiconsize*/

}

QDockWidget::close-button:hover,QDockWidget::float-button:hover

{

background:gray;

}

QDockWidget::close-button:pressed,QDockWidget::float-button:pressed

{

padding:1px-1px-1px1px;

}

QDockWidget::close-button

{

subcontrol-position:topleft;

subcontrol-origin:margin;

position:absolute;

top:0px;left:0px;bottom:0px;

width:14px;

}

QDockWidget::float-button

{

subcontrol-position:topleft;

subcontrol-origin:margin;

position:absolute;

top:0px;left:16px;bottom:0px;

width:14px;

}

（5）、定制QFrame

QFrame,QLabel,QToolTip

{

border:2pxsolidgreen;

border-radius:4px;

padding:2px;

background-p_w_picpath:url(p_w_picpaths/welcome.png);

}

（6）、定制QGroupBox

QGroupBox

{

background-color:qlineargradient(x1:0,y1:0,x2:0,y2:1,

stop:0#E0E0E0,stop:1#FFFFFF);

border:2pxsolidgray;

border-radius:5px;

margin-top:1ex;/*leavespaceatthetopforthetitle*/

}

QGroupBox::title

{

subcontrol-origin:margin;

subcontrol-position:topcenter;/*positionatthetopcenter*/

padding:03px;

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

{

p_w_picpath:url(:/p_w_picpaths/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:1pxsolid#6c6c6c;

}

QHeaderView::section:checked

{

background-color:red;

}

QHeaderView::down-arrow

{

p_w_picpath:url(down_arrow.png);

}

QHeaderView::up-arrow

{

p_w_picpath:url(up_arrow.png);

}

（8）、定制QLineEdit

QLineEdit的框架使用盒子模型进行样式设置。

QLineEdit

{

border:2pxsolidgray;

border-radius:10px;

padding:08px;

background:yellow;

selection-background-color:darkgray;

}

QLineEdit的密码字符使用QLineEdit::Password显示模式设置。

QLineEdit[echoMode="2"]

{

lineedit-password-character:9679;

}

只读QLineEdit的背景可以如下修改：

QLineEdit:read-only

{

background:lightblue;

}

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。

QT开发（六十四）——QT样式表（三）

热门

最新文章

随机文章

TAGS标签

QT开发（六十四）——QT样式表（三）

相关推荐

相关推荐

热门

最新文章

随机文章

TAGS标签