How to create columns in a QML ListView
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.
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.
<br /> // Create temporary Text element<br /> var textElement = Qt.createQmlObject('import Qt 4.7; Text { text: "' + text + '"}',<br /> parent, "calcTextWidth&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 "ColumnHelper.js&quot; as ColumnHelper
Rectangle {<br /> width: 620<br /> height: 200<br /> color: "#bebebe&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 < 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: "' + data[key] + '" '<br /> + '}',<br /> parent, "calcColumnWidths&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 = [ "#bebebe&quot;, "#b7b7b7&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: "blue&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 : ""<br /> }
Component {<br /> id: columnSeparator<br /> Rectangle {<br /> width: 1<br /> color: "black&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: "The Shawshank Redemption&quot;<br /> year: 1994<br /> composer: "Newman, Thomas&quot;<br /> }<br /> ListElement {<br /> votes: 419312<br /> rank: 9.1<br /> title: "The Godfather&quot;<br /> year: 1972<br /> composer: "Rota, Nino&quot;<br /> }<br /> ListElement {<br /> votes: 251290<br /> rank: 9.0<br /> title: "The Godfather: Part II&quot;<br /> year: 1974<br /> composer: "Rota, Nino&quot;<br /> }<br /> ListElement {<br /> votes: 225000<br /> rank: 8.9<br /> title: "Inception&quot;<br /> year: 2010<br /> composer: "Zimmer, Hans&quot;<br /> }<br /> ListElement {<br /> votes: 165033<br /> rank: 8.9<br /> title: "Il buono, il brutto, il cattivo."<br /> year: 1966<br /> composer: "Morricone, Ennio&quot;<br /> }<br /> ListElement {<br /> votes: 426752<br /> rank: 8.9<br /> title: "Pulp Fiction&quot;<br /> year: 1994<br /> }<br /> ListElement {<br /> votes: 282473<br /> rank: 8.9<br /> title: "Schindler's List&quot;<br /> year: 1993<br /> composer: "Williams, John&quot;<br /> }<br /> ListElement {<br /> votes: 122919<br /> rank: 8.9<br /> title: "12 Angry Men&quot;<br /> year: 1957<br /> composer: "Hopkins, Kenyon&quot;<br /> }<br /> ListElement {<br /> votes: 219739<br /> rank: 8.8<br /> title: "One Flew Over the Cuckoo's Nest&quot;<br /> year: 1975<br /> composer: "Nitzsche, Jack&quot;<br /> }<br /> ListElement {<br /> votes: 476112<br /> rank: 8.8<br /> title: "The Dark Knight&quot;<br /> year: 2008<br /> composer: "Zimmer, Hans&quot;<br /> }<br /> ListElement {<br /> votes: 283354<br /> rank: 8.8<br /> title: "Star Wars: Episode V - The Empire Strikes Back&quot;<br /> year: 1980<br /> composer: "Williams, John&quot;<br /> }<br /> ListElement {<br /> votes: 371790<br /> rank: 8.8<br /> title: "The Lord of the Rings: The Return of the King&quot;<br /> year: 2003<br /> composer: "Shore, Howard&quot;<br /> }<br /> ListElement {<br /> votes: 98799<br /> rank: 8.8<br /> title: "Shichinin no samurai&quot;<br /> year: 1954<br /> composer: "Hayasaka, Fumio&quot;<br /> }<br /> ListElement {<br /> votes: 326619<br /> rank: 8.7<br /> title: "Star Wars&quot;<br /> year: 1977<br /> composer: "Williams, John&quot;<br /> }<br /> ListElement {<br /> votes: 234582<br /> rank: 8.7<br /> title: "Goodfellas&quot;<br /> year: 1990<br /> }<br /> ListElement {<br /> votes: 170874<br /> rank: 8.7<br /> title: "Casablanca&quot;<br /> year: 1942<br /> composer: "Steiner, Max&quot;<br /> }<br />}<br />