English French [qt-devnet.developpez.com] 日本語

QML の ListView で列(Column)を作る方法

その列のデータの幅に応じたサイズの複数の列を、ListView に作る方法の一つを説明します。

通常、ListView 内の Row 要素は以下のように表示されます。

ListView of Row elements

Row 要素では幅を設定しながら各列を作成することができます。

ListView with columns

文字列の幅の取得

QML にはフォントメトリックスはありません。しかし、JavaScript で Text 要素を動的に生成することで、文字列の幅を取得することができます。

  1.     // 一時的な Text 要素を作成
  2.     var textElement = Qt.createQmlObject('import Qt 4.7; Text { text: "' + text + '"}',
  3.                                          parent, "calcTextWidth");
  4.  
  5.     // textElement.width で文字列(text)の幅を取得
  6.  
  7.     // 一時要素を破棄
  8.     textElement.destroy()

ListView に列を作る

列の幅は JavaScript でモデルから計算し、モデルの要素名を鍵としてマップに保存します。ListView のデリゲート(delegate)でその幅を用います。

main.qml

ListView のデモ用の簡単な UI です。Rectangle 要素は単にコンテナとして使われていて、各行で表示するのと同じ色を設定してます。columnWidths プロパティにはデリゲートで利用する各列の幅を計算した結果を格納します。

  1. import Qt 4.7
  2. import "ColumnHelper.js" as ColumnHelper
  3.  
  4. Rectangle {
  5.     width: 620
  6.     height: 200
  7.     color: "#bebebe"
  8.  
  9.     ListView {
  10.         id: list
  11.         property variant columnWidths: ColumnHelper.calcColumnWidths(model, list)
  12.         anchors.fill: parent
  13.         model: MovieModel { }
  14.         delegate:  MovieItem { }
  15.     }
  16.  
  17. }

ColumnHelper.js

Text 要素の最大幅を計算するための簡単な JavaScript 関数です。各列の全てのデータで最大幅を計算し、結果を列の名前を鍵としたマップに格納して返します。

  1. var columns = {}
  2.  
  3. function calcColumnWidths(model, parent)
  4. {
  5.     for (var i = 0; i < model.count; ++i)
  6.     {
  7.         var data = model.get(i)
  8.         for (var key in data)
  9.         {
  10.             if (!columns[key]) {
  11.                 columns[key] = 0
  12.             }
  13.  
  14.             var textElement = Qt.createQmlObject(
  15.                     'import Qt 4.7;'
  16.                     + 'Text {'
  17.                     + '   text: "' + data[key] + '" '
  18.                     + '}',
  19.                     parent, "calcColumnWidths")
  20.  
  21.             columns[key] = Math.max(textElement.width, columns[key])
  22.             textElement.destroy()
  23.         }
  24.     }
  25.     return columns
  26. }

MovieItem.qml

ListView のデリゲートです。list(main.qml) の columnWidths を使って、各列の幅を設定します。

  1. import Qt 4.7
  2.  
  3. Component {
  4.     Item {
  5.         id: item
  6.         width: parent.width - 15
  7.         height: row.height
  8.  
  9.         function altColor(i) {
  10.             var colors = [ "#bebebe", "#b7b7b7" ];
  11.             return colors[i];
  12.         }
  13.  
  14.         Rectangle {
  15.             id: background
  16.             width:  parent.width + 15
  17.             height: parent.height
  18.             color: altColor(index%2)
  19.         }
  20.  
  21.         Row {
  22.             id: row
  23.             width: parent.width
  24.             spacing: 5
  25.             Item {
  26.                 // Indent a little
  27.                 width: 5
  28.                 height: 1
  29.             }
  30.             Text {
  31.                 width: list.columnWidths['title']
  32.                 text: model.title
  33.                 color: "blue"
  34.             }
  35.             Loader { sourceComponent: columnSeparator; height: parent.height }
  36.             Text {
  37.                 width: list.columnWidths['year']
  38.                 text: model.year
  39.             }
  40.             Loader { sourceComponent: columnSeparator; height: parent.height }
  41.             Text {
  42.                 width: list.columnWidths['rank']
  43.                 text: model.rank
  44.             }
  45.             Loader { sourceComponent: columnSeparator; height: parent.height }
  46.             Text {
  47.                 width: list.columnWidths['votes']
  48.                 text: model.votes
  49.             }
  50.             Loader { sourceComponent: columnSeparator; height: parent.height }
  51.             Text {
  52.                 width: list.columnWidths['composer']
  53.                 text: model.composer ? model.composer : ""
  54.             }
  55.  
  56.             Component {
  57.                 id: columnSeparator
  58.                 Rectangle {
  59.                     width: 1
  60.                     color: "black"
  61.                     opacity: 0.3
  62.                 }
  63.             }
  64.         }
  65.     }
  66. }

