1、特别说明
(1)本文参考了网上资料,特别是对QScrollBar区域描述非常详细
QScrollBar样式 - qss样式表学习_wang13342322203的博客-CSDN博客_qscrollbar样式
(2)以下部分为QScrollBar样式原创,分为水平方向及垂直方向,同大家共同学习分享
2、注意事项
(1)上下左右箭头风格不生效时,查看以下两个属性是否设置
subcontrol-position:left;
subcontrol-origin:margin;
(2)QScrollBar分为sub-line, add-line, up-arrow, down-arrow, sub-page, add-page
(3)如果不对sub-line add-line 设置subcontrol的话,会出现箭头区域()
3、垂直滚动条QScrollBar
垂直滚动条
QScrollBar:vertical{
margin:16px 0px 16px 0px;
background-color:rgb(11,54,117);
border:0px;
width:14px;
}
QScrollBar::handle:vertical{
background-color:rgba(59,103,168,190);
border-radius:7px;
width:13px;
}
QScrollBar::handle:vertical:hover{
background-color:rgba(59,103,168,220);
}
QScrollBar::sub-line:vertical{
subcontrol-position:top;
subcontrol-origin:margin;
background-color:rgb(11,54,117);
border:1px solid rgb(11,54,117);
height:16px;
}
QScrollBar::add-line:vertical{
subcontrol-position:bottom;
subcontrol-origin:margin;
background-color:rgb(11,54,117);
border:1px solid rgb(11,54,117);
height:16px;
}
QScrollBar::up-arrow:vertical{
border-image:url(:/commonImg/Resources/image/common/arrowUp.png);
width:12px;
height:6px;
}
QScrollBar::down-arrow:vertical{
border-image:url(:/commonImg/Resources/image/common/arrowDown.png);
width:12px;
height:6px;
}
QScrollBar::sub-page:vertical,QScrollBar::add-page:vertical{
background-color:rgb(11,54,117);
}
4、水平滚动条QScrollBar
横向滚动条
QScrollBar:horizontal{
margin:0px 16px 0px 16px;
background-color:rgb(11,54,117);
border:none;
height:14px;
}
QScrollBar::handle:horizontal{
background-color:rgba(59,103,168,190);
border-radius:7px;
height:14px;
}
QScrollBar::handle:horizontal:hover{
background-color:rgba(59,103,168,220);
}
QScrollBar::add-line:horizontal{
subcontrol-position: right;
subcontrol-origin:margin;
background-color:rgb(11,54,117);
border:1px solid rgb(11,54,117);
height:12px;
width:6px;
}
QScrollBar::sub-line:horizontal{
subcontrol-position: left;
subcontrol-origin:margin;
background-color:rgb(11,54,117);
border:1px solid rgb(11,54,117);
height:12px;
width:6px;
}
QScrollBar::left-arrow:horizontal{
border-image:url(:/commonImg/Resources/image/common/arrowLeft.png);
width:6px;
height:12px;
}
QScrollBar::right-arrow:horizontal{
border-image:url(:/commonImg/Resources/image/common/arrowRight.png);
width:6px;
height:12px;
}
QScrollBar::sub-page:horizontal,QScrollBar::add-page:horizontal{
background-color:rgb(11,54,117);
}