8. List Widgets

Qt provides several widgets for displaying and managing lists of items, including:

  • QComboBox - for showing a compact dropdown list,
  • QListWidget- for built-in list item management,
  • QListView - for model-based list mnagement.

8.1 QComboBox

QComboBox combines a button and a line edit with a pop-up list, which makes it useful for displaying a list in a constrained space. It can be populated using its item manipulation methods:

  • addItem() - appends an item,
  • addItems() - appends a list of items,
  • insertItem() - insert an item at the given index,
  • insertItems() - inserts a list of items at the given index,
  • removeItem() - removes the item at the given index.

Comb obox items can have text, icons, and additional user data. As QComboBox is a part of the Qt’s model/view framework, you can supply its data using one of the Qt model classes instead of managing items manually.

QComboBox provides several signals:

Signal Description
activated(index) User chooses an item from the list
currentIndexChanged(index) Current index changes (user or programmatic)
currentTextChanged(text) Current text changes
editTextChanged(text) Text edited in editable combobox
highlighted(index) Item in the popup list highlighted
textActivated(text) User chooses an item
textHighlighted(text) Item in the popup list highlighted

Combobox items are indexed, starting from zero. Its line edit widget can be accessed with QComboBox.lineEdit() and it can be made editable with setEditable().

An icon of a clipboard-list

You need to enable the user to select a payee from a list of payees, and also add new payees for future transfers. When a payee is selected, all other users need to be notified.

To use a combobox in your application:

  1. Create a QComboBox object and add items to it. Sort the combobox items and set the first item as the current item.

  2. Enable the user to add items. QComboBoxes are read-only by default so set the editable() property to True. Ise QComboBox.InsertAlphabetically to insert new items in alphabetical order.

  3. Create a slot to notify users when an item is selected. Connect it to the combobox’s activated() signal. The slot is executed when the user selects an item or adds a new one to the list.

8.2 QListWidget

The QlistWidget class is an item-based list widget. This means its items are instances of the QListWidgetItem class, and you add them to the list widget using methods such as:

  • addItem(item),
  • addItem(label) or
  • addItems(labels).

QListWidget also provides methods to insert items at specific positions, retrieve an item at a given row, and remove an item (takeItem(row)).

QListWidgetItem, its accompanying class, can hold several pieces of information, such as text, icons, or tooltips. It can also store custom user-defined data.

Common QListWidgets signals include:

Signal Description
currentItemChanged(current, previous) Emitted when the current item changes.
currentRowChanged(currentRow) Emitted when the current row changes.
currentTextChanged(currentText) Emitted when the text of the current item changes.
itemActivated(item) Emitted when an item is activated (double-click or Enter/Space while selected).
itemChanged(item) Emitted when an item’s data is modified by the user.
itemClicked(item) Emitted on any mouse click on an item.
itemDoubleClicked(item) Emitted specifically on double-click.
itemSelectionChanged() Emitted when the selection changes.
An icon of a clipboard-list

You need to display a list of recent transactions. When the user selects one, you need show additional details about it (merchant, date, and its impact on the running balance).

To use a list widget in your application:

  1. Create a QListWidget object and add items to it. First, create a list of tuples, where each tuple’s first element is the transaction description and the second element is its details (merchant, date, balance impact). Iterate over the list, and for each tuple, create a QListWidgetItem, setting the transaction details as custom user data. Add each item to the list widget. Also create two labels for displaying the information.

  2. Implement a slot to display the transaction description and details when the current item changes. Get the transaction description using the DisplayRole item data role, and the details using the UserRole item data role.

  3. Connect the signal to the slot. The currentItemChanged() signal is emitted whenever the current item changes. It provides both the current and the previous QListWidgetItem objects to the slot, though we use only the current item in this example.

8.3 QListView

A QListView presents items stored in a model, either as a list or a collection of icons. It is part of Qt’s model/view framework, which separates data (models) from its visual representation (views). This allows one model to be shared across multiple views.

An icon of a clipboard-list

Your finance app lets users export monthly reports to a local folder. Provide a read-only list view of the exports folder, decorating each item with an appropriate icon for its file type. When the user hovers over a file, display a tooltip showing its size in KB.

To use a list view in your application:

  1. Create the view. Instantiate a QListView object and disable its edit triggers using NoEditTriggers which prevents actions like double-click editing.

  2. Create the model and populate it with data. Use a QStandardItemModel object to store the folder’s contents. For each entry in the exports folder create a QStandardItem, initialize it with the entry name, and set its icon based on the type (file or directory). If the entry is a file, set its tooltip text to the file size in a human-readable format. Finally, append the item to the model.

  3. Set the view’s model to the QStandardItemModel object.

We use Python’s pathlib.Path to access filesystem data for the model. In the get_icon() method, we return the Qt’s standard icons for files and directories to avoid using external resources. When initializing a QStandardItem with a file or folder name, the name is assigned to the DisplayRole by default. To assign data to its tooltip, use the ToolTipRole when setting the data.

Qt’s model/view framework decouples data from its GUI representation using standardized interfaces. Models, inheriting from QAbstractItemModel,communicate with data sources and implement a set of methods for manipulating that data. Views use these methods to display the data. This architecture enables multiple views to use a single model.

QListWidget is a convenience subclass of QListView that provides an item-based interface for adding and managing list items.Similarly, QTableWidget and QTreeWidget are convenience subclasses of QTableView and QTreeView, respectively. These widget classes are designed for ease of use, while their parent view classes (QListView, QTableView, QTreeView) are intended for use with the Model/View framework when greater flexibility is needed.

QComboBox is different from the other two. Rather than presenting a sequence of items, it lets you select a single value from an enum - the same thinh an exclusive group of QRadioButtons does (see Chapter 5). You can think of it as a space-efficient alternative to a radio group.

Widget Produces Data
QComboBox A single enum value One value from a fixed set of options
QListWidget A collection of values Items may have different data type
QListView A collection of values Items data type is defined by the model

The model/view pair can technically hold items of mixed data types, but it isn’t practical to do so: QListWidget already gives you varied items for free through QListWidgetItem, while a model’s real advantage is defining a single item data type once and letting every row conform to it.