QML 导航控件：使用Drawer实现抽屉效果

Quz

于 2025-03-01 08:15:00 发布

阅读量886

点赞数 13

分类专栏： Qt6 QML学习之路文章标签： qt

本文链接：https://blog.csdn.net/u011186532/article/details/145913536

版权

Qt6 QML学习之路专栏收录该内容

86 篇文章

订阅专栏

前言

Drawer 是 Qt Quick Controls 提供的一个用于实现侧边导航栏的 QML 类型。它是一个可以通过滑动手势打开和关闭的侧边面板，通常用于触控界面上，提供一个中央位置用于导航。

1. 基础用法

1.1 属性描述

dragMargin

类型：real
描述：此属性定义了从屏幕边缘开始拖动以打开抽屉的距离。如果设置为 0 或更小的值，则无法通过拖动打开抽屉。
默认值：Application.styleHints.startDragDistance。

edge

类型：enumeration
描述：此属性定义了抽屉将从哪个窗口边缘打开。可接受的值包括：Qt.TopEdge、Qt.LeftEdge、Qt.RightEdge、Qt.BottomEdge

interactive

类型：bool
描述：此属性定义了抽屉是否对滑动操作有反应。如果设置为 false，抽屉将不会对滑动操作做出反应。
默认值：true（自 QtQuick.Controls 2.2 起）。

position

类型：real
描述：此属性定义了抽屉相对于其最终目的地的位置。值为 0.0 表示完全关闭，值为 1.0 表示完全打开。

open

类型：bool
描述：此属性定义了抽屉是否打开。可以通过设置此属性为 true 或 false 来程序化地打开或关闭抽屉。

modal

类型：bool
描述：此属性定义了抽屉是否为模态。如果设置为 true，抽屉将阻止用户与底层内容的交互。
默认值：true。

closePolicy

类型：enumeration
描述：此属性定义了抽屉的关闭策略。可接受的值包括：Popup.CloseOnEscape：按下 Escape 键时关闭；Popup.CloseOnPressOutside：点击抽屉外部时关闭。

dim

类型：bool
描述：此属性定义了抽屉打开时是否对背景进行半透明处理。
默认值：true。

1.2 基础示例

以下是一个在 ApplicationWindow 中使用 Drawer 的示例：

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

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

    Drawer {
        id: drawer
        width: 200
        height: myWindow.height
        margins: 10
        
        //默认属性
        modal: true

        ColumnLayout {
            spacing: 10
            Button {
                text: "按钮1"
                Layout.preferredWidth: 150
                Layout.preferredHeight: 40
            }
            Button {
                text: "按钮2"
                Layout.preferredWidth: 150
                Layout.preferredHeight: 40
            }
            Button {
                text: "按钮3"
                Layout.preferredWidth: 150
                Layout.preferredHeight: 40
            }
        }
    }

    Button {
        text: "Center Button"
        width: 240
        height: 60
        font.pointSize: 20
        anchors.centerIn: parent
    }
}