PDA

View Full Version : Animation on ListView::move



wladek
2nd March 2011, 16:40
Hi guys,

I am trying in implement some sort of animation on the "move" method of a ListModel.

Please see below my code:

import Qt 4.7

Rectangle {
width: 300
height: 342

ListModel {
id: listModel
ListElement{
rectangleColor: "red"
}
ListElement{
rectangleColor: "green"
}
ListElement{
rectangleColor: "blue"
}
}

Component {
id: delegate

Rectangle {
id: redRect
width: 200
height: 62
color: rectangleColor
clip:true

MouseArea {
anchors.fill: parent
drag.target: redRect
drag.axis: "YAxis"
onClicked: {
listModel.move(index, index + 1, 1)
}
}

// Behavior on y { NumberAnimation{} }
}
}

ListView {
interactive: false
spacing: 10
anchors.fill: parent
model: listModel
delegate: delegate
}
}


But I am stuck here, I don't even know if the direction that I am going is good.
Is it ok that I used a ListView? Would you suggest something different?

My final goal is to be able to select/drag one item from the listview and to rearrange the items. The behavior is similar to how the Google Chrome tabs are rearranging themselves when trying to move one tab.

Any idea about the direction that I should proceed is welcome.

Thanks in advance,
Wladek

Added after 25 minutes:

I just found this: http://developer.qt.nokia.com/wiki/Drag_and_Drop_within_a_GridView

I am pretty sure that I can adjust it for using a ListView.

I will post the solution here if succeeded :)

Regards,
Wladek

harpreets
9th March 2011, 10:47
<ItemsPanelTemplate x:Key="ItemsPanelTemplate">
<WrapPanel>
<i:Interaction.Behaviors>
<il:FluidMoveBehavior AppliesTo="Children" Duration="00:00:00.75"/>
</i:Interaction.Behaviors>
</WrapPanel>
</ItemsPanelTemplate>