QML: Property Z on listViews

[kuemeele]

Hi all, I am trying to do a flip of images similar to the flip used on itunes for selecting discs:

http://www.applecart.co.za/itunes/images/coverflow_hero_mac20060912.jpg


I already did it, but I have a problem with the Z property of listView. When I set the properties of each image on "delegate" I set Z: 4 to the item selected, Z: 3 to the nearest images, Z: 2 to the middles images and Z: 1 to the farest images.

As result, it should be as itunes, but.... Z doesn't work.

As Delegate is executed from the index 0 to the last index, what I have is that the images with bigger index than the index selected are been draw over it although they have a smaller Z property.

[wysota]

Remember this is lowercase "z".

[kuemeele]

Yeah I know, I am writting "z" in lowercase in the code.

[wysota]

Show us some code.

[kuemeele]

Sure, here is the code of delegate:

import Qt 4.7

Item {
property int indexSelected: 0

Image {
id: poster_id
source: model.event_poster == "" ? _pics_path + "no_logo.jpg" : _pics_path + model.event_poster
visible: true
width: 160 * 0.7
height: 208 * 0.7
y: 30
}

states: [
State {
name: "farestleft";
when: (indexSelected == model.index)

PropertyChanges {
target: poster_id;
width: 160 * 0.7
height: 208 * 0.7
x: 80
y: 30
z: 5
visible: true
}
}
,
State {
name: "farestright";
when: (indexSelected + 6 == model.index)

PropertyChanges {
target: poster_id;
width: 160 * 0.7
height: 208 * 0.7
x: 0
y: 30
z: 5
visible: true
}
}
,
State {
name: "middleleft";
when: ((indexSelected + 1 == model.index) || (indexSelected + 5 == model.index))

PropertyChanges {
target: poster_id;
width: 160 * 0.8
height: 208 * 0.8
x: 32
y: 20
z: 10
visible: true
}
}
,
State {
name: "middleright";
when: ((indexSelected + 1 == model.index) || (indexSelected + 5 == model.index))

PropertyChanges {
target: poster_id;
width: 160 * 0.8
height: 208 * 0.8
x: 0
y: 20
z: 10
visible: true
}
}
,
State {
name: "nearest";
when: ((indexSelected + 2 == model.index) || (indexSelected + 4 == model.index))

PropertyChanges {
target: poster_id;
width: 160 * 0.9
height: 208 * 0.9
y: 10
x: 8
z: 20
visible: true
}
}
,
State {
name: "selected";
when: (indexSelected + 3 == model.index)

PropertyChanges {
target: poster_id;
width : 160
height: 208
scale: 1
x: 0
y: 0
z: 50
visible: true
}
}
]

transitions: Transition {
from: "*"; to: "selected"
NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
//NumberAnimation { properties: "width"; easing.type: Easing.InOutQuad }
// NumberAnimation { properties: "z"; easing.type: Easing.InOutQuad }
// PropertyAnimation { property: "z"; duration: 1000 }

//NumberAnimation { properties: "x"; from: 0; to: 50; easing.type: Easing.Linear; duration: 5500}
//NumberAnimation { properties: "z"; from: 0; to: 50; easing.type: Easing.Linear; duration: 5500}
}
}

Added after 10 minutes:

I know each item is using the apropiate "state" because the width, height, x and y properties are working fine

[wysota]

I think you overcomplicate all this. Take a look at the PathView example available in the docs, I've seen coverflow implemented with it and it seems it does exactly what you want (just remember to change the z-order while traversing the path the same way as the scale is changed in the example).