Pyqt Combination Controls and QSpacerItem Guide

Pyqt Combination Control and QSpacerItem Guide)

  • Combination controls
      • The effect is as follows:
  • Detailed explanation of QSpacerItem

Combined controls

Create a combined control, such as QCheckBox and QLabel, and set the background color for this combination. You can place them in a container widget, and then set the background color for the container widget background color.

Here is an example of how to create a combination containing QCheckBox and QLabel and set the background color of the combination:

#!/usr/bin/env python

importsys
from PyQt5.QtWidgets import QApplication, QMainWindow, QWidget, QHBoxLayout, QLabel, QCheckBox,QVBoxLayout
from PyQt5.QtCore import Qt

app = QApplication(sys.argv)
window = QMainWindow()
window.setGeometry(100, 100, 500, 300)
window.setWindowTitle("Checkbox and Label Combination Example")


#Create center widget
center_widget = QWidget()

# Create a layout manager and add the center widget to the layout
mainlayout = QVBoxLayout()
center_widget.setLayout(mainlayout)

# Set container widget layout
layout = QHBoxLayout()
# Create a container widget, such as QWidget, to contain QCheckBox and QLabel
container_widget = QWidget()
container_widget.setStyleSheet("background-color: rgb(35, 43, 57);border-radius: 20px;") # Set the background color of the container

checkbox = QCheckBox()
label = QLabel("Option 1")
label.setStyleSheet("color: rgb(200, 200, 200);") # Set the background color of the container
layout.addWidget(checkbox)
layout.addWidget(label)

# Set layout to the layout of container_widget
container_widget.setLayout(layout)
container_widget.setFixedSize(100, 50)

# Add container_widget to the window page
mainlayout.addWidget(container_widget)
# Set the layout manager to center align the widgets
mainlayout.setAlignment(Qt.AlignCenter)

# Set the center widget to the center widget of the main window
window.setCentralWidget(center_widget)

window.show()
sys.exit(app.exec_())

The effect is as follows:

Detailed explanation of QSpacerItem

QSpacerItem is a layout item (Layout Item) in PyQt5, used to create blank space or spring effect in the layout. It is often used in layout management to adjust the spacing or alignment between controls in the layout. QSpacerItem is commonly used with QHBoxLayout, QVBoxLayout and other layout managers.

Here are some details about QSpacerItem:

  1. Create QSpacerItem: You can create a QSpacerItem instance using the constructor of QSpacerItem. The constructor usually accepts parameters such as width, height, minimum width, minimum height, and layout strategy.

    spacer = QSpacerItem(width, height, hPolicy, vPolicy)

    • width and height are the width and height of QSpacerItem.

    • hPolicy and vPolicy are horizontal and vertical layout strategies respectively, which can be constants in QSizePolicy, such as QSizePolicy.Expanding, QSizePolicy.Minimum, etc.

      QSizePolicy: QSizePolicy is used to control how controls occupy space in the layout. It can specify the horizontal and vertical expansion and contraction strategies of a control. There are some commonly used constants in QSizePolicy, as follows:

      • QSizePolicy.Fixed: Fixed size, the control will not expand or shrink.
      • QSizePolicy.Minimum: as small as possible, but can be expanded.
      • QSizePolicy.Maximum: As large as possible, but can shrink.
      • QSizePolicy.Preferred: Default size, can be expanded or contracted.
      • QSizePolicy.Expanding: Can be expanded, but will not shrink.
      • QSizePolicy.MinimumExpanding: as small as possible, but can be expanded.
      • QSizePolicy.Ignored: Ignored, the control will be ignored and will not participate in space allocation.

      These constants allow you to specify the behavior of the control in the layout. For example, if you want the control to expand horizontally to fill the available space, you can set the horizontal policy to QSizePolicy.Expanding. If you want the control to remain a fixed size, you can set the policy to QSizePolicy.Fixed.

  2. Add QSpacerItem to a layout: To use QSpacerItem in a layout, you can use the addSpacerItem method of the layout manager to It is added to the layout.

    layout.addSpacerItem(spacer)

  3. Adjusting QSpacerItem: You can set the size, minimum size, and layout policy of QSpacerItem to control its size and behavior in layouts.

  4. Purpose:

    • Create fixed spacing or margins to separate controls in a layout.
    • Create a spring effect to push controls to one side or the other of the layout.
    • Controls the alignment of controls, such as horizontal and vertical alignment.

Here’s an example of how to use QSpacerItem to create a layout containing buttons and add a spring effect before and after the buttons:

#!/usr/bin/env python

importsys
from PyQt5.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QPushButton, QSpacerItem, QSizePolicy,QWidget
from PyQt5.QtCore import Qt

app = QApplication(sys.argv)
window = QMainWindow()
window.setGeometry(100, 100, 300, 100)
window.setWindowTitle("QSpacerItem Example")

#Create center widget
center_widget = QWidget()

# Create a layout manager and add the center widget to the layout
mainlayout = QVBoxLayout()
center_widget.setLayout(mainlayout)

layout = QVBoxLayout()

button1 = QPushButton("Button 1")
layout.addWidget(button1)

spacer = QSpacerItem(20, 20, QSizePolicy.Expanding, QSizePolicy.Minimum)
layout.addSpacerItem(spacer)

button2 = QPushButton("Button 2")
layout.addWidget(button2)

spacer = QSpacerItem(20, 20, QSizePolicy.Expanding, QSizePolicy.Minimum)
layout.addSpacerItem(spacer)

button3 = QPushButton("Button 3")
layout.addWidget(button3)

# Add container_widget to the window page
mainlayout.addLayout(layout)
# Set the layout manager to center align the widgets
mainlayout.setAlignment(Qt.AlignCenter)

# Set the center widget to the center widget of the main window
window.setCentralWidget(center_widget)
window.show()
sys.exit(app.exec_())

In the above example, we used QSpacerItem to create two spring effects that push the buttons to the sides of the layout. This is achieved by setting QSizePolicy, where QSizePolicy.Expanding means a spring effect so that the controls in the layout make full use of the available space.