GridLayout Animation

roigallego

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

p3c0

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.

roigallego

Hi @p3c0 ,

thank you tor you trick!!

I tried, and it works!!!