9 PyQt5 QScrollArea滚动区域和QScrollBar滚动条

小泥人姜

已于 2022-02-17 21:05:59 修改

阅读量4.6k

点赞数 2

分类专栏： PyQt5 文章标签： python pyqt5

于 2022-02-12 16:07:07 首次发布

本文链接：https://blog.csdn.net/yg2496194392/article/details/122898006

版权

PyQt5 专栏收录该内容

23 篇文章 3 订阅

订阅专栏

本文介绍了PyQt5中的QScrollArea和QScrollBar组件。QScrollArea用于创建带有滚动功能的区域，当内容超过区域大小时显示滚动条。QScrollBar则提供了水平和垂直滚动条，允许用户浏览大范围内容。通过设置样式表，可以自定义滚动条的外观。文中还给出了使用这两个组件的代码示例，展示了如何创建并连接信号槽以实现颜色变化效果。

摘要由CSDN通过智能技术生成

类继承关系如下：
在这里插入图片描述

1 QScrollArea

#!/usr/bin/env python
# -*- coding:utf-8 -*-
import os,sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
#from PyQt5.QtGui import  *


class QScrollAreaDemo(QScrollArea):
    def __init__(self,*args,**kwargs):
        super(QScrollAreaDemo, self).__init__(*args,**kwargs)
        self.setWindowTitle("QScrollAreaDemo")
        self.resize(400,400)
        #只要setwidget的滚动区域尺寸大于窗口尺寸就会出现滚动条效果
        widget = QWidget()
        widget.setStyleSheet("background-color:red;")
        widget.setMinimumSize(600,600) #滚动区域
        self.setWidget(widget)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    mainwindows = QScrollAreaDemo()
    mainwindows.show()
    sys.exit(app.exec())

效果如下：
在这里插入图片描述

2 QScrollBar

QScrollBar这个控件提供水平的或垂直的滚动条，这样可以扩大当前窗口的有效装载面积，从而装载更多的控件。

1 API

2 信号槽

在这里插入图片描述

3 Demo

#!/usr/bin/env python
# -*- coding:utf-8 -*-
import os,sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import  *


class QScrollBarDemo(QWidget):
    def __init__(self,*args,**kwargs):
        super(QScrollBarDemo, self).__init__(*args,**kwargs)
        self.setWindowTitle("QScrollBarDemo")
        self.resize(400,400)
        vlayout = QVBoxLayout(self)
        self.qscrollbar1 = QScrollBar()
        self.qscrollbar1.setOrientation(Qt.Horizontal) #水平
        self.qscrollbar2 = QScrollBar()
        self.qscrollbar2.setOrientation(Qt.Horizontal)  # 水平
        self.qscrollbar3 = QScrollBar(Qt.Horizontal)
        self.qscrollbar1.setRange(0,255)
        self.qscrollbar2.setRange(0, 255)
        self.qscrollbar3.setRange(0, 255)
        vlayout.addWidget(self.qscrollbar1)
        vlayout.addWidget(self.qscrollbar2)
        vlayout.addWidget(self.qscrollbar3)
        self.showlabel = QLabel("笑尽英雄啊")
        font = QFont("Times", 50, QFont.Bold)
        self.showlabel.setFont(font)
        vlayout.addWidget(self.showlabel,8)
        #
        self.qscrollbar1.valueChanged.connect(self.slidermove)
        self.qscrollbar2.sliderMoved.connect(self.slidermove)
        self.qscrollbar3.sliderMoved.connect(self.slidermove)

    def slidermove(self,value):
        r = self.qscrollbar1.value()
        g = self.qscrollbar2.value()
        b = self.qscrollbar3.value()
        self.showlabel.setStyleSheet("color:rgb(%s,%s,%s)"%(r,g,b))

if __name__ == '__main__':
    app = QApplication(sys.argv)
    mainwindows = QScrollBarDemo()
    mainwindows.show()
    sys.exit(app.exec())

效果如下：
在这里插入图片描述

4 样式表

滚动条分水平垂直

QScrollBar:horizontal {
      border: 2px solid grey;
      background: #32CC99;
      height: 15px;
      margin: 0px 20px 0 20px;
  }
  QScrollBar::handle:horizontal {
      background: white;
      min-width: 20px;
  }
  QScrollBar::add-line:horizontal {
      border: 2px solid grey;
      background: #32CC99;
      width: 20px;
      subcontrol-position: right;
      subcontrol-origin: margin;
  }

  QScrollBar::sub-line:horizontal {
      border: 2px solid grey;
      background: #32CC99;
      width: 20px;
      subcontrol-position: left;
      subcontrol-origin: margin;
  }
 QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
      border: 2px solid grey;
      width: 3px;
      height: 3px;
      background: white;
  }

  QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
      background: none;
  }

在这里插入图片描述
垂直样式：


QScrollBar:vertical {
    background: url(images/scrollbar-vertical-bg.png);
    width: 9px;
    margin: 0px 0 0px 0;
}
QScrollBar::handle:vertical {
    background: rgb(195, 195, 195);
    min-height: 20px;
    margin: 0 1px 0 2px;
    border-radius: 3px;
    border: none;
    /*background: qlineargradient(spread:reflect, 
        x1:0, y1:0, x2:1, y2:0, 
        stop:0 rgba(164, 164, 164, 255), 
        stop:0.5 rgba(120, 120, 120, 255),
        stop:1 rgba(164, 164, 164, 255));*/
    /*border-image: url(images/scrollbar-vertical-thumb.png) 8px 0 8px 0 fixed;*/
}
 
QScrollBar::add-line:vertical {
    background: url(images/scrollbar-vertical-bg.png);
    height: 0px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}
 
QScrollBar::sub-line:vertical {
    background: url(images/scrollbar-vertical-bg.png);
    height: 0px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}
 
QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
    border: 1px solid grey;
    width: 3px;
    height: 3px;
    background: white;
}
 
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
    background: none;
}