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. |
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:
Spalten können erzeugt werden, indem man die Breite der Elemente in den Row-Elementen festlegt.
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"
}
}