GridLayout Animation



  • Hi

    I have a problem with GridLayout, I have a QtQuick 2 application with a GridLayout, it has 2 rows and 2 columns. The user can make double click in a item and item will be maximized. I would like to animate this action. I tried with Behaviour on x, y , width and height, but i can't get the animation.

    This is a small example:

    App.qml

    Rectangle {
        id : root
        Layout.fillWidth :true;
        Layout.fillHeight: true;
        color: "black"
        border.color: "white"
        border.width: 2
        signal maximized()
    
        MouseArea {
            anchors.fill: parent
            onDoubleClicked: {
                console.log("Double CLick in ",border.color)
                maximized()
            }
        }
    }
    

    Main.qml:

    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        color :"black"
    
        GridLayout {
            id: layout
            anchors.fill: parent
            property int itemMaximized : 0
            columns: 2
    
            function maximized(pos) {
    
                if (itemMaximized!==0) {
                    console.log("Minimized",pos)
                    app1.visible = true
                    app2.visible = true
                    app3.visible = true
                    app4.visible = true
                    itemMaximized = 0
                    return
    
                }
                console.log("Maximized",pos)
    
                itemMaximized = pos
    
                switch(pos) {
                case 1:
                    app1.visible = true
                    app2.visible = false
                    app3.visible = false
                    app4.visible = false
                    break;
                case 2:
                    app1.visible = false
                    app2.visible = true
                    app3.visible = false
                    app4.visible = false
                    break;
                case 3:
                    app1.visible = false
                    app2.visible = false
                    app3.visible = true
                    app4.visible = false
                    break;
                case 4:
                    app1.visible = false
                    app2.visible = false
                    app3.visible = false
                    app4.visible = true
                    break;
                }
            }
    
            App { id: app1; border.color: "green";   onMaximized : layout.maximized(1) }
            App { id: app2; border.color: "blue";    onMaximized : layout.maximized(2) }
            App { id: app3; border.color: "red";     onMaximized : layout.maximized(3) }
            App { id: app4; border.color: "orange";  onMaximized : layout.maximized(4) }
    
        }
    }
    

    Somebody can help me to animate GridLayout

    thanks


  • Moderators

    Hi @roigallego IMO the trick here is to do ParentAnimation. On mouse double click reparent the individual item inside the GridLayout to an Item parent to GridLayout i.e in your case ApplicationWindow but you cant re-parent to ApplicationWindow. So introduce another Item inside it and the move GridLayout inside this new Item and then as said re-parent to this new Item. Using states and transitions would be better with Transition containing ParentAnimation + NumberAnimation.



  • Hi @p3c0 ,

    thank you tor you trick!!

    I tried, and it works!!!


Log in to reply
 

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