pyqt5 滚动条QScrollArea()例程

1. 滚动区域QScrollArea

2. 滚动条QScrollBar

3. Zoom in按钮和Zoom out按钮分别用于放大缩小图片

代码如下：

import sys
from PyQt5.QtCore import Qt
from PyQt5.QtGui import QPixmap
from PyQt5.QtWidgets import QApplication, QWidget, QLabel, QPushButton, QScrollArea, QScrollBar, \
                            QHBoxLayout, QVBoxLayout


class Demo(QWidget):
    def __init__(self):
        super(Demo, self).__init__()
        self.label = QLabel(self)                              # 1
        self.label.setPixmap(QPixmap('image.jpg'))
        self.label.setScaledContents(True)

        self.scroll_area = QScrollArea(self)                   # 2
        self.scroll_area.setWidget(self.label)
        self.scroll_area.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)

        self.scrollbar = QScrollBar(Qt.Horizontal, self)       # 3
        self.scrollbar.setMaximum(self.scroll_area.horizontalScrollBar().maximum())

        self.bigger_btn = QPushButton('Zoom in', self)         # 4
        self.smaller_btn = QPushButton('Zoom out', self)

        self.bigger_btn.clicked.connect(self.bigger_func)      # 5
        self.smaller_btn.clicked.connect(self.smaller_func)
        self.scrollbar.valueChanged.connect(self.sync_func)

        self.h_layout = QHBoxLayout()                        
        self.h_layout.addWidget(self.bigger_btn)
        self.h_layout.addWidget(self.smaller_btn)

        self.v_layout = QVBoxLayout()
        self.v_layout.addWidget(self.scroll_area)
        self.v_layout.addWidget(self.scrollbar)
        self.v_layout.addLayout(self.h_layout)
        self.setLayout(self.v_layout)

    def bigger_func(self):
        self.label.resize(self.label.width()*1.2, self.label.height()*1.2)
        self.scrollbar.setMaximum(self.scroll_area.horizontalScrollBar().maximum())

    def smaller_func(self):
        self.label.resize(self.label.width() * 0.8, self.label.height() * 0.8)
        self.scrollbar.setMaximum(self.scroll_area.horizontalScrollBar().maximum())

    def sync_func(self):
        self.scroll_area.horizontalScrollBar().setValue(self.scrollbar.value())


if __name__ == '__main__':
    app = QApplication(sys.argv)
    demo = Demo()
    demo.show()
    sys.exit(app.exec_())

1 实例化一个QLabel控件用于显示大图。setScaledContents(True)方法可以让图片随着QLabel控件大小变化而变化，即自适应；

2 实例化一个QScrollArea控件，调用setWidget()方法将QLabel滚动区域中的控件。而以下这行代码的含义就是要将滚动区域自带的横向滚动条给隐藏掉，因为我们要使用寄己的滚动条：

self.scroll_area.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)

如果要隐藏纵向滚动条的话，则使用：

self.scroll_area.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)

3 实例化一个横向滚动条，并调用setMaximum()方法设置最大值。而它的最大值应该跟QScrollArea被隐藏掉的横向滚动条的最大值一样；

4 实例化两个按钮用于放大缩小QLabel控件(图片也会相应的放大缩小)；

5 信号和槽函数连接。在bigger_func()槽函数中，我们将QLabel控件放大20%，同时设置QScrollBar的最大值为QScrollArea横向滚动条的最大值；在smaller_func()槽函数中，我们将QLabel控件缩小20%，同样要更新QScrollBar的最大值；在sync_func()槽函数中，我们让QScrollArea横向滚动条的当前值和QScrollBar的值同步。这样一来就相当于我们在用自己实例化的QScrollBar来控制滚动区域中的图片(相信某些读者会有这样的需求)。

图片下载

小结

1 可以将QLabel换成一个QWidget，而这个QWidget中包含许多子控件，这样做可以节省许多界面空间；

2 QScrollBar当然不一定要跟QScrollArea一起使用，我们也可以将它看成一个QSlider；