Widget Box Overview

The Widget Box in Qt Designer provides a palette of standard interface components. These elements can be dragged onto a form to construct a graphical user interface. The primary categories and they constituent elements include:

• Fundamental Elements

  • Label: Renders static text or images.
  • Push Button: Initiates an action when activated.
  • Line Edit: Accepts a single line of user input.
  • Text Edit: Accepts multiple lines of user input.

• Organizational Containers

  • Layouts: Structures for arranging child widgets.
  • Group Box: Encapsulates related widgets under a common title.
  • Stacked Widget: Manages multiple widgets in a single area, showing one at a time.

• Selection Mechanisms

  • Check Box: Toggles an option on or off.
  • Radio Button: Allows selection of one option from a set.
  • Combo Box: Provides a dropdown list of choices or allows manual entry.

• Data Visualization

  • Progress Bar: Indicates the status of a long-running operation.
  • Slider: Selects a value from a continuous range.
  • Table View: Displays data in a tabular format.

• Graphic Rendering

  • Graphics View: A framework for displaying graphical items.
  • Chart View: Visualizes data in various chart formats.

• Interface Ancillaries

  • Menu Bar: Holds drop-down menus.
  • Tool Bar: Contains a row of action icons.
  • Status Bar: Shows informational messages at the window's base.

Implementing Proportional Widths

A common design requirement involves dividing a horizontal space into distinct sections with fixed proportional widths. For instance, allocating two-thirds of the width to a left-hand panel and one-third to a right-hand panel.

This can be achieved by nesting layouts within a primary horizontal layout (QHBoxLayout). The key is to assign stretch factors to each sub-layout.

1. Create a main horizontal layout.
2. Nest the desired layouts (e.g., two vertical layouts) within the horizontal layout.
3. Assign a stretch factor of 2 to the left layout and 1 to the right layout. This ratio ensures the left area occupies twice the space of the right area.

The following Python code demonstrates this technique using PyQt5:

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

def main():
    app = QApplication(sys.argv)
    window = QWidget()
    window.setWindowTitle('Proportional Layout Demo')

    # Primary horizontal layout
    main_layout = QHBoxLayout(window)

    # Left vertical layout with stretch factor 2
    left_vbox = QVBoxLayout()
    left_vbox.addWidget(QLabel('Left Panel (2/3)'))
    left_vbox.addWidget(QLabel('Element 1'))
    left_vbox.addWidget(QLabel('Element 2'))
    main_layout.addLayout(left_vbox, 2)

    # Right vertical layout with stretch factor 1
    right_vbox = QVBoxLayout()
    right_vbox.addWidget(QLabel('Right Panel (1/3)'))
    right_vbox.addWidget(QLabel('Element 3'))
    main_layout.addLayout(right_vbox, 1)

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

if __name__ == '__main__':
    main()

In this example, the left panel will dynamically resize to occupy approximate 66.7% of the available width, while the right panel takes the remaining 33.3%.