ListView Item Manual Positioning Animations QML/bg

From Qt Wiki
< ListView Item Manual Positioning Animations QML
Revision as of 12:59, 28 November 2016 by EdwardWelbourne (talk | contribs) (Sub-categorize)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
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;
}
}
}
}

}

Резултати

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

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

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