Show only part of Qt Qml Drawer - qt

Question

I want to show only half of a QML Drawer. The idea is to keep some important information in the visible part of the drawer and then let the user show the full drawer with more information.
From the documentation I thought that the
position property should be suitable for this:
Drawer {
modal: false
interactive: false
position: 0.5 // does not work
}
But setting the position does not have an effect. Is it possible to show only a part of the drawer?

Answer 1

As mentioned in my comment, you may want to turn your concept inside out, and have the Drawer inherit its size from its contents, and have the contents change, rather than hardcode its size and manipulate its position.
Here is a full example that shows the idea. The drawer contains a RowLayout which contains "info" and "extra info" - the extra info's visibility is toggled via interaction, and thus changes the size of the drawer, which always stays at the 100% open position, but changes width automatically.
import QtQuick 2.12
import QtQml 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
Window {
id: root
width: 640
height: 480
visible: true
Drawer {
id: drawer
height: root.height
// width automatically derived from RowLayout child's implicitWidth
onClosed: detailed.visible = false
RowLayout {
height: parent.height
spacing: 0
Rectangle {
id: detailed
color: "lightcyan"
Layout.fillHeight: true
Layout.preferredWidth: 200
visible: false // when not visible, this does not add to the RowLayout's implicitWidth
Text {
anchors {
centerIn: parent
}
text: "Extra Info\n Click to close"
}
MouseArea {
anchors {
fill: parent
}
onClicked: {
detailed.visible = false
}
}
}
Rectangle {
color: "lightpink"
Layout.fillHeight: true
Layout.preferredWidth: 200
Text {
anchors {
centerIn: parent
}
text: "Regular Info\n Click to open extra info"
}
MouseArea {
anchors {
fill: parent
}
onClicked: {
detailed.visible = true // toggling visibility automatically makes the Drawer wider
}
}
}
}
}
MouseArea {
id: mouse
anchors {
fill: parent
}
onClicked: {
drawer.open()
}
}
Text {
anchors {
centerIn: parent
}
text: "Click to open drawer"
}
}