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/im...ac20060912.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} 
    }
}

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} 
    }
}

To copy to clipboard, switch view to plain text mode 

---

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).