ListView Item Manual Positioning Animations QML/bg

This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine. Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

En Ar Bg De El Es Fa Fi Fr Hi Hu It Ja Kn Ko Ms Nl Pl Pt Ru Sq Th Tr Uk Zh

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

Въведение

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

Реализация

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

Кода

import QtQuick 1.0

Item {
 width: 600
 height: 600
 property int itemWidth: 50

ListView {
 id: view
 model: new Array(1,2,3,4,5,6,7,8)
 delegate: item
 anchors {
 top: parent.top;
 topMargin: 10;
 horizontalCenter:
 parent.horizontalCenter;
 bottom:
 parent.bottom;
 }
 width: model.length * itemWidth + (model.length - 1) * spacing
 spacing: 2
 orientation: Qt.Horizontal
 snapMode: ListView.SnapOneItem
 highlightRangeMode: ListView.ApplyRange
 interactive: false
 Component.onCompleted: currentIndex = -1;
 }


 Component {
 id: item

 Rectangle {
 width: itemWidth
 height: 50
 color: "red"
 x: {
 if (ListView.isCurrentItem) {
 if (view.flickingHorizontally) {
 (view.width/2)- (width/2)
 } else {
 (view.width/2)-(width/2)
 }
 } else {
 if ( view.currentIndex==-1) {
 index * (width + view.spacing)
 } else {
 if ( index < view.currentIndex) {
 index * (width + view.spacing) + (width/2)
 } else {
 index * (width + view.spacing)- (width/2)
 }
 }
 }
 }
 y: ListView.isCurrentItem ? 200 : 0
 Behavior on x { SpringAnimation { spring: 4; damping: 0.4 } }
 Behavior on y { SpringAnimation { spring: 4; damping: 0.4 } }

Text {
 text: model.index
 }

MouseArea {
 anchors.fill: parent
 onClicked: {
 if (!ListView.isCurrentItem)
 view.currentIndex = index;
 else
 view.currentIndex = –1;
 }
 }
 }
 }
}

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

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