Pycharm + PyQt5 + QtDesigner实现通过Qtdesigner添加QScrollArea，在代码中添加控件实现滚动效果

通过在QtDesigner中，新建一个继承自QWidget的窗口， 向窗口中添加一个QScrollArea，之后对窗口整体添加一个QHorizontal布局，所生成的界面布局以及对象布局如上两幅图片所示，接下来用代码展示如何向此滚动区域添加内置控件或者自定义控件，让我们的滚动区域可以入我们所期，滚动起来。

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'test.ui'
#
# Created by: PyQt5 UI code generator 5.10
#
# WARNING! All changes made in this file will be lost!

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_Form(object):
    def setupUi(self, Form):
        Form.setObjectName("Form")
        Form.resize(400, 300)
        self.verticalLayout = QtWidgets.QVBoxLayout(Form)
        self.verticalLayout.setObjectName("verticalLayout")
        self.scrollArea = QtWidgets.QScrollArea(Form)
        self.scrollArea.setWidgetResizable(True)
        self.scrollArea.setObjectName("scrollArea")
        self.scrollAreaWidgetContents = QtWidgets.QWidget()
        self.scrollAreaWidgetContents.setGeometry(QtCore.QRect(0, 0, 380, 280))
        self.scrollAreaWidgetContents.setObjectName("scrollAreaWidgetContents")
        self.scrollArea.setWidget(self.scrollAreaWidgetContents)
        self.verticalLayout.addWidget(self.scrollArea)

        self.retranslateUi(Form)
        QtCore.QMetaObject.connectSlotsByName(Form)

    def retranslateUi(self, Form):
        _translate = QtCore.QCoreApplication.translate
        Form.setWindowTitle(_translate("Form", "Form"))

这个是通过编译UI文件生成的py代码，代码哪里不明白的欢迎在下方留言讨论。

import sys
from Student.CustomWidget import CustomWidget
from PyQt5.QtWidgets import QWidget, QApplication, QMainWindow, QPushButton, QHBoxLayout, QScrollArea, QGridLayout
from test import Ui_Form

class Form(QWidget, Ui_Form):
    def __init__(self):
        super(Form, self).__init__()
        self.ui = Ui_Form()
        self.ui.setupUi(self)

        gLayout = QGridLayout(self.ui.scrollAreaWidgetContents)

        names = []
        positions = [(i, j) for i in range(10) for j in range(10)]
        for x in range(100):
            names.append("Test" + str(x + 1))


        for name, position in zip(names, positions):
            gLayout.addWidget(QPushButton(name), *position)

        self.ui.scrollAreaWidgetContents.setLayout(gLayout)






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

在代码中向滚动区域添加控件需要注意，在Qtdesigner中添加滚动区域时， 会在滚动区域中自动添加一个Container，名字叫做

scrollAreaWidgetContents

所以我们如果想向滚动区域中添加控件，实现滚动效果，只需在上述的容器中添加一个布局，之后将想添加的控件添加到布局中，便可实现滚动效果。

gLayout = QGridLayout(self.ui.scrollAreaWidgetContents)

定义了一个网格布局，并且设置其父对象为scrollAreaWidgetContents

names = []
positions = [(i, j) for i in range(10) for j in range(10)]
for x in range(100):
    names.append("Test" + str(x + 1))

通过names保存将要添加的对象名，positions保存对象在网格布局中的位置。

for name, position in zip(names, positions):
    gLayout.addWidget(QPushButton(name), *position)

通过这段代码，便可以在布局中按照位置添加按钮。

self.ui.scrollAreaWidgetContents.setLayout(gLayout)

这行代码可以忽略不计， 因为在上述我们定义滚动区域时，已经设置好父对象。

最终的实现效果如上图所示。

from PyQt5.QtWidgets import QPushButton, QCheckBox, QWidget, QVBoxLayout



class CustomWidget(QWidget):
    def __init__(self, title, parent):
        super(CustomWidget, self).__init__(parent=None)
        self.initUI(title)

    def initUI(self, title):
        layout = QVBoxLayout()
        self.button = QPushButton(self)
        self.button.setStyleSheet("QPushButton{border-image:url(../images/nullImage.jpg);}")
        self.button.setFixedSize(100, 100)
        self.checkBox = QCheckBox(title, self)
        self.checkBox.setCheckable(False)
        self.button.setMinimumSize(100, 100)

        layout.addWidget(self.button)
        layout.addWidget(self.checkBox)
        self.setLayout(layout)

        self.button.clicked.connect(self.CustomButtonClicked)

    def CustomButtonClicked(self):
        print("button clicked!")

    def close(self):
        self.button.close()
        self.checkBox.close()

上述是我写的一个小的自定义控件中间添加了一些属性，以及一些函数，下面我将调用此控件向滚动区域中添加控件实现滚动效果。修改的代码仅需要一行

gLayout.addWidget(CustomWidget(name, self), *position)

上图即为最终的效果图。