How to create columns in a QML ListView/ko

English "French":http://qt-devnet.developpez.com/tutoriels/qt-quick/qml/creation-colonnes-dans-listview/ 日本語 Български 한국어

QML ListView 에서 고정폭 열(Columns) 만들기

열(Column)의 데이터 사이즈에 따라 고정폭을 갖는 열들로 구성된 리스트뷰 만드는 방법중 하나를 소개합니다.

일반적으로 행(Row) 요소(elements)로서 구성된 리스트 뷰는 다음과 같은 형태를 가지고 있습니다.

ListView of Row elements

열(Column)들은 행(Row) 요소(element)들의 너비가 설정되면서 만들어 집니다.

ListView with columns

문자열 너비값 받아오기

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