Animated Items in Gridview hides behind following items



  • Hi, I need some help!

    I have a grid view with a random number of items. If I click on an item I want the item to change position and size (should be greater and moving to the center of the application). I tried it with a ParentChange and made a little example to demonstrate my problem:

    main.qml
    @import QtQuick 2.2
    import QtQuick.Controls 1.1

    ApplicationWindow {
    id: main
    width: 1920; height: 1080
    visible: true
    //visibility: "FullScreen"
    color: "black"

     GridView {
         id: grid_view
         anchors.fill: parent
         anchors.centerIn: parent
         cellWidth: 300
         cellHeight: 300
    
         model: 9
         delegate: fileDelegate
    
         Component {
             id: fileDelegate
             Rectangle {
                 width: grid_view.cellWidth; height: grid_view.cellHeight
                 radius: 20
                 color: "black"
                 TestElement {anchors.fill: parent}
             }
         }
     }
    
     Rectangle {
         id: main_view
         width: 1280; height: 720
         radius: 10
         color: "transparent"
         anchors.centerIn: parent
     }
    

    }
    @

    TestElement.qml
    @
    import QtQuick 2.2

    Item {
    id: container

    function randomBg(){
       var hex1=new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F")
       var hex2=new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F")
       var hex3=new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F")
       var hex4=new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F")
       var hex5=new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F")
       var hex6=new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F")
       var bg="#"+hex1[Math.floor(Math.random()*hex1.length)]+hex2[Math.floor(Math.random()*hex2.length)]+hex3[Math.floor(Math.random()*hex3.length)]+hex4[Math.floor(Math.random()*hex4.length)]+hex5[Math.floor(Math.random()*hex5.length)]+hex6[Math.floor(Math.random()*hex6.length)]
       return bg
    }
    
    Rectangle {
        id: rect
        width: parent.width; height: parent.height; radius: 20
        property bool maximized: false
        color: randomBg()
    
        MouseArea {
            id: playArea
            anchors.fill: parent
            onClicked: rect.maximized = !rect.maximized
        }
    
        states: State {
            name: "maximized"
            when: rect.maximized
            
            ParentChange {
                target: rect
                parent: main_view
                x: 0; y: 0;
                width: parent.width; height: parent.height
            }
            PropertyChanges {target: rect; radius:0}
        }
    
        transitions: Transition {
            from: "*"
            to: "maximized"
            reversible: true
            ParentAnimation {
                PropertyAnimation {
                    target: rect
                    properties: "x,y,width,height"
                    easing.type: "InOutQuad"; duration: 1000
                }
            }
        }
    }
    

    }
    @

    The animation for maximizing works fine but when the transition is reversed, the rectangle hides behind his following items in the grid view. I tried to change the z-value but this didn't help!

    Thanks for your help!
    Cermit


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.