Qt 常用控件样式

做了几个项目之后，发现经常用的几个控件每次都需要设置样式，而且每次都是翻以前的项目样式粘贴复制，很麻烦，还不如直接统一做一下笔记，以后直接粘贴复制得了。省得东找西找。

QPushButton按钮

//QPushButton样式表
QPushButton{
	background:#525253;
	border-radius:4px;
	color: #ffffff;
	font:bold;
	font-size:15px;
}
QPushButton:hover{
	background:#2d96dc;
	border:3px solid white; 
}
QPushButton:pressed{
	background:#2d96dc;
	border:3px solid white; 
}
QPushButton:checked{
	background:#2d96dc;
	border:3px solid white; 
	
}

//如果想弄出按下有下划线的感觉的话，然后按钮的背景颜色通常都是设置为透明
QPushButton:checked{
	background:#transparent;
	border-bottom:3px solid #1C80FF;
}

//如果QPushButton用到了图片作为背景的话,那么border-radius：和border：就算设置了也不起作用
QPushButton{
	border-image:url(:/image/pic.png);
}
//如果想调整控件大小
QPushButton{
	 min-height:20px;
	 min-width:20px;
	 max-width:50px;
     max-height:50px;
}

效果如下

QSlider滑动条

/*滑动条*/
#滑块还没有滑到的部分
QSlider#volumeSlider::groove:horizontal{ 
    height:6px;
    margin-left:3px;
    margin-right:3px;
    border-radius: 3px;
    background:rgba(180,180,180,100%);

}
#滑块手柄样式
QSlider#volumeSlider::handle:horizontal{

    width: 12px;
    min-height: 12px;
    margin-top:-3px;
    margin-bottom:-3px;
    margin-left:-3px;
    margin-right:-3px;
    border-radius: 6px;
    background:rgba(255,255,255,100%);

}
#滑块已经划过的部分
QSlider#volumeSlider::sub-page:horizontal{

    height:6px;
    margin-left:3px;
    margin-right:3px;
    border-radius: 3px;
   background:rgba(0,164,255,100%);

}
margin-bottom:-3px;//表示除了占满滑条外，往下增加3px高度
margin-bottom:3px;//表示向内缩窄3px

效果如下：
声音滑动条

进度滑动条

QScrollBar滚动条

QtableWidget、QTextEdit、QtableView等控件都有滚动条

/*垂直滚动条整体*/
QScrollBar:vertical
{
    width:12px;
    background:#1a1a1a;
    margin:0px,0px,0px,0px;
    padding-top:0px;   /*元素上内边距的宽度*/
    padding-bottom:0px;    元素下内边距的宽度*/
}

/*滚动条中滑块的样式*/
QScrollBar::handle:vertical
{
    width:12px;
    background:#2d96dc;
    border-radius:6px;

}

/*鼠标触及滑块样式*/
QScrollBar::handle:vertical:hover
{
    background:#2d96dc;
}

/*设置下箭头*/
QScrollBar::add-line:vertical
{

    border-image:none;
    background:rgb(0,0,0);
}

/*设置上箭头*/
QScrollBar::sub-line:vertical
{
    border-image:none;
    background:rgb(0,0,0);
}

/*设置下箭头:悬浮状态
QScrollBar::add-line:vertical:hover
{
    height:12px;
    width:10px;
    border-image:none;
    subcontrol-position:bottom;
}
*/
/*设置上箭头：悬浮状态
QScrollBar::sub-line:vertical:hover
{
    height:12px;
    width:10px;
    border-image:none;
    subcontrol-position:top;
}
*/
/*当滚动条滚动的时候，上面的部分和下面的部分*/
QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical
{
    background:rgb(0,0,0);

}

效果如下：

QGroupBox

QGroupBox{
    margin-top:1ex;
    border:3px solid #000000;
    border-radius:5px;
    background: #2e2e2e;
    color:#ffffff;
}
QGroupBox::title{
    subcontrol-origin:margin;
    subcontrol-position:top center;
    padding:1px;
}

效果如下

QTabWidget

QTabWidget QTabBar::tab
{
    background:#4d4d4d;
    font: 16pt;
    width:150;
    height:40px;
    color:white;
}
QTabWidget QTabBar::tab:selected
{
    background:#2d96dc;
}
QTabWidget::tab-bar {
         alignment: center;
}
QTabWidget::pane{
        border:none;
}
#第一个Tab
QTabBar::tab:first {
        color:#ffffff;
        border-top-left-radius:20px;
        border-bottom-left-radius:20px;
}

#最后一个Tab
QTabBar::tab:last{
        color:#ffffff;
        border-top-right-radius:20px;
        border-bottom-right-radius:20px;

}

效果如下：