QML 'Custom Menu' option moving upwards



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

Log in to reply
 

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