如何让ToolButton显示在Drawer组件上方？（附Windows计算器示例）

问题核心：Qt Quick Controls的Drawer组件默认使用Overlay层渲染，这个层级独立于普通组件的z值体系，所以直接设置按钮和Drawer的z值无法改变层级关系。

下面是三种可行的解决方法：

方法一：将按钮附加到全局Overlay层 #

通过Overlay.overlay属性把按钮绑定到全局Overlay，再设置更高的z值，确保它在Drawer的Overlay之上：

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    id: root
    visible: true
    width: 640
    height: 480

    Drawer {
        id: drawerPopUp
        width: root.width * 0.35
        height: root.height
        edge: Qt.LeftEdge
        interactive: true

        Label {
            text: "抽屉内容"
            anchors.centerIn: parent
        }
    }

    ToolButton {
        id: drawerButton
        width: 32
        height: 32
        text: "☰"
        z: 100

        anchors {
            left: drawerPopUp.left
            leftMargin: 5
            top: drawerPopUp.top
            topMargin: 5
        }

        // 关键：将按钮附加到全局Overlay层
        Overlay.overlay: Overlay.globalOverlay
    }
}

方法二：降低Drawer的Overlay层级 #

直接修改Drawer的overlay.z属性，让它的Overlay层低于按钮所在的层级：

Drawer {
    id: drawerPopUp
    // 降低Drawer的Overlay层级
    overlay.z: -1
    width: root.width * 0.35
    height: root.height
    edge: Qt.LeftEdge
    interactive: true
}

ToolButton {
    id: drawerButton
    width: 32
    height: 32
    z: 100

    anchors {
        left: drawerPopUp.left
        leftMargin: 5
        top: drawerPopUp.top
        topMargin: 5
    }
}

注意：这种方法可能影响其他使用Overlay的组件，需根据场景测试。

方法三：自定义模拟Drawer #

放弃原生Drawer，用普通Rectangle实现抽屉效果，这样z值设置就能正常生效：

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    id: root
    visible: true
    width: 640
    height: 480

    Rectangle {
        id: drawerPopUp
        width: root.width * 0.35
        height: root.height
        color: "#f0f0f0"
        // 通过x坐标控制抽屉展开/收起
        x: open ? 0 : -width
        z: -1

        property bool open: false

        Label {
            text: "自定义抽屉内容"
            anchors.centerIn: parent
        }

        // 添加拖动交互（可选）
        MouseArea {
            anchors.fill: parent
            drag.target: parent
            drag.axis: Drag.XAxis
            drag.minimumX: -width
            drag.maximumX: 0
            onReleased: {
                open = x > -width/2
            }
        }
    }

    ToolButton {
        id: drawerButton
        width: 32
        height: 32
        text: "☰"
        z: 100

        anchors {
            left: drawerPopUp.left
            leftMargin: 5
            top: drawerPopUp.top
            topMargin: 5
        }

        onClicked: drawerPopUp.open = !drawerPopUp.open
    }
}

内容的提问来源于stack exchange，提问作者Illuxel