Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QML 'Custom Menu' option moving upwards
Forum Update on Monday, May 27th 2025

QML 'Custom Menu' option moving upwards

Scheduled Pinned Locked Moved QML and Qt Quick
1 Posts 1 Posters 353 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • D Offline
    D Offline
    Diego Donate
    wrote on 24 Nov 2016, 11:32 last edited by
    #1

    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
        }
    }
    
    1 Reply Last reply
    0

    1/1

    24 Nov 2016, 11:32

    • Login

    • Login or register to search.
    1 out of 1
    • First post
      1/1
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Get Qt Extensions
    • Unsolved