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

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
(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"
 }
}