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.
Columns can be created setting the widths in the Row elements.
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).