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