MovieModel.qml

インターネット・ムービー・データベース( http://www.imdb.com )から取得した情報をモデルにしたものです。

  1. import Qt 4.7
  2.  
  3. ListModel {
  4.     ListElement {
  5.         votes: 532564
  6.         rank: 9.2
  7.         title: "The Shawshank Redemption"
  8.         year: 1994
  9.         composer: "Newman, Thomas"
  10.     }
  11.     ListElement {
  12.         votes: 419312
  13.         rank: 9.1
  14.         title: "The Godfather"
  15.         year: 1972
  16.         composer: "Rota, Nino"
  17.     }
  18.     ListElement {
  19.         votes: 251290
  20.         rank: 9.0
  21.         title: "The Godfather: Part II"
  22.         year: 1974
  23.         composer: "Rota, Nino"
  24.     }
  25.     ListElement {
  26.         votes: 225000
  27.         rank: 8.9
  28.         title: "Inception"
  29.         year: 2010
  30.         composer: "Zimmer, Hans"
  31.     }
  32.     ListElement {
  33.         votes: 165033
  34.         rank: 8.9
  35.         title: "Il buono, il brutto, il cattivo."
  36.         year: 1966
  37.         composer: "Morricone, Ennio"
  38.     }
  39.     ListElement {
  40.         votes: 426752
  41.         rank: 8.9
  42.         title: "Pulp Fiction"
  43.         year: 1994
  44.     }
  45.     ListElement {
  46.         votes: 282473
  47.         rank: 8.9
  48.         title: "Schindler's List"
  49.         year: 1993
  50.         composer: "Williams, John"
  51.     }
  52.     ListElement {
  53.         votes: 122919
  54.         rank: 8.9
  55.         title: "12 Angry Men"
  56.         year: 1957
  57.         composer: "Hopkins, Kenyon"
  58.     }
  59.     ListElement {
  60.         votes: 219739
  61.         rank: 8.8
  62.         title: "One Flew Over the Cuckoo's Nest"
  63.         year: 1975
  64.         composer: "Nitzsche, Jack"
  65.     }
  66.     ListElement {
  67.         votes: 476112
  68.         rank: 8.8
  69.         title: "The Dark Knight"
  70.         year: 2008
  71.         composer: "Zimmer, Hans"
  72.     }
  73.     ListElement {
  74.         votes: 283354
  75.         rank: 8.8
  76.         title: "Star Wars: Episode V - The Empire Strikes Back"
  77.         year: 1980
  78.         composer: "Williams, John"
  79.     }
  80.     ListElement {
  81.         votes: 371790
  82.         rank: 8.8
  83.         title: "The Lord of the Rings: The Return of the King"
  84.         year: 2003
  85.         composer: "Shore, Howard"
  86.     }
  87.     ListElement {
  88.         votes: 98799
  89.         rank: 8.8
  90.         title: "Shichinin no samurai"
  91.         year: 1954
  92.         composer: "Hayasaka, Fumio"
  93.     }
  94.     ListElement {
  95.         votes: 326619
  96.         rank: 8.7
  97.         title: "Star Wars"
  98.         year: 1977
  99.         composer: "Williams, John"
  100.     }
  101.     ListElement {
  102.         votes: 234582
  103.         rank: 8.7
  104.         title: "Goodfellas"
  105.         year: 1990
  106.     }
  107.     ListElement {
  108.         votes: 170874
  109.         rank: 8.7
  110.         title: "Casablanca"
  111.         year: 1942
  112.         composer: "Steiner, Max"
  113.     }
  114. }

Categories:

  • HowTo
  • Japanese
  • Learning
  • snippets
    • Creative Commons Attribution-ShareAlike 2.5 Generic

    Content is available under

    Creative Commons Attribution-ShareAlike 2.5 Generic

     

    © 2011 Qt Project Hosting. Qt® and the Qt logo is a registered trade mark of Nokia Corporation and/or its subsidiaries and is used pursuant to a license from Nokia Corporation and/or its subsidiaries.
    All other trademarks are property of their respective owners. Privacy Policy
    This site is hosted by Gitorious AS. Your use of this web site is governed by these terms of service.

    Qt Project Hosting, P.O. Box 4332 Nydalen, 0402 Oslo, Norway. Phone: +47 21 60 27 32. Org. Nr. 997 447 913