Qt样式表(QSS)Demo：黑色扁平风格

从昨天下午到现在整理了一天，有点遗憾是表头高亮时字体加粗没找到怎么修改，还有子菜单的小三角。

时间问题，Demo里只添加了我常用的控件，像QListView，QCalendarWidget等都没做。

其中，图标基本是在阿里巴巴矢量图标库找的，整体效果图如下：

关于颜色显示：有些电脑显示器设置偏亮/暗，可以调节下。

关于控件大小：高度我一般设置为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{/*需要代码中-&gt;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~ ~ ~

Qt样式表(QSS)Demo：黑色扁平风格相关推荐

Qt样式表(QSS)Demo：黑色扁平加渐变
(2019-1-3改进) 把上次的纯色背景加了点渐变,感觉好看了点. 关于颜色显示:有些电脑显示器设置偏亮/暗,可以调节下. 关于控件大小:标题高度30像素,控件高度28px. 关于字体大小:一般设置 ...
qt 样式表 qss
Qt样式表是一个可以自定义部件外观的十分强大的机制﹐除了那些能够通过子类化QStyle更改的外观,其余的都可以使用Qt样式表来美化. 实现办法:调用setStyleSheet 函数,其中styleSh ...
Qt样式表之二：QSS语法及常用样式
一.简述 Qt样式表(以下统称QSS)的术语和语法规则几乎和CSS相同.如果你熟悉CSS,可以快速浏览以下内容.不熟悉的话可以先去W3School - CSS或者本人的CSS博客随笔简单了解一下. 在 ...
Qt样式表之 QSS 语法介绍；QLineEdit、
内容来自Qt样式表之 QSS 语法介绍-3YL的博客 Qt样式表是一个可以自定义部件外观的十分强大的机制,可以用来美化部件.Qt样式表的概念.术语和语法都受到了HTML的层叠样式表(Cascading ...
Qt 样式表之QSS
前言最近想给程序做个换皮肤的功能,于是想起了用 QSS.QSS 这个东西也算是老古董了,博主刚工作那会就有接触过,但是没有深入去了解,趁着这一次机会来学习一下.网上翻阅了一些资料,结合 Qt 的官方 ...
Qt Style Sheets(qt样式表)
我认为qt样式表对于专注于ui交互的人,其在qt的地位不亚于信号与槽的地位.通过qt样式表可以展示绝大部分你可以想象得到的风格. qt样式表的使用是先将要特例化的样式建立在后缀qss的文件中,在程序启 ...
QT样式表(QStyleSheet)
QT样式表 (QStyleSheet) 作者:刘旭晖 Raymond 转载请注明出处 Email:colorant@163.com BLOG:http://blog.csdn.net/colorant ...
qt样式表设置边框_QT样式表
QT样式表一.QT样式表简介 1.QT样式表简介 QSS的主要功能是使界面的表现与界面的元素分离,使得设计皮肤与界面控件分离的软件成为可能. QT样式表是允许用户定制widgets组件外观的强大机制 ...
【Qt】Qt样式表总结（一）：选择器
官方资料 https://blog.csdn.net/u010168781/article/details/81868523 注释 qss文件中使用:/**/ 来注释样式规则样式表由样式规则序列组 ...

Qt样式表(QSS)Demo：黑色扁平风格

Qt样式表(QSS)Demo：黑色扁平风格相关推荐

最新文章

热门文章