Drawer QML Type

可使用轻扫手势打开和关闭的侧板。更多

Import Statement: import QtQuick.Controls
Inherits:

Popup

属性

详细说明

抽屉提供了一个基于轻扫的侧边面板,类似于触摸界面中常用的为导航提供中心位置的侧边面板。

抽屉可放置在内容项四个边缘的任意位置。上图中的抽屉位于窗口的左侧边缘。从窗口左侧边缘"拖出 "抽屉即可打开。

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: window
    visible: true

    Drawer {
        id: drawer
        width: 0.66 * window.width
        height: window.height

        Label {
            text: "Content goes here!"
            anchors.centerIn: parent
        }
    }
}

抽屉是一种特殊类型的弹出窗口,位于窗口edges 中的一个位置。默认情况下,抽屉会将自己重新定位到窗口overlay ,因此是根据窗口坐标操作的。也可以手动将parent 设为其他位置,使抽屉在特定坐标空间运行。

抽屉可以配置为只覆盖部分窗口边缘。下面的示例说明了如何定位抽屉,使其显示在窗口页眉下方:

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: window
    visible: true

    header: ToolBar { }

    Drawer {
        y: header.height
        width: window.width * 0.6
        height: window.height - header.height
    }
}

position 属性决定了抽屉的可见范围,其值介于0.01.0 之间。无法将抽屉的 x 坐标(或水平边距)设置在窗口的左侧或右侧边缘,也无法将抽屉的 y 坐标(或垂直边距)设置在窗口的顶部或底部边缘。

在上图中,应用程序的内容被"推 "过屏幕。这是通过对内容进行平移实现的:

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: window
    width: 200
    height: 228
    visible: true

    Drawer {
        id: drawer
        width: 0.66 * window.width
        height: window.height
    }

    Label {
        id: content

        text: "Aa"
        font.pixelSize: 96
        anchors.fill: parent
        verticalAlignment: Label.AlignVCenter
        horizontalAlignment: Label.AlignHCenter

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

如果希望在打开抽屉时应用程序的内容保持原样,就不要应用平移。

通过将抽屉设置为non-modalnon-interactive ,可以将抽屉配置为不可关闭的持久侧板。更多详情,请参阅图库示例。

注: 在某些平台上,某些边缘可能会保留给系统手势使用,因此不能与 Drawer 一起使用。例如,在 Android 和 iOS 上,顶部和底部边缘可能被保留用于系统通知和控制中心。

另请参阅 SwipeView自定义绘图器导航控件弹出控件

属性文档

dragMargin : real

该属性用于保存从屏幕边缘拖动操作将打开抽屉的距离。将该值设置为0 或更小,可防止通过拖动打开抽屉。

默认值为Application.styleHints.startDragDistance

另请参阅 interactive


edge : enumeration

该属性表示抽屉将从哪个窗口边缘打开。可接受的值有

常量说明
Qt.TopEdge窗口的上边缘。
Qt.LeftEdge窗口左边缘(默认)。
Qt.RightEdge窗口的右边缘。
Qt.BottomEdge窗口的下边缘。

interactive : bool [since QtQuick.Controls 2.2 (Qt 5.9)]

该属性表示抽屉是否为交互式。非交互式抽屉不会对轻扫作出反应。

默认值是true

该属性在 QtQuick.Controls 2.2 (Qt 5.9) 中引入。

另请参阅 dragMargin


position : real

该属性保留了抽屉相对于其最终目的地的位置。也就是说,抽屉完全关闭时的位置为0.0 ,完全打开时的位置为1.0


© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.