How to create columns in a QML ListView/de

This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine. Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

En Ar Bg De El Es Fa Fi Fr Hi Hu It Ja Kn Ko Ms Nl Pl Pt Ru Sq Th Tr Uk Zh

Wie man Spalten in einem QML ListView erzeugt

Im folgenden wird ein Weg gezeigt, wie man ein ListView mit mehreren Spalten erzeugt, deren Breite abhängig von der Breite der enthaltenen Daten ist.

Normalerweise sieht ein ListView mit Row-Elementen so aus:

ListView of Row elements

Spalten können erzeugt werden, indem man die Breite der Elemente in den Row-Elementen festlegt.

ListView with columns

Wie man die Text-Breite erhält

Zeichensatzmetriken sind in QML nicht verfügbar. Aber Text-Elemente können mit JavaScript dynamisch erzeugt und ihre Breite abgefragt werden.

 // Create temporary Text element
 var textElement = Qt.createQmlObject('import Qt 4.7; Text { text: "' + text + '"}',
 parent, "calcTextWidth");

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

// Dispose of temporary element
 textElement.destroy()

Spalten in einem ListView erzeugen

Die Spaltenbreiten für das Modell werden mit JavaScript berechnet und in einer Map gespeichert, die als Schlüssel die Elementnamen aus dem Modell verwendet. Diese Spaltenbreiten werden dann im Delegate des ListViews zur Formatierung verwendet.

main.qml

Es folgt eine einfache Benutzeroberfläche zur Demonstration. Als Container wird ein Rectangle-Element benutzt, sodass die Hintergrundfarbe des ListViews und die Farbe der Zeilen übereinstimmen. Beachte, wie die columnWidths Property eingesetzt wird, um die berechneten Breiten zu speichern, welche schließlich im Delegate genutzt werden.

import Qt 4.7
import "ColumnHelper.js" as ColumnHelper

Rectangle {
 width: 620
 height: 200
 color: "#bebebe"

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

}

ColumnHelper.js

Eine einfache JavaScript-Funktion wird benutzt, um pro Spalte die maximale Breite aller dort enthaltenen Text-Elemente zu berechnen. Das Ergebnis dieser Berechnungen wird als ein einziges Object von der Funktion zurückgegeben, welches alle notwendigen Spaltenbreiten, abfragbar mit den Spaltennamen als Schlüssel, enthält.

var columns = {}

function calcColumnWidths(model, parent)
{
 for (var i = 0; i < model.count; +''i)
 {
 var data = model.get(i)
 for (var key in data)
 {
 if (!columns[key]) {
 columns[key] = 0
 }

 var textElement = Qt.createQmlObject(
 'import Qt 4.7;'
'' 'Text {'
 + ' text: "' + data[key] + '" '
 + '}',
 parent, "calcColumnWidths")

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

MovieItem.qml

Nun zum Delegate des ListViews. Die Property columnWidths wird benutzt, um die Breiten aller Spalten festzulegen.

import Qt 4.7

Component {
 Item {
 id: item
 width: parent.width - 15
 height: row.height

function altColor(i) {
 var colors = [ "#bebebe", "#b7b7b7" ];
 return colors[i];
 }

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

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

Component {
 id: columnSeparator
 Rectangle {
 width: 1
 color: "black"
 opacity: 0.3
 }
 }
 }
 }
}

MovieModel.qml

Die folgenden Beispieldaten sind Eigentum von The Internet Movie Database

import Qt 4.7

ListModel {

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

}