Table of Content

Български | English

Ръчно позициониране на елементите в ListView

Въведение

Така, нека да кажем, че вместо обикновено ListView с елементи, наредени хоризонтално и линейно, вие искате лист, който да реагира, когато някой елемент е натиснат. Елементът трябва да се придвижва към друга позиция ( по-долна позиция по y). Когато друг елемент е избран, те трябва да си разменят местата. Това беше полезно в случая за KDM, където елементите бяха снимки на потребителите.

Реализация

Създаваме ListView, като за модел слагаме един масив, колкото да задели място за 7 елемента. Делегата се състой от Rectangle и Text като ръчно задаваме позицията му.

Кода

  1. import QtQuick 1.0
  2.  
  3. Item {
  4.     width: 600
  5.     height: 600
  6.     property int itemWidth: 50
  7.  
  8.  
  9.     ListView {
  10.         id: view
  11.         model: new Array(1,2,3,4,5,6,7,8)
  12.         delegate: item
  13.         anchors {
  14.             top: parent.top;
  15.             topMargin: 10;
  16.             horizontalCenter:
  17.             parent.horizontalCenter;
  18.             bottom:
  19.             parent.bottom;
  20.         }
  21.         width: model.length * itemWidth + (model.length - 1) * spacing
  22.         spacing: 2
  23.         orientation: Qt.Horizontal
  24.         snapMode: ListView.SnapOneItem
  25.         highlightRangeMode: ListView.ApplyRange
  26.         interactive: false
  27.         Component.onCompleted: currentIndex = -1;
  28.     }
  29.  
  30.  
  31.     Component {
  32.         id: item
  33.  
  34.         Rectangle {
  35.             width: itemWidth
  36.             height: 50
  37.             color: "red"
  38.             x: {
  39.                 if (ListView.isCurrentItem) {
  40.                     if (view.flickingHorizontally) {
  41.                         (view.width/2) - (width/2)
  42.                     } else {
  43.                         (view.width/2)-(width/2)
  44.                     }
  45.                 } else {
  46.                     if ( view.currentIndex==-1) {
  47.                         index * (width + view.spacing)
  48.                     } else {
  49.                         if ( index < view.currentIndex) {
  50.                             index * (width + view.spacing) + (width/2)
  51.                         } else {
  52.                             index * (width + view.spacing) - (width/2)
  53.                         }
  54.                     }
  55.                 }
  56.             }
  57.             y: ListView.isCurrentItem ? 200 : 0
  58.             Behavior on x { SpringAnimation { spring: 4; damping: 0.4 } }
  59.             Behavior on y { SpringAnimation { spring: 4; damping: 0.4 } }
  60.  
  61.             Text {
  62.                 text: model.index
  63.             }
  64.  
  65.             MouseArea {
  66.                 anchors.fill: parent
  67.                 onClicked: {
  68.                     if (!ListView.isCurrentItem)
  69.                         view.currentIndex = index;
  70.                     else
  71.                         view.currentIndex = -1;
  72.                 }
  73.             }
  74.         }
  75.     }
  76. }

Резултати

!https://lh4.googleusercontent.com/-DOTQe7zsIBg/Tj3MjY6plMI/AAAAAAAAAUw/3uAoYO33h3E/s800/qml list animation example.png!

Възможни проблеми

Изглежда, че има бъг в ListView, който променя позициите на елементите по X, когато данните в модела се променят.

Categories:

  • HowTo
  • 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