[PyQt5] 如何使用 QScrollArea 元件製作捲動頁面

Last Updated on 2021-05-17 by Clay

在設計界面的過程中，我們難免都會需要在界面當中設立『可捲動』的區域，好讓我們可以在有限的版面當中，最大限度地展示我們想要顯示的資料。

我得事先聲明，我並沒有完全解決『如何使用 QScrollArea 元件』這件事。

為什麼這麼說呢？如果有看過我寫的其他篇的 PyQt5 心得筆記，大概就會知道，我一直以來開發界面的時候總是使用 Qt Designer 這個工具。

就是上方的這個工具。

Qt Designer 能幫助我們很好地通過拖曳元件來設計界面，而不是慢慢地修程式碼、慢慢地執行結果來看我們的元件有沒有擺歪。

但是在使用 ScrollArea 這個元件上，我找不到什麼簡單的方法可以直接拖曳元件，然後就完成我想要的功能（真希望有人能告訴我）。

當然，除了使用 Qt Designer 拖曳來創造界面之外，我們當然也可以直接撰寫程式來設定界面，事實上我就是這樣做的，目前也只有通過直接寫程式才能成功使用 QScrollArea。

如果對於 PyQt5 有興趣，可以參閱官方的指南： https://www.riverbankcomputing.com/static/Docs/PyQt5/index.html?highlight=qicon

或者是我之前寫過的 PyQt5 系列。

那麼，以下我就簡單紀錄一下我怎麼使用 QScrollArea 這個元件。

QScrollArea 使用方法

我們直接來看程式碼：

# -*- coding: utf-8 -*-
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtGui import *


class MainWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('QScrollArea Test')
        self.setGeometry(400, 400, 400, 800)

        formLayout = QFormLayout()
        groupBox = QGroupBox()

        for n in range(100):
            label1 = QLabel('Slime_%2d' % n)
            label2 = QLabel()
            label2.setPixmap(QPixmap('s1.png'))
            formLayout.addRow(label1, label2)

        groupBox.setLayout(formLayout)

        scroll = QScrollArea()
        scroll.setWidget(groupBox)
        scroll.setWidgetResizable(True)

        layout = QVBoxLayout(self)
        layout.addWidget(scroll)


if __name__ == '__main__':
    app = QApplication([])
    window = MainWindow()
    window.show()
    sys.exit(app.exec())

Output:

這是真的可以移動的。

至於我最想知道的問題：該怎麼在 Qt Designer 裡面使用呢？事實上，我目前的作法都是直接拉出 QScrollArea，然後在程式裡面直接省略下面這一行初始化：

scroll = QScrollArea()

直接使用 Qt Designer 拉出的元件。這個方法還是要寫很多程式才能得到一樣的效果，所以目前相當矛盾。現在這個方法可以繼續往下開發，可是心裡就是覺得不輸坦。

後記

我想了想，還是把問題說得更清楚好了。

在 Qt Designer 裡面我拉出 QScrollArea 元件了，但是我不管怎麼將新的元件（比如 Slime 的圖片）放在 QScrollArea 中、或是 QScrollArea 的 Widget 中 —— 我右邊的那條『滑動條』(Vertical Slider) 就是不會出現。

至於自己手動將滑動條加進去 QScrollArea 裡面我也試過了，其結果就是滑動條可以滑動，但是 QScrollArea 的頁面並不會跟著捲動。

我想，我改天比較有空的時候再來好好解決這個問題，現在就先繼續往下開發了。

順帶一提那隻 Slime 是我畫的，然後被朋友譏笑根本是抄『仙境傳說』的聖誕波利。

我最後一次玩仙境傳說是在幼稚園哪！雖、雖然我是覺得我畫的 Slime 好像哪裡很眼熟沒錯 ......

放一下聖誕波利。那啥，嘴巴不一樣啦！（硬扯）

......我下次把 Slime 畫成別的顏色好了。