《Qt》part 7 QSS参考样式表——界面美化2

最新推荐文章于 2024-08-19 00:03:50 发布

梁Rio

最新推荐文章于 2024-08-19 00:03:50 发布

阅读量6.9k

点赞数 10

分类专栏：《Qt》文章标签：界面 qt qss

本文链接：https://blog.csdn.net/sinat_24206709/article/details/55806807

版权

《Qt》专栏收录该内容

11 篇文章 1 订阅

订阅专栏

《Qt》part 7 QSS参考样式表——界面美化2

一、QSS1

参考样式表1：

*{  
  font-size:13px;  
  color:white;  
  font-family:"宋体";  
}  
CallWidget QLineEdit#telEdt  
{  
  font-size:24px;  
}  
QMainWindow,QDialog{  
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
                                 stop: 0 #1B2534, stop: 0.4 #010101,  
                                 stop: 0.5 #000101, stop: 1.0 #1F2B3C);  
}  
QWidget{  
    background:#121922;  
}  
QLabel{  
   background:transparent;  
}  
DailForm QLineEdit#phoneLineEdt{  
  font-size:36px;  
  font-weight: bold;  
}  
QPushButton,QToolButton{  
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
                                 stop: 0 #5B5F5F, stop: 0.5 #0C2436,  
                                 stop: 1.0 #27405A);  
    border-style: outset;  
    border-width: 1px;  
    border-radius: 5px;  
    border-color: #11223F;  
    padding: 1px;  
}  
QPushButton::hover,QToolButton::hover{  
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
                                 stop: 0 #758385, stop: 0.5 #122C39,  
                                 stop: 1.0 #0E7788);  
    border-color: #11505C;  
}  
QPushButton::pressed,QToolButton::pressed{  
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
                                 stop: 0 #969B9C, stop: 0.5 #16354B,  
                                 stop: 1.0 #244F76);  
    border-color: #11505C;  
}  
QPushButton::disabled,QToolButton::disabled{  
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
                                 stop: 0 #282B2C, stop: 0.5 #09121A,  
                                 stop: 1.0 #111D29);  
    border-color: #0A1320;  
    color:#6A6864;  
}  
QDialog QPushButton,QDialog QToolButton{  
  min-width:30px;  
  min-height:23px;  
}  
QToolButton[objectName="minimizeToolBtn"] {  
    background: transparent;  
    border:none;  
    image:url(qss/minimize.png)  
}  
QToolButton[objectName="minimizeToolBtn"]:hover,QToolButton[objectName="minimizeToolBtn"]:pressed {  
    image:url(qss/minimize_hover.png)  
}  
QToolButton[objectName="maximizeToolBtn"] {  
    background: transparent;  
    border:none;  
    image:url(qss/maximize.png)  
}  
QToolButton[objectName="maximizeToolBtn"]:hover,QToolButton[objectName="maximizeToolBtn"]:pressed {  
    image:url(qss/maximize_hover.png)  
}  
QToolButton[objectName="closeToolBtn"],QToolButton[objectName="customCloseWindow"] {  
    background: transparent;  
    border:none;  
    image:url(qss/close.png)  
}  
QToolButton[objectName="closeToolBtn"]:hover,QToolButton[objectName="closeToolBtn"]:pressed{  
    image:url(qss/close_hover.png)  
}  
QToolButton[objectName="customCloseWindow"]:hover,QToolButton[objectName="customCloseWindow"]:pressed{  
    image:url(qss/close_hover.png)  
}  
QToolButton[objectName="titleSetUpToolBtn"]{  
    background: transparent;  
    border:none;  
    image:url(qss/setup.png)  
}  
DailForm QToolButton#oneToolBtn,QToolButton#OneToolBtn,QToolButton#twoToolBtn,QToolButton#threeToolBtn,  
         QToolButton#fourToolBtn,QToolButton#fiveToolBtn,QToolButton#sixToolBtn,  
         QToolButton#sevenToolBtn,QToolButton#eightToolBtn,QToolButton#nineToolBtn,  
         QToolButton#starToolBtn,QToolButton#zeroToolBtn,QToolButton#sharpToolBtn {  
    font-size:36px;  
    border-radius: 10px;  
}  
DailForm QToolButton#delToolBtn{  
    border-radius: 10px;  
}  
QFrame{  
    border-color:#32435E;  
    border-width:1px;  
    border-radius: 3px;  
}  
QLineEdit,QTextEdit {  
    border: 1px solid #32435E;  
    border-radius: 3px;  
    /* padding: 0 8px; */  
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
                                 stop: 0 #080B10,  
                                 stop: 1.0 #212C3F);  
    selection-background-color: #0A246A;  
}  
QLineEdit::hover{  
  border-color:#5D8B9E;  
}  
QLineEdit[echoMode="3"] {  
     lineedit-password-character: 9679;  
}  
#QLineEdit:read-only {  
     background: #543F7C;  
}  
QTabWidget::pane { /* The tab widget frame */  
     border: 0px solid #32435E;  
     position: absolute;  
     left: -0.1em;  
}  
QTabWidget#MainTabWidget::tab-bar {  
     left: -3px; /* move to the right by 5px */  
}  
QTabWidget#MainTabWidget QTabBar::tab {  
     height: 14ex;  
     width: 14ex;  
}  
QTabBar::tab {  
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
                                 stop: 0 #292F31, stop: 1 #0C131E);  
}  
QTabBar::tab:selected{  
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
                                 stop: 0 #113845,  stop: 1.0 #15A8FF);  
}  
QTabBar::tab:hover {  
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
                                 stop: 0 #113845,  stop: 1.0 #0E6F80);  
}  
#QTabBar::tab:selected {  
     border-color: #32435E;  
     border-right-color: #32435E; /* same as pane color */  
}  
#QTabBar::tab:!selected {  
     margin-left: 2px; /* make non-selected tabs look smaller */  
}  
#QTabBar:tab:first:selected {  
    margin-top: 0;  
}  
QTabBar:tab:last:selected {  
    margin-right: 0;  
}  
QTabBar:tab:only-one {  
     margin: 0;  
}  
QListWidget{  
    border: 1px solid #32435E;  
    background:#050609;  
}  
QListWidget::item:selected {  
     /*border: 0px solid #33CCFF;*/  
     border:none;  
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
                                 stop: 0 #6A848C,  stop: 1.0 #0F9EAF);  
     padding:0px;  
     margin:0px;  
}  
#QListWidget::item:selected:!active {  
     border-width: 0px ;  
}  
#QListWidget::item:selected:active {  
     border-width: 1px;  
}  
  
