Difference between revisions of "How to create columns in a QML ListView/bg"

From Qt Wiki
Jump to: navigation, search
 
Line 1: Line 1:
[[Category:Learning]]<br />[[Category:HowTo]]<br />[[Category:snippets]]<br />[[Category:Developing_with_Qt::Qt Quick]]<br />[[Category:Developing_with_Qt::Qt Quick::QML]]
+
[[Category:Learning]]
 +
[[Category:HowTo]]
 +
[[Category:snippets]]
 +
[[Category:Developing_with_Qt::Qt Quick]]
 +
[[Category:Developing_with_Qt::Qt Quick::QML]]
  
[toc align_right=&quot;yes&amp;quot; depth=&quot;3&amp;quot;]
+
[toc align_right="yes" depth="3"]
  
'''Български''' [[How_to_create_columns_in_a_QML_ListView|English]] &quot;French&amp;quot;:http://qt-devnet.developpez.com/tutoriels/qt-quick/qml/creation-colonnes-dans-listview/ [[How_to_create_columns_in_a_QML_ListView_Japanese|日本語]]
+
'''Български''' [[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><br /> // Създаване на временен Text<br /> var textElement = Qt.createQmlObject('import Qt 4.7; Text { text: &quot;' + text + '&quot;}',<br /> parent, &quot;calcTextWidth&amp;quot;);
+
<code>
 +
// Създаване на временен Text
 +
var textElement = Qt.createQmlObject('import Qt 4.7; Text { text: "' + text + '"}',
 +
parent, "calcTextWidth");
  
 
// Използваме textElement.width за да вземем дължината на теста
 
// Използваме textElement.width за да вземем дължината на теста
  
// Унищожаваме временният елемент<br /> textElement.destroy()<br /></code>
+
// Унищожаваме временният елемент
 +
textElement.destroy()
 +
</code>
  
 
== Създаване на колони в ListView ==
 
== Създаване на колони в ListView ==
Line 33: Line 42:
 
=== main.qml ===
 
=== main.qml ===
  
Проста програма за демонстрация. ''Rectangle'' елемента се използва просто като контейнер за консистентност на цветовете, използвани в колоните. Забележете, че свойството ''columnWidths'' се използва за съхранение изчислените дължини. То се пресмята при зареждане на програмата.<br /><code><br />import Qt 4.7<br />import &quot;ColumnHelper.js&amp;quot; as ColumnHelper
+
Проста програма за демонстрация. ''Rectangle'' елемента се използва просто като контейнер за консистентност на цветовете, използвани в колоните. Забележете, че свойството ''columnWidths'' се използва за съхранение изчислените дължини. То се пресмята при зареждане на програмата.
 +
<code>
 +
import Qt 4.7
 +
import "ColumnHelper.js" as ColumnHelper
  
Rectangle {<br /> width: 620<br /> height: 200<br /> color: &quot;#bebebe&amp;quot;
+
Rectangle {
 +
width: 620
 +
height: 200
 +
color: "#bebebe"
  
ListView {<br /> id: list<br /> property variant columnWidths: ColumnHelper.calcColumnWidths(model, list)<br /> anchors.fill: parent<br /> model: MovieModel { }<br /> delegate: MovieItem { }<br /> }
+
ListView {
 +
id: list
 +
property variant columnWidths: ColumnHelper.calcColumnWidths(model, list)
 +
anchors.fill: parent
 +
model: MovieModel { }
 +
delegate: MovieItem { }
 +
}
  
}<br /></code>
+
}
 +
</code>
  
 
=== ColumnHelper.js ===
 
=== ColumnHelper.js ===
  
Проста JavaScript функция се използва за да се намери максималната дължина на елемент от всяка колона. Функцията връща тези стойности като таблица с ключове имената на колоните:<br /><code><br />var columns = {}
+
Проста JavaScript функция се използва за да се намери максималната дължина на елемент от всяка колона. Функцията връща тези стойности като таблица с ключове имената на колоните:
 +
<code>
 +
var columns = {}
  
function calcColumnWidths(model, parent)<br />{<br /> for (var i = 0; i &lt; model.count; +''i)<br /> {<br /> var data = model.get(i)<br /> for (var key in data)<br /> {<br /> if (!columns[key]) {<br /> columns[key] = 0<br /> }
+
function calcColumnWidths(model, parent)
<br /> var textElement = Qt.createQmlObject(<br /> 'import Qt 4.7;'<br />'' 'Text {'<br /> + ' text: &quot;' + data[key] + '&quot; '<br /> + '}',<br /> parent, &quot;calcColumnWidths&amp;quot;)
+
{
 +
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])<br /> textElement.destroy()<br /> }<br /> }<br /> return columns<br />}<br /></code>
+
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'' на листа се използва за да се пресметнат дължините на колоните:<br /><code><br />import Qt 4.7
+
Това е делегата за ListView-то. Свойството ''columnWidths'' на листа се използва за да се пресметнат дължините на колоните:
 +
<code>
 +
import Qt 4.7
  
Component {<br /> Item {<br /> id: item<br /> width: parent.width - 15<br /> height: row.height
+
Component {
 +
Item {
 +
id: item
 +
width: parent.width - 15
 +
height: row.height
  
function altColor(i) {<br /> var colors = [ &quot;#bebebe&amp;quot;, &quot;#b7b7b7&amp;quot; ];<br /> return colors[i];<br /> }
+
function altColor(i) {
 +
var colors = [ "#bebebe", "#b7b7b7" ];
 +
return colors[i];
 +
}
  
Rectangle {<br /> id: background<br /> width: parent.width + 15<br /> height: parent.height<br /> color: altColor(index%2)<br /> }
+
Rectangle {
 +
id: background
 +
width: parent.width + 15
 +
height: parent.height
 +
color: altColor(index%2)
 +
}
  
Row {<br /> id: row<br /> width: parent.width<br /> spacing: 5<br /> Item {<br /> // Indent a little<br /> width: 5<br /> height: 1<br /> }<br /> Text {<br /> width: list.columnWidths['title']<br /> text: model.title<br /> color: &quot;blue&amp;quot;<br /> }<br /> Loader { sourceComponent: columnSeparator; height: parent.height }<br /> Text {<br /> width: list.columnWidths['year']<br /> text: model.year<br /> }<br /> Loader { sourceComponent: columnSeparator; height: parent.height }<br /> Text {<br /> width: list.columnWidths['rank']<br /> text: model.rank<br /> }<br /> Loader { sourceComponent: columnSeparator; height: parent.height }<br /> Text {<br /> width: list.columnWidths['votes']<br /> text: model.votes<br /> }<br /> Loader { sourceComponent: columnSeparator; height: parent.height }<br /> Text {<br /> width: list.columnWidths['composer']<br /> text: model.composer ? model.composer : &quot;&quot;<br /> }
+
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 {<br /> id: columnSeparator<br /> Rectangle {<br /> width: 1<br /> color: &quot;black&amp;quot;<br /> opacity: 0.3<br /> }<br /> }<br /> }<br /> }<br />}<br /></code>
+
Component {
 +
id: columnSeparator
 +
Rectangle {
 +
width: 1
 +
color: "black"
 +
opacity: 0.3
 +
}
 +
}
 +
}
 +
}
 +
}
 +
</code>
  
 
=== MovieModel.qml ===
 
=== MovieModel.qml ===
  
Информацията е любезно предоставена от Международната филмова база данни (&quot;http://www.imdb.com&amp;quot;:http://www.imdb.com) .
+
Информацията е любезно предоставена от Международната филмова база данни ("http://www.imdb.com":http://www.imdb.com) .
  
<code><br />import Qt 4.7
+
<code>
 +
import Qt 4.7
  
ListModel {<br /> ListElement {<br /> votes: 532564<br /> rank: 9.2<br /> title: &quot;The Shawshank Redemption&amp;quot;<br /> year: 1994<br /> composer: &quot;Newman, Thomas&amp;quot;<br /> }<br /> ListElement {<br /> votes: 419312<br /> rank: 9.1<br /> title: &quot;The Godfather&amp;quot;<br /> year: 1972<br /> composer: &quot;Rota, Nino&amp;quot;<br /> }<br /> ListElement {<br /> votes: 251290<br /> rank: 9.0<br /> title: &quot;The Godfather: Part II&amp;quot;<br /> year: 1974<br /> composer: &quot;Rota, Nino&amp;quot;<br /> }<br /> ListElement {<br /> votes: 225000<br /> rank: 8.9<br /> title: &quot;Inception&amp;quot;<br /> year: 2010<br /> composer: &quot;Zimmer, Hans&amp;quot;<br /> }<br /> ListElement {<br /> votes: 165033<br /> rank: 8.9<br /> title: &quot;Il buono, il brutto, il cattivo.&quot;<br /> year: 1966<br /> composer: &quot;Morricone, Ennio&amp;quot;<br /> }<br /> ListElement {<br /> votes: 426752<br /> rank: 8.9<br /> title: &quot;Pulp Fiction&amp;quot;<br /> year: 1994<br /> }<br /> ListElement {<br /> votes: 282473<br /> rank: 8.9<br /> title: &quot;Schindler's List&amp;quot;<br /> year: 1993<br /> composer: &quot;Williams, John&amp;quot;<br /> }<br /> ListElement {<br /> votes: 122919<br /> rank: 8.9<br /> title: &quot;12 Angry Men&amp;quot;<br /> year: 1957<br /> composer: &quot;Hopkins, Kenyon&amp;quot;<br /> }<br /> ListElement {<br /> votes: 219739<br /> rank: 8.8<br /> title: &quot;One Flew Over the Cuckoo's Nest&amp;quot;<br /> year: 1975<br /> composer: &quot;Nitzsche, Jack&amp;quot;<br /> }<br /> ListElement {<br /> votes: 476112<br /> rank: 8.8<br /> title: &quot;The Dark Knight&amp;quot;<br /> year: 2008<br /> composer: &quot;Zimmer, Hans&amp;quot;<br /> }<br /> ListElement {<br /> votes: 283354<br /> rank: 8.8<br /> title: &quot;Star Wars: Episode V - The Empire Strikes Back&amp;quot;<br /> year: 1980<br /> composer: &quot;Williams, John&amp;quot;<br /> }<br /> ListElement {<br /> votes: 371790<br /> rank: 8.8<br /> title: &quot;The Lord of the Rings: The Return of the King&amp;quot;<br /> year: 2003<br /> composer: &quot;Shore, Howard&amp;quot;<br /> }<br /> ListElement {<br /> votes: 98799<br /> rank: 8.8<br /> title: &quot;Shichinin no samurai&amp;quot;<br /> year: 1954<br /> composer: &quot;Hayasaka, Fumio&amp;quot;<br /> }<br /> ListElement {<br /> votes: 326619<br /> rank: 8.7<br /> title: &quot;Star Wars&amp;quot;<br /> year: 1977<br /> composer: &quot;Williams, John&amp;quot;<br /> }<br /> ListElement {<br /> votes: 234582<br /> rank: 8.7<br /> title: &quot;Goodfellas&amp;quot;<br /> year: 1990<br /> }<br /> ListElement {<br /> votes: 170874<br /> rank: 8.7<br /> title: &quot;Casablanca&amp;quot;<br /> year: 1942<br /> composer: &quot;Steiner, Max&amp;quot;<br /> }<br />}<br /></code>
+
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 изглежда така:

Стандартно 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"
 }
}