QScrollArea和QScrollBar的属性和样式

MyAreaStyle = '''
QScrollArea
{
    background-color: rgba(54, 62, 68, 0.8);
    border: 0px;
    border-radius: 0px;
}
QScrollBar:horizontal 
{
    background-color: rgba(54, 62, 68, 1);
    border: 0px;
    height: 6px;
}
QScrollBar::handle:horizontal 
{
    background-color: rgba(126, 160, 185, 1); 
    height: 6px;
    border-radius:3px;
}
QScrollBar::handle:horizontal:hover
{
    background:#73A4C7;
    height:6px;
}
QScrollBar::handle:horizontal:pressed
{
    background-color: rgba(126, 160, 185, 1); 
    height:6px;
}
QScrollBar::add-line:horizontal
{
    width: 0px;
}
QScrollBar::sub-line:horizontal
{
    width: 0px;
}
QScrollBar::add-page:horizontal
{
    background-color: rgba(54, 62, 68, 1);
}
QScrollBar::sub-page:horizontal
{
    background-color: rgba(54, 62, 68, 1);
}
'''

class MyArea(QScrollArea):
    def __init__(self, parent=None):
        super().__init__(parent)

        # 这个self.wid用于容纳每个小窗口，根据窗口数量的多少去改变高度，从而显示出父窗口的滚动条
        self.wid = QWidget(self)
        self.wid.setStyleSheet(WidBackgroundStyle)
        self.wid.resize(40, 80)
        # 纵向滚动条始终不显示
        self.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)

        self.grid_layout = QGridLayout()
        self.grid_layout.setContentsMargins(20, 8, 20, 9)
        self.grid_layout.setSpacing(4)

        self.wid.setLayout(self.grid_layout)
        self.setWidget(self.wid)

        self.setAlignment(Qt.AlignVCenter)

        # 横向滚动条一动就触发self.on_value_changed函数
        self.horizontalScrollBar().valueChanged.connect(self.on_value_changed)

        self.setStyleSheet(MyAreaStyle)

    def on_value_changed(self):
        # 获取滚动条滑块的位置
        position = self.horizontalScrollBar().sliderPosition()

因为这里是横向滚动条，都是horizontal，所以add-line是右箭头，sub-line是左箭头，add-page是滑块右侧区域，sub-page是滑块左侧区域。如果是纵向滚动条，则把horizontal改成vertical，同时add-line和sub-line则变成上下箭头，add-page和sub-page则变成滑块上下侧区域（哪个上哪个下自己测吧，我也忘了）

更多样式可以参考下面这个链接：

http://www.elecfans.com/baike/tongxingjishu/20180306643711_2.html

而在Windows下如果不对滚动条样式设置add-page和sub-page，同时还设置滚动条背景色为深颜色的话，那么滚动条的背景色会变成花斑色，有两种颜色交叉，即color-dotted。这个时候其实只要设置一下add-page和sub-page就可以解决了（Mac下倒是没有这个问题）。具体可以看看下面这个链接；

https://blog.csdn.net/ch2065/article/details/49300313?utm_source=itdadao&utm_medium=referral