QComboBox {  
     border: 1px solid #32435E;  
     border-radius: 3px;  
     padding: 1px 18px 1px 3px;  
     min-width: 6em;  
}  
QComboBox::hover{  
  border-color:#5D8B9E;  
}  
QComboBox:editable {  
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
                                 stop: 0 #080B10,  
                                 stop: 1.0 #212C3F);  
}  
QComboBox:!editable, QComboBox::drop-down:editable {  
      background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
                                 stop: 0 #080B10,  
                                 stop: 1.0 #212C3F);  
}  
/* 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 #080B10,  
                                 stop: 1.0 #212C3F);;  
}  
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: 32435E;  
     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(qss/downarrow.png);  
}  
QComboBox::down-arrow:on { /* shift the arrow when popup is open */  
     top: 1px;  
     left: 1px;  
}  
QComboBox QAbstractItemView {  
     border: 2px solid #32435E;  
     selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
                                 stop: 0 #506B79,  
                                 stop: 1.0 #0D95A6);  
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,  
                                 stop: 0 #1B2534, stop: 0.4 #010101,  
                                 stop: 0.5 #000101, stop: 1.0 #1F2B3C);  
}

二：QSS2

参考样式表2:

QProgressBar{  
    color : solid gray;  
    border: 2px solid gray;  
    border-radius: 5px;  
    background: transparent;  
    padding: 0px;  
    text-align : center ;  
}  
QProgressBar::chunk{  
    background: #B22222;  
}  
  
QTextEdit{  
    border: 10px;  
    border-image: url(image/system/border.png)10 10 10 10 ;  
    background-color: rgba(43,45,31,255);  
}  
  
QTextEdit[description="true"]{  
    border: 10px;  
    border-image: none;  
    background-color: rgba(255,255,255,255);  
}  
  
QTextEdit QScrollBar:vertical  {  
     margin: 22px 0 22px 0;  
}  
  
QScrollBar:add-page  
{  
     background-color: rgba(0,0,0,255);  
}  
  
QScrollBar:sub-page  
{  
     background-color: rgba(0,0,0,255);  
}  
  
 QScrollBar::add-line:vertical  {  
  
     background-color: rgba(43,45,31,255);  
     height: 15px;  
     subcontrol-position: bottom;  
     subcontrol-origin: margin;  
 }  
  
 QScrollBar::sub-line:vertical  {  
  
     background-color: rgba(43,45,31,255);  
     height: 15px;  
     subcontrol-position: top;  
     subcontrol-origin: margin;  
 }  
  
QScrollBar::handle:vertical    {      
    border : 2px solid gray;  
    border-radius: 6px;  
    background-color: solid gray;  
    min-height : 12px;  
}  
  
QScrollBar::up-arrow:vertical  
{  
    border-image: url(image/system/button/scroll-up-arrow.png);  
}  
  
QScrollBar::down-arrow:vertical  
{  
    border-image: url(image/system/button/scroll-down-arrow.png);  
}  
  
 QLineEdit#chat_edit{  
    background-color: rgba(20,20,20,255);  
    color: white;  
    border: 10px transparent;  
    height: 20px;  
    border-image: url(image/system/border.png)10 10 10 10 ;  
 }  
  
QStatusBar::item {  
     border: 0px solid grey;  
 }  
   
QStatusBar{  
    background-image: url(image/system/skill-dock.png);  
    color:white;  
}  
  
QMenu[private_pile="true"]{  
    background-color: rgba(43,63,53,200);  
    border-radius: 1px;  
    color: white;  
}  
  
QPushButton[private_pile="true"]{  
    background-color: rgba(43,63,53,200);  
    border-radius: 1px;  
    color: white;  
}  
  
QPushButton[game_control="true"]{  
    border: 0px solid gray;  
    font: 12px;  
    border-radius: 5px;  
    padding: 6px 12px 6px 12px;  
}  
  
QPushButton#pause{  
    background-image: url(image/system/button/pause.png);  
}  
  
QPushButton#play{  
    background-image: url(image/system/button/play.png);  
}  
  
QPushButton#slow-down{  
    background-image: url(image/system/button/slow-down.png);  
}  
  
QPushButton#speed-up{  
    background-image: url(image/system/button/speed-up.png);  
}  
  
QPushButton#uniform{  
    background-image: url(image/system/button/uniform.png);  
}  
  
