QSS实践汇总（1）——QScrollBar样式、滚动条样式（风格）

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);

}