Drawer-layout

[guy incognito]

Hi all,

I'm pretty new to QML and currently trying some basic stuff and got stuck at this point:

I got a ApplicationWindow with a drawer. There are a few buttons, textfields and labels on it.
When I press button1, I would like the drawer to change its layout, for example just display a red rectangle on it. How would I do that?

import QtQuick 2.7
import QtQuick.Controls 2.2

ApplicationWindow {
id: window;
visible: true;
width: 640;
height: 480;

ToolBar {
    id: overlayHeader;
    z: 1;
    width: parent.width;
    parent: window.overlay;  

    BorderImage {
        border.bottom: 8
        source: "qrc:/toolbar.png"
        width: parent.width
        height: 40

        Label {
            id: label;
            anchors.centerIn: parent;
            text: "Titel";
            color: "white";
            font.pixelSize: 30;
        }
    }
}

Drawer {        
    id: drawer;
    y: overlayHeader.height;
    width: window.width / 3;
    height: window.height - overlayHeader.height;

    background: Rectangle {
        color: "#212126";
        anchors.fill: parent;
    }

    Column {
        spacing: 20
        anchors.centerIn: parent

        Label{
            id: label1;
            text: "Label1:";
            color: "white";
        }

        TextField {
            id: textField1;
            anchors.margins: 20
            placeholderText: "Text";
            background: Rectangle{
                implicitHeight: 50
                implicitWidth: 320
            }
        }

        Button{
            id: button1
            text:"press me";
            background: Rectangle{
                implicitHeight: 50;
                implicitWidth: 320;
            }
            onClicked: {
               // draw red rectangle to drawer
            }
        }
   }
}

[stcorp]

You could use a stackview. Basically, you have one page with your buttons, textfield and labels. Then you have another page with your red rectangle. When you press the button, the page with the red rectangle is pushed onto the stackview. When you click the red rectangle, that current page is popped, and so you go back to the start page

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow {
    id: window;
    visible: true;
    width: 640;
    height: 480;

    ToolBar {
        id: overlayHeader;
        z: 1;
        width: parent.width;
        parent: window.overlay;

        BorderImage {
            border.bottom: 8
            source: "qrc:/toolbar.png"
            width: parent.width
            height: 40

            Label {
                id: label;
                anchors.centerIn: parent;
                text: "Titel";
                color: "white";
                font.pixelSize: 30;
            }
        }
    }

    Drawer {
        id: drawer;
        y: overlayHeader.height;
        width: window.width / 3;
        height: window.height - overlayHeader.height;

        background: Rectangle {
            color: "#212126";
            anchors.fill: parent;
        }

        StackView {
            id: stackview
            anchors.fill: parent
            initialItem: Item {
                Column {
                    spacing: 20
                    anchors.verticalCenter: parent.verticalCenter

                    Label{
                        id: label1;
                        text: "Label1:";
                        color: "white";
                    }

                    TextField {
                        id: textField1;
                        anchors.margins: 20
                        placeholderText: "Text";
                        background: Rectangle{
                            implicitHeight: 50
                            implicitWidth: 320
                        }
                    }

                    Button{
                        id: button1
                        text:"press me";
                        background: Rectangle{
                            implicitHeight: 50;
                            implicitWidth: 320;
                        }
                        onClicked: {
                           stackview.push(redRectangle)
                        }
                    }
                }
            }
        }

        Component {
            id: redRectangle
            Rectangle {
                width: 150
                height: 250
                color: "red"

                MouseArea {
                    anchors.fill: parent
                    onClicked: stackview.pop()
                }
            }
        }
    }
}