11. Containers

Qt container widgets are visual elements that group other widgets together to form structured interfaces - they organize layout, provide borders, and create logical sections of the UI.

11.1 QGroupBox

QGroupBox is a widget that has a frame and a title on top and allows you to display other widgets inside itself but is commonly used to group checkboxes or radiobuttons. QGroupBox does not lay out its child widgets automatically - you need to do it yourself using one of the Qt layout classes. You can set a QGroupBox to be checkable, which lets the user enable or disable all its child widgets simultaneously.

An icon of a clipboard-list1

Your task is to create a group of mutually exclusive options. You also need to be able to enable or disable the whole group.

  1. Create a QGroupBox object and add a layout to it as you can’t add widgets directly. In the example, we use a QVBoxLayout.

  2. Create widgets and add them to the layout. In the example, we add three QRadioButtons. We also set one of the radio buttons to checked.

  3. Create the slot method to handle QRadioButton.toggled() signals. The slot sets a label’s text to the text of the checked radiobutton and the last two radiobuttons also toggle the group box togglable property.

  4. Connect QRadioButton.toggled signals with the slot.

11.2 QScrollArea

If a QScrollArea’ child widget exceeds its size it provides scrollbars so that the whole child widget can be viewed.

An icon of a clipboard-list1

You need to create a simple text editor in a constrained space.

  1. Create a QScrollArea object

  2. Create the child widget. In the example we use a QPlainTextEdit object and set its wrap mode to WrapMode.NoWrap so that it expands when text is entered

  3. Add the QPlainTextEdit to the scroll area using QScrollArea.addWidget(). We also set the QScrollArea.widgetResizable property to True so that the text box resizes along with the scroll area.

Now if you enter a long line of text in the text box the scroll area shows the horizontal scrollbar and if you enter several lines the scroll area shows the vertical scrollbar.

11.3 QToolBox

QToolBox provides a column of tabbed widget items. This doesn’t really tell you much - it is a Qt container widget pretty similar to the ubiquitous accordion widget that lets you pack multiple widgets within a relatively small space and expand or collapse them as needed. QToolBox pages are called items in the documentation.

An icon of a clipboard-list1

You need to add a collapsible set of options within a small space.

  1. Create a QToolBox object

  2. Create the child widgets. In the example we simply create three push buttons each representing a popular operating system. You can also add multiple child widgets to a page by adding them to a layout as demonstrated on the `Linux’ page.

  3. Add the widgets to the toolbox using QToolBox.addItem()

In the example we also handle the child push buttons clicked signals for demonstration purposes, setting a label’s text to the text of the clicked button.

11.4 QTabWidget

QTabWidget is a tabbed container widget - when you click on a tab its associated page is shown.

An icon of a clipboard-list1

Your space is limited and you need to create options for your editor styles and margins.

  1. Create a QTabWidget object.

  2. Create its intended child widgets. Each page contains a single widget but that widget, in turn, can be a QWidget or a container class which allows you to pack multiple children into a QTabWidget page.

  3. Use QTabWidget.addTab() to add the child widgets to the tab widget object. In the example we have two QWidgets and add each to the tab widget. The first QWidget has three check boxes as its children and the second QWidgets children are three radio buttons.

The tab indexes start with zero so the first tab has the index of 0 and the second has the index of 1. Each tab has a label (Styles and Margins in the example). You can change the tab position (North, South, West and East) and shape (Rounded and Triangular).

11.5 QSplitter

The QSplitter class lets the user resize its child widgets using the mouse.

An icon of a clipboard-list1

Your task is to create an application with three resizable panes and you want the user to be able to toggle their orientation.

  1. Create the QSplitter object. It lays its child widgets horizontally by default but you can change that using the QSplitter.setOrientation() method.

  2. Create the child widgets. In the example we create three QGroupBox objects. We also add two radio buttons to the first group box - selecting the buttons changes the QSplitter orientation dynamically.

  3. Add the child widgets to the splitter.