《快速掌握PyQt5》第二十一章 滚动区域QScrollArea和滚动条QScrollBar

第二十一章 滚动区域QScrollArea和滚动条QScrollBar

21.1 示例

21.2 小结

---

想象下，假如你的程序中用到了100个按钮，那你会选择将这100个按钮全部同时显示在界面上吗？当然不能这么做，不然界面得多拥挤。我们可以将这100个按钮放在一个滚动区域QScrollArea中，用户刚开始只能看见几个按钮，但滚动条可以让他们操作其余的按钮。  通过QScrollArea我们可以让界面显得更加整洁友好。

 

QScrollArea本身自带滚动条，但是有很多时候，开发人员可能想要往滚动条上加入更多功能来控制界面，或者说有时候只是需要用到滚动条而已。QScrollBar类可以让我们设计自己想要的滚动条。

 

21.1 示例

我们通过下面这个例子来一起讲解下QScrollArea和QScrollBar的基本用法：

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来控制滚动区域中的图片(相信某些读者会有这样的需求)。

 

图片下载地址：http://pic1.win4000.com/wallpaper/2/581943f7b650b.jpg

 

运行截图如下：

操作滚动条来显示其余的图片内容：

点击放大缩小按钮效果(滚动条的最大值也会发生相应改变)：

 

21.2 小结

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

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

3. 以上例子只是QScrollArea和QScrollBar用法的一小部分，大家可以通过文档了解到更多用法(一定要多查文档)。

 

----------------------------------------------------------------------

喜欢的小伙伴可以加入这个Python QQ交流群一起学习：820934083