Dynamic positioning of widgets in PyQt5?

Question

I want my window to have this layout:

The graph will be from matplotlib. I want a way of dynamically creating this layout, so that it would fit to any sized screen without changing the basic layout. How do I do this? This is what I've got so far:

import sys
from PyQt5.QtWidgets import (QWidget, QPushButton, 
    QHBoxLayout, QVBoxLayout, QApplication, QFrame, QScrollArea, QListWidget, QListWidgetItem, QLabel)

class Example(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):

        #top left downwards
        vbox = QVBoxLayout() 
        vbox.addStretch(1)
        hbox = QHBoxLayout()
        hbox.addStretch(1)
        hbox.addLayout(vbox)
        hbox.setDirection(1)
        self.setLayout(hbox)    

        qlist = QListWidget()
        hbox.addWidget(qlist)

        for i in range(0,31):
            qlist.addItem(str(i)) 

        qlist.setFrameStyle(QFrame.Raised)

        vbox2 = QVBoxLayout()
        vbox2.addStretch()

        graph = QFrame(self)
        graph.setStyleSheet("QWidget { background-color: red }" )

        vbox2.addWidget(graph)
        graph.setFrameShape(1)

        self.setStyleSheet("font: 20pt Cambria")
        self.showMaximized()   
        self.show()

if __name__ == '__main__':

    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())

Which gives me this:

Anyone know how to do this? I'm new to PyQt5 and am not sure how box layouts work after looking at multiple examples. Is there an easier way of doing this without the layout being disturbed? Thanks!

Answer 1

The first thing you have to do is design your project, for example in your case you have two elements placed vertically: the red QFrame and something underneath, that something underneath commands an element handling the horizontal position so that below it must be a QHBoxLayout , and the element which places the QFrame and is something below it must be a QVBoxLayout , that is your simple structure that you could express it using the following scheme

QWidget
└── QVBoxLayout
    ├── QFrame
    └── QHBoxLayout
        └── QListWidget (with stretch = 1)

I prefer to create the widgets first and finally add it to the respective layouts.

import sys
from PyQt5 import QtWidgets

class Example(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        # create widgets
        graph = QtWidgets.QFrame()
        graph.setFixedHeight(40)
        graph.setFrameShape(QtWidgets.QFrame.Box)
        graph.setStyleSheet("QWidget { background-color: red }" )

        qlist = QtWidgets.QListWidget()
        qlist.setFrameStyle(QtWidgets.QFrame.Raised)
        qlist.addItems(map(str, range(31)))

        # create QHBoxLayout and add QListWidget
        hlay = QtWidgets.QHBoxLayout()
        hlay.addWidget(qlist)
        hlay.addStretch(1)

        # create QVBoxLayout and add QFrame and QHBoxLayout
        vlay = QtWidgets.QVBoxLayout(self)
        vlay.addWidget(graph)
        vlay.addLayout(hlay) 

        self.setStyleSheet("font: 20pt Cambria")
        self.showMaximized()

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())

Note: The QFrame does not have a certain height because its task is to take the task of the content, in this case there is not so we must establish a fixed size, if you are going to add elements to the QFrame do it through a layout and eliminate the line of setFixedHeight() .