通过在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)
上图即为最终的效果图。