1. 程式人生 > >Qt樣式表(QSS)Demo:黑色扁平風格

Qt樣式表(QSS)Demo:黑色扁平風格

從昨天下午到現在整理了一天,有點遺憾是表頭高亮時字型加粗沒找到怎麼修改,還有子選單的小三角。

時間問題,Demo裡只添加了我常用的控制元件,像QListView,QCalendarWidget等都沒做。

其中,圖示基本是在阿里巴巴向量圖示庫找的,整體效果圖如下:

page1

page2

關於顏色顯示:有些電腦顯示器設定偏亮/暗,可以調節下。

關於控制元件大小:高度我一般設定為30px。

關於字型大小:一般設定為15px的宋體,沒有考慮解析度問題。

先貼出我的qss程式碼,最後有demo的百度雲分享。

*{
font:15px "宋體";
color: rgb(250, 250, 250);
selection-background-color: rgb(255, 255, 255);/*選中文字*/
selection-color: rgb(0, 0, 0);
outline:none;/*焦點框*/
}
#centralWidget{
background-color: rgb(80, 80, 80);
border-bottom:5px solid rgb(20, 20, 20);
}
/*其他(控制元件公共樣式在最後)*/

/*tab 1中按鈕示例*/
#btnHoverOrange{
border-color:rgb(255, 170, 0);
}
#btnPressOrange{
color:black;
border-color: rgb(128, 128, 128);
background-color:rgb(255, 170, 0);
}
#btnHoverBlue{
border-color:rgb(0, 170, 255);
}
#btnPressBlue{
color:black;
border-color: rgb(128, 128, 128);
background-color:rgb(0, 170, 255);
}
/*tab 1中勾選框示例*/
#checkHoverOrange{
color: rgb(255, 170, 0);
}
#checkHoverOrange::indicator{
border-image: url(:/img/check_orange.png);
}
#checkCheckOrange::indicator{
border-image: url(:/img/checked_orange.png);
}
#checkHoverBlue{
color: rgb(0, 170, 255);
}
#checkHoverBlue::indicator{
border-image: url(:/img/check_blue.png);
}
#checkCheckBlue::indicator{
border-image: url(:/img/checked_blue.png);
}
#checkHoverGreen{
color: rgb(0, 255, 127);
}
#checkHoverGreen::indicator{
border-image: url(:/img/check_green.png);
}
#checkCheckGreen::indicator{
border-image: url(:/img/checked_green.png);
}
/*tab1 下拉框示例*/
#comboHover{
border:1px solid rgb(255, 170, 0);
}
#comboHover::down-arrow{
border-image: url(:/img/down_orange.png);
}
/*tab 1編輯框示例*/
#editHover{
border:1px solid rgb(255, 170, 0);
}
/*tab 1數字框示例*/
#spinHoverOrange{
border:1px solid rgb(255, 170, 0);
}
#spinHoverOrange::up-button{
border-image: url(:/img/up_orange.png);
}
#spinHoverBlue{
border:1px solid rgb(0, 170, 255);
}
#spinHoverBlue::up-button{
border-image: url(:/img/up_blue.png);
}
/*自定義按鈕欄*/
#toolBar{	
background-color: rgb(20, 20, 20);
border-bottom:2px solid rgb(0, 170, 255);
}
#toolBar QPushButton{	
color: rgb(250, 250, 250);
border:0;
border-radius:0;
background-color: transparent;
}
#toolBar QPushButton:hover{		
color:rgb(255, 170, 0);
background-color: rgba(255, 255, 255, 50);
}
#toolBar QPushButton:pressed{		
background-color: rgba(255, 255, 255, 80);
}
QPushButton#btnSet{
background-image: url(:/img/set_gray.png);
background-repeat:no-repeat;
background-position:center center;
}
QPushButton#btnSet:hover{
background-image: url(:/img/set_orange.png);
}
QPushButton#btnMin{
background-image: url(:/img/min_gray.png);
background-repeat:no-repeat;
background-position:center center;
}
QPushButton#btnMin:hover{
background-image: url(:/img/min_orange.png);
}
QPushButton#btnMax{
background-image: url(:/img/max_gray.png);
background-repeat:no-repeat;
background-position:center center;
}
QPushButton#btnMax:hover{
background-image: url(:/img/max_orange.png);
}
QPushButton#btnClose{
background-image: url(:/img/close_gray.png);
background-repeat:no-repeat;
background-position:center center;
}
QPushButton#btnClose:hover{
background-image: url(:/img/close_red.png);
}