#skill_bar_container QPushButton{  
    background-image: url(image/system/button/back.png);  
        border: 1px solid gray;  
        border-radius: 4px;  
    color: yellow;  
    font: 12px;  
    padding: 6px 12px 6px 12px;  
}  
#skill_bar_container QPushButton:disabled{  
    background-image: url(image/system/button/back_shade.png);  
        border-radius: 4px;  
    color: white;  
    font: 12px;  
}  
#skill_bar_container QCheckBox{  
    border: 1px solid gray;  
        border-radius: 4px;  
    color: yellow;  
    font: 12px;  
    padding: 1px 12px 1px 8px;  
}  
#skill_bar_container QCheckBox::indicator{  
    height: 0px;  
    width: 0px;  
}  
#skill_bar_container QCheckBox:unchecked{  
    background-image: url(image/system/button/frequent_checkbox/unchecked.png);  
}  
#skill_bar_container QCheckBox:unchecked:hover{  
    background-image: url(image/system/button/frequent_checkbox/unchecked_hover.png);  
}  
#skill_bar_container QCheckBox:unchecked:pressed{  
    background-image: url(image/system/button/frequent_checkbox/unchecked_press.png);  
}  
#skill_bar_container QCheckBox:checked{  
    background-image: url(image/system/button/frequent_checkbox/checked.png);  
}  
#skill_bar_container QCheckBox:checked:hover{  
    background-image: url(image/system/button/frequent_checkbox/checked_hover.png);  
}  
#skill_bar_container QCheckBox:checked:pressed{  
    background-image: url(image/system/button/frequent_checkbox/checked_press.png);  
}  
#skill_bar_container QComboBox{  
    background-image: url(image/system/button/back2.png);  
    border: 1px solid gray;  
    border-radius: 3px;  
    color: white;  
    padding: 1px 18px 1px 3px;  
}  
#skill_bar_container QComboBox:on{  
    padding-left: 4px;  
    padding-top: 3px;  
}  
#skill_bar_container QComboBox::drop-down{  
    border-bottom-right-radius: 3px;  
    border-left-color: darkgray;  
    border-left-style: solid;  
    border-left-width: 1px;  
    border-top-right-radius: 3px;  
    subcontrol-origin: padding;  
    subcontrol-position: top right;  
    width: 15px;  
}  
#skill_bar_container QComboBox::down-arrow:on{  
    left: 1px;  
    top: 1px;  
}

设计Qt程序Ui的时候，可以像WEB端使用CSS一样，使用QSS，使页面美化跟代码层分开，利于维护。

过程如下：

1、建立文本文件，写入样式表内容，更改文件后缀名为.qss；

2、在工程中新建资源文件*.qrc，将.qss文件加入资源文件.qrc中，此处注意prefix最好为"/"，否则在调用qss文件时会找不到文件；

*.qrc文件中添加：

<file>Resources/ui.qss</file>

3、通过传入路径\文件名的方式创建一个QFile对象，以readonly的方式打开，然后readAll，最后qApp->setStyleSheet就可以使qss生效。

在main函数中按照以下两种方式添加代码：

方式一：

	QString qss;
	QFile qssFile("Resources/ui.qss");

	qssFile.open(QFile::ReadOnly);

	if (qssFile.isOpen())
	{
		qss = QLatin1String(qssFile.readAll());

		qApp->setStyleSheet(qss);

		qssFile.close();
	}

方式二：

	set qss
	QFile file("Resources/ui.qss");
	file.open(QFile::ReadOnly);
	qApp->setStyleSheet(file.readAll());

三、QSS样式表3

qss3:

/* === Shared === */
QStackedWidget, QLabel, QPushButton, QRadioButton, QCheckBox, 
QGroupBox, QStatusBar, QToolButton, QComboBox, QDialog {
    background-color: #222222;
    color: #BBBBBB;
    font-family: "Segoe UI";
}

/* === QWidget === */
QWidget:window {
    background: #222222;
    color: #BBBBBB;
    font-family: "Segoe UI";
}

/* === QToolTip === */
QToolTip {
    background-color: #000000;
    border: 2px solid #333333;
    color: yellow;
}

/* === QPushButton === */
QPushButton {
    border: 1px solid #333333;
    padding: 4px;
    min-width: 65px;
    min-height: 12px;
}

QPushButton:hover {
    background-color: #333333;
    border-color: #444444;
}

QPushButton:pressed {
    background-color: #111111;
    border-color: #333333;
    color: yellow;
}

QPushButton:disabled {
    color: #333333;
}

/* === Checkable items === */
QCheckBox::indicator, QRadioButton::indicator, QTreeView::indicator {
    width: 16px;
    height: 16px;
    background-color: #111111;
    border: 1px solid #333333;
}

QRadioButton::indicator {
    border-radius: 8px;
}

