QT QScrollBar 滚动条美化

滚动条区域

滚动条区域是指滚动条中可单独通过qss修改样式的部分

垂直滚动条包括：sub-line、add-line、add-page、sub-page、up-arrow、down-arrow、handle

水平滚动条：sub-line、add-line、add-page、sub-page、left-arrow、right-arrow、handle

区域样式：

垂直滚动条：

整体：

/*滚动条样式，这里测试发现必须设置background:red，否则会出现问题，原因不清楚，如果不需要设置颜色，可以设置transparent*/
QScrollBar:vertical
{
background:red; /*整个滚动条的北京颜色*/
width:30px; /*滚动条整体的宽度*/
/* 滑块活动区域间距，这个间距如果小于add-line和sub-line的高度滚动滑块将会覆盖add-line和sub-line，所以可以通过margin: 0px 0 0px 0;来隐藏滚动条两头区域*/
/* 这里应该系统应该给了默认了值，如果不填写，是正常的滚动条效果 */
margin:30px 0px 30px 0px;
}

handle:

/*滑动区域*/
QScrollBar::handle:vertical
{
    background:rgba(50,50,50,100);
    border-radius:6px;/*圆角*/
    border: 2px solid rgb(8, 8, 8);/*边框*/
    /*这里设置无效，width由QScrollBar:vertical控制，height有窗口大小控制*/
    height:20px;
    width:20px;
    /*通过margin + hover 可以达到鼠标悬停后改变大小（hover中将内间距设小）*/
    margin:0px 5px 0px 5px;
}
QScrollBar::handle:vertical:hover
{
    background:rgba(50,50,50,130);
    border-radius:4px;
    margin:0px 3px 0px 3px;
}

sub-line、add-line:

/*顶部/底部区域*/
QScrollBar::sub-line:vertical
{

    height:30px; 
    background:rgb(0,255,255);
    /*这里的设置主要配合前面的QScrollBar:vertical设置的外间距，如果这里不设置，默认从QScrollBar:vertical的内容区域开始，没有达到之前想要的效果*/
    subcontrol-position:top;
    subcontrol-origin: margin; /*从*/

}
QScrollBar::add-line:vertical
{
    height:30px;
    background:rgb(0,255,255);

    subcontrol-origin: margin;
    subcontrol-position:bottom;
}

未设置subcontrol效果：

设置subcontrol效果：

up-arrow、down-arrow：

/*箭头区域*/
QScrollBar::up-arrow:vertical,QScrollBar::down-arrow:vertical
{
    /*在sub-line中占用的大小*/
    width:7px;
    height:7px;
    /*可以修改为图标*/
    background:red;
    border: 2px solid rgb(22, 12, 68);
}

sub-page、add-page:

/*滑动块上面的区域*/
QScrollBar::sub-page:vertical
{
    background:red;
}

/*滑动块下面的区域*/
QScrollBar::add-page:vertical
{
    background:green;
}

水平滚动条：

样式格式和水平滚动条一致，只是选择器中修改为

QScrollBar:horizontal