Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    QML 'Custom Menu' option moving upwards

    QML and Qt Quick
    1
    1
    272
    Loading More Posts
    • 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.
    • Diego Donate
      Diego Donate last edited by

      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 Reply Quote 0
      • First post
        Last post