How to create columns in a QML ListView

English French [qt-devnet.developpez.com] 日本語 Български 한국어

How to create columns in a QML ListView

Here is one way to create a ListView with multiple columns whose widths depend upon the size of the data in the column.

Normally a ListView of Row elements would look like this.

ListView of Row elements

Columns can be created setting the widths in the Row elements.

ListView with columns

Getting the text width

Font metrics are not available in QML. However, Text elements can be created dynamically in JavaScript and queried for their width.

Creating columns in a ListView

The column widths are calculated for the model with JavaScript, stored in a map with keys by the model element names, and used in the ListView delegate.

main.qml

A simple UI to demonstrate the ListView. A Rectangle element is used as a container simply to give it a color consistent with the colors used for the rows. Note the columnWidths property is used to store the calculated widths, which are used in the delegate.

ColumnHelper.js

A simple JavaScript function is used to find the maximum width for Text elements of all the data in every column and returns those values in an object keyed by the column name.

MovieItem.qml

This is the delegate for the ListView. The columnWidths property of the list is used to set the widths of the columns.

MovieModel.qml

Information courtesy of The Internet Movie Database (http://www.imdb.com).

Categories:

• Developing_with_Qt
  • Qt_Quick
• QML

• HowTo
• Learning
• snippets