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

From Qt Wiki
Jump to: navigation, search
Line 1: Line 1:
[[Category:Snippets]]<br />[[Category:HowTo]]<br />[[Category:Developing_with_Qt::Qt Quick]]<br />[[Category:Developing_with_Qt::Qt Quick::QML]]
+
[[Category:Snippets]]
 +
[[Category:HowTo]]
 +
[[Category:Developing_with_Qt::Qt Quick]]
 +
[[Category:Developing_with_Qt::Qt Quick::QML]]
  
 
[toc align_right="yes" depth="4"]
 
[toc align_right="yes" depth="4"]
Line 17: Line 20:
 
== Кода ==
 
== Кода ==
  
<code><br />import QtQuick 1.0
+
<code>
 +
import QtQuick 1.0
  
Item {<br /> width: 600<br /> height: 600<br /> property int itemWidth: 50
+
Item {
 +
width: 600
 +
height: 600
 +
property int itemWidth: 50
  
ListView {<br /> id: view<br /> model: new Array(1,2,3,4,5,6,7,8)<br /> delegate: item<br /> anchors {<br /> top: parent.top;<br /> topMargin: 10;<br /> horizontalCenter:<br /> parent.horizontalCenter;<br /> bottom:<br /> parent.bottom;<br /> }<br /> width: model.length * itemWidth + (model.length - 1) * spacing<br /> spacing: 2<br /> orientation: Qt.Horizontal<br /> snapMode: ListView.SnapOneItem<br /> highlightRangeMode: ListView.ApplyRange<br /> interactive: false<br /> Component.onCompleted: currentIndex = -1;<br /> }
+
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;
 +
}
  
<br /> Component {<br /> id: item
 
<br /> Rectangle {<br /> width: itemWidth<br /> height: 50<br /> color: "red"<br /> x: {<br /> if (ListView.isCurrentItem) {<br /> if (view.flickingHorizontally) {<br /> (view.width/2)- (width/2)<br /> } else {<br /> (view.width/2)-(width/2)<br /> }<br /> } else {<br /> if ( view.currentIndex==-1) {<br /> index * (width + view.spacing)<br /> } else {<br /> if ( index < view.currentIndex) {<br /> index * (width + view.spacing) + (width/2)<br /> } else {<br /> index * (width + view.spacing)- (width/2)<br /> }<br /> }<br /> }<br /> }<br /> y: ListView.isCurrentItem ? 200 : 0<br /> Behavior on x { SpringAnimation { spring: 4; damping: 0.4 } }<br /> Behavior on y { SpringAnimation { spring: 4; damping: 0.4 } }
 
  
Text {<br /> text: model.index<br /> }
+
Component {
 +
id: item
  
MouseArea {<br /> anchors.fill: parent<br /> onClicked: {<br /> if (!ListView.isCurrentItem)<br /> view.currentIndex = index;<br /> else<br /> view.currentIndex = –1;<br /> }<br /> }<br /> }<br /> }<br />}<br /></code>
+
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;
 +
}
 +
}
 +
}
 +
}
 +
}
 +
</code>
  
 
== Резултати ==
 
== Резултати ==

Revision as of 12:14, 25 February 2015


[toc align_right="yes" depth="4"]

Български | English

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