Table of Content

Български English French [qt-devnet.developpez.com] 日本語

Как да създадем QML ListView с колони

Ето един начин за създаване на ListView с множество колони, които зависят от размера на данните в колоната.

Нормално ListView изглежда така:

Стандартно ListView

Колоните могат да се създадат като се слагат фиксирани ширини на елементите в редовете.

ListView с колони

Пресмятане ширината на текста.

В QML няма изчисления с фонтове. За това, ще използваме елемента Text. Динамично създаваме един текстов елемент и взимаме неговата дължина:

  1.     // Създаване на временен Text
  2.     var textElement = Qt.createQmlObject('import Qt 4.7; Text { text: "' + text + '"}',
  3.                                          parent, "calcTextWidth");
  4.  
  5.     // Използваме textElement.width за да вземем дължината на теста
  6.  
  7.     // Унищожаваме временният елемент
  8.     textElement.destroy()

Създаване на колони в ListView

Ширините на колоните се изчисляват от JavaScript функция, запазват се в таблица с ключове имената на елементите в модела и се използват от делегата на ListView-то.

main.qml

Проста програма за демонстрация. 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

Проста 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-то. Свойството 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 [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
  • Learning
  • snippets
    • Creative Commons Attribution-ShareAlike 2.5 Generic

    Content is available under

    Creative Commons Attribution-ShareAlike 2.5 Generic

     

    © 2013 Qt Project Hosting. Qt® and the Qt logo is a registered trade mark of Digia plc and/or its subsidiaries and is used pursuant to a license from Digia plc 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. Org. Nr. 997 447 913