Skip to content

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

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

我得事先聲明,我並沒有完全解決『如何使用 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 畫成別的顏色好了。

4 thoughts on “[PyQt5] 如何使用 QScrollArea 元件製作捲動頁面”

  1. 在MainWindow按右鍵, 選到最下面的”Lay out”, 設定一個初始的layout即可, 而非從左側拉一個layout喔!
    我也在這問題困了很久QQ

Leave a Reply