QML Drawer使用

QML Drawer使用说明

顾名思义，drawer为抽屉的意思、在QML开发中或在日常的使用软件当中，经常会看见某个地方点击角落某个按钮会弹出一些菜单列表，其实这种效果用Drawer可以很方便的实现。

使用Drawer的条件

需要包含如下部分的import，只有5.7以上的版本才可以使用该功能

import QtQuick.Controls 2.x

核心部分代码

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Controls.Universal 2.2

ApplicationWindow {
    id: window
    visible: true
    width: 1200
    height: 800
    title: qsTr("Stack")

    Universal.theme: Universal.Dark
    Universal.accent: Universal.Orange


    header: ToolBar {

        // ...
        contentHeight: toolButton.implicitHeight

        ToolButton {
            id: toolButton
            text: stackView.depth > 1 ? "\u25C0" : "\u2630"
            font.pixelSize: Qt.application.font.pixelSize * 1.6
            onClicked: {
                if (stackView.depth > 1) {
                    stackView.pop()
                } else {
                    drawer.open()
                }
            }
        }

        Label {
            text: stackView.currentItem.title
            anchors.centerIn: parent
        }
    }

    Drawer {

        // ...

        id: drawer
        width: window.width * 0.3
        height: window.height

        Column {
            anchors.fill: parent

            ItemDelegate {
                text: qsTr("Profile")
                width: parent.width
                onClicked: {
                    stackView.push("Profile.qml")
                    drawer.close()
                }
            }

            ItemDelegate {
                text: qsTr("Settings")
                width: parent.width
                onClicked: {
                    stackView.push(settings)
                    drawer.close()
                }
            }

            ItemDelegate {
                text: qsTr("About")
                width: parent.width
                onClicked: {
                    stackView.push(aboutPage)
                    drawer.close()
                }
            }
        }

    }

    StackView {
        id: stackView
        anchors.fill: parent
        initialItem: Home {}
    }

    // ...
    Component {
        id: settings
        Page {
            title: qsTr("Settings")

            Rectangle {
                anchors.fill: parent
                color: "blue"
            }

        }

    }

    Component {
        id: aboutPage

        About {}
    }

    // ...

}

效果如下

版权声明

代码出自qmlbook源码，特此声明！