QML之側滑抽屜（菜單）

可以用兩種方式實現抽屜效果，一種是使用動畫，一種是直接使用抽屜控件（Drawer）。

效果

區別

1、使用動畫更加靈活，更方便自定義動畫效果
2、使用動畫實現的抽屜需要依靠其Z屬性確定其所在哪一層，Drawer彈出時在最上層
3、Drawer繼承自Popup，可以設置爲模態和非模態，可以方便設置其關閉方式
4、動畫使用start()和stop()打開關閉，Drawer使用open()和close()打開關閉

代碼

動畫抽屜

Button {
        x: 270
        y: 133
        text: qsTr("動畫抽屜")
        onClicked: {
            if(menuRect.x === 640)
            {
                menuStartAnim.start()
            }
            else
            {
                menuStopAnim.start()
            }
        }
    }
    //組合動畫
    ParallelAnimation{
        id: menuStartAnim
        //屬性動畫
        NumberAnimation{
            target: menuRect
            properties: "x"
            from: 640
            to: 440
            //動畫持續時間，毫秒
            duration: 500
            //動畫漸變曲線
            easing.type: Easing.OutQuad
        }
        NumberAnimation{
            target: menuRect
            properties: "opacity"
            from: 0.2
            to: 0.8
            duration: 500;
            easing.type: Easing.OutQuad
        }
    }
    ParallelAnimation{
        id: menuStopAnim
        NumberAnimation{
            target: menuRect
            properties: "x"
            from: 440
            to: 640
            duration: 500;
            easing.type: Easing.Linear
        }
        NumberAnimation{
            target: menuRect
            properties: "opacity"
            from: 0.8
            to: 0.2
            duration: 500;
            easing.type: Easing.Linear
        }
    }

    Rectangle {
        id: menuRect
        x: 640
        y: 0
        width: 200
        height: 480
        color: "lightblue"
        radius: 5
    }

Drawer

Button {
        id: button
        x: 270
        y: 209
        text: qsTr("LeftDrawer")
        onClicked: {
            if(drawer.visible)
            {
                drawer.close()
            }
            else
            {
                drawer.open()
            }
        }
    }

    Drawer {
        id: drawer
        width: 200
        height: 640
        modal: true
        clip: true
        //抽屜起始方向
        edge: Qt.LeftEdge
        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside

        background: Rectangle{
            anchors.fill: parent
            color: "#616161"
            opacity: 0.8
        }
    }