Drawer-layout
Solved
QML and Qt Quick
-
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() } } } } }