QScrollArea 样式美化

QScrollArea 样式美化：

Qt基础使用

说明：

horizontal：水平滚动条，vertical：垂直滚动条，需要换为水平滚动条设置只需要将vertical替换为horizontal即可

整个垂直滚动条区域样式

QScrollBar:vertical{ }

滚动条上面和下面区域样式

QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical{ }

滑块区域样式

QScrollBar::handle:vertical{ }

鼠标滑过滑块样式

QScrollBar::handle:vertical:hover,QScrollBar::handle:vertical:pressed{ }

向上箭头样式

QScrollBar::sub-line:vertical{ }

向上箭头滑过、摁下样式

QScrollBar::sub-line:vertical:hover,QScrollBar::sub-line:vertical:pressed{ }

向下箭头样式

QScrollBar::add-line:vertical{ }

向下箭头滑过、摁下样式

QScrollBar::add-line:vertical:hover,QScrollBar::add-line:vertical:pressed{ }

例子（网易云音乐的左边歌单选项卡）：

QScrollArea{
    border: 0px solid;
    border-right-width: 1px;
    border-right-color: #dcdbdc;
    background-color: #f5f5f7;
}
QScrollBar:vertical {
    border: none;
    background: #f5f5f7;
    width: 10px;
    margin: 0px 0 0px 0;
}
QScrollBar::handle:vertical {
    background: Gainsboro;
    min-height: 20px;
    border-radius: 5px;
    border: none;
}
QScrollBar::add-line:vertical {
    border: 0px solid grey;
    background: #32CC99;
    height: 0px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical {
    border: 0px solid grey;
    background: #32CC99;
    height: 0px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
    background: none;
    width: 0px;
    height: 0px;
}

参考资料

————————————————
无