QML 'Custom Menu' option moving upwards

[Diego Donate]

Hi,

I am trying to create a "menu" in QML with custom data in each option
For requirements of my application, i need to show it loading the QML file dinamically (Qt.createComponent)
What I need is to show some fixed options in the bottom part, and when clicked the top one, another options appear below this top option, which keeps in the top
A simple example. I have this menu:

Option 4
Option 2
Option 1

And when clicked in Option 4, the menu changes to

Option 4
Option 3
Option 2
Option 1

So Option 4 is moved upwards and Option 3 appears

I would like to have a 'shadow' around all my menu (I added a 'DropShadow' component for that purpose).

I have this simple test code, where I have a main Rectangle (to be surrounded by the shadow), and 2 Rectangles inside.
Rect1 for the fixed part (Option 1, Option 2), and Rect2 for the 'movable' part (Option 3, Option 4).
Rect2 is behind Rect1 (z: -1), and located to have only Option 4 visible, above Option 2.
When clicked Option 4, Rect2 is moved upwards and all options are visible

To achieve that, I have to update Rect2 visible height, and main window position ('y'), since main window height depends on this Rect2 visible height...

I have it working, but it flickes a lot since 2 variables changes ('fixed panel' is moved upwards and back)

I have also tried with a ParallelAnimation for 2 values, but no success...

Any idea to have this menu with a smooth movement?

Thanks

Main.qml

import QtQuick 2.0

Rectangle 
{
    id: window

    property variant win: undefined;
    Component.onCompleted: 
   {
        var component = Qt.createComponent("TestMenu.qml");
        win = component.createObject(window, {"x": 500, "y": 500});
        win.show();
    }
}

TestMenu.qml:

import QtQuick 2.0
import QtQuick.Window 2.1
import QtGraphicalEffects 1.0

Window {
    id: window
    flags: Qt.Tool | Qt.FramelessWindowHint
    height: panel.height
    color: "transparent"

    property int radiusShadow: 20
    property int iOptionHeight: 30

    Rectangle {
        id: panel
        anchors { centerIn: parent}

        height: menu1.height + menu2.heightVisible + 2*radiusShadow
        width: window.width - 2*radiusShadow
        color: "transparent"

        Rectangle {
            id: menu1

            anchors { bottom: parent.bottom; bottomMargin: radiusShadow }
            width: parent.width
            height: column1.children.length * iOptionHeight

            Column {
                id: column1
                anchors.fill: parent
                Rectangle {
                    color: "red";
                    Text { text: qsTr("option 2") }
                    height: iOptionHeight;  width: parent.width
                }
                Rectangle {
                    color: "green";
                    Text { text: qsTr("option 1") }

                    height: iOptionHeight;  width: parent.width
                }
            }
        }

        Rectangle {
            id: menu2

            property int heightVisible: iOptionHeight

            anchors { top: parent.top; topMargin: radiusShadow; left: menu1.left }
            width: parent.width
            height: column2.children.length * iOptionHeight

            z: -1

            Column {
                id: column2

                anchors.fill: parent
                Rectangle {
                    id: blue
                    property bool bOpen: false
                    color: "blue";
                    height: iOptionHeight;  width: parent.width
                    Text { text: qsTr("option 4") }

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            blue.bOpen = !blue.bOpen;
                            panel.showHideMenu2(blue.bOpen);
                        }
                    }
                }
                Rectangle {
                    color: "pink";
                    Text { text: qsTr("option 3") }
                    height: iOptionHeight;  width: parent.width
                }
            }
        }

        function showHideMenu2(bShow)
        {
            if (bShow)
            {
                window.y -= iOptionHeight
                menu2.heightVisible += iOptionHeight;
            }
            else
            {
                window.y += iOptionHeight
                menu2.heightVisible -= iOptionHeight;
            }
        }
    }

    DropShadow {
        id: dropShadow
        visible: true
        anchors.fill: panel
        radius: radiusShadow
        samples: 24
        color: "#40000000"
        source: panel
    }
}