QCheckBox::indicator::checked, QRadioButton::indicator::checked, QTreeView::indicator::checked {
    background-color: qradialgradient(cx:0.5, cy:0.5, fx:0.25, fy:0.15, radius:0.3, stop:0 #BBBBBB, stop:1 #111111);
}

QCheckBox::indicator:disabled, QRadioButton::indicator:disabled, QTreeView::indicator:disabled {
    background-color: #444444;
}

QCheckBox::indicator::checked:disabled, QRadioButton::indicator::checked:disabled, QTreeView::indicator::checked:disabled {
    background-color: qradialgradient(cx:0.5, cy:0.5, fx:0.25, fy:0.15, radius:0.3, stop:0 #BBBBBB, stop:1 #444444);
}

/* === QComboBox === */
QComboBox {
    background-color: black;
    border: 1px solid #333333;
    color: white;
    padding:1px 2em 1px 3px;
}

QComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    border-left: 1px solid #333333;
}

QComboBox::down-arrow {
    border: 2px solid #333333;
    width: 6px;
    height: 6px;
    background: #5f5f5f;
}

/* === QGroupBox === */
QGroupBox {
    border: 2px solid #333333;
    margin-top: 2ex;
}

QGroupBox::title {
    color: yellow;
    subcontrol-origin: margin;
    subcontrol-position: top left;
    margin-left: 5px;
}

/* === QTabWidget === */
QTabWidget::pane {
    background: #222222;
    border: 2px solid #333333;
}

/* === QTabBar === */
QTabBar::tab {
    background: transparent;
    border: 1px solid #333333;
    border-bottom: none;
    color: #BBBBBB;
    padding-left: 5px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
}

QTabBar::tab:hover {
    background-color: #333333;
    border: 1px solid #444444;
    border-bottom: none;
}

QTabBar::tab:selected {
    background-color: #111111;
    border: 1px solid #333333;
    border-top: 1px solid yellow;
    border-bottom: none;
    color: yellow
}

/* === QToolBar === */
QToolBar {
    background-color: #222222;
    border: none;
    padding: 1px;
}

QToolBar:handle {
    background: #222222;
    border-left: 1px dotted yellow;
    color: #BBBBBB;
}

QToolBar::separator {
    width: 6px;
    background-color: #222222;
}

/* === QToolButton === */
QToolButton {
    border: 1px solid #333333;
    margin: 1px;
}

QToolButton:hover {
    background-color: #333333;
    border: 1px solid #444444;
}

QToolButton[popupMode="1"] { /* only for MenuButtonPopup */
    padding-right: 20px; /* make way for the popup button */
}

QToolButton::menu-button {
    border-left: 1px solid #333333;
    background: transparent;
    width: 16px;
}

QToolButton::menu-button:hover {
    border-left: 1px solid #444444;
    background: transparent;
    width: 16px;
}

QToolButton:checked, QToolButton:pressed {
    background-color: #111111;
    color: yellow;
}

/* === QMenu === */
QMenu {
    background-color: black;
    border: 1px solid gray;
    color: white;
    padding: 1px;
}

QMenu::item {
    padding: 2px 25px 2px 20px;
    border: 1px solid transparent;
}

QMenu::item:disabled {
    color: #666666;
}

QMenu::item:selected {
    border-color: gray;
    background: #222222;
}

QMenu::icon:checked {

}

QMenu::separator {
    height: 1px;
    background: #222222;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 1px;
    margin-bottom: 1px;
}

QMenu::indicator {
    width: 13px;
    height: 13px;
}

/* === QMenuBar === */
QMenuBar {
    background-color: black;
    color: white;
}

QMenuBar::item {
    background: transparent;
}

QMenuBar::item:disabled {
    color: gray;
}

QMenuBar::item:selected {
    background: #222222;
}

QMenuBar::item:pressed {
    background: #444444;
}
 
/* === QScrollBar:vertical === */
QScrollBar:vertical {
    background: #111111;
    width: 16px;
    margin: 16px 0 16px 0;
}

QScrollBar::handle:vertical {
    background: #555555;
    min-height: 16px;
}

QScrollBar::add-line:vertical {
    background: #444444;
    height: 16px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}

QScrollBar::sub-line:vertical {
    background: #444444;
    height: 16px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}

QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
    background: none;
}

QScrollBar:up-arrow:vertical, QScrollBar:down-arrow:vertical {
    border: 2px solid #333333;
    width: 6px;
    height: 6px;
    background: #5f5f5f;
}

/* === QScrollBar:horizontal === */
QScrollBar:horizontal {
    background: #111111;
    height: 16px;
    margin: 0 16px 0 16px;
}

QScrollBar::handle:horizontal {
    background: #555555;
    min-width: 16px;
}

QScrollBar::add-line:horizontal {
    background: #444444;
    width: 16px;
    subcontrol-position: right;
    subcontrol-origin: margin;
}

QScrollBar::sub-line:horizontal {
    background: #444444;
    width: 16px;
    subcontrol-position: left;
    subcontrol-origin: margin;
}

QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
    background: none;
}

QScrollBar:left-arrow:horizontal, QScrollBar:right-arrow:horizontal {
    border: 2px solid #333333;
    width: 6px;
    height: 6px;
    background: #5f5f5f;
}

/* =================== */
QLineEdit, QListView, QTreeView, QTableView, QAbstractSpinBox {
    background-color: black;
    color: #BBBBBB;
    border: 1px solid #333333;
}

QAbstractScrollArea, QLineEdit, QTextEdit, QAbstractSpinBox, QComboBox {
    border-color: #333333;
    border: 1px solid #333333;

}

/* === QHeaderView === */
QHeaderView::section {
    background: #222222;
    border: 0;
    color: #BBBBBB;
    padding: 3px 0 3px 4px;
}

/* === QListView === */
QListView::item:hover {
    background: #333333;
}

QListView::item:selected {
    background: #111111;
    color: yellow;
}

/* === QTableView === */
QTableView::item:hover {
    background: #333333;
}

QTableView::item:hover {
    background: #111111;
    color: yellow;
}

/* === QTreeView === */
QTreeView::item {
    background: black;
}

QTreeView::item:hover {
    background: #333333;
}

QTreeView::item:selected {
    background: #111111;
    color: yellow;
}

QTreeView::branch {

}

QTreeView::branch:has-siblings:adjoins-item {

}

QTreeView::branch:has-siblings:!adjoins-item {

}

QTreeView::branch:closed:has-children:has-siblings {

}

QTreeView::branch:has-children:!has-siblings:closed {

}

QTreeView::branch:!has-children:!has-siblings:adjoins-item {

}

QTreeView::branch:open:has-children:has-siblings {

}

QTreeView::branch:open:has-children:!has-siblings {

}

/* === Customizations === */
QFrame#infoLabel {
    border: 1px inset #333333;
}
2.

.QWidget {
   background-color: beige;
}

QToolBar {
    background-color: beige;
}

QDialog, QFileDialog {
    background-color: beige;
}

QTabWidget::pane { /* The tab widget frame */
    border-top: 2px solid #C2C7CB;
}

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

QTabBar, QTabWidget {
    background-color: beige;
}
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: 1px solid darkkhaki;
     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 */
}

/* Nice Windows-XP-style password character. */
QLineEdit[echoMode="2"] {
    lineedit-password-character: 9679;
}

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;
 }


/* We provide a min-width and min-height for push buttons
   so that they look elegant regardless of the width of the text. */
