How to create columns in a QML ListView/ko
Jump to navigation
Jump to search
English "French":http://qt-devnet.developpez.com/tutoriels/qt-quick/qml/creation-colonnes-dans-listview/ 日本語 Български 한국어
QML ListView 에서 고정폭 열(Columns) 만들기
열(Column)의 데이터 사이즈에 따라 고정폭을 갖는 열들로 구성된 리스트뷰 만드는 방법중 하나를 소개합니다.
일반적으로 행(Row) 요소(elements)로서 구성된 리스트 뷰는 다음과 같은 형태를 가지고 있습니다.
열(Column)들은 행(Row) 요소(element)들의 너비가 설정되면서 만들어 집니다.
문자열 너비값 받아오기
QML에서는 폰트 매트릭스(Font metrics)가 존재하지 않습니다. 따라서 "텍스트Text element":http://developer.qt.nokia.com/doc/qt-4.7/qml-text.html 는 자바스크립트를 동적으로 생성하여 문자열의 너비를 계산할 수 있습니다.
// 임시 Text element 만들기
var textElement = Qt.createQmlObject('import Qt 4.7; Text { text: "' + text + '"}',
parent, "calcTextWidth");
// 'textElement.width' 를 통하여 문자열 너비값 사용하기
// 임시 element값 삭제하기
textElement.destroy()
리스트뷰에서 열(Columns) 생성
열(Column) 너비는 자바스크립트를 이용하여 계산되어지고, 키값을 가진 맵(map)에 저장되어 지며, 리스트뷰 대리자(delegate)를 통하여 사용할 수 있다.
main.qml
리스트뷰의 간단한 데모 UI입니다. 사각형(Rectangle) 요소(element)는 컨테이너로 사용되고 있고, 각행에 표시하는 것과 동일한 컬러를 표시하고 있습니다. columnWidths property 가 대리자(delegate)에서 사용되는 열너비(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
모든 열(Column)의 데이타에 걸쳐서 최대너비 값을 계산해 내는 간단한 자바 스크립트 함수입니다. 계산된 결과 값은 리턴된 열이름(Column name)을 키로 하여 저장됩니다.
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
리스트뷰의 대리자(delegate)입니다. 리스트의 columnWidths property를 사용하여 각 열의 너비를 설정합니다.
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"
}
}