/*ToolBox*/
QToolBox{
background-color: rgb(80, 80, 80);/*背景色-空隙顏色*/
border:1px solid rgb(128, 128, 128);
}
QToolBox QWidget{/*tab頁*/
background-color: rgb(80, 80, 80);
}
QToolBox>QAbstractButton{/*標題欄*/
min-height:30px;
}
QToolBox::tab{
background-color:rgb(40, 40, 40);
}
QToolBox::tab:hover{
color:black;
background-color: rgb(255, 170, 0);
}
QToolBox::tab:selected{
color:rgb(255, 170, 0);
}
QToolBox::tab:selected:hover{
color:black;
}
/*分裂器*/
QSplitter::handle{
background-color: rgb(60, 60, 60);
margin:2px;
}
/*滾動區域*/
QScrollArea{
border:0;
background-color: transparent;
}
/*滾動條 */
QScrollBar:vertical{/*豎向*/
width:20px;
padding:0 3px;
margin:0;
background-color:transparent;
}
QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical{
background-color: transparent;
}
QScrollBar::handle:vertical{
width:10px;
min-height:20px;
margin:20px 0;
background-color:rgb(100, 100, 100);
}
QScrollBar::handle:vertical:hover{
background-color:rgb(150, 150, 150);
}
QScrollBar::add-line:vertical{
height:20px;
width:20px;
subcontrol-position:bottom;
border-image: url(:/img/down2_white.png);
}
QScrollBar::sub-line:vertical{
height:20px;
width:20px;
subcontrol-position:top;
border-image: url(:/img/up2_white.png);
}
QScrollBar::sub-line:vertical:hover{
border-image: url(:/img/up2_orange.png);
}
QScrollBar::add-line:vertical:hover{
border-image: url(:/img/down2_orange.png);
}
QScrollBar:horizontal{/*橫向*/
height:20px;
padding:3px;
margin:0;
background-color:transparent;
}
QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal{
background-color: transparent;
}
QScrollBar::handle:horizontal{
height:10px;
min-width:20px;
margin:0 20px;
background-color:rgb(100, 100, 100);
}
QScrollBar::handle:horizontal:hover{
background-color:rgb(150, 150, 150);
}
QScrollBar::add-line:horizontal{
height:20px;
width:20px;
subcontrol-position:right;
border-image: url(:/img/right2_white.png);
}
QScrollBar::sub-line:horizontal{
height:20px;
width:20px;
subcontrol-position:left;
border-image: url(:/img/left2_white.png);
}
QScrollBar::add-line:horizontal:hover{
border-image: url(:/img/right2_orange.png);
}
QScrollBar::sub-line:horizontal:hover{
border-image: url(:/img/left2_orange.png);
}
/*TabWidget*/
QTabWidget{
}
QTabWidget>QWidget>QWidget{/*tab頁*/
background-color: rgb(80, 80, 80);
}
QTabWidget::tab-bar{
alignment:left;/*tab位置*/
}
QTabWidget::pane { /*內容區域*/
background-color: rgb(80, 80, 80);/*背景色-空隙顏色*/
border:1px solid rgb(128, 128, 128);
} 
QTabBar{
color:white;
background-color:transparent;
}
QTabBar::tab{/*頁籤*/
min-height:30px;
width:120px;
border-top-left-radius:20px;
border-bottom-right-radius:20px;
margin-right:1px;
margin-bottom:1px;
background-color:rgb(40, 40, 40);
}
QTabBar::tab:hover{
color:black;
background-color: rgb(255, 170, 0);
border-bottom-right-radius:0px;
}
QTabBar::tab:selected{
color:rgb(255, 170, 0);
border-bottom-right-radius:0px;
}
QTabBar::tab:selected:hover{
color:black;
}
QTabBar::tear{/*選項過多時的。。。*/
imag:;
}
QTabBar::scroller{
width:60px;
}
/*文字框*/
QTextEdit{
color:white;
border:1px solid rgb(128, 128, 128);
background-color: rgb(90, 90, 90);
}
/*按鈕*/
QPushButton{
color:rgb(250, 250, 250);
border:1px solid rgb(128, 128, 128);
background-color: rgb(40 ,40 ,40);
border-radius:4px;
}
QPushButton:hover{
border-color:rgb(255, 170, 0);
}
QPushButton:pressed{
background-color: rgb(255, 170, 0);
border-color: rgb(128, 128, 128);
color:black;
}
QPushButton:checked{
color: rgb(0, 255, 127);
border-color: rgb(0, 255, 127);
background-image: url(:/img/right3_green.png);
background-repeat:no-repeat;
background-position:center left;
}
QPushButton:disabled{
color: rgb(230, 230, 230);
background-color: rgb(150, 150, 150);
}
QPushButton:checked:pressed{
color:black;
}
QPushButton:checked:disabled{
color: rgb(230, 230, 230);
border-color: rgb(128, 128, 128);
background-color: rgb(150, 150, 150);
background-image: url(:/img/right3_white.png);
}
/*勾選框*/
QCheckBox{
margin-left:5px;
spacing:3px;/*點選框與文字距離*/
color: rgb(250, 250, 250);
}
QCheckBox:hover{
color: rgb(0, 255, 127);
}
QCheckBox:disabled{
color: rgb(230, 230, 230);
}
QCheckBox::indicator{/*點選框*/
width:20px;
height:20px;
}
QCheckBox::indicator:unchecked{/*可新增未點選時點選區域圖片*/
border-image: url(:/img/check_white.png);
}
QCheckBox::indicator:unchecked:hover{
border-image: url(:/img/check_green.png);
}
QCheckBox::indicator:unchecked:disabled{
border-image: url(:/img/check_white.png);
}
QCheckBox::indicator:checked{/*點選時區域樣式*/
border-image: url(:/img/checked_green.png);
}
QCheckBox::indicator:checked:hover{
border-image: url(:/img/checked_green.png);
}
QCheckBox::indicator:checked:disabled{
border-image: url(:/img/checked_white.png);
}
QCheckBox::indicator:indeterminate{/*半選中狀態*/
}
/*下拉列表*/
QComboBox{
padding-left: 5px;
padding-right: 2px;
color:rgb(250 ,250 ,250);
border:1px solid rgb(128, 128, 128);
background-color:  rgb(100 ,100 ,100);
}
QComboBox:hover{
border:1px solid rgb(255, 170, 0);
}
QComboBox:disabled{
color: rgb(230, 230, 230);
background-color:rgb(150, 150, 150);
}
QComboBox:editable{
background-color:rgb(100, 100, 100);
}
QComboBox:editable:disabled{
background-color:rgb(150, 150, 150);
}
QComboBox QAbstractItemView{
background-color:rgb(110, 110, 110);
}
QComboBox QAbstractItemView::item{/*需要程式碼中->setView(new QListView(this));*/
height:26px;
font: 15px "宋體";
}
QComboBox QAbstractItemView::item:hover{
color:black;
background-color: rgb(255, 170, 0);
}
QComboBox QAbstractItemView::item:selected{
background-color: rgb(255, 170, 0);
}
QComboBox::drop-down {
width:20px;
height:20px;
subcontrol-position: center right;
right:2px;
border:0;
background-color:transparent;
}
QComboBox::down-arrow {/*替換三角小圖示*/
width:20px;
height:20px;
border-image: url(:/img/down_white.png);
}
QComboBox::down-arrow:hover {
border-image: url(:/img/down_orange.png);
}
QComboBox::down-arrow:disabled {
border-image: url(:/img/down2_white.png);
}
/*編輯框*/
QLineEdit{
padding: 0 5px;
color: rgb(250 ,250 ,250);
background-color: rgb(100, 100, 100);
border:1px solid rgb(128, 128, 128);
}
QLineEdit:hover{
border:1px solid rgb(255, 170, 0);
}
QLineEdit[readOnly=true],QLineEdit:disabled{
color: rgb(230, 230, 230);
background-color:rgb(150, 150, 150);
}
/*整數框*/
QSpinBox{
padding:0 5px;
color: rgb(250, 250, 250);
background-color:  rgb(100, 100, 100);
border:1px solid rgb(128, 128, 128);
}
QSpinBox:hover{
border:1px solid rgb(255, 170, 0);
}
QSpinBox:disabled{
color: rgb(230, 230, 230);
background-color:rgb(150, 150, 150);
}
QSpinBox[buttonSymbols="0"]::up-button{/*顯示按鈕=0*/
width:20px;
height:14px;
subcontrol-origin:border;
subcontrol-position:top right;
right:2px;
top:2px;
border-image: url(:/img/up_white.png);
}
QSpinBox::up-button:hover{
border-image: url(:/img/up_orange.png);
}
QSpinBox::up-button:pressed{
}
QSpinBox[buttonSymbols="0"]::down-button{
width:20px;
height:14px;
subcontrol-origin:border;
subcontrol-position:bottom right;
right:2px;
bottom:2px;
border-image: url(:/img/down_white.png);
}
QSpinBox::down-button:hover{
border-image: url(:/img/down_orange.png);
}
QSpinBox::down-button:pressed{
}
QSpinBox::up-button:disabled{
border-image: url(:/img/up2_white.png);
}
QSpinBox::down-button:disabled{
border-image: url(:/img/down2_white.png);
}
/*表頭*/
QHeaderView{
font: 15px "宋體";
color:rgb(240, 240, 240);
background-color: rgb(80, 80, 80);
}
QHeaderView::section:horizontal{/*橫表頭*/
min-height:30px;
border:0;
border-bottom:1px solid rgb(0, 170, 255);
background-color: rgb(60,60,60);
}
QHeaderView::section:vertical{/*豎表頭*/
min-width:60px;
padding-left:15px;
border:1px solid rgb(128, 128, 128);
border-top:0;
border-left:0;
background-color: rgb(60, 60, 60);
}
QHeaderView::section{
font: 15px "宋體";
text-align:center;
}
QHeaderView::section:hover{
color:black;
background-color: rgb(255, 170, 0);
}
QHeaderView::section:checked{/*不取消高亮*/
font: 15px "宋體";
font-weight:normal;
color: rgb(255, 170, 0);
}
QHeaderView::section:selected{
font: 15px "宋體";
font-weight:normal;
color: red;
}
QHeaderView::section:checked:hover{
font-weight:normal;
color: rgb(240, 240, 240);
}
QHeaderView::section:first{/*表頭第一個位置*/
}
QHeaderView::down-arrow{/*圖示用來排序的*/
}
QHeaderView::up-arrow{
}
/*表格*/
QTableView{/*對齊方式程式碼設定*/
border:1px solid rgb(128, 128, 128);
gridline-color: rgb(128, 128, 128);/*網格線顏色*/
background-color: rgb(80, 80, 80);
}
QTableView QTableCornerButton::section{/*表頭左上*/
background-color: rgb(60,60,60);
border:0;
border-bottom:1px solid rgb(0, 170, 255);
}
QTableView::item{/*表內容*/
font: 15px "宋體";
color: rgb(250, 250, 250);
background-color: rgb(80, 80, 80);
}
QTableView::item:selected{
color:black;
background-color: rgb(255, 170, 0);
}
QTableView::indicator{
width: 20px;
height: 20px;
}
QTableView::indicator:enabled:checked{
image: ;
}
QTableView::indicator:enabled:unchecked{
image: ;
}
/*選單*/
QPushButton::menu-indicator{/*setmenu*/
image:none;
}
QMenu{
border:1px solid rgb(128, 128, 128);
background-color:rgb(70, 70, 70);
margin:0px;
padding:0px;
}
QMenu::item {
margin:0px;
padding:0 20 0 10px;
font:15px "宋體";
min-height:26px;
max-height:28px;
color:rgb(240, 240, 240);
background-color:rgb(70, 70, 70);
}
QSpacerItem{
background-color: rgb(0, 255, 0);
}
QMenu::item:disabled{
color:rgb(240, 240, 240);
background-color:rgb(110, 110, 110);
}
QMenu::item:selected {
color:black;
background-color: rgb(255, 170, 0);
}
QMenu::item:selected:disabled{
color:rgb(240, 240, 240);
background-color:rgb(110, 110, 110);
}
QMenu::separator {/*分割線*/
height: 1px;
background: transparent;
}

我的百度雲分享(永久):https://pan.baidu.com/s/1Qa8HmBTaQaONHFhfdvaPJA

提取碼:uw14

Over~ ~ ~