QPushButton {
    background-color: palegoldenrod;
    border-width: 2px;
    border-color: darkkhaki;
    border-style: solid;
    border-radius: 5;
    padding: 3px;
    min-width: 9ex;
    min-height: 2.5ex;
}

QPushButton:hover {
   background-color: khaki;
}

/* Increase the padding, so the text is shifted when the button is
   pressed. */
QPushButton:pressed {
    padding-left: 5px;
    padding-top: 5px;
    background-color: #d0d67c;
}

QLabel, QAbstractButton {
    font: bold;
}

/* Mark mandatory fields with a brownish color. */
.mandatory {
    color: brown;
}

/* Bold text on status bar looks awful. */
QStatusBar QLabel {
   font: normal;
}

QStatusBar::item {
    border-width: 1;
    border-color: darkkhaki;
    border-style: solid;
    border-radius: 2;
}

QStackedWidget, QComboBox, QLineEdit, QSpinBox, QTextEdit, QListView, QWebView, QTreeView, QHeaderView {
    background-color: cornsilk;
    selection-color: #0a214c; 
    selection-background-color: #C19A6B;
}

QListView {
    show-decoration-selected: 1;
}

QListView::item:hover {
    background-color: wheat;
}

/* We reserve 1 pixel space in padding. When we get the focus,
   we kill the padding and enlarge the border. This makes the items
   glow. */
QLineEdit, QFrame {
    border-width: 1px;
    padding: 1px;
    border-style: solid;
    border-color: darkkhaki;
    border-radius: 5px;
}

/* As mentioned above, eliminate the padding and increase the border. */
QLineEdit:focus, QFrame:focus {
    border-width: 3px;
    padding: 0px;
}

/* A QLabel is a QFrame  */
QLabel {
    border: none;
    padding: 0;
    background: none;
}

/* A QToolTip is a QLabel  */
QToolTip {
    border: 2px solid darkkhaki;
    padding: 5px;
    border-radius: 3px;
    opacity: 200;
}

/* Nice to have the background color change when hovered. */
QRadioButton:hover, QCheckBox:hover {
    background-color: wheat;
}

/* Force the dialog's buttons to follow the Windows guidelines. */
QDialogButtonBox {
    button-layout: 0;
}


3.
/*
    Style by evilworks, 2012-2013. pollux@lavabit.com
    This file is Public Domain.
*/

/* === Shared === */
QStackedWidget, QLabel, QPushButton, QRadioButton, QCheckBox, 
QGroupBox, QStatusBar, QToolButton, QComboBox, QDialog, QTabBar {
    font-family: "Segoe UI";
    background-color: #888;
    color: #000;
}

/* === QWidget === */
QWidget:window {
    font-family: 'Segoe UI';
    background-color: #888;
}

/* === QPushButton === */
QPushButton {
    border: 1px solid #555;
    padding: 4px;
    min-width: 65px;
    min-height: 12px;
}

QPushButton:hover {
    background-color: #999;
}

QPushButton:pressed {
    background-color: #333;
    border-color: #555;
    color: #AAA;
}

QPushButton:disabled {
    color: #333333;
}

/* === QComboBox === */
QComboBox {
    background-color: #AAA;
    border: 1px solid #555;
    color: black;
}

QComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    border-left: 1px solid #333333;
}

/* === QGroupBox === */
QGroupBox {
    border: 1px solid #555;
    margin-top: 2ex;
}

QGroupBox::title {
    color: black;
    subcontrol-origin: margin;
    subcontrol-position: top left;    
    border: 1px solid #555;
}

/* === QTabBar === */
QTabBar::tab {
    border-bottom: none;
    color: #000;
    padding: 4px;
    background-color: #888;
    border: 1px solid #555;
}

QTabBar::tab:hover {
    background-color: #AAA;
}

QTabBar::tab:selected {
    background-color: #000;
    color: white;
}

/* === QTabWidget === */
QTabWidget::pane {
    background: #888;
    border: 1px solid #555;
}


/* === QToolBar === */
QToolBar {
    background: #949494;
    border: none;
    padding-left: 0px;
    padding-right: 0px;
    margin: 2px;
}

QToolBar::separator {
    width: 1px;
    margin-left: 3px;
    margin-right: 3px;
    background-color: #555;
}

/* === QToolButton === */
QToolButton {
    border: 1px solid #666;
    margin: 1px;
}

QToolButton:hover {
    background-color: #AAA;
}

QToolButton[popupMode="1"] { /* only for MenuButtonPopup */
    padding-right: 20px; /* make way for the popup button */
}

QToolButton::menu-button {
    border-left: 1px solid #666;
    background: transparent;
    width: 16px;
}

QToolButton::menu-button:hover {
    border-left: 1px solid #666;
    background: transparent;
    width: 16px;
}

QToolButton:checked, QToolButton:pressed {
    background-color: #000;
    border: 1px solid #555;
    color: white;
}

/* === QScrollBar:vertical === */
QScrollBar:vertical {
    width: 16px;
    margin: 16px 0 16px 0;
    background: #333;
}

QScrollBar::handle:vertical {
    background: #888;
    min-height: 16px;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
}

QScrollBar::add-line:vertical {
    background: #888;
    height: 16px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}

QScrollBar::sub-line:vertical {
    background: #888;
    height: 16px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}

QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
    background: none;
}

/* === QScrollBar:horizontal === */
QScrollBar:horizontal {
    height: 16px;
    margin: 0 16px 0 16px;
    background: #333;
}

QScrollBar::handle:horizontal {
    background: #888;
    min-width: 16px;
    border-left: 1px solid #666;
    border-right: 1px solid #666;
}

QScrollBar::add-line:horizontal {
    background: #888;
    width: 16px;
    subcontrol-position: right;
    subcontrol-origin: margin;
}

QScrollBar::sub-line:horizontal {
    background: #888;
    width: 16px;
    subcontrol-position: left;
    subcontrol-origin: margin;
}

QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
    background: none;
}

/* === QMenu === */
QMenu {
    background-color: black;
    border: 1px solid gray;
    color: white;
    padding: 1px;
}

QMenu::item {
    padding: 2px 25px 2px 20px;
    border: 1px solid transparent;
}

QMenu::item:disabled {
    color: #666666;
}

QMenu::item:selected {
    border-color: gray;
    background: #222222;
}

QMenu::icon:checked {

}

QMenu::separator {
    height: 1px;
    background: #222222;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 1px;
    margin-bottom: 1px;
}

QMenu::indicator {
    width: 13px;
    height: 13px;
}

/* === QMenuBar === */
QMenuBar {
    background-color: black;
    color: white;
}

QMenuBar::item {
    background: transparent;
}

QMenuBar::item:disabled {
    color: gray;
}

QMenuBar::item:selected {
    background: #222222;
}

QMenuBar::item:pressed {
    background: #444444;
}
/* =================== */
QLineEdit, QListView, QTreeView, QTableView, QAbstractSpinBox {
    background-color: #AAA;
    color: #000;
    border: 1px solid #555;
}

QAbstractScrollArea, QLineEdit, QTextEdit, QAbstractSpinBox, QComboBox {
    border: 1px solid #555;
}

/* === QHeaderView === */
QHeaderView::section {
    height: 20px;
}

QHeaderView::section {
    background: #666;
    border: 0;
    color: #000;
    padding-left: 4px;
}

/* === QListView === */
QListView::item:hover {
    background: #AAA;
}

QListView::item:selected {
    background: #333;
    color: #AAA;
}

/* === QTableView === */
QTableView::item:hover {
    background: #333333;
}

QTableView::item:hover {
    background: #111111;
    color: yellow;
}

/* === QTreeView === */
QTreeView::item {
    background: #AAA;
}

QTreeView::item:hover {
    background: #CCC;
}

QTreeView::item:selected {
    background: #333;
    color: #AAA;
}

QTreeView::branch {

}

QTreeView::branch:has-siblings:adjoins-item {

}

QTreeView::branch:has-siblings:!adjoins-item {

}

QTreeView::branch:closed:has-children:has-siblings {

}

QTreeView::branch:has-children:!has-siblings:closed {

}

QTreeView::branch:!has-children:!has-siblings:adjoins-item {

}

QTreeView::branch:open:has-children:has-siblings {

}

QTreeView::branch:open:has-children:!has-siblings {

}

四、QSS类的用法及基本语法介绍

目录

1. 何为Qt样式表
2. 样式表语法基础
3. 方箱模型
4. 前景与背景
5. 创建可缩放样式
6. 控制大小
7. 处理伪状态
8. 使用子部件定义微观样式
8.1. 相对定位
8.2. 绝对定位

摘要

由于Qt样式表的引入，定制Qt部件的外观样式变得非常简单。无论你是想仅仅修改一个现有部件的外观，还是想从零开始设计一套全新的界面风格，现在都有了一种新的方法而不必再去继承并实现一个QStyle的子类。

1. 何为Qt样式表

Qt样式表的思想很大程度上是来自于HTML的层叠式样式表(CSS)，通过调用QWidget::setStyleSheet()或QApplication::setStyleSheet()，你可以为一个独立的子部件、整个窗口，甚至是整个个应用程序指定一个样式表。

样式表是通过QStyle的一个叫做QStyleSheetStyle的特殊子类来实现的。这个特殊的子类实际上是其他的系统特定风格类的包裹类，它会把通过样式表指定的自定义外观风格应用在底层的系统特定风格之上。

Qt 4.2包含了一个叫做stylesheet的例子来帮助你学习样式表，这个例子自带了两个样式：Coffee和Pagefold。

上面的Coffee风格自定义了push button、frames和tooltip，但使用了下层的风格（例如这里是Windows XP风格）来绘制checkbox，combobox和radio button。

Pagefold风格完全重新定义了对话框中使用的所有控件的外观，从而实现了一种独特的，平台无关的外观。

2. 样式表语法基础

Qt样式表与CSS的语法规则几乎完全相同，如果你已经了解了CSS，完全可以跳过本节。

一个样式表由一系列的样式规则构成。每个样式规则都有着下面的形式：

selector { attribute: value }

选择器(selector)部分通常是一个类名(例如QComboBox)，当然也还有其他的语法形式。

属性(attribute)部分是一个样式表属性的名字，值(value)部分是赋给该属性的值。

为了使用方便，我们还可以使用一种简化形式：

selector1, selector2, ..., selectorM {
attribute1: value1;
attribute2: value2;
...
attributeN: valueN;
}

这种简化形式可以同时为与M个选择器相匹配的部件设置N种属性。例如：

QCheckBox, QComboBox, QSpinBox {
color: red;
background-color: white;
font: bold;
}

这个规则设置了所有的QCheckBox、QComboBox和QSpinBox的前景色、背景色和字体。

在线文档列出了每种部件支持的所有属性。在本文中，我们只使用最常见的几种通用属性。

3. 方箱模型

在样式表中，每个部件都被看作是一个由四个同心相似的矩形组成的箱体：空白(margin)、边框(border)、填充(padding)和内容(content)。对于一个平面部件——例如一个空白、边框和填充都是0像素的部件——而言，这四个矩形是完全重合的。

空白区域位于边框外，并且总是透明的。边框为部件提供了四周的框架，其border-style属性可以设置为一些内置的框架风格，如inset、outset、solid和ridge。填充在边框和内容区域之间提供了空白间隔。

4. 前景与背景

部件的前景色用于绘制上面的文本，可以通过color属性指定。背景色用于绘制部件的填充矩形，可以通过background-color属性指定。

