How to create columns in a QML ListView/bg: Difference between revisions
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
[[Category:Learning]] | [[Category:Learning]] | ||
[[Category:HowTo]] | |||
[[Category:snippets]] | |||
[[Category:Developing_with_Qt::Qt Quick]] | |||
[[Category:Developing_with_Qt::Qt Quick::QML]] | |||
[toc align_right= | [toc align_right="yes" depth="3"] | ||
'''Български''' [[How_to_create_columns_in_a_QML_ListView|English]] | '''Български''' [[How_to_create_columns_in_a_QML_ListView|English]] "French":http://qt-devnet.developpez.com/tutoriels/qt-quick/qml/creation-colonnes-dans-listview/ [[How_to_create_columns_in_a_QML_ListView_Japanese|日本語]] | ||
= Как да създадем QML ListView с колони = | = Как да създадем QML ListView с колони = | ||
Line 21: | Line 25: | ||
В QML няма изчисления с фонтове. За това, ще използваме елемента ''Text''. Динамично създаваме един текстов елемент и взимаме неговата дължина: | В QML няма изчисления с фонтове. За това, ще използваме елемента ''Text''. Динамично създаваме един текстов елемент и взимаме неговата дължина: | ||
<code> | <code> | ||
// Създаване на временен Text | |||
var textElement = Qt.createQmlObject('import Qt 4.7; Text { text: "' + text + '"}', | |||
parent, "calcTextWidth"); | |||
// Използваме textElement.width за да вземем дължината на теста | // Използваме textElement.width за да вземем дължината на теста | ||
// Унищожаваме временният елемент | // Унищожаваме временният елемент | ||
textElement.destroy() | |||
</code> | |||
== Създаване на колони в ListView == | == Създаване на колони в ListView == | ||
Line 33: | Line 42: | ||
=== main.qml === | === main.qml === | ||
Проста програма за демонстрация. ''Rectangle'' елемента се използва просто като контейнер за консистентност на цветовете, използвани в колоните. Забележете, че свойството ''columnWidths'' се използва за съхранение изчислените дължини. То се пресмята при зареждане на програмата. | Проста програма за демонстрация. ''Rectangle'' елемента се използва просто като контейнер за консистентност на цветовете, използвани в колоните. Забележете, че свойството ''columnWidths'' се използва за съхранение изчислените дължини. То се пресмята при зареждане на програмата. | ||
<code> | |||
import Qt 4.7 | |||
import "ColumnHelper.js" as ColumnHelper | |||
Rectangle { | Rectangle { | ||
width: 620 | |||
height: 200 | |||
color: "#bebebe" | |||
ListView { | ListView { | ||
id: list | |||
property variant columnWidths: ColumnHelper.calcColumnWidths(model, list) | |||
anchors.fill: parent | |||
model: MovieModel { } | |||
delegate: MovieItem { } | |||
} | |||
} | } | ||
</code> | |||
=== ColumnHelper.js === | === ColumnHelper.js === | ||
Проста JavaScript функция се използва за да се намери максималната дължина на елемент от всяка колона. Функцията връща тези стойности като таблица с ключове имената на колоните: | Проста JavaScript функция се използва за да се намери максималната дължина на елемент от всяка колона. Функцията връща тези стойности като таблица с ключове имената на колоните: | ||
<code> | |||
var columns = {} | |||
function calcColumnWidths(model, parent) | 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 | |||
} | |||
columns[key] = Math.max(textElement.width, columns[key]) | 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 | |||
} | |||
</code> | |||
=== MovieItem.qml === | === MovieItem.qml === | ||
Това е делегата за ListView-то. Свойството ''columnWidths'' на листа се използва за да се пресметнат дължините на колоните: | Това е делегата за ListView-то. Свойството ''columnWidths'' на листа се използва за да се пресметнат дължините на колоните: | ||
<code> | |||
import Qt 4.7 | |||
Component { | Component { | ||
Item { | |||
id: item | |||
width: parent.width - 15 | |||
height: row.height | |||
function altColor(i) { | function altColor(i) { | ||
var colors = [ "#bebebe", "#b7b7b7" ]; | |||
return colors[i]; | |||
} | |||
Rectangle { | Rectangle { | ||
id: background | |||
width: parent.width + 15 | |||
height: parent.height | |||
color: altColor(index%2) | |||
} | |||
Row { | 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 { | Component { | ||
id: columnSeparator | |||
Rectangle { | |||
width: 1 | |||
color: "black" | |||
opacity: 0.3 | |||
} | |||
} | |||
} | |||
} | |||
} | |||
</code> | |||
=== MovieModel.qml === | === MovieModel.qml === | ||
Информацията е любезно предоставена от Международната филмова база данни ( | Информацията е любезно предоставена от Международната филмова база данни ("http://www.imdb.com":http://www.imdb.com) . | ||
<code> | <code> | ||
import Qt 4.7 | |||
ListModel { | 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" | |||
} | |||
} | |||
</code> |
Revision as of 12:43, 25 February 2015
[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"
}
}