Qt QML将元素放置在抽屉上方

Question

我正在努力解决一个非常基本的问题。。

使用QT 5.15.2:

我们有一个简单的应用程序，有一个主窗口和2-3个子窗口(从主窗口向下一级(。主窗口由一个内容项、一个标题和一些分布在主窗口中的菜单瓣组成。到目前为止，子页面是用抽屉元素打开的。

然而，一旦打开，抽屉就会覆盖挡板和顶盖，我们需要在抽屉内重新安装挡板和顶盖以使其可见。这不是很好。有什么方法可以定义打开抽屉的z级别吗？(显然设置z不起作用(。

Item{
id: id_mainWindow
z: 0
Drawer{
id: id_subMenu1
anchors.fill: parent
z: 1

/* Not so nice workaround */
Button{
id: id_subClose
z: 100
onClicked{
id_subMenu1.close()
}
}
}
/* Unfortunately, this one gets hidden once, the drawer is open */
Button{
id: id_subOpenClose
z: 100
onClicked{
if( id_subMenu1.open ){
id_subMenu1.close()
} else {
id_subMenu1.open()
}
}
}
}

Answer 1

我建议Drawer不是这个工作的合适组件，因为它在技术上是Popup。也许值得检查一下TabBar组件。

尽管如此，这里还是重写了您的代码，这样您的Drawer就可以在不覆盖id_subOpenClose按钮的情况下打开。

import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Material
Rectangle {
id: id_mainWindow

anchors.fill: parent

Drawer {
id: id_subMenu1

/*
Set the Drawer's height and y position so that it does not cover your button
*/
y: id_subOpenClose.height
height: id_mainWindow.height - id_subOpenClose.height
width: id_mainWindow.width
// Do not dim background
dim: false

// Set this to zero if you want no shadow
Material.elevation: 2

edge: Qt.RightEdge

Label {
text: 'Hello World'
anchors.centerIn: parent
}
}
/* 
This is your header button that was getting hidden
Here it stays as if it were part of a global header and does not get hidden by
the Drawer.
*/
Button{
id: id_subOpenClose
text: id_subMenu1.visible? 'close': 'open'
onClicked: id_subMenu1.visible? id_subMenu1.close(): id_subMenu1.open()
}
}

有关上面的交互式WASM示例，请参见此处。