QT QPushButton、QScrollBar、QTreeView好看的样式示例

一、常用样式属性

    （一）常规:
    QPushButton#btnClose{
      //1.设置四个圆角半径大小
      border-top-left-radius:4px;
      border-top-right-radius:4px;
      border-bottom-left-radius:4px;
      border-bottom-right-radius:4px;
      //整体，如果控件长宽为(8,8),你设置半径大小超过4，那么则不生效
      border-radius:4px;
      
      //2.单独设置四个边的宽度、颜色
      border-top:1px solid rgb(226,230,237);
      border-left:1px solid rgb(226,230,237);
      border-right:1px solid rgb(226,230,237);
      border-bottom:1px solid rgb(226,230,237);
      //3.设置边框大小（实线），Tips:也可以用来修饰布局边框
      border:1px solid rgb(226,230,237);
      
      //4.设置背景图片
      background-image:url(://images//button_normal.png);
      border-image: url(":/images/button_normal.png");
      
      //5.设置背景不重复、居中显示、颜色
      background-attachment: fixed;         //当页面的其余部分滚动时，背景图像不会移动。
      background-repeat:no-repeat;
      background-position:right center;     //顶左、顶中、顶右、底右等，还有absolute绝对位置（）
      background: rgba(255,255,255,0.5);    //带透明度
      background: rgb(255,255,255);         //不带透明度
      background-color: #455d6a;
      
      //6.字体距离左框和右框的距离
      padding-left: 10px;
      padding-right: 32px;
      
      //7.字体属性
      font: bold 14px;
      font-family: Microsoft YaHei;
      font-size: 14px;
      font-weight: 400;              		//字体的胖瘦
      color: rbg(102,102,102);              //字体的颜色
	
	  //8.下边框渐变【（0,1）到（0,0），也就是从下到上颜色】
	  border-bottom: 8px solid qlineargradient(spread:pad,x1:0, y1:1, x2:0, y2:0, stop:0 rgb(248, 251, 255), stop:1  rgb(217, 229, 246));
	  
	  //9.背景颜色（从上到下）
	  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);
                     
      //10.图片位置
      image-position: left center;
      //11.文本排列
      text-align: right;
    }
    （二）悬停
    QPushButton#btnClose:hover{}
    （三）按压：
    QPushButton#btnClose:pressed{}
    （四）选中
    QPushButton#btnClose:checked{}
    （五）不可点击：
    QPushButton#btnClose:disabled{}

二、窗体最小化、缩小、放大、关闭

QPushButton#btnMin { border-image: url(:/images/button_min.png);}
QPushButton#btnMin:hover { border-image: url(:/images/button_min_hover.png);}

QPushButton#btnMax { border-image: url(:/images/button_max.png);}
QPushButton#btnMax:hover { border-image: url(:/images/button_max_hover.png);}
QPushButton#btnMax:checked { border-image: url(:/images/button_restore.png);}
QPushButton#btnMax:checked:hover { border-image: url(:/images/button_restore_hover.png);}

QPushButton#btnClose { border-image: url(:/images/button_close.png);}
QPushButton#btnClose:hover {  border-image: url(:/images/button_close_hover.png);}

三、QPushButton 样式示例

// 可设置两层属性
QPushButton#btnCancel[stat="reddot"][theme="white"]
{
	border-radius: 4px;
	background-color: #FFFFFF;
	border: 1px solid #DCDEE0;
	font-family:Microsoft YaHei;
	font-size: 12px;
}
QPushButton#btnCancel:hover[stat="normal"][theme="white"]
{
	background: #5063F7;
	color: #FFFFFF;
}
QPushButton#btnCancel:disabled[stat="reddot"][theme="drak"]
{
	background: #5063F7;
	color: #FFFFFF;
}

四、QScrollBar 样式示例

淡灰色圆形滚动条

QScrollBar::sub-line:vertical {
    height: 0px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}
QScrollBar::add-line:vertical {
    height: 0px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}
QScrollBar:vertical {
    background-color: white;
    width: 6px;
    margin: 0px;
}
QScrollBar::handle:vertical {
    border: none;
    border-radius: 3px;
    background-color: rgba(33, 40, 49, 0.1);
}
QScrollBar::handle:vertical:hover {
    background-color:rgb(82, 83, 86);
}

五、QTreeView 、QTreeWidget 样式示例

QTreeView {
	background-color: rgb(33, 34, 44);
	color:white;
	font:15px;
	show-decoration-selected: 1;
	outline: 0px;  
	border: 0px solid #000000;
	font-family:"微软雅黑"
}
QTreeView::item{
	padding:5px 0px;
	margin:0px;
	background-color: rgb(33, 34, 44);
}
QTreeView::branch { 
    selection-color: transparent; 
} 
/*左侧也跟着整行显示*/
QTreeView::branch:selected {
    background:rgb(68, 71, 90);
}
QTreeView::branch:hover {
    background:rgb(49, 51, 65);
}
QTreeView::item:selected{
	background-color: rgb(68, 71, 90);
}
QTreeView::item:hover{
	background:rgb(49, 51, 65);
}

六、QCheckBox

QCheckBox {
 font: 18px;
 color: rgb(51, 51, 51);
 spacing: 2px;
 line-height: 3px;
}
QCheckBox::disabled {
 color: #ACACAC;
}
QCheckBox::indicator {
 /* 选择框尺寸 */
 width: 16px;
 height: 16px;
}
QCheckBox::indicator:unchecked {
 image: url();
}
QCheckBox::indicator:unchecked:hover {
 image: url();
}
QCheckBox::indicator:unchecked:pressed {
 image: url();
}
QCheckBox::indicator:checked {
 image: url();
}
QCheckBox::indicator:checked:hover {
 image: url();
}
QCheckBox::indicator:checked:pressed {
 image: url();
}
QCheckBox::indicator:!enabled {
 image: url();
}