QML 抽屉效果例子

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

ApplicationWindow{
    visible: true;
    width: 1280;
    height: 720;

    Drawer {
        id: drawer
        width: 0.3 * parent.width
        height: parent.height
        dragMargin: parent.width * 0.1; //拉动开始生效的区域，最低为0，也就是0的位置拖动才有效
        Overlay.modal: Rectangle {
                  color: "transparent"
              }
        Rectangle
        {
            anchors.fill: parent
            color: "#000000"
            Text {
                id: content_Drawer
                anchors.centerIn: parent
                text: "content_Drawer"
                font.pixelSize: 40
                color: "yellow"
                anchors.fill: parent
                verticalAlignment: Label.AlignVCenter
                horizontalAlignment: Label.AlignHCenter
            }
            CheckBox
            {
            width: 100
            height: 100
            }
        }

//        //缩放滑条
//        Slider
//        {
//            id: control
//            anchors.right: parent.right
//            anchors.rightMargin: 40
//            anchors.top: parent.top
//            anchors.topMargin: 220
//            width: 180
//            height: 20
//            value: 1
//            stepSize:1
//            from: 1
//            to: 30
//            background: Rectangle {
//                x: control.leftPadding
//                y: control.topPadding + control.availableHeight / 2 - height / 2
//                implicitWidth: 200
//                implicitHeight: 4
//                width: control.availableWidth
//                height: implicitHeight
//                radius: 2
//                color: "#CCCACA"

//                Rectangle {
//                    width: control.visualPosition * parent.width
//                    height: parent.height
//                    color: "#5F5F5F"
//                    radius: 2
//                }
//            }

//            handle: Rectangle {
//                x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
//                y: control.topPadding + control.availableHeight / 2 - height / 2
//                implicitWidth: 15
//                implicitHeight: 15
//                radius: 8
//                color: control.pressed ? "#5F5F5F" : "#5F5F5F"
//                border.color: "#5F5F5F"
//            }

//            onValueChanged:
//            {

//            }
//        }
    }

    Rectangle {
        id: content_main
        anchors.fill: parent
        color: "blue"
        Text {
            anchors.centerIn: parent

            text: "content_main"
            font.pixelSize: 50

            anchors.fill: parent
            verticalAlignment: Label.AlignVCenter
            horizontalAlignment: Label.AlignHCenter

            transform: Translate {
                x: drawer.position * content_main.width * 0.33
            }
        }
    }

}

 Overlay.modal: 去掉抽屉阴影有效