How to create columns in a QML ListView/bg

From Qt Wiki
Jump to: navigation, search
[toc align_right="yes" depth="3"] БългарскиEnglishFrench日本語

Как да създадем QML ListView с колони

Ето един начин за създаване на ListView с множество колони, които зависят от размера на данните в колоната.

Нормално 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) .

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"
}

}