Difference between revisions of "ListView Item Manual Positioning Animations QML/bg"

From Qt Wiki
Jump to: navigation, search
(Sub-categorize)
 
(3 intermediate revisions by one other user not shown)
Line 1: Line 1:
[[Category:Snippets]]
+
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
 +
{{LangSwitch}}
 +
[[Category:Snippets::QML]]
 
[[Category:HowTo]]
 
[[Category:HowTo]]
[[Category:Developing_with_Qt::Qt Quick]]
+
[[Category:Developing with Qt::Qt Quick::QML]]
[[Category:Developing_with_Qt::Qt Quick::QML]]
 
 
 
[toc align_right="yes" depth="4"]
 
 
 
'''Български''' | [[ListView_Item_Manual_Positioning_Animations_QML|English]]
 
  
 
= Ръчно позициониране на елементите в ListView =
 
= Ръчно позициониране на елементите в ListView =

Latest revision as of 12:59, 28 November 2016

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, когато данните в модела се променят.