QT自定义精美换肤界面

来源：互联网发布：mac word 窗口切换编辑：程序博客网时间：2024/06/02 13:24

Qt实际库里的自带组件的样式是系统标准的，要得到更好看的界面，光靠库里的样式是远远不够的，样式表的出现使得使用Qt做出更加漂亮的界面成为可能。

1. Qt样式表的动态加载：

代码如下：

QFile file(":/qss/stylesheet.qss");  file.open(QFile::ReadOnly);  QString styleSheet = QLatin1String(file.readAll());  qApp->setStyleSheet(styleSheet);  file.close();

通过以上代码，可将Qt的样式表动态加载到一个.qss的样式表文件中，从而更加方便代码的调试。

2.QPushButton样式

代码如下：

QWidget#centralWidget{       border-style:solid;   background: transparent;   background-color:#DEB887;   }QPushButton#pushButton{       background-color:#F08080;       }QPushButton#pushButton_2{       background-color:#FF8C00;   border-radius: 10px; }QPushButton#pushButton_3{            background-color:#4169E1;}QPushButton#pushButton_1{              background-image: url(:qss/Skin/black/tools/tab-image.png);       border-radius: 10px;    border: 2px groove gray;   border-style: outset;}

3.QListWidget样式

代码如下：

QWidget#centralWidget{       border-style:solid;   background: transparent;   background-color:#B8B8B8;   }QListWidget#listWidget{      background:rgba(210,240,250,255);  color:#00CCFF;border:0px solid gray;  padding:0px -2px 5px 5px;}"                                         "QListWidget::item{width:94px;height:35px;border:0px solid gray;padding-left:8px;}  "QListWidget::item:!selected{}"    "QListWidget::item:selected:active{background:#FFFFFF;color:#00CCFF;border-width:-1;}"    "QListWidget::item:selected{background:#FFFFFF;color:#00CCFF;}"                                    }

自选股1和自选股3是自定义状态，自选股2是选中状态。

4.QComboBox样式

代码如下：

QWidget#centralWidget{       border-style:solid;   background: transparent;   background-color:#B8B8B8;   }QComboBox#comboBox{      color:#00CCFF;  border: 1px solid gray;      border-radius: 3px;  height: 25px;   padding: 1px 2px 1px 2px;  # 针对于组合框中的文本内容  subcontrol-origin: padding;      subcontrol-position: top right;      width: 20px;      color:#00CCFF;  border:0px solid gray;  border:1px solid #d7d7d7;   border-radius: 3px;   padding: 1px 18px 1px 3px;     QComboBox:editable{ background: white; };        QComboBox:!editable{ background: #fbfbfb; color:#666666};      QComboBox::drop-down{ subcontrol-origin: padding;};       subcontrol-position: top right;      width: 22px;   border-left-width: 1px;      border-left-color: #c9c9c9;      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(:/down.png);} ;      QComboBox::down-arrow:on { /* shift the arrow when popup is open */ top: 1px; left: 1px;} ;    QComboBox{font-size: 11px} ;      QComboBox:!selected{color: red};      QComboBox:selected:active{background-color: orange };   QComboBox:selected{color: orange}; }

5.QProgressBar样式

代码如下：

QWidget#centralWidget{       border-style:solid;   background: transparent;   background-color:#B8B8B8;   }QProgressBar#progressBar{      border:none;      background:#696969;      border-radius:5px;      text-align:center;}QProgressBar::chunk {      background-color:rgb(58, 154, 255);      border-radius:4px; }

6.QLineEdit样式

代码如下：