背景图片使用background-image属性定义，它用于绘制由background-origin指定的矩形区域（空白、边框、填充或内容）。背景图片在矩形区域内的对齐和平铺方式可以通过background-position和background-repeat属性指定。

如果指定的背景图片具有alpha通道（即有半透明效果），通过background-color指定的颜色将会透过透明区域。这一功能可以使背景图片在多种环境下重复利用。

该例子中使用的样式表如下所示：

QFrame {
margin: 10px;
border: 2px solid green;
padding: 20px;

background-color: gray;
background-image: url(qt.png);
background-position: top right;
background-origin: content;
background-repeat: none;
}

在这个例子中，QFrame四周的空白、边框和填充值都是一样的。实际上margin属性可以在上下左右四个方向分别指定我们需要的不同值，例如：

QFrame {
margin: 14px 18px 20px 18px;
}

同时，我们也可以分别指定margin-top、margin-right、margin-bottom、margin-left四个属性。

QFrame {
margin-top: 14px;
margin-right: 18px;
margin-bottom: 20px;
margin-left: 18px;
}

虽然目前我们仅仅使用了QFrame作为例子，但是我们也可以同样的将这些属性应用于任何一个支持方箱模型的Qt部件，例如：QCheckBox、 QLabel、QLineEdit、QListView、QMenu、QPushButton、QTextEdit、和QToolTip。

5. 创建可缩放样式

在默认情况下，通过background-image指定的背景图片会自动重复平铺，以覆盖部件的整个填充矩形（即边框里面的那个区域）。如果我们想创建能够随着部件大小自动缩放而不是平铺的背景，我们需要设置一种称之为“边框图片”的东东。

“边框图片”可以通过border-image属性指定，它同时提供了部件的背景和边框。一个“边框图片”被分为九个部分（九宫格），有点向tic-tac-toe游戏的棋盘。

当一个部件的边框被填充时，四角的格子通常不会发生变化，而其余的五个格子则可能被拉伸或平铺以填充可用空间。

当指定一个“边框图片”时，除了图片本身，我们还必须指定用来分割九宫格的四条分割线。同时我们还必须指定非边角的格子是应该平铺还是拉伸，以及边框的宽度（用来确定边角格子的大小，防止边角被缩放变形）。

例如，下面的样式表定义了上图中的button：

QPushButton {
border-width: 4px;
border-image: url(button.png) 4 4 4 4 stretch stretch;
}

另外，“边框图片”还应该含有alpha通道，以使背景能够在边角处露出来。

6. 控制大小

min-width和min-height两个属性可以用来指定一个部件的内容区域的最小大小。这两个值将影响部件的minimumSizeHint()，并在布局时被考虑。

例如：

QPushButton {
min-width: 68px;
min-height: 28px;
}

如果该属性没有被指定，最小大小将从部件的内容区域和当前样式中继承。

7. 处理伪状态

部件的外观可以按照用户界面元素状态的不同来分别定义，这在样式表中被称为“伪状态”。例如，如果我们想在一个push button在被按下的时候具有sunken的外观，我们可以指定一个叫做 :pressed 的伪状态。

QPushButton {
border: 2px outset green;
background: gray;
}

QPushButton:pressed {
border-style: inset;
}

下面是可用的伪状态列表：

表 1. 伪状态列表
伪状态描述
:checked button部件被选中
:disabled 部件被禁用
:enabled 部件被启用
:focus 部件获得焦点
:hover 鼠标位于部件上
:indeterminate checkbox或radiobutton被部分选中
:off 部件可以切换，且处于off状态
:on 部件可以切换，且处于on状态
:pressed 部件被鼠标按下
:unchecked button部件未被选中

8. 使用子部件定义微观样式

许多部件都包含有子元素，这些元素可以称为“子部件”。Spin box的上下箭头就是子部件最好的例子。

子部件可以通过::来指定，例如QDateTimeEdit::up-button。定义子部件的样式与定义部件非常相似，它们遵循前面提到的方箱模型（即它们可以拥有自己的边框、背景等），并且也可以和伪状态联合使用（例如QSpinBox::up-button:hover）。

下表列出了可用的子部件类型：

表 2. 子部件列表

子部件描述
::down-arrow combo box或spin box的下拉箭头
::down-button spin box的向下按钮
::drop-down combo box的下拉箭头
::indicator checkbox、radio button或可选择group box的指示器
::item menu、menu bar或status bar的子项目
::menu-indicator push button的菜单指示器
::title group box的标题
::up-arrow spin box的向上箭头
::up-button spin box的向上按钮

通过指定subcontrol-position和subcontrol-origin属性，子部件可以被放置在部件箱体内的任何位置。并且，子部件的位置还可以使用相对或绝对的方式进一步的调整。具体选择何种调整方式取决于子部件具有固定的大小，还是会随着父部件而变化。

8.1. 相对定位

相对定位适合于子部件具有固定大小的情形（通过width和height指定子部件大小）。使用这种方式，子部件可以以相对于subcontrol-position和 subcontrol-origin属性定义的原始位置进行移动调整。使用left属性可以把子部件向右移，top属性可以把子部件向左移。

例如：

QPushButton::menu-indicator {
image: url(menu_indicator.png);
width: 13px;
height: 13px;

subcontrol-origin: padding;
subcontrol-position: bottom right;
}

当按下按钮时，我们可以把菜单指示器从原来的位置向右下方移动几个像素来模拟按钮按下的状态。

QPushButton::menu-indicator:pressed {
position: relative;
top: 2px;
left: 2px;
}

8.2. 绝对定位

绝对定位适合于子部件的位置随父部件的变化而变的情形。与前面的例子相同，subcontrol-origin定义了父部件箱体的参考矩形。子部件的矩形区域则可以随后通过相对于这个参考矩形四边的偏移量来定义。

