Drawer-layout



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


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

Log in to reply
 

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