How to create columns in a QML ListView

From Qt Wiki
Revision as of 09:01, 24 February 2015 by Maintenance script (talk | contribs)
Jump to navigation Jump to search





English | Deutsch | "French":http://qt-devnet.developpez.com/tutoriels/qt-quick/qml/creation-colonnes-dans-listview/ |日本語 | Български | 한국어

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.

<br /> // Create temporary Text element<br /> var textElement = Qt.createQmlObject('import Qt 4.7; Text { text: &quot;' + text + '&quot;}',<br /> parent, &quot;calcTextWidth&amp;quot;);

// Use textElement.width for the width of the text

// Dispose of temporary element<br /> textElement.destroy()<br />

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.

<br />import Qt 4.7<br />import &quot;ColumnHelper.js&amp;quot; as ColumnHelper

Rectangle {<br /> width: 620<br /> height: 200<br /> color: &quot;#bebebe&amp;quot;

ListView {<br /> id: list<br /> property variant columnWidths: ColumnHelper.calcColumnWidths(model, list)<br /> anchors.fill: parent<br /> model: MovieModel { }<br /> delegate: MovieItem { }<br /> }

}<br />

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.

<br />var columns = {}

function calcColumnWidths(model, parent)<br />{<br /> for (var i = 0; i &lt; model.count; +''i)<br /> {<br /> var data = model.get(i)<br /> for (var key in data)<br /> {<br /> if (!columns[key]) {<br /> columns[key] = 0<br /> }
<br /> var textElement = Qt.createQmlObject(<br /> 'import Qt 4.7;'<br />'' 'Text {'<br /> + ' text: &quot;' + data[key] + '&quot; '<br /> + '}',<br /> parent, &quot;calcColumnWidths&amp;quot;)

columns[key] = Math.max(textElement.width, columns[key])<br /> textElement.destroy()<br /> }<br /> }<br /> return columns<br />}<br />

MovieItem.qml

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

<br />import Qt 4.7

Component {<br /> Item {<br /> id: item<br /> width: parent.width - 15<br /> height: row.height

function altColor(i) {<br /> var colors = [ &quot;#bebebe&amp;quot;, &quot;#b7b7b7&amp;quot; ];<br /> return colors[i];<br /> }

Rectangle {<br /> id: background<br /> width: parent.width + 15<br /> height: parent.height<br /> color: altColor(index%2)<br /> }

Row {<br /> id: row<br /> width: parent.width<br /> spacing: 5<br /> Item {<br /> // Indent a little<br /> width: 5<br /> height: 1<br /> }<br /> Text {<br /> width: list.columnWidths['title']<br /> text: model.title<br /> color: &quot;blue&amp;quot;<br /> }<br /> Loader { sourceComponent: columnSeparator; height: parent.height }<br /> Text {<br /> width: list.columnWidths['year']<br /> text: model.year<br /> }<br /> Loader { sourceComponent: columnSeparator; height: parent.height }<br /> Text {<br /> width: list.columnWidths['rank']<br /> text: model.rank<br /> }<br /> Loader { sourceComponent: columnSeparator; height: parent.height }<br /> Text {<br /> width: list.columnWidths['votes']<br /> text: model.votes<br /> }<br /> Loader { sourceComponent: columnSeparator; height: parent.height }<br /> Text {<br /> width: list.columnWidths['composer']<br /> text: model.composer ? model.composer : &quot;&quot;<br /> }

Component {<br /> id: columnSeparator<br /> Rectangle {<br /> width: 1<br /> color: &quot;black&amp;quot;<br /> opacity: 0.3<br /> }<br /> }<br /> }<br /> }<br />}<br />

MovieModel.qml

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

<br />import Qt 4.7

ListModel {<br /> ListElement {<br /> votes: 532564<br /> rank: 9.2<br /> title: &quot;The Shawshank Redemption&amp;quot;<br /> year: 1994<br /> composer: &quot;Newman, Thomas&amp;quot;<br /> }<br /> ListElement {<br /> votes: 419312<br /> rank: 9.1<br /> title: &quot;The Godfather&amp;quot;<br /> year: 1972<br /> composer: &quot;Rota, Nino&amp;quot;<br /> }<br /> ListElement {<br /> votes: 251290<br /> rank: 9.0<br /> title: &quot;The Godfather: Part II&amp;quot;<br /> year: 1974<br /> composer: &quot;Rota, Nino&amp;quot;<br /> }<br /> ListElement {<br /> votes: 225000<br /> rank: 8.9<br /> title: &quot;Inception&amp;quot;<br /> year: 2010<br /> composer: &quot;Zimmer, Hans&amp;quot;<br /> }<br /> ListElement {<br /> votes: 165033<br /> rank: 8.9<br /> title: &quot;Il buono, il brutto, il cattivo.&quot;<br /> year: 1966<br /> composer: &quot;Morricone, Ennio&amp;quot;<br /> }<br /> ListElement {<br /> votes: 426752<br /> rank: 8.9<br /> title: &quot;Pulp Fiction&amp;quot;<br /> year: 1994<br /> }<br /> ListElement {<br /> votes: 282473<br /> rank: 8.9<br /> title: &quot;Schindler's List&amp;quot;<br /> year: 1993<br /> composer: &quot;Williams, John&amp;quot;<br /> }<br /> ListElement {<br /> votes: 122919<br /> rank: 8.9<br /> title: &quot;12 Angry Men&amp;quot;<br /> year: 1957<br /> composer: &quot;Hopkins, Kenyon&amp;quot;<br /> }<br /> ListElement {<br /> votes: 219739<br /> rank: 8.8<br /> title: &quot;One Flew Over the Cuckoo's Nest&amp;quot;<br /> year: 1975<br /> composer: &quot;Nitzsche, Jack&amp;quot;<br /> }<br /> ListElement {<br /> votes: 476112<br /> rank: 8.8<br /> title: &quot;The Dark Knight&amp;quot;<br /> year: 2008<br /> composer: &quot;Zimmer, Hans&amp;quot;<br /> }<br /> ListElement {<br /> votes: 283354<br /> rank: 8.8<br /> title: &quot;Star Wars: Episode V - The Empire Strikes Back&amp;quot;<br /> year: 1980<br /> composer: &quot;Williams, John&amp;quot;<br /> }<br /> ListElement {<br /> votes: 371790<br /> rank: 8.8<br /> title: &quot;The Lord of the Rings: The Return of the King&amp;quot;<br /> year: 2003<br /> composer: &quot;Shore, Howard&amp;quot;<br /> }<br /> ListElement {<br /> votes: 98799<br /> rank: 8.8<br /> title: &quot;Shichinin no samurai&amp;quot;<br /> year: 1954<br /> composer: &quot;Hayasaka, Fumio&amp;quot;<br /> }<br /> ListElement {<br /> votes: 326619<br /> rank: 8.7<br /> title: &quot;Star Wars&amp;quot;<br /> year: 1977<br /> composer: &quot;Williams, John&amp;quot;<br /> }<br /> ListElement {<br /> votes: 234582<br /> rank: 8.7<br /> title: &quot;Goodfellas&amp;quot;<br /> year: 1990<br /> }<br /> ListElement {<br /> votes: 170874<br /> rank: 8.7<br /> title: &quot;Casablanca&amp;quot;<br /> year: 1942<br /> composer: &quot;Steiner, Max&amp;quot;<br /> }<br />}<br />