QPushButton::menu-indicator {
border: 2px solid red;

subcontrol-origin: padding;
position: absolute;
top: 2px;
right: 2px;
bottom: 2px;
left: 40px;
}

对于宽度或高度固定的子部件，subcontrol-position被用来说明其在subcontrol-origin指定矩形内的对其方式：

QPushButton::menu-indicator {
image: url(menu_indicator.png);
width: 13px;

subcontrol-origin: padding;
subcontrol-position: bottom right;
position: absolute;
top: 2px;
bottom: 2px;
right: 2px;
}

四、 http://doc.qt.nokia.com/4.6/stylesheet-examples.html#customizing-qdockwidget

五、样式表使用
虽然Qt现在还不是特别完善，但它的跨平台性，界面重用性，已经表现出比mfc更强的、更好的性能，昨天写了qss样式表demo，但是在书上对样式表的使用，并不详细，初学者可能会遇到一些问题，今天对照官方代码，终于调通，简单记录如下：
1、建立文本文件，写入样式表内容，更改文件后缀名为qss；
2、在工程中新建资源文件*.qrc，将qss文件加入资源文件qrc中，此处注意prefix最好为"/"，否则在调用qss文件时会找不到文件；
3、通过传入路径\文件名的方式创建一个QFile对象，以readonly的方式打开，然后readAll，最后qApp->setStyleSheet就可以使qss生效。
样式表的方式可以很方便的完成简单的贴图工作，而且效果也不错，简化了我以前在mfc上为了贴图，不得不重写控件类个工作，也使得美工可以很方便的修改生成的程序的颜色。

Qt很爽，因为是C++语言，所以看起来很快，而且也因为是C++代码级跨平台，所以也获得了很高的执行效率。而它生成控件的方式则比mfc上的资源文件好得多，mfc中的窗体资源全部在一个.src文件中，不利于重用，而Qt中每个窗体拥有自己的资源文件，并且和窗体类是分开的，方便了重用。从此，我不在被局限于windows平台。因为那种透明、随意拖拽的自定义部件必将是下一代UI主流。

QApplication app(...);
QFile qss("stylesheet.qss");
qss.open(QFile::ReadOnly);
app.setStyleSheet(qss.readAll());
qss.close();

六、 http://thesmithfam.org/blog/2009/09/10/qt-stylesheets-tutorial/

七、补记：

（1）对一个窗体或应用设置样式表，样式表的内容如果不特别制定属于那个或那类组件，其内容会应用到所有组件上；

（2）前一个的样式，会被后来的样式所覆盖。

五：按键菜单的一些技巧

5.1、主界面
1、无边框

setWindowFlags(Qt::FramelessWindowHint）

2、界面始终位于顶部位置

setWindowFlags(Qt::WindowStaysOnTopHint）

3、任务栏图标点击时进行显示/不显示切换

setWindowFlags(Qt::WindowMinimizeButtonHint）

4、隐藏任务栏显示

setWindowFlags(Qt::Tool | Qt::X11BypassWindowManagerHint）

5、关闭按钮实现的功能

hide(); //进行界面隐藏，但是显示托盘，可通过点击托盘实现界面的重新显示
quit(); //退出系统

6、绘制背景图片并且实现圆角效果

void LoginDialog::paintEvent(QPaintEvent *)
{
QPainter painter(this);
QBrush brush;
brush.setTextureImage(QImage(background_image)); //背景图片
painter.setBrush(brush);
painter.setPen(Qt::black); //边框色
painter.drawRoundedRect(this->rect(), 5, 5); //圆角5像素
}

7、设置应用程序的字体

QFont font("Courier", 10, QFont::Normal, false);
QApplication::setFont(font);

8、设置组件字体

QFont font = this->font();
font.setFamily("Courier"); //字体名称
font.setPixelSize(16); //字体点大小
font.setPointSize(18); //字体像素大小
font.setBold(true); //是否加粗
font.setItalic(true); //是否斜体
font.setUnderline(true); //是否下划线
this->setFont(font);

字体风格，包括类型、大小、是否加粗、是否斜体等！
也可以使用：

setStyleSheet("text-align:center; font-size:18px; font-weight:bold; font-style:Courier; color:white; ");
setAlignment(Qt::AlignCenter); //设置对齐方式

5.2、全屏显示与还原
关于这个问题，当做一个大的标题来讨论，因为比起其它小技巧要稍微复杂一些！
全屏显示：
1、遮挡任务栏：
showFullScreen()、showMaximized()这两个都可以！

2、不遮挡任务栏：

void MainWidget::showMaximize()
{
//若已经最大化
if(is_max)
{
//恢复界面位置，并设置按钮图标为最大化图标，提示“最大化”
this->setGeometry(location);
max_button->setIcon(QIcon("maxbtn"));
max_button->setToolTip(tr("max"));
} 
else 
{
//设定当前界面的位置，还原时使用
location = this->geometry();
//获取桌面位置，设置为最大化，并设置按钮图标为还原图标，提示“还原”
QDesktopWidget *desk = QApplication::desktop();
this->setGeometry(desk->availableGeometry());
max_button->setIcon(QIcon("restorbtn"));
max_button->setToolTip(tr("restor"));
}
is_max = !is_max;
}

注意：窗口既然可以最大化，当然还要进行还原，is_max为一个bool值变量，表示窗口是否最大化，初始值为false。location为桌面的位置，每次最大化开始先记录当前的位置，等待还原时候使用。

梁Rio

关注

10
点赞
踩
30

收藏

觉得还不错? 一键收藏
3
评论
《Qt》part 7 QSS参考样式表——界面美化2

《Qt》part 7 QSS参考样式表——界面美化2一、QSS1参考样式表1：*{ font-size:13px; color:white; font-family:"宋体"; } CallWidget QLineEdit#telEdt { font-size:24px; } QMainWindow,QDialog{ b
复制链接

扫一扫

专栏目录