QLinlineEdit::lineEdit{      enabled{color:#1964F};  disabled{color:orange};  border:1px solid gray;  border-radius:5px;  padding:0px 10px 0px 20px;  background:yellow;  selection-background-color: darkgary;  background-image:url(:qss/Skin/black/tools/edit.png);}

7.QScrollBar样式

代码如下：

QScrollBar#verticalScrollBar:vertical{    width:8px;    background:rgba(0,0,0,0%);    margin:0px,0px,0px,0px;    padding-top:16px;       padding-bottom:16px;}QScrollBar#verticalScrollBar::handle:vertical{    width:8px;    background:rgba(0,0,0,25%);    border-radius:4px;       min-height:20;}QScrollBar#verticalScrollBar::handle:vertical:hover{    width:8px;    background:rgba(0,0,0,50%);     border-radius:4px;    min-height:20;}QScrollBar#verticalScrollBar::add-line:vertical   {    height:16px;width:16px;    border-image:url(:qss/Skin/black/tools/appbar.menu.hover.png);    subcontrol-position:bottom;}QScrollBar#verticalScrollBar::sub-line:vertical   {    height:16px;width:16px;    border-image:url(:qss/Skin/black/tools/appbar.menu.put.hover.png);    subcontrol-position:top;}QScrollBar#verticalScrollBar::add-line:vertical:hover   {    height:16px;width:16px;    border-image:url(:qss/Skin/black/tools/appbar.menu.down.png);    subcontrol-position:bottom;}QScrollBar#verticalScrollBar::sub-line:vertical:hover {    height:16px;width:16px;    border-image:url(:qss/Skin/black/tools/appbar.menu.put.down.png);    subcontrol-position:top;}QScrollBar#verticalScrollBar::add-page:vertical,QScrollBar#verticalScrollBar::sub-page:vertical  {    border-style:solid;    background:white;    border-radius:4px;}

8.QSlider样式

代码如下：

QWidget#centralWidget{       border-style:solid;   background: transparent;   background-color:#0066CC;   }QSlider#horizontalSlider::groove:horizontal {  border: 1px solid #4A708B;  background: #orange;  height: 5px;  border-radius: 1px;  padding-left:-1px;  padding-right:-1px;  }    QSlider#horizontalSlider::sub-page:horizontal {  background: qlineargradient(x1:0, y1:0, x2:0, y2:1,       stop:0 #B1B1B1, stop:1 #c4c4c4);  background: qlineargradient(x1: 0, y1: 0.2, x2: 1, y2: 1,      stop: 0 #5DCCFF, stop: 1 #1874CD);  border: 1px solid #4A708B;  height: 10px;  border-radius: 2px;  }    QSlider#horizontalSlider::add-page:horizontal {  background: #575757;  border: 0px solid #777;  height: 10px;  border-radius: 2px;  }    QSlider#horizontalSlider::handle:horizontal   {      background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5,       stop:0.6 #45ADED, stop:0.778409 rgba(255, 255, 255, 255));        width: 11px;      margin-top: -3px;      margin-bottom: -3px;      border-radius: 5px;  }    QSlider#horizontalSlider::handle:horizontal:hover {      background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.6 #2A8BDA,       stop:0.778409 rgba(255, 255, 255, 255));        width: 11px;      margin-top: -3px;      margin-bottom: -3px;      border-radius: 5px;  }    QSlider#horizontalSlider::sub-page:horizontal:disabled {  background: #00009C;  border-color: #999;  }    QSlider#horizontalSlider::add-page:horizontal:disabled {  background: #eee;  border-color: #999;  }    QSlider#horizontalSlider::handle:horizontal:disabled {  background: #eee;  border: 1px solid #aaa;  border-radius: 4px;  }

9.QTabWidget样式

美化前：

美化后：

代码如下：

QWidget#centralWidget{       border-style:solid;   background: transparent;   background-color:#2F4F4F;   }QtableWidget#tableWidget:pane{       background:  transparent;        background-color:#FFE4B5;}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: 0.5px solid #C4C4C3;    border-bottom-color: #C2C7CB;    border-top-left-radius: 1px;    border-top-right-radius: 1px;    min-width: 8ex;    padding: 2px;color:white;} 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: black;border-style:solid;background: transparent;    border-bottom-color: red;background-image: url(:qss/Skin/black/tools/tab-image-pressed.png); } QTabBar::tab:selected {    border-style:solid;    border-color: black;background: transparent;    border-bottom-color: red;background-image: url(:qss/Skin/black/tools/tab-image.png); }

如需要增加特殊背景，用如下方式：

代码如下：

QTabWidget#tab>QTabBar::tab:first { border-image: url(:/Default_N.png); } QTabWidget#tab>QTabBar::tab:first:hover { border-image: url(:/Default_P.png); } QTabWidget#tab>QTabBar::tab:first:pressed { border-image: url(:/Default_P.png); } QTabWidget#tab>QTabBar::tab:last { border-image: url(:/Apply_N.png); } QTabWidget#tab>QTabBar::tab:last:hover { border-image: url(:/Apply_P.png); } QTabWidget#tab>QTabBar::tab:last:pressed { border-image: url(:/Apply_P.png); }

10.其它使用细节总结：

自定义的前台背景与后台背景的颜色：

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

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 { /* 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 */

}

QSlider：

下面的横向的slider

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;

}

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 { /* The tab widget frame */

border-top: 2px solid #C2C7CB;

}

QTabWidget::tab-bar { /* move to the right by 5px */

left: 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; /* 如果只有一个页面, 我们不能重叠边缘 */

}

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

}

定制 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; /* spacing between items in the tool bar */

}

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 { /* italicize selected tabs */

font: italic;

color: white;

}

定制 QToolButton：

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

}

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;

}

QSS、CSS样式表属性参考表：

http://www.w3school.com.cn/css/css_background.asp

1 0