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

From Qt Wiki
Jump to: navigation, search
 
(Sub-categorize)
 
(5 intermediate revisions by 2 users not shown)
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]]
+
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
 
+
{{LangSwitch}}
[toc align_right=&quot;yes&amp;quot; depth=&quot;3&amp;quot;]
+
[[Category:HowTo]]
 
+
[[Category:Snippets::QML]]
'''Български''' [[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|日本語]]
+
[[Category:Developing with Qt::Qt Quick::QML]]
  
 
= Как да създадем QML ListView с колони =
 
= Как да създадем QML ListView с колони =
Line 21: Line 21:
 
В 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 38:
 
=== 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)
 +
{
 +
for (var i = 0; i < model.count; +''i)
 +
{
 +
var data = model.get(i)
 +
for (var key in data)
 +
{
 +
if (!columns[key]) {
 +
columns[key] = 0
 +
}
  
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 /> }
+
var textElement = Qt.createQmlObject(
<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;)
+
'import Qt 4.7;'
 +
'' 'Text {'
 +
+ ' text: "' + data[key] + '" '
 +
+ '}',
 +
parent, "calcColumnWidths")
  
columns[key] = Math.max(textElement.width, columns[key])<br /> textElement.destroy()<br /> }<br /> }<br /> return columns<br />}<br /></code>
+
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>

Latest revision as of 12:38, 28 November 2016

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.

En Ar Bg De El Es Fa Fi Fr Hi Hu It Ja Kn Ko Ms Nl Pl Pt Ru Sq Th Tr Uk Zh

Как да създадем 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"
 }
}