Side panel with QML Drawer



  • Hello

    I want a sidepanel in my application. But I need a other functionality. Please look at the screenshot below.
    For example with a mouseclick I want, that the red side panel will be cutted half from inside. After that, the area with the slider furthermore will be visible, but NOT the arrow.

    Has somebody an idea or experience in this topic ?

    Best regards

    Snoopy

    0_1510561438567_Drawer.png



  • Hi,
    I don't know if this is exactly what you want :

    You can past all this code here : https://qmlweb.github.io/ and check if this is the behavior you are looking for.

    import QtQuick 2.0
    Rectangle{
    id:main
    height : 400
    width : 500
    Rectangle{
    id : blackRec
    height : 300
    width : 400
    color : "grey"
    border.width : 4

      property bool openSidePanel : false
      property bool openHalfSidePanel : false
    
       MouseArea{
         anchors.fill : blackRec
         onClicked : {
           	if(blackRec.openHalfSidePanel)blackRec.openHalfSidePanel = false
              if(blackRec.openSidePanel) blackRec.openSidePanel = false
              else blackRec.openSidePanel = true
       }
    }
    

    }
    Rectangle{
    Text{text:blackRec.openSidePanel?"opened":blackRec.openHalfSidePanel? "half opened" : "closed"}
    id : redRec
    //visible : blackRec.openSidePanel // hide if closed
    color : "red"
    height : blackRec.height
    width : blackRec.width / 4
    anchors.left : blackRec.right

        anchors.leftMargin : blackRec.openSidePanel ? -redRec.width  : 
        blackRec.openHalfSidePanel ?-redRec.width/2 : 0
     }
    

    Rectangle{
    id:openHalfButton
    height : 50
    width : 60
    Text{text:blackRec.openHalfSidePanel ? "close" : "open Half"}
    //scale : openHalfButtonMouseArea.pressed ? 1 : 0.8
    anchors.bottom: main.bottom
    color : "#12aa55"
    MouseArea{
    id:openHalfButtonMouseArea
    anchors.fill:parent
    onClicked:{
    if(blackRec.openSidePanel)blackRec.openSidePanel = false
    if(blackRec.openHalfSidePanel) blackRec.openHalfSidePanel = false
    else blackRec.openHalfSidePanel = true
    }
    }
    }
    }

    LA



  • @LeLev

    Hello,
    thank you for your suggestion.

    I've made it with two Drawer. One Drawer with the half inside Rectangle (with Slider) and a second Drawer with
    the complete Rectangle like on the screenshot. The first Drawer is overlaying the second Drawer, but the user can't see that. Now I can can control both Drawer with the visible or the position property.

    Best regards

    Snoopy


Log in to reply
 

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