QScrollBar分为sub-line、add-line、add-page、sub-page、up-arrow、down-arrow和handle几个部分
/*垂直滑块整体*/
QScrollBar:vertical{
background:#FFFFFF; /*背景色*/
padding-top:20px; /*上预留位置(放置向上箭头)*/
padding-bottom:20px; /*下预留位置(放置向下箭头)*/
padding-left:3px; /*左预留位置*/
padding-right:3px; /*右预留位置*/
border-left:1px solid #d7d7d7; /*左分割线*/
margin:0px 0px 0px 0px;
}
/*滑块样式*/
QScrollBar::handle:vertical{
background:#dbdbdb; /*滑块颜色*/
border-radius:6px; /*边角圆润*/
min-height:80px; /*滑块最小高度*/
margin-left:5px; /*滑块与滑轨左边的距离*/
margin-right:5px; /*滑块与滑轨右边的距离*/
}
/*鼠标触及滑块样式*/
QScrollBar::handle:vertical:hover{
background:#d0d0d0; /*滑块颜色*/
}
/*鼠标触及滚动条样式*/
QScrollBar::vertical:hover{
background:#d0d0d0; /*滑块颜色*/
}
/*鼠标触及滑块样式*/
QScrollBar::handle:vertical:pressed{
background:#d0d0d0; /*滑块颜色*/
}
/*鼠标触及滚动条样式*/
QScrollBar::vertical:pressed{
background:#d0d0d0; /*滑块颜色*/
}
/*向下箭头样式*/
QScrollBar::add-line:vertical{
/*background:url(/images/down.png) center no-repeat;*/
subcontrol-position:bottom;
}
/*向上箭头样式 */
QScrollBar::sub-line:vertical{
/*background:url(:/images/up.png) center no-repeat;}*/
subcontrol-position:top;
}
/*当鼠标放到下箭头上的时候*/
QScrollBar::add-line:vertical:hover{
height:9px;
width:8px;
/*border-image:url(:/images/a/4.png);*/
subcontrol-position:bottom;
}
/*当鼠标放到下箭头上的时候*/
QScrollBar::sub-line:vertical:hover{
height:9px;
width:8px;
/*border-image:url(:/images/a/2.png);*/
subcontrol-position:top;
}
/*当滚动条滚动的时候,上面的部分和下面的部分*/
QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical{
background:rgba(0,0,0,10%);
border-radius:4px;
}
QScrollBar::up-arrow:vertical{
subcontrol-origin: margin;
height:16px;
border:0 0 0 0;
border-image: url(:/DirectionArrow/image/DisplayImage/up-row.png);
}
QScrollBar::down-arrow:vertical{
subcontrol-origin: margin;
height:16px;
border-image:url(:/DirectionArrow/image/DisplayImage/down-row.png);
}
调用QSS文件
def load_style_sheet(filename, widget):
with open(filename, 'r', encoding='UTF-8') as f:
style_sheet = f.read()
widget.setStyleSheet(style_sheet)
去掉上下两个箭头
/*向下箭头样式*/
QScrollBar::add-line:vertical{
background:none;
}
/*向上箭头样式 */
QScrollBar::sub-line:vertical{
background:none;
}
/*当滚动条滚动的时候,上面的部分和下面的部分*/
QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical{
background:none;
}