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

From Qt Wiki
Jump to: navigation, search
(Sub-categorize)
 
(4 intermediate revisions by one other user not shown)
Line 1: Line 1:
[[Category:Learning]]
+
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
 +
{{LangSwitch}}
 
[[Category:HowTo]]
 
[[Category:HowTo]]
[[Category:snippets]]
+
[[Category:Snippets::QML]]
[[Category:Developing_with_Qt::Qt Quick]]
+
[[Category:Developing with Qt::Qt Quick::QML]]
[[Category:Developing_with_Qt::Qt Quick::QML]]
 
 
 
[toc align_right="yes" depth="3"]
 
 
 
'''Български''' [[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 169: Line 165:
 
=== MovieModel.qml ===
 
=== MovieModel.qml ===
  
Информацията е любезно предоставена от Международната филмова база данни ("http://www.imdb.com":http://www.imdb.com) .
+
Информацията е любезно предоставена от Международната филмова база данни ([http://www.imdb.com http://www.imdb.com]) .
  
 
<code>
 
<code>

Latest revision as of 12:38, 28 November 2016

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

}