Pyqt5 rapid development and practice 6.4 qboxlayout (box layout)

PyQt5 Rapid development and actual combat

6. The first 6 Chapter PyQt5 Layout management

6.4 QBoxLayout( Box layout )

use QBoxLayout Class can arrange controls horizontally and vertically ,QHBoxLayout and QVBoxLayout Class inherits from QBoxLayout class .

6.4.1 QHBoxLayout( Horizontal layout )

use QHBoxLayout class , Add controls in left to right order .

QHBoxLayout Common methods in class ：

Method	describe
addLayout(self , QLayout , stretch = 0 )	Add a layout on the right side of the window , Use stretch( Expansion and contraction ) To stretch , The expansion amount defaults to 0
addWidget(self , QWidget , stretch , Qt.Alignment alignment)	Add controls to layout :stretch( Expansion and contraction ), Only applicable to QBoxLayout, Controls and windows will grow as the amount of scaling increases ;
alignment, Specify the alignment
addSpacing(self , int)	Set the upper and lower spacing of each control , Additional space can be added through this method

QHBoxLayout Class inheritance structure ：

QObject → QLayout → QBoxLayout → QHBoxLayout

QHBoxLayout Alignment parameters used in layout ：

Parameters	describe
Qt.AlignLeft	Align left horizontally
Qt.AlignRight	Align horizontally to the right
Qt.AlignCenter	Align horizontally and Center
Qt.AlignJustify	Align both ends horizontally
Qt.AlignTop	Vertical alignment up
Qt.AlignBottom	Align vertically down
Qt.AlignVCenter	Align vertically in the middle

Horizontal layout case

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QHBoxLayout, QPushButton


class Winform(QWidget):
    def __init__(self, parent=None):
        super(Winform, self).__init__(parent)
        self.setWindowTitle(" Horizontal layout management example ")

        #  The horizontal layout is in order from left to right. Add button parts .
        hlayout = QHBoxLayout()
        hlayout.addWidget(QPushButton(str(1)))
        hlayout.addWidget(QPushButton(str(2)))
        hlayout.addWidget(QPushButton(str(3)))
        hlayout.addWidget(QPushButton(str(4)))
        hlayout.addWidget(QPushButton(str(5)))
        self.setLayout(hlayout)


if __name__ == "__main__":
    app = QApplication(sys.argv)
    form = Winform()
    form.show()
    sys.exit(app.exec_())

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QHBoxLayout, QPushButton
from PyQt5.QtCore import Qt


class Winform(QWidget):
    def __init__(self, parent=None):
        super(Winform, self).__init__(parent)
        self.setWindowTitle(" Horizontal layout management example ")
        self.resize(800, 200)

        #  The horizontal layout is in order from left to right. Add button parts .
        hlayout = QHBoxLayout()

        #  Level left   Vertical 
        hlayout.addWidget(QPushButton(str(1)), 0, Qt.AlignLeft | Qt.AlignTop)
        hlayout.addWidget(QPushButton(str(2)), 0, Qt.AlignLeft | Qt.AlignTop)
        hlayout.addWidget(QPushButton(str(3)))
        #  Level left   Vertical 
        hlayout.addWidget(QPushButton(str(4)), 0, Qt.AlignLeft | Qt.AlignBottom)
        hlayout.addWidget(QPushButton(str(5)), 0, Qt.AlignLeft | Qt.AlignBottom)

        self.setLayout(hlayout)


if __name__ == "__main__":
    app = QApplication(sys.argv)
    form = Winform()
    form.show()
    sys.exit(app.exec_())

You can also use setSpacing(int) Set the spacing between the controls .

6.4.2 QVBoxLayout( Vertical layout )

use QVBoxLayout class , Add controls in top-down order .

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButton


class Winform(QWidget):
    def __init__(self, parent=None):
        super(Winform, self).__init__(parent)
        self.setWindowTitle(" Vertical layout management example ")
        self.resize(330, 150)
        #  The vertical layout is carried out from top to bottom. Add button parts .
        vlayout = QVBoxLayout()
        vlayout.addWidget(QPushButton(str(1)))
        vlayout.addWidget(QPushButton(str(2)))
        vlayout.addWidget(QPushButton(str(3)))
        vlayout.addWidget(QPushButton(str(4)))
        vlayout.addWidget(QPushButton(str(5)))
        self.setLayout(vlayout)


if __name__ == "__main__":
    app = QApplication(sys.argv)
    form = Winform()
    form.show()
    sys.exit(app.exec_())

6.4.3 addStrech() Use of functions

In the layout, we need to use addStretch() function . Set up stretch After expansion , Allocate the remaining space proportionally .

function	describe
QBoxLayout.addStretch(int stretch = 0)	addStretch() Function to add a scalable control to the layout manager （QSpaceltem),0 Is the minimum , And will stretch Add to the end of the layout as a scaling amount ;stretch The parameter represents the proportion of equal distribution , The default value is 0

The above figure shows what it looks like when scaling is not set

from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QHBoxLayout, QPushButton
import sys


class WindowDemo(QWidget):
    def __init__(self):
        super().__init__()

        btn1 = QPushButton(self)
        btn2 = QPushButton(self)
        btn3 = QPushButton(self)
        btn1.setText('button 1')
        btn2.setText('button 2')
        btn3.setText('button 3')

        hbox = QHBoxLayout()
        #  Set the expansion amount to 1
        # hbox.addStretch(1)
        hbox.addWidget(btn1)
        #  Set the expansion amount to 1
        # hbox.addStretch(1)
        hbox.addWidget(btn2)
        #  Set the expansion amount to 1
        # hbox.addStretch(1)
        hbox.addWidget(btn3)
        #  Set the expansion amount to 1
        hbox.addStretch(1)

        self.setLayout(hbox)
        self.setWindowTitle("addStretch  Example ")
        self.resize(600,50)


if __name__ == "__main__":
    from pyqt5_plugins.examples.exampleqmlitem import QtCore
    QtCore.QCoreApplication.setAttribute(QtCore.Qt.AA_EnableHighDpiScaling)
    app = QApplication(sys.argv)
    win = WindowDemo()
    win.show()
    sys.exit(app.exec_())

After setting expansion and contraction

Add a telescopic control before the first control , All controls will be displayed on the right

Empathy , Add a telescopic control after the last control , All controls will be displayed on the left