QSS随笔1

1、QScrollBar样式用法如下：

//整个垂直滚动条区域样式
"QScrollBar:vertical{background-color:transparent;width:20px;height:255px;padding-top:20px;padding-bottom:20px;}"   
 
//滚动条上面和下面区域样式
"QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical{background-color:transparent;}"         
 
//滑块区域样式
"QScrollBar::handle:vertical{background:rgba(75,120,154,0.8);border:1px solid rgba(255,0,0,1);}"    
 
//鼠标滑过滑块样式
"QScrollBar::handle:vertical:hover,QScrollBar::handle:vertical:pressed{background:red;border:1px solid rgb(255,255,255);}"
 
//向上箭头样式
"QScrollBar::sub-line:vertical{height:12px;width:12px;background:rgba(255,0,0,0.5) url(:/1.png);}"
 
//向上箭头滑过、摁下样式
"QScrollBar::sub-line:vertical:hover,QScrollBar::sub-line:vertical:pressed{height:20px;width:20px;background:red url(:/1.png);border:1px solid rgb(255,255,255);}"
 
//向下箭头样式
"QScrollBar::add-line:vertical{height:20px;width:20px;background:red url(:/1.png);}"
 
//向下箭头滑过、摁下样式            
"QScrollBar::add-line:vertical:hover,QScrollBar::add-line:vertical:pressed{height:20px;width:20px;background:red url(:/1.png);border:1px solid rgb(255,255,255);}"

　　

/*设置垂直滚动条*/
"QScrollBar:vertical{background-color:transparent;width:20px;height:200px;padding-top:20px;padding-bottom:20px;}"   //整个垂直滚动条区域样式
"QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical{background-color:transparent;}"         //滚动条上面和下面区域样式
"QScrollBar::handle:vertical{background:rgba(75,120,154,0.8);border:1px solid rgba(82,130,164,1);}"    //滑块区域样式
"QScrollBar::handle:vertical:hover,QScrollBar::handle:vertical:pressed{background:rgba(75,120,154,1);border:1px solid rgb(255,255,255);}"//鼠标滑过滑块样式
"QScrollBar::sub-line:vertical{height:12px;width:12px;background:rgba(75,120,154,0.8) url(:/image/icon/toolIcon/icon_up.png);}"//向上箭头样式
"QScrollBar::sub-line:vertical:hover,QScrollBar::sub-line:vertical:pressed{height:12px;width:12px;background:rgba(75,120,154,1) url(:/image/icon/toolIcon/icon_up.png);border:1px solid rgb(255,255,255);}"//向上箭头样式
"QScrollBar::add-line:vertical{height:12px;width:12px;background:rgba(75,120,154,0.8) url(:/image/icon/toolIcon/icon_down.png);}"//向下箭头样式
"QScrollBar::add-line:vertical:hover,QScrollBar::add-line:vertical:pressed{height:12px;width:12px;background:rgba(75,120,154,1) url(:/image/icon/toolIcon/icon_down.png);border:1px solid rgb(255,255,255);}"//向下箭头样式
 
/*设置水平滚动条*/
"QScrollBar:horizontal{background-color:transparent;width:140px;height:12px;padding-left:12px;padding-right:12px;}"   //整个水平滚动条背景样式
"QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal{background-color:transparent;}"         //滚动条左面和右面区域样式
"QScrollBar::handle:horizontal{background:rgba(75,120,154,0.8);border:1px solid rgba(82,130,164,1);}"    //滑块区域样式
"QScrollBar::handle:horizontal:hover,QScrollBar::handle:horizontal:pressed{background:rgba(75,120,154,1);border:1px solid rgb(255,255,255);}"//鼠标滑过滑块样式
"QScrollBar::sub-line:horizontal{subcontrol-position:left;height:12px;width:12px;background:rgba(75,120,154,0.8) url(:/1.png);}"//向左箭头样式
"QScrollBar::sub-line:horizontal:hover,QScrollBar::sub-line:horizontal:pressed{height:20px;width:20px;background:rgba(75,120,154,1) url(:/1.png);border:1px solid rgb(255,255,255);}"//向左箭头样式
"QScrollBar::add-line:horizontal{height:12px;width:20px;background:rgba(75,120,154,0.8) url(:/1.png);}"//向右箭头样式
"QScrollBar::add-line:horizontal:hover,QScrollBar::add-line:horizontal:pressed{height:20px;width:20px;background:rgba(75,120,154,1) url(:/1.png);border:1px solid rgb(255,255,255);}"//向右箭头样式

 

2、QSS中QTableview的表头和边框border设置

先屏蔽边框，然后分别设置边框上下左右的边线。其中在QTableview中，要设置表头，要按照如下方式写法才有效，代码如下：

"QHeaderView::section, QTableCornerButton::section {padding: 1px;border: none;border-bottom: 1px solid rgb(75, 120, 154);border-right: 1px solid rgb(75, 120, 154);border-bottom: 1px solid gray;background-color:rgba(75, 120, 154, 1);color:rgba(126,206,244,1);}"

 

3、QTreeview 设置复选框、箭头、选项的QSS详细用法

QTreeview的用QSS美化界面用法，具体的美化包括QTreeview的箭头伸展和收缩，复选框的勾选、不勾选、半勾选，选项的选中、不选中状态，具体的QSS设置代码如下所示：

"QTreeView{background-color:transparent;outline:0px;}"
 
//设置箭头图标打开和关闭样式
"QTreeView::branch:closed:has-children:!has-siblings,QTreeView::branch:closed:has-children:has-siblings {border-image: none;image:url(:/image/1.png);}"
"QTreeView::branch:open:has-children:!has-siblings,QTreeView::branch:open:has-children:has-siblings  {border-image: none;image: url(:/image/1.png);}"
 
//设置选项样式
"QTreeView::item {background-color: transparent;}"
"QTreeView::item:hover{background-color:red;}"
"QTreeView::item:selected{background-color:red;}"
"QTreeView::item:selected:active{background-color:red;}"
"QTreeView::item:selected:!active {background-color:red;}"
 
//设置复选框样式
"QTreeView::indicator {width: 33px;height: 33px;}"
"QTreeView::indicator:enabled:unchecked {image: url(:/image/1.png);}"
"QTreeView::indicator:enabled:checked {image: url(:/image/1.png);}"
"QTreeView::indicator:enabled:indeterminate {image: url(:/image/1.png);}"

4、QTreeview中虚线框解决办法

QTreeview选中后出现虚线框，也就是焦点，一直去除不了。

QTreeview->setStyleSheet("outline:0px;}");    //outline:0px;或者outline:none;
//QTreeview->setFocusPolicy(Qt::NoFocus);        //这一句也行