Qt入门系列开发教程QSSqss的实例
Posted 鱼酱2333
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Qt入门系列开发教程QSSqss的实例相关的知识，希望对你有一定的参考价值。
文章目录
- 1.Qt样式表示例
- 2.定制特定的小部件
- 自定义QAbstractScrollArea
- 自定义QCheckBox
- 自定义QComboBox
- 自定义QDockWidget
- 自定义QFrame
- 自定义QHeaderView
- 自定义QLineEdit
- 自定义QListView
- 自定义QMainWindow
- 自定义QMenu
- 自定义QMenuBar
- 自定义QProgressBar
- 自定义QPushButton
- 自定义QRadioButton
- 自定义QScrollBar
- 自定义QSizeGrip
- 自定义QSlider
- 自定义QSpinBox
- 自定义QSplitter
- 自定义QStatusBar
- 自定义QTabWidget and QTabBar
- 自定义QTableView
- 自定义QToolBar
- 自定义QToolBox
- 自定义QToolButton
- 自定义QToolTip
- 自定义QTreeView
- 常见错误
1.Qt样式表示例
现在，我们将看到几个使用Qt样式表的示例。
样式表用法
自定义前景色和背景色
首先，我们将黄色设置为应用程序中所有QLineEdits的背景色。这可以通过以下方式实现：
qApp->setStyleSheet("QLineEdit background-color: yellow ");
如果我们希望属性仅应用于特定对话框的子（或孙辈或孙孙辈）QLineEdits，我们宁愿这样做：
myDialog->setStyleSheet("QLineEdit background-color: yellow ");
如果希望该属性仅应用于一个特定的QLineEdit，可以使用QObject:：setObjectName（）为其命名，并使用ID选择器来引用它：
myDialog->setStyleSheet("QLineEdit#nameEdit background-color: yellow ");
或者，我们可以直接在QLineEdit上设置背景色属性，忽略选择器：
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;");
使用动态属性进行自定义
在很多情况下，我们需要呈现一个具有必填字段的表单。为了向用户表明该字段是强制性的，一个有效的解决方案（尽管在美学上不确定）是使用黄色作为这些字段的背景色。事实证明，使用Qt样式表很容易实现这一点。首先，我们将使用以下应用程序范围的样式表：
*[mandatoryField="true"] background-color: yellow
这意味着mandatoryField Qt属性设置为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);
使用长方体模型自定义QPushButton
这一次，我们将展示如何创建红色QPushButton。这个QPushButton可能会连接到一段极具破坏性的代码。
首先，我们尝试使用以下样式表：
QPushButton#evilButton background-color: red
然而，结果是一个没有边框的单调按钮：
事情是这样的：
- 我们提出了一个仅使用本机样式无法满足的请求（例如，Windows Vista主题引擎不允许我们指定按钮的背景色）。
- 因此，按钮是使用样式表渲染的。
- 我们没有为边框宽度和边框样式指定任何值，因此默认情况下，我们会获得一个0像素宽的边框样式none。
让我们通过指定边界来改善这种情况：
QPushButton#evilButton
background-color: red;
border-style: outset;
border-width: 2px;
border-color: beige;
事情看起来已经好多了。但是按钮看起来有点紧。让我们使用填充指定边框和文本之间的间距。此外，我们将强制执行最小宽度、圆角，并指定更大的字体以使按钮看起来更漂亮：
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
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;
自定义QPushButton的菜单指示器子控件
子控件允许访问小部件的子元素。例如，与菜单关联的QPushButton（使用QPushButton:：setMenu（））有一个菜单指示器。让我们自定义红色按钮的菜单指示器：
QPushButton#evilButton::menu-indicator
image: url(myindicator.png);
默认情况下，菜单指示器位于填充矩形的右下角。我们可以通过指定Subcrol位置和Subcrol原点来改变这一点，以不同的方式锚定指示器。我们还可以使用top和left将指示器移动几个像素。例如：
QPushButton::menu-indicator
image: url(myindicator.png);
subcontrol-position: right center;
subcontrol-origin: padding;
left: -2px;
这将定位myindicator。位于QPushButton填充矩形右中的png。
复杂选择器示例
由于红色似乎是我们最喜欢的颜色，让我们通过设置以下应用程序范围的样式表，使QLineEdit中的文本变成红色：
QLineEdit color: red
但是，我们希望通过使QLineEdit显示为灰色，来直观地表明它是只读的：
QLineEdit color: red
QLineEdit[readOnly="true"] color: gray
在某些时候，我们的设计团队会要求注册表单中的所有QLineEdits（带有对象名registrationDialog）都是棕色的：
QLineEdit color: red
QLineEdit[readOnly="true"] color: gray
#registrationDialog QLineEdit color: brown
几次UI设计会议之后，我们决定所有QDialogs都应该有棕色的QLineEdits：
QLineEdit color: red
QLineEdit[readOnly="true"] color: gray
QDialog QLineEdit color: brown
小测验：如果我们在QDialog中有一个只读QLineEdit，会发生什么？[提示：上面的冲突解决部分解释了在这种情况下会发生什么。]
2.定制特定的小部件
本节提供了使用样式表定制特定小部件的示例。
自定义QAbstractScrollArea
可以使用背景属性设置任何QAbstractScrollArea（项目视图、QTextEdit和QTextBrowser）的背景。例如，要设置使用滚动条滚动的背景图像：
QTextEdit, QListView
background-color: white;
background-image: url(draft.png);
background-attachment: scroll;
如果要用视口固定背景图像：
QTextEdit, QListView
background-color: white;
background-image: url(draft.png);
background-attachment: fixed;
自定义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);
自定义QComboBox
我们将看一个例子，其中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;
The pop-up of the QComboBox is a QAbstractItemView and is styled using the descendant selector:
QComboBox QAbstractItemView
border: 2px solid darkgray;
selection-background-color: lightgray;
自定义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;
如果希望将dock widget按钮向左移动，可以使用以下样式表：
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;
注意：要自定义QDockWidget的分隔符（调整句柄大小），请使用QMainWindow:：separator。
自定义QFrame
QFrame是使用盒子模型设计的。
QFrame, QLabel, QToolTip
border: 2px solid green;
border-radius: 4px;
padding: 2px;
background-image: url(images/welcome.png);
自定义QGroupBox
让我们来看一个将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 sub：：indicatorsubcrol，并将其设置为与QCheckBox完全相同的样式（即
QGroupBox::indicator
width: 13px;
height: 13px;
QGroupBox::indicator:unchecked
image: url(:/images/checkbox_unchecked.png);
/* 继续像QCheckBox一样设计样式 */
自定义QHeaderView
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);
自定义QLineEdit
QLineEdit的框架是使用盒子模型设计的。要创建带有圆角的直线编辑，我们可以设置：
QLineEdit
border: 2px solid gray;
border-radius: 10px;
padding: 0 8px;
background: yellow;
selection-background-color: darkgray;
具有QLineEdit:：password echo模式的行编辑的密码字符可以通过以下方式设置：
QLineEdit[echoMode="2"]
lineedit-password-character: 9679;
只读QLineEdit的背景可以修改如下：
QLineEdit:read-only
background: lightblue;
自定义QListView
可以使用以下样式表自定义交替行的背景色：
QListView
alternate-background-color: yellow;
To provide a special background when you hover over items, we can use the ::item subcontrol. For example,
QListView
show-decoration-selected: 1; /* make the selection span the entire width of the view */
QListView::item:alternate
background: #EEEEEE;
QListView::item:selected
border: 1px solid #6a6ea9;
QListView::item:selected:!active
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #ABAFE5, stop: 1 #8588B2);
QListView::item:selected:active
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #6a6ea9, stop: 1 #888dd9);
QListView::item:hover
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #FAFBFE, stop: 1 #DCDEF1);
自定义QMainWindow
QMainWindow的分隔符可以设置为以下样式：
QMainWindow::separator
background: yellow;
width: 10px; /* when vertical */
height: 10px; /* when horizontal */
QMainWindow::separator:hover
background: red;
自定义QMenu
QMenu的单个项使用“项”子控制进行样式设置，如下所示：
QMenu
background-color: #ABABAB; /* sets background of the menu */
border: 1px solid black;
QMenu::item
/* sets background of menu item. set this to something non-transparent
if you want menu color and menu item color to be different */
background-color: transparent;
QMenu::item:selected /* when user selects item using mouse or keyboard */
background-color: #654321;
要进行更高级的自定义，请使用以下样式表：
QMenu
background-color: white;
margin: 2px; /* some spacing around the menu */
QMenu::item
padding: 2px 25px 2px 20px;
border: 1px solid transparent; /* reserve space for selection border */
QMenu::item:selected
border-color: darkblue;
background: rgba(100, 100, 100, 150);
QMenu::icon:checked /* appearance of a 'checked' icon */
background: gray;
border: 1px inset gray;
position: absolute;
top: 1px;
right: 1px;
bottom: 1px;
left: 1px;
QMenu::separator
height: 2px;
background: lightblue;
margin-left: 10px;
margin-right: 5px;
QMenu::indicator
width: 13px;
height: 13px;
/* non-exclusive indicator = check box style indicator (see QActionGroup::setExclusive) */
QMenu::indicator:non-exclusive:unchecked
image: url(:/images/checkbox_unchecked.png);
QMenu::indicator:non-exclusive:unchecked:selected
image: url(:/images/checkbox_unchecked_hover.png);
QMenu::indicator:non-exclusive:checked
image: url(:/images/checkbox_checked.png);
QMenu::indicator:non-exclusive:checked:selected
image: url(:/images/checkbox_checked_hover.png);
/* exclusive indicator = radio button style indicator (see QActionGroup::setExclusive) */
QMenu::indicator:exclusive:unchecked
image: url(:/images/radiobutton_unchecked.png);
QMenu::indicator:exclusive:unchecked:selected
image: url(:/images/radiobutton_unchecked_hover.png);
QMenu::indicator:exclusive:checked
image: url(:/images/radiobutton_checked.png);
QMenu::indicator:exclusive:checked:selected
image: url(:/images/radiobutton_checked_hover.png);
自定义QMenuBar
QMenuBar 自定义:
QMenuBar
background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
stop:0 lightgray, stop:1 darkgray);
spacing: 3px; /* spacing between menu bar items */
QMenuBar::item
padding: 1px 4px;
background: transparent;
border-radius: 4px;
QMenuBar::item:selected /* when selected using mouse or keyboard */
background: #a8a8a8;
QMenuBar::item:pressed
background: #888888;
自定义QProgressBar
QProgressBar的边框、区块和文本对齐可以使用样式表进行自定义。但是，如果自定义了一个属性或子控件，则还必须自定义所有其他属性或子控件。
例如，我们将边框更改为灰色，将块更改为蓝色。
QProgressBar
border: 2px solid grey;
border-radius: 5px;
QProgressBar::chunk
background-color: #05B8CC;
width: 20px;
这会使文本保持对齐，我们可以通过将文本定位在进度条的中心来自定义对齐。
QProgressBar
border: 2px solid grey;
border-radius: 5px;
text-align: center;
可以包括一个边距，以获得更多可见的块。
在上面的屏幕截图中，我们使用了0.5像素的边距。
QProgressBar::chunk
background-color: #CD96CD;
width: 10px;
margin: 0.5px;
自定义QPushButton
QPushButton的样式如下：
QPushButton
border: 2px solid #8f8f91;
border-radius: 6px;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #f6f7fa, stop: 1 #dadbde);
min-width: 80px;
QPushButton:pressed
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #dadbde, stop: 1 #f6f7fa);
QPushButton:flat
border: none; /* no border for a flat push button */
QPushButton:default
border-color: navy; /* make the default button prominent */
对于带有菜单的QPushButton，请使用：：菜单指示器Subcrol。
QPushButton:open /* when the button has its menu open */
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #dadbde, stop: 1 #f6f7fa);
QPushButton::menu-indicator
image: url(menu_indicator.png);
subcontrol-origin: padding;
subcontrol-position: bottom right;
QPushButton::menu-indicator:pressed, QPushButton::menu-indicator:open
position: relative;
top: 2px; left: 2px; /* shift the arrow by 2 px */
Checkable QPushButton设置了：checked伪状态。
自定义QRadioButton
The indicator of a QRadioButton can be changed using:
QRadioButton::indicator
width: 13px;
height: 13px;
QRadioButton::indicator::unchecked
image: url(:/images/radiobutton_unchecked.png);
QRadioButton::indicator:unchecked:hover
image: url(:/images/radiobutton_unchecked_hover.png);
QRadioButton::indicator:unchecked:pressed
image: url(:/images/radiobutton_unchecked_pressed.png);
QRadioButton::indicator::checked
image: url(:/images/radiobutton_checked.png);
QRadioButton::indicator:checked:hover
image: url(:/images/radiobutton_checked_hover.png);
QRadioButton::indicator:checked:pressed
image: url(:/images/radiobutton_checked_pressed.png);
自定义QScrollBar
QScrollBar可以使用其子控件（如handle、add line、sub line等）设置样式。请注意，如果自定义了一个属性或子控件，则还必须自定义所有其他属性或子控件。
上面的滚动条采用海蓝宝石设计，带有坚实的灰色边框。
QScrollBar:horizontal
border: 2px solid grey;
background: #32CC99;
height: 15px;
margin: 0px 20px 0 20px;
QScrollBar::handle:horizontal
background: white;
min-width: 20px;
QScrollBar::add-line:horizontal
border: 2px solid grey;
background: #32CC99;
width: 20px;
subcontrol-position: right;
subcontrol-origin: margin;
QScrollBar::sub-line:horizontal
border: 2px solid grey;
background: #32CC99;
width: 20px;
subcontrol-position: left;
subcontrol-origin: margin;
左箭头和右箭头有一个纯色灰色边框，背景为白色。作为替代方案，您还可以嵌入箭头的图像。
QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal
border: 2px solid grey;
width: 3px;
height: 3px;
background: white;
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal
background: none;
如果希望滚动条上的滚动按钮像macOS上一样放在一起（而不是边缘），可以使用以下样式表：
QScrollBar:horizontal
border: 2px solid green;
background: cyan;
height: 15px;
margin: 0px 40px 0 0px;
QScrollBar::handle:horizontal
background: gray;
min-width: 20px;
QScrollBar::add-line:horizontal
background: blue;
width: 16px;
subcontrol-position: right;
subcontrol-origin: margin;
border: 2px solid black;
QScrollBar::sub-line:horizontal
background: magenta;
width: 16px;
subcontrol-position: top right;
subcontrol-origin: margin;
border: 2px solid black;
position: absolute;
right: 20px;
QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal
width: 3px;
height: 3px;
background: pink;
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal
background: none;
使用上述样式表的滚动条如下所示：
要自定义垂直滚动条，请使用类似于以下内容的样式表：
QScrollBar:vertical
border: 2px solid grey;
background: #32CC99;
width: 15px;
margin: 22px 0 22px 0;
QScrollBar::handle:vertical
background: white;
min-height: 20px;
QScrollBar::add-line:vertical
border: 2px solid grey;
background: #32CC99;
height: 20px;
subcontrol-position: bottom;
subcontrol-origin: margin;
QScrollBar::sub-line:vertical
border: 2px solid grey;
background: #32CC99;
height: 20px;
subcontrol-position: top;
subcontrol-origin: margin;
QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical
border: 2px solid grey;
width: 3px;
height: 3px;
background: white;
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical
background: none;
自定义QSizeGrip
QSizeGrip通常通过设置图像来设置样式。
QSizeGrip
image: url(:/images/sizegrip.png);
width: 16px;
height: 16px;
自定义QSlider
可以按如下方式设置水平滑块的样式：
QSlider::groove:horizontal
border: 1px solid #999999;
height: 8px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);
margin: 2px 0;
QSlider::handle:horizontal
background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);
border: 1px solid #5c5c5c;
width: 18px;
margin: -2px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
border-radius: 3px;
如果要更改手柄前后滑块部分的颜色，可以使用“添加页面”和“子页面”子控件。例如，对于垂直滑块：
QSlider::groove:vertical
background: red;
position: absolute; /* absolutely position 4px from the left and right of the widget. setting margins on the widget should work too... */
left: 4px; right: 4px;
QSlider::handle:vertical
height: 10px;
background: green;
margin: 0 -4px; /* expand outside the groove */
QSlider::add-page:vertical
background: white;
QSlider::sub-page:vertical
background: pink;
自定义QSpinBox
QSpinBox可以完全定制如下（样式表中有注释）：
QSpinBox
padding-right: 15px; /* make room for the arrows */
border-image: url(:/images/frame.png) 4;
border-width: 3;
QSpinBox::up-button
subcontrol-origin: border;
subcontrol-position: top right; /* position at the top right corner */
width: 16px; /* 16 + 2*1px border-width = 15px padding + 3px parent border */
border-image: url(:/images/spinup.png) 1;
border-width: 1px;
QSpinBox::up-button:hover
border-image: url(:/images/spinup_hover.png) 1;
QSpinBox::up-button:pressed
border-image: url(:/images/spinup_pressed.png) 1;
QSpinBox::up-arrow
image: url(:/images/up_arrow.png);
width: 7px;
height: 7px;
QSpinBox::up-arrow:disabled, QSpinBox::up-arrow:off /* off state when value is max */
image: url(:/images/up_arrow_disabled.png);
QSpinBox::down-button
subcontrol-origin: border;
subcontrol-position: bottom right; /* position at bottom right corner */
width: 16px;
border-image: url(:/images/spindown.png) 1;
border-width: 1px;
border-top-width: 0;
QSpinBox::down-button:hover
border-image: url(:/images/spindown_hover.png) 1;
QSpinBox::down-button:pressed
border-image: url(:/images/spindown_pressed.png) 1;
QSpinBox::down-arrow
image: url(:/images/down_arrow.png);
width: 7px;
height: 7px;
QSpinBox::down-arrow:disabled,
QSpinBox::down-arrow:off /* off state when value in min */
image: url(:/images/down_arrow_disabled.png);
自定义QSplitter
qspliter源于QFrame，因此可以设计为QFrame。使用：：handle子控件自定义夹点或手柄。
QSplitter::handle
image: url(images/splitter.png);
QSplitter::handle:horizontal
width: 2px;
QSplitter::handle:vertical
height: 2px;
QSplitter::handle:pressed
url(images/splitter_pressed.png);
自定义QStatusBar
我们可以为状态栏提供背景，并为状态栏内的项目提供边框，如下所示：
QStatusBar
background: brown;
QStatusBar::item
border: 1px solid red;
border-radius: 3px;
请注意，添加到QStatusBar的小部件可以使用子体声明（即
QStatusBar QLabel
border: 3px solid white;
自定义QTabWidget and QTabBar
对于上面的屏幕截图，我们需要一个样式表，如下所示：
QTabWidget::pane /* The tab widget frame */
border-top: 2px solid #C2C7CB;
QTabWidget::tab-bar
left: 5px; /* move to the right by 5px */
/* Style the tab using the tab sub-control. Note that
it reads QTabBar _not_ QTabWidget */
QTabBar::tab
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);
border: 2px solid #C4C4C3;
border-bottom-color: #C2C7CB; /* same as the pane color */
border-top-left-radius: 4px;
border-top-right-radius: 4px;
min-width: 8ex;
padding: 2px;
QTabBar::tab:selected, QTabBar::tab:hover
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #fafafa, stop: 0.4 #f4f4f4,
stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
QTabBar::tab:selected
border-color: #9B9B9B;
border-bottom-color: #C2C7CB; /* same as pane color */
QTabBar::tab:!selected
margin-top: 2px; /* make non-selected tabs look smaller */
我们通常要求选项卡重叠，如下所示：
对于如上所示的选项卡小部件，我们使用负边距。生成的样式表如下所示：
QTabWidget::pane /* The tab widget frame */
border-top: 2px solid #C2C7CB;
QTabWidget::tab-bar
left: 5px; /* move to the right by 5px */
/* Style the tab using the tab sub-control. Note that
it reads QTabBar _not_ QTabWidget */
QTabBar::tab
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);
border: 2px solid #C4C4C3;
border-bottom-color: #C2C7CB; /* same as the pane color */
border-top-left-radius: 4px;
border-top-right-radius: 4px;
min-width: 8ex;
padding: 2px;
QTabBar::tab:selected, QTabBar::tab:hover
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #fafafa, stop: 0.4 #f4f4f4,
stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
QTabBar::tab:selected
border-color: #9B9B9B;
border-bottom-color: #C2C7CB; /* same as pane color */
QTabBar::tab:!selected
margin-top: 2px; /* make non-selected tabs look smaller */
/* make use of negative margins for overlapping tabs */
QTabBar::tab:selected
/* expand/overlap to the left and right by 4px */
margin-left: -4px;
margin-right: -4px;
QTabBar::tab:first:selected
margin-left: 0; /* the first selected tab has nothing to overlap with on the left */
QTabBar::tab:last:selected
margin-right: 0; /* the last selected tab has nothing to overlap with on the right */
QTabBar::tab:only-one
margin: 0; /* if there is only one tab, we don't want overlapping margins */
要将选项卡栏移到中心（如下所示），我们需要以下样式表：
QTabWidget::pane /* The tab widget frame */
border-top: 2px solid #C2C7CB;
position: absolute;
top: -0.5em;
QTabWidget::tab-bar
alignment: center;
/* Style the tab using the tab sub-control. Note that
it reads QTabBar _not_ QTabWidget */
QTabBar::tab
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);
border: 2px solid #C4C4C3;
border-bottom-color: #C2C7CB; /* same as the pane color */
border-top-left-radius: 4px;
border-top-right-radius: 4px;
min-width: 8ex;
padding: 2px;
QTabBar::tab:selected, QTabBar::tab:hover
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #fafafa, stop: 0.4 #f4f4f4,
stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
QTabBar::tab:selected
border-color: #9B9B9B;
border-bottom-color: #C2C7CB; /* same as pane color */
撕裂指示器和滚动按钮可进一步定制如下：
QTabBar::tear
image: url(tear_indicator.png);
QTabBar::scroller /* the width of the scroll buttons */
width: 20px;
QTabBar QToolButton /* the scroll buttons are tool buttons */
border-image: url(scrollbutton.png) 2;
border-width: 2px;
QTabBar QToolButton::right-arrow /* the arrow mark in the tool buttons */
image: url(rightarrow.png);
QTabBar QToolButton::left-arrow
image: url(leftarrow.png);
由于Qt 4.6，关闭按钮可定制如下：
QTabBar::close-button
image: url(close.png)
subcontrol-position: left;
QTabBar::close-button:hover
image: url(close-hover.png)
自定义QTableView
假设我们希望在QTableView中选择的项目将bubblegum粉色渐变为白色作为背景。
这可以通过“选择背景颜色”属性实现，所需语法为：
QTableView
selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0.5, y2: 0.5,
stop: 0 #FF92BB, stop: 1 white);
角落小部件可以使用以下样式表进行定制
QTableView QTableCornerButton::section
background: red;
border: 2px outset red;
QTableView的复选框指示器也可以自定义。在以下代码段中，未选中状态下的指示器背景颜色是自定义的：
QTableView::indicator:unchecked
background-color: #d7d6d5
自定义QToolBar
QToolBar的背景和手柄定制如下：
QToolBar
background: red;
spacing: 3px; /* spacing between items in the tool bar */
QToolBar::handle
image: url(handle.png);
自定义QToolBox
QToolBox的选项卡使用“tab”子控件进行自定义。
QToolBox::tab
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);
border-radius: 5px;
color: darkgray;
QToolBox::tab:selected /* italicize selected tabs */
font: italic;
color: white;
自定义QToolButton
QTool按钮有三种类型。
QTool按钮没有菜单。在本例中，QToolButton的样式与QPushButton完全相同。看见自定义以QPushButton为例。
QToolButton有一个菜单，并将QToolButton:：popupMode设置为QToolButton:：DelayedPopup或QToolButton:：InstantPopup。在本例中，QToolButton的样式与带有菜单的QPushButton完全相同。看见自定义QPushButton提供了一个使用菜单指示器伪状态的示例。
QToolButton的QToolButton:：popupMode设置为QToolButton:：MenuButtonPopup。在这种情况下，我们的风格如下：
QToolButton /* all types of tool button */
border: 2px solid #8f8f91;
border-radius: 6px;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #f6f7fa, stop: 1 #dadbde);
QToolButton[popupMode="1"] /* only for MenuButtonPopup */
padding-right: 20px; /* make way for the popup button */
QToolButton:pressed
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #dadbde, stop: 1 #f6f7fa);
/* the subcontrols below are used only in the MenuButtonPopup mode */
QToolButton::menu-button
border: 2px solid gray;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
/* 16px width + 4px for border = 20px allocated above */
width: 16px;
QToolButton::menu-arrow
image: url(downarrow.png);
QToolButton::menu-arrow:open
top: 1px; left: 1px; /* shift it a bit */
自定义QToolTip
QToolTip完全像QLabel一样定制。此外，对于支持不透明度的平台，可以设置“不透明度”属性来调整不透明度。
例如
QToolTip
border: 2px solid darkkhaki;
padding: 5px;
border-radius: 3px;
opacity: 200;
自定义QTreeView
可以使用以下样式表自定义交替行的背景色：
QTreeView
alternate-background-color: yellow;
为了在项目上方悬停时提供特殊背景，我们可以使用：：item subcrol。例如
QTreeView
show-decoration-selected: 1;
QTreeView::item
border: 1px solid #d9d9d9;
border-top-color: transparent;
border-bottom-color: transparent;
QTreeView::item:hover
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #e7effd, stop: 1 #cbdaf1);
border: 1px solid #bfcde4;
QTreeView::item:selected
border: 1px solid #567dbc;
QTreeView::item:selected:active
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6ea1f1, stop: 1 #567dbc);
QTreeView::item:selected:!active
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6b9be8, stop: 1 #577fbf);
QTreeView的分支使用：：branch subrol设置样式。以下样式表颜色编码了绘制分支时的各种状态。
QTreeView::branch
background: palette(base);
QTreeView::branch:has-siblings:!adjoins-item
background: cyan;
QTreeView::branch:has-siblings:adjoins-item
background: red;
QTreeView::branch:!has-children:!has-siblings:adjoins-item
background: blue;
QTreeView::branch:closed:has-children:has-siblings
background: pink;
QTreeView::branch:has-children:!has-siblings:closed
background: gray;
QTreeView::branch:open:has-children:has-siblings
background: magenta;
QTreeView::branch:open:has-children:!has-siblings
background: green;
虽然颜色鲜艳，但可以使用以下图像制作一个更有用的示例：
QTreeView::branch:has-siblings:!adjoins-item
border-image: url(vline.png) 0;
QTreeView::branch:has-siblings:adjoins-item
border-image: url(branch-more.png) 0;
QTreeView::branch:!has-children:!has-siblings:adjoins-item
border-image: url(branch-end.png) 0;
QTreeView::branch:has-children:!has-siblings:closed,
QTreeView::branch:closed:has-children:has-siblings
border-image: none;
image: url(branch-closed.png);
QTreeView::branch:open:has-children:!has-siblings,
QTreeView::branch:open:has-children:has-siblings
border-image: none;
image: url(branch-open.png);
常见错误
本节列出了使用样式表时的一些常见错误。
QPushButton 和 images
在设置QPushButton的样式时，通常希望使用图像作为按钮图形。尝试“背景图像”属性是很常见的，但这有一些缺点：例如，背景通常会隐藏在按钮装饰后面，因为它不被视为背景。此外，如果调整按钮的大小，整个背景将被拉伸或平铺，这并不总是看起来很好。
最好使用border image属性，因为它将始终显示图像，而不考虑背景（如果背景中有alpha值，则可以将其与背景组合），并且它有特殊设置来处理按钮大小调整。
考虑下面的片段：
QPushButton
color: grey;
border-image: url(/home/kamlie/code/button.png) 3 10 3 10;
border-top: 3px transparent;
border-bottom: 3px transparent;
border-right: 10px transparent;
border-left: 10px transparent;
这将生成一个如下所示的按钮：
url后面的数字分别给出了顶部、右侧、底部和左侧的像素数。这些数字与边框相对应，在尺寸变化时不应拉伸。无论何时调整按钮的大小，图像的中间部分都会向两个方向拉伸，而样式表中指定的像素则不会。这使按钮的边框看起来更自然，如下所示：
以上是关于Qt入门系列开发教程QSSqss的实例的主要内容，如果未能解决你的问题，请参考以下文章