Qt自定义滚动条样式

在使用QScrollArea时，发现默认的滚动条有边框但是和背景颜色及组件不协调，因此需要修改滚动条样式

具体实现

通过使用QSS设置样式，加载QSS文件的方法这里不多赘述了，只需要读取文件拿到字符串后调用setStyleSheet就可以了

QScrollBar:vertical{
    margin:12px 0px 12px 0px;
    background-color: #ffffff;
    border:none;
    width:14px;
}

QScrollBar::handle:vertical{/* 滑块 */
    background-color:rgba(59,103,168,190);
    border-radius:3px;
    margin: 0px 3px 0px 5px;
}

QScrollBar::handle:vertical:hover{/* 滑块hover */
    background-color:rgba(59,103,168,220);
}

QScrollBar::sub-line:vertical{
    subcontrol-position:top;
    subcontrol-origin:margin;
    border:none;
    height:10px;
}

QScrollBar::add-line:vertical{
    subcontrol-position:bottom;
    subcontrol-origin:margin;
    border:none;
    height:10px;
}

QScrollBar::up-arrow:vertical{
    image: url(:/icons/up2.png);
    border: 0px;
    width: 10px;
    height: 8px;
    margin: 1px;
}

QScrollBar::up-arrow:vertical:hover{
    image:url(:/icons/up2-dark.png);
}

QScrollBar::up-arrow:vertical:pressed{
    image:url(:/icons/up2-dark.png);
    width: 9px;
    height: 7px;
    margin-left:1px;
}

QScrollBar::down-arrow:vertical{
    image: url(:/icons/down2.png);
    border: 0px;
    width: 10px;
    height: 8px;
    margin: 1px;
}

QScrollBar::down-arrow:vertical:hover{
    image: url(:/icons/down2-dark.png);
}

QScrollBar::down-arrow:vertical:pressed{
    image:url(:/icons/down2-dark.png);
    width: 9px;
    height: 7px;
    margin-left:1px;
}

QScrollBar::sub-page:vertical,QScrollBar::add-page:vertical{
    background-color:#ffffff;
}
css

注意这里QScrollBar::down-arrow使用的是image而不是border-image来显示按钮，原因是border-image会造成图片锯齿严重

使用的是image需要同时设置border: 0px;

效果图

最终效果图如下：