Qt控件美化

级联样式表 (CSS) 包含应用于网页中的元素的样式规则。CSS 样式定义元素的显示方式以及元素在页中的放置位置。可以创建一个通用规则，只要 Web 浏览器遇到一个元素实例，或遇到一个分配给某个特定样式类的元素，该规则就立刻应用属性，而不是将属性逐个分配给页中的每个元素。

CSS 样式可以通过内联方式放置在单个 HTML 元素内，也可以在网页 head 部分的 style 块内加以分组，或从单独的样式表中导入。如果样式是在单独的样式表中创建的，则可以将多个网页链接到该样式表，从而为整个网站提供一个通用的外观。如果使用 CSS 设置 Web 控件的样式，则应使用 CssClass 属性来定义要与控件或控件元素关联的 CSS 类名，然后在样式表中为这些控件或控件元素指定样式时引用该类名。

下面将通过几个例子来介绍一下怎样使用Qt中的部件类型设计。自定义的前台背景与后台背景的颜色：

如果需要样一个文本编辑器的背景变为黄色， 下面是代码行：

qApp->setStyleSheet("QLineEdit { background-color: yellow }");

针对一个对话框的内容中使用QLineEdit以及QLineEdit的子类的背景都变成黄色， 下面是代码：

myDialog->setStyleSheet("QLineEdit { background-color: yellow }");

如果只需要制定一个QLineEdit的内容， 将使用QObject::setObjectName() 下面是一个实例：

myDialog->setStyleSheet("QLineEdit#nameEdit { background-color: yellow }");

同时也可以针对每一个指定的部件做直接的类型设置， 下面是一个实例：

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;");

在有一些情况下， 不需要用户参与， 而有软件设计人员来自己制定样式， 即使这些是有违审美角度。 下面就从应用程序开发角度来设计样式。

*[mandatoryField="true"] { background-color: yellow }

上面的意思是一些强制的区域是需要用Qt 的属性管理来强制设置成为黄色的背景。

这样一些强制的部件，将需要通过函数来设置当前的属性已经被强制设置， 下面是实现的代码：

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#evilButton { background-color: red }

说明设置的当前的按钮为红色。 作为一个flat 平滑的按钮时没有边界的。 下面是来改进一下对边界的设置。

QPushButton#evilButton {

background-color: red;

border-style: outset;

border-width: 2px;

border-color: beige;

}

在这里设置了一个边界的类型与边界的宽度。 这样看上去就好多了，文档中无法展现图片， 有兴趣可以去Qt 的变成环境当中去尝试。即使这样设计， 按钮看上去也是显得混乱，与主部件没有办法分开。 首先是在边界设置出一个空间出来， 并且强制的制定最小宽度，与环绕的弧度， 并且提供一个按钮的字体设置， 似的按钮看上去比较好看。

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#evilButton::menu-indicator {

image: url(myindicator.png);

}

同时如果美化一个按钮的话， 那么将可以通过定位符来确定美化按钮的路径， 通常可以是一个图片。

QPushButton::menu-indicator {

image: url(myindicator.png);

subcontrol-position: right center;

subcontrol-origin: padding;

left: -2px;

}

经过以上的设置那么QPushButton 将会在方格的中心显示一个myindicator.png 的图片。

定制按钮

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;

}

QPushButton:default {

border-color: navy;

}

QPushButton: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;

}

QSlider：

下面的横向的slider

QSlider::groove:horizontal {

border: 1px solid #999999;

height: 8px;

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;

border-radius: 3px;

}

QSlider::groove:vertical {

background: red;

position: absolute;

left: 4px; right: 4px;

}

QSlider::handle:vertical {

height: 10px;

background: green;

margin: 0 -4px;

}

QSlider::add-page:vertical {

background: white;

}

QSlider::sub-page:vertical {

background: pink;

}

QSizeGrip：

一般讲通过一个图片进行设置 ：

QSizeGrip {

image: url(:/images/sizegrip.png);

width: 16px;

height: 16px;

}

定制QSplitter：

QSplitter::handle {

image: url(images/splitter.png);

}

QSplitter::handle:horizontal {

height: 2px;

}

QSplitter::handle:vertical {

width: 2px;

}

QStatusBar：

将提供一个状态栏的边框与项目的定制：

QStatusBar {

background: brown;

}

QStatusBar::item {

border: 1px solid red;

border-radius: 3px;

}

QTabWidget与QTabBar：

QTabWidget::pane {

border-top: 2px solid #C2C7CB;

}

QTabWidget::tab-bar {

left: 5px; }

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;

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;

}

QTabBar::tab:!selected {

margin-top: 2px;

}

QTabWidget::pane {

border-top: 2px solid #C2C7CB;

}

QTabWidget::tab-bar {

left: 5px;

}

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;

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;

}

QTabBar::tab:!selected {

margin-top: 2px;

}

 

QTabBar::tab:selected {

margin-left: -4px;

margin-right: -4px;

}

QTabBar::tab:first:selected {

margin-left: 0;

}

QTabBar::tab:last:selected {

margin-right: 0;

}

QTabBar::tab:only-one {

margin: 0;

}

QTabWidget::pane {

border-top: 2px solid #C2C7CB;

position: absolute;

top: -0.5em;

}

QTabWidget::tab-bar {

alignment: center;

}

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;

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;

}

定制QTableWidget

下面将设置QTableWidget 的粉色选中区域， 与白色背景。

QTableWidget {

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

stop: 0 #FF92BB, stop: 1 white);

}

QTableWidget QTableCornerButton::section {

background: red;

border: 2px outset red;

}

QToolBox：

下面是对工具条的一些选项进行定制

QToolBar {

background: red;

spacing: 3px;

}

QToolBar::handle {

image: url(handle.png); //可以设置工具条的背景图片

}

定制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 {

font: italic;

color: white;

}

定制QToolButton

QToolButton {

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"] {

padding-right: 20px;

}

QToolButton:pressed {

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

stop: 0 #dadbde, stop: 1 #f6f7fa);

}

QToolButton::menu-button {

border: 2px solid gray;

border-top-right-radius: 6px;

border-bottom-right-radius: 6px;

width: 16px;

}

QToolButton::menu-arrow {

image: url(downarrow.png);

}

QToolButton::menu-arrow:open {

top: 1px; left: 1px;

}

QTreeView：

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;

}