I'm trying to add a scroll area to a QTabWideget.
At the moment I've set it up with two different tabs and the scrollArea is added to the second tab.
When I run my program, items are added to the scrollArea and the scroll bar is visible(policy set to always show), but it's greyed out.
Code:
class MyTableWidget(QWidget):
def __init__(self, parent):
super(QWidget, self).__init__(parent)
self.layout = QVBoxLayout(self)
# Initialize tab screen
self.tabs = QTabWidget()
self.tab1 = QWidget()
self.tab2 = QScrollArea()
self.tabs.setMaximumWidth(300)
self.tabs.setMaximumHeight(100)
# Add tabs
self.tabs.addTab(self.tab1,"Tab 1")
self.tabs.addTab(self.tab2,"Tab 2")
# Create first tab
# ...
# Create second tab
self.tab2.layout = QFormLayout(self)
self.tab2.setWidgetResizable(True)
self.tab2.setVerticalScrollBar(QScrollBar())
self.tab2.setVerticalScrollBarPolicy(2)
self.tab2.setFixedSize(100, 70)
self.t1 = QLabel('Test1', self)
self.t2 = QLabel('Test2', self)
self.t3 = QLabel('Test3', self)
self.t4 = QLabel('Test4', self)
self.t5 = QLabel('Test5', self)
self.t6 = QLabel('Test6', self)
self.tab2.layout.addRow(self.t1)
self.tab2.layout.addRow(self.t2)
self.tab2.layout.addRow(self.t3)
self.tab2.layout.addRow(self.t4)
self.tab2.layout.addRow(self.t5)
self.tab2.layout.addRow(self.t6)
self.tab2.setLayout(self.tab2.layout)
# Add tabs to widget
self.layout.addWidget(self.tabs)
self.setLayout(self.layout)
Code above turns out like this:
All squished together. I would like to be able to scroll and add more data without squishing whats there already.
Also, can I make the scroll area have the same background as seen in the picture below?
You do not have to replace the QScrollArea layout but add a new widget that has the QFormLayout as shown below.
from PyQt5.QtWidgets import QWidget, QVBoxLayout, QApplication, \
QTabWidget, QScrollArea, QFormLayout, QLabel
class MyTableWidget(QWidget):
def __init__(self, parent=None):
super(QWidget, self).__init__(parent)
self.layout = QVBoxLayout(self)
self.tabs = QTabWidget()
self.tab1 = QWidget()
self.tab2 = QScrollArea()
self.tabs.addTab(self.tab1, 'Tab 1')
self.tabs.addTab(self.tab2, 'Tab 2')
content_widget = QWidget()
self.tab2.setWidget(content_widget)
flay = QFormLayout(content_widget)
self.tab2.setWidgetResizable(True)
self.t1 = QLabel('Test1')
self.t2 = QLabel('Test2')
self.t3 = QLabel('Test3')
self.t4 = QLabel('Test4')
self.t5 = QLabel('Test5')
self.t6 = QLabel('Test6')
flay.addRow(self.t1)
flay.addRow(self.t2)
flay.addRow(self.t3)
flay.addRow(self.t4)
flay.addRow(self.t5)
flay.addRow(self.t6)
self.layout.addWidget(self.tabs)
self.resize(300, 100)
if __name__ == '__main__':
import sys
app = QApplication(sys.argv)
w = MyTableWidget()
w.show()
sys.exit(app.exec_())
Related
I try to code in PyQt an interface where user can check boxes and then click on the button to process their choices. However, I have some trouble because the button overlaps checkbox labels. Here is a simpler code to show you my problem :
from PyQt5.QtWidgets import QMainWindow, QApplication, QPushButton, QWidget, QTabWidget, QVBoxLayout, QGridLayout, \
QCheckBox, QHBoxLayout
import sys
class App(QMainWindow):
def __init__(self):
super().__init__()
self.title = 'PyQt5 tabs - pythonspot.com'
self.left = 0
self.top = 0
self.width = 300
self.height = 200
self.setWindowTitle(self.title)
self.setGeometry(self.left, self.top, self.width, self.height)
self.table_widget = MyTableWidget(self)
self.setCentralWidget(self.table_widget)
self.show()
class MyTableWidget(QWidget):
def __init__(self, parent):
super(QWidget, self).__init__(parent)
self.layout = QVBoxLayout(self)
# Initialize tab screen
self.tabs = QTabWidget()
self.tab2 = QWidget()
self.tabs.resize(300, 200)
self.checkbox_states = {}
# Add tabs
self.tabs.addTab(self.tab2, "Tab 2")
# Create first tab
self.tab2.layout = QGridLayout()
checkbox_layout = QVBoxLayout()
self.checkbox_states["Haar"] = QCheckBox("small")
self.checkbox_states["db"] = QCheckBox("small")
self.checkbox_states["sym"] = QCheckBox("small")
self.checkbox_states["coif"] = QCheckBox("very very very very long")
for key, l in self.checkbox_states.items():
l.setChecked(False)
checkbox_layout.addWidget(l)
process_button_layout = QHBoxLayout()
self.process_wavelet = QPushButton("Process")
process_button_layout.addWidget(self.process_wavelet)
# QObject.connect(self.process_wavelet, SIGNAL('clicked()'), self._on_process_wavelet)
self.tab2.layout.addLayout(checkbox_layout, 0, 0, 0, 0)
self.tab2.layout.addLayout(process_button_layout, 1, 1, 1, 1)
self.tab2.setLayout(self.tab2.layout)
# Add tabs to widget
self.layout.addWidget(self.tabs)
self.setLayout(self.layout)
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = App()
sys.exit(app.exec_())
Does anyone has an idea on how i can suppress this overlapping problem ? Thanks !
EDIT :
I would like something like this :
Here with a much smaller text, I don't have the overlapping problem. It only appear if we replace the last checkbox's label by a longer string.
What the OP wants can be obtained from many depending on how he wants the geometries of the elements to behave when the window changes in size. So as there are no more restrictions than the image it shows, it will provide a possible solution using QGridLayout where in the first column the QCheckBox will be placed, and in the second column and in the last file the QPushButton:
class MyTableWidget(QWidget):
def __init__(self, parent):
super(QWidget, self).__init__(parent)
layout = QVBoxLayout(self)
self.tabs = QTabWidget()
self.tabs.resize(300, 200)
layout.addWidget(self.tabs)
self.tab2 = QWidget()
self.tabs.addTab(self.tab2, "Tab 2")
lay = QGridLayout(self.tab2)
self.checkbox_states = {}
for i, (key, text) in enumerate(
(
("Haar", "small"),
("db", "small"),
("sym", "small"),
("coif", "very very very very long"),
)
):
checkbox = QCheckBox(text)
checkbox.setChecked(False)
lay.addWidget(checkbox, i, 0)
self.checkbox_states[key] = checkbox
self.process_wavelet = QPushButton("Process")
lay.addWidget(self.process_wavelet, i, 1)
So I'm new to PyQt and I can't seem to quite work out all the kinks. For some reason, whenever I click the "play game" button, the image just doesn't appear. However, it does run the InitUI. Can someone tell me what Im doing wrong? (when It just loaded up the image initially, the image appeared.
class Example(QMainWindow):
def __init__(self):
super().__init__()
self.title = 'PyQt5 image - pythonspot.com'
self.initUI()
def initUI(self):
central_widget = QWidget()
self.chess = ChessWidget(central_widget)
self.setCentralWidget(central_widget)
self.setWindowIcon(QIcon('web.png'))
self.resize(900,900)
self.center()
self.setFixedSize(self.size())
self.show()
def toggleMenu(self, state):
if state:
self.statusbar.show()
else:
self.statusbar.hide()
# def closeEvent(self, event):
#
# reply = QMessageBox.question(self, 'Message',
# """Are you sure you want to quit?""", QMessageBox.Yes |
# QMessageBox.No, QMessageBox.No)
#
# if reply == QMessageBox.Yes:
# event.accept()
# else:
# event.ignore()
def center(self):
qr = self.frameGeometry()
cp = QDesktopWidget().availableGeometry().center()
qr.moveCenter(cp)
self.move(qr.topLeft())
class ChessWidget(QFrame):
def __init__(self, parent):
super().__init__(parent)
qbtn = QPushButton('Play Game', self)
qbtn.clicked.connect(lambda: qbtn.close())
qbtn.clicked.connect(lambda: self.initUI())
qbtn.resize(qbtn.sizeHint())
hbox = QHBoxLayout()
hbox.addStretch(1)
hbox.addWidget(qbtn)
vbox = QVBoxLayout()
vbox.addStretch(1)
vbox.addLayout(hbox)
self.setLayout(vbox)
def initUI(self):
print("hi")
pixmap = QPixmap("ChessBoard.jpg")
lbl = QLabel(self)
pixmap2 = pixmap.scaledToWidth(900)
hbox = QHBoxLayout(self)
hbox.addStretch(1)
hbox.addWidget(lbl)
lbl.setPixmap(pixmap2) ` if __name__ == '__main__':
app = QApplication([])
ex = Example()
sys.exit(app.exec_()) `
You should be getting a useful warning from Qt; if not, check that your test environment has a console active. The warning is:
QLayout: Attempting to add QLayout "" to ChessWidget "", which already has a layout
This happens when you create the QHBoxLayout in ChessWidget.initUI and try to parent it to the ChessWidget. You have already set a QVBoxLayout on that widget.
A quick solution is to retain the name of your layout (vbox -> self.vbox), then in a click event remove the QPushButton from the layout and add the ChessWidget.
I understand you're just making small tests for learning purposes, but this design pattern with the QPushButton being permanently replaced might not be what you want. If you want the QPushButton and ChessWidget to occupy the same space, look at QStackedWidget. This will allow you to switch from one widget to the other as often as you like. This could be a useful approach if you want to hide the ChessWidget later when no game is active, for example.
Note that when you create your QPushButton and QLabel, it's unnecessary to parent them to the ChessWidget as they will be reparented to the layout when added.
Try it:
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *
class Example(QMainWindow):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
central_widget = QWidget()
self.chess = ChessWidget(central_widget)
self.setCentralWidget(central_widget)
self.layV = QVBoxLayout(central_widget) # +++
self.layV.addWidget(self.chess) # +++
self.setWindowIcon(QIcon('D:/_Qt/img/py-qt.png')) # web.png
self.resize(440,440) #(900,900)
class ChessWidget(QFrame):
def __init__(self, parent=None):
super().__init__(parent)
qbtn = QPushButton('Play Game', self)
qbtn.clicked.connect(lambda: qbtn.close())
qbtn.clicked.connect(lambda: self.initUI())
self.hbox = QHBoxLayout()
self.hbox.addWidget(qbtn)
self.vbox = QVBoxLayout()
self.vbox.addStretch(1)
self.vbox.addLayout(self.hbox)
self.setLayout(self.vbox)
def initUI(self):
print("hi")
pixmap = QPixmap("D:/_Qt/img/pyqt.jpg") # ChessBoard.jpg
lbl = QLabel(self)
self.vbox.addWidget(lbl)
lbl.setPixmap(pixmap.scaled(400, 400, Qt.KeepAspectRatio)) # +++
if __name__ == '__main__':
app = QApplication([])
ex = Example()
ex.setWindowTitle('PyQt5 image - pythonspot.com')
ex.show()
sys.exit(app.exec_())
I got the following Test-GUI.
There is a left layout and a right layout where i want to put buttons and other things onto. The button on the right should make a QFrame unhide or hide and all the widgets in it. This works.
But after the first two clicks, the layout is different.
The TableWidget on the left layout gets resized and the button is a bit more south.
Is there an easy way to fix this?
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
class MainWindow(QMainWindow):
def __init__(self):
super().__init__()
self.main_widget = MainWidget()
self.setCentralWidget(self.main_widget)
self.show()
class MainWidget(QWidget):
def __init__(self):
super().__init__()
self.layout = QVBoxLayout()
self.tab_widget = TabWidget()
self.debugger = Dialog()
self.layout.addWidget(self.tab_widget)
self.layout.addWidget(self.debugger)
self.setLayout(self.layout)
class TabWidget(QTabWidget):
def __init__(self):
super().__init__()
self.tab1 = Tab_1()
self.addTab(self.tab1, "Tab1")
class Tab_1(QWidget):
def __init__(self):
super().__init__()
# LEFT LAYOUT BEGIN
self.table = QTableWidget()
self.table.setRowCount(1)
self.table.setColumnCount(2)
self.table.setSizeAdjustPolicy(QAbstractScrollArea.AdjustToContents)
self.table.resizeColumnsToContents()
left_hlayout = QHBoxLayout()
left_hlayout.addWidget(self.table)
# # LEFT LAYOUT END
#
# # RIGHT LAYOUT BEGIN
self.button_options = QPushButton('Options')
self.button_options.setCheckable(True)
self.button_options.toggled.connect(self.option_pressed)
right_vlayout = QVBoxLayout()
right_vlayout.addWidget(self.button_options)
# # RIGHT LAYOUT END
# MAIN LAYOUT BEGING
self.main_layout = QVBoxLayout()
self.horizontal_layout = QHBoxLayout()
self.horizontal_layout.addLayout(left_hlayout)
self.horizontal_layout.addLayout(right_vlayout)
self.main_layout.addLayout(self.horizontal_layout)
self.option = Options()
self.main_layout.addWidget(self.option)
self.setLayout(self.main_layout)
# MAIN LAYOUT END
def option_pressed(self):
if self.button_options.isChecked():
self.option.setVisible(True)
else:
self.option.setVisible(False)
class Options(QFrame):
def __init__(self):
super().__init__()
self.hide()
self.setFrameStyle(QFrame.StyledPanel | QFrame.Sunken)
self.options_layout = QFormLayout()
self.options_label = QLabel('One')
self.options_lineedit = QLineEdit('Two')
self.options_layout.addRow(self.options_label, self.options_lineedit)
self.setLayout(self.options_layout)
class Dialog(QPlainTextEdit):
def __init__(self, parent=None):
super().__init__(parent)
self.setFixedHeight(100)
pal = QPalette()
bgc = QColor(210, 210, 210)
pal.setColor(QPalette.Base, bgc)
self.setPalette(pal)
if __name__ == "__main__":
app = QApplication(sys.argv)
window = MainWindow()
sys.exit(app.exec_())
I'm trying to make two scroll bars for a QGroupBox but I only succeed having one (the vertical one)
I'm not sure what I need to do.
here is a short example of my code:
from PyQt5.QtGui import *
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
import sys
class SurfViewer(QMainWindow):
def __init__(self, parent=None):
super(SurfViewer, self).__init__()
self.parent = parent
self.centralTabs= QTabWidget()
self.setCentralWidget(self.centralTabs)
self.setFixedWidth(200)
self.setFixedHeight(200)
#tab Model selection
self.tab_ModelSelect = QWidget()
self.centralTabs.addTab(self.tab_ModelSelect,"Label")
self.groupscrolllayouttest = QHBoxLayout()
self.groupscrollbartest = QGroupBox()
self.mainHBOX_param_scene = QVBoxLayout()
for i in range(10):
Label = QLabel('BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla')
Label.setFixedWidth(200)
self.mainHBOX_param_scene.addWidget(Label)
#
scroll = QScrollArea()
scroll.setWidget(self.groupscrollbartest)
scroll.setWidgetResizable(True)
scroll.setFixedWidth(20)
scroll.setVerticalScrollBarPolicy(Qt.ScrollBarAsNeeded)
scroll.setHorizontalScrollBarPolicy(Qt.ScrollBarAsNeeded)
self.groupscrollbartest.setLayout(self.mainHBOX_param_scene)
self.groupscrolllayouttest.addWidget(self.groupscrollbartest)
self.groupscrolllayouttest.addWidget(scroll)
self.tab_ModelSelect.setLayout(self.groupscrolllayouttest)
def main():
app = QApplication(sys.argv)
ex = SurfViewer(app)
ex.setWindowTitle('window')
# ex.showMaximized()
ex.show()
sys.exit(app.exec_( ))
if __name__ == '__main__':
main()
and here is the result:
In my more complex code I used QTabWidget, that why I included it in this example. What I would like to do is having a horizontal scrollbar to the bottom which allows me to shift the text left and right. Obviously I want keep the other one to shift the text up and down.
I also try to add a second scroll bar to the first one (groupscrolllayouttest)
from PyQt5.QtGui import *
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
import sys
class SurfViewer(QMainWindow):
def __init__(self, parent=None):
super(SurfViewer, self).__init__()
self.parent = parent
self.centralTabs= QTabWidget()
self.setCentralWidget(self.centralTabs)
self.setFixedWidth(200)
self.setFixedHeight(200)
#tab Model selection
self.tab_ModelSelect = QWidget()
self.centralTabs.addTab(self.tab_ModelSelect,"Label")
self.groupscrolllayouttest2 = QVBoxLayout() ####
self.groupscrollbartest2 = QGroupBox() ####
self.groupscrolllayouttest = QHBoxLayout() ####
self.groupscrollbartest = QGroupBox() ####
self.mainHBOX_param_scene = QVBoxLayout()
for i in range(10):
Label = QLabel('BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla')
Label.setFixedWidth(200)
self.mainHBOX_param_scene.addWidget(Label)
#
scroll = QScrollArea()
scroll.setWidget(self.groupscrollbartest)
scroll.setWidgetResizable(True)
scroll.setFixedWidth(20)
scroll.setVerticalScrollBarPolicy(Qt.ScrollBarAsNeeded)
scroll.setHorizontalScrollBarPolicy(Qt.ScrollBarAsNeeded)
# self.mainHBOX_param_scene.addWidget(scroll)
self.groupscrollbartest.setLayout(self.mainHBOX_param_scene)
self.groupscrolllayouttest.addWidget(self.groupscrollbartest)
self.groupscrolllayouttest.addWidget(scroll)
scroll2 = QScrollArea()
scroll2.setWidget(self.groupscrollbartest2)
scroll2.setWidgetResizable(True)
scroll2.setFixedWidth(20)
scroll2.setVerticalScrollBarPolicy(Qt.ScrollBarAsNeeded)
scroll2.setHorizontalScrollBarPolicy(Qt.ScrollBarAsNeeded)
self.groupscrollbartest2.setLayout(self.groupscrolllayouttest)
self.groupscrolllayouttest2.addWidget(self.groupscrollbartest2)
self.groupscrolllayouttest2.addWidget(scroll2)
self.tab_ModelSelect.setLayout(self.groupscrolllayouttest2)
def main():
app = QApplication(sys.argv)
ex = SurfViewer(app)
ex.setWindowTitle('window')
# ex.showMaximized()
ex.show()
sys.exit(app.exec_( ))
if __name__ == '__main__':
main()
But I end up with a strange scroll bar:
So now I'm stuck. Any idea?
What you have to do is create a widget, and in that widget place the QGroupBox:
[...]
scroll = QScrollArea()
widget = QWidget(self)
widget.setLayout(QVBoxLayout())
widget.layout().addWidget(self.groupscrollbartest)
scroll.setWidget(widget)
scroll.setWidgetResizable(True)
self.groupscrollbartest.setLayout(self.mainHBOX_param_scene)
self.groupscrolllayouttest.addWidget(scroll)
self.tab_ModelSelect.setLayout(self.groupscrolllayouttest)
[...]
Output:
I am trying to create a dialog with three tabs using PyQt. However, I am annoyed because although the dialog is displayed, the embedded widgets are not displayed!. I suppose this is a very simple problem with a correspondingly very simple solution, but I am struck! Can anyone give a hint? Thanks in advance!
Here is my code so far:
import sys
from PyQt4.QtCore import *
from PyQt4.QtGui import *
class TabbedDialog(QDialog):
def __init__(self, parent = None):
super(TabbedDialog, self).__init__(parent)
self.tabWidget = QTabWidget()
self.tabWidget.tab1 = QWidget()
self.tabWidget.tab2 = QWidget()
self.tabWidget.tab3 = QWidget()
self.tabWidget.addTab(self.tabWidget.tab1,"Tab 1")
self.tabWidget.addTab(self.tabWidget.tab2,"Tab 2")
self.tabWidget.addTab(self.tabWidget.tab3,"Tab 3")
self.tab1UI()
self.tab2UI()
self.tab3UI()
self.setWindowTitle("tab demo")
def tab1UI(self):
layout = QFormLayout()
layout.addRow("Name",QLineEdit())
layout.addRow("Address",QLineEdit())
self.tabWidget.setTabText(0,"Contact Details")
self.tabWidget.tab1.setLayout(layout)
def tab2UI(self):
layout = QFormLayout()
sex = QHBoxLayout()
sex.addWidget(QRadioButton("Male"))
sex.addWidget(QRadioButton("Female"))
layout.addRow(QLabel("Sex"),sex)
layout.addRow("Date of Birth",QLineEdit())
self.tabWidget.setTabText(1,"Personal Details")
self.tabWidget.tab2.setLayout(layout)
def tab3UI(self):
layout = QHBoxLayout()
layout.addWidget(QLabel("subjects"))
layout.addWidget(QCheckBox("Physics"))
layout.addWidget(QCheckBox("Maths"))
self.tabWidget.setTabText(2,"Education Details")
self.tabWidget.tab3.setLayout(layout)
if __name__ == '__main__':
app = QApplication(sys.argv)
form = TabbedDialog()
retval = form.exec_()
here is my solution to the problem
On the init method, I declared a layout, then added the 'tabWidget' widget to that layout and set that layout as the layout of your QDialog.
def __init__(self, parent = None):
super(TabbedDialog, self).__init__(parent)
self.tabWidget = QTabWidget()
self.tabWidget.tab1 = QWidget()
self.tabWidget.tab2 = QWidget()
self.tabWidget.tab3 = QWidget()
self.tabWidget.addTab(self.tabWidget.tab1,"Tab 1")
self.tabWidget.addTab(self.tabWidget.tab2,"Tab 2")
self.tabWidget.addTab(self.tabWidget.tab3,"Tab 3")
self.tab1UI()
self.tab2UI()
self.tab3UI()
self.setWindowTitle("tab demo")
# Here is the addition to the code.
mainLayout = QVBoxLayout()
mainLayout.addWidget(self.tabWidget)
self.setLayout(mainLayout)