How to create columns in a QML ListView/bg
[toc align_right="yes" depth="3"]
Български English "French":http://qt-devnet.developpez.com/tutoriels/qt-quick/qml/creation-colonnes-dans-listview/ 日本語
Как да създадем QML ListView с колони
Ето един начин за създаване на ListView с множество колони, които зависят от размера на данните в колоната.
Нормално ListView изглежда така:
Колоните могат да се създадат като се слагат фиксирани ширини на елементите в редовете.
Пресмятане ширината на текста.
В QML няма изчисления с фонтове. За това, ще използваме елемента Text. Динамично създаваме един текстов елемент и взимаме неговата дължина:
// Създаване на временен Text
var textElement = Qt.createQmlObject('import Qt 4.7; Text { text: "' + text + '"}',
parent, "calcTextWidth");
// Използваме textElement.width за да вземем дължината на теста
// Унищожаваме временният елемент
textElement.destroy()
Създаване на колони в ListView
Ширините на колоните се изчисляват от JavaScript функция, запазват се в таблица с ключове имената на елементите в модела и се използват от делегата на ListView-то.
main.qml
Проста програма за демонстрация. Rectangle елемента се използва просто като контейнер за консистентност на цветовете, използвани в колоните. Забележете, че свойството columnWidths се използва за съхранение изчислените дължини. То се пресмята при зареждане на програмата.
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
Проста JavaScript функция се използва за да се намери максималната дължина на елемент от всяка колона. Функцията връща тези стойности като таблица с ключове имената на колоните:
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
Това е делегата за ListView-то. Свойството columnWidths на листа се използва за да се пресметнат дължините на колоните:
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
Информацията е любезно предоставена от Международната филмова база данни ("http://www.imdb.com":http://www.imdb.com) .
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"
}
}