EDrawer 抽屉

import EUI 1.0

示例与代码

关闭前确认与尺寸调整

QML 代码QML

import EUI 1.0
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15

Item {
    width: Math.min(640, parent.width)
    height: 480

Column {
        width: parent.width - 48
        spacing: 16
        anchors.centerIn: parent

EButton {
            text: qsTr("打开抽屉")

onClicked: webNavigationDrawer.open()
        }
        EDrawer {
            id: webNavigationDrawer

resizable: true
            destroyOnClose: true
            title: qsTr("关闭前确认")
            beforeClose: function(done) {
                webNavigationDrawerConfirmation.complete = done
                webNavigationDrawerConfirmation.open()
            }
            contentComponent: webNavigationDrawerContent
        }
        Component {
            id: webNavigationDrawerContent

EText {
                width: parent.width
                wrapMode: Text.WordWrap
                text: qsTr("内容在关闭后销毁，再次打开时重新创建。")
            }
        }
        EDialog {
            id: webNavigationDrawerConfirmation

property var complete: null

title: qsTr("确认关闭")
            text: qsTr("确定关闭当前面板？")

onAccepted: {
                if (complete)
                    complete()
                complete = null
            }
            onRejected: {
                if (complete)
                    complete(true)
                complete = null
            }
        }
    }
}

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行许可

抽屉

QML 代码QML

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行许可

属性

属性说明取值与默认值

autofocusbool

组件显示时自动聚焦；受控件可用状态及弹层生命周期影响。

默认值true

beforeClosevar

关闭前回调；弹窗通过 done(cancel) 完成异步判断。

默认值null

closeDelayint

等待、节流或自动关闭时间，单位为毫秒；0 表示不延迟或不启用定时关闭。

默认值0

closeIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值EIcons.XMARK

closeOnClickOutsidebool

点击弹层外部时关闭。

默认值true

closeOnEscapebool

是否允许按 Escape 关闭。

默认值true

contentalias

内容插槽；直接在组件内部声明 QML 子对象。

默认值别名：body.data

contentComponentComponent

自定义主体内容的 Component 插槽；null 使用默认内容。委托上下文见本页示例。

默认值null

destroyOnClosebool

关闭后销毁通过 Component 加载的内容。

默认值false

drawerSizevar

抽屉尺寸，支持像素数值或百分比字符串。

默认值320

enabledbool

是否允许交互；false 时控件禁用。

默认值true

footerComponentComponent

自定义底部内容的 Component 插槽；null 使用默认内容。委托上下文见本页示例。

默认值null

heightreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值动态绑定

minimumSizereal

抽屉允许调整到的最小尺寸，单位为像素。

默认值80

modalPenetrablebool

是否允许输入穿透非模态遮罩。

默认值false

openDelayint

等待、节流或自动关闭时间，单位为毫秒；0 表示不延迟或不启用定时关闭。

默认值0

resizablebool

是否允许拖动调整尺寸。

默认值false

showClosebool

是否显示关闭或删除按钮。

默认值true

showHeaderbool

是否显示头部区域。

默认值true

titlestring

标题文字。

默认值""

visiblebool

是否显示组件。

默认值true

widthreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值动态绑定

horizontalbool只读

实际布局是否采用水平或垂直方向。

默认值由运行时计算

loadedContentalias只读

通过 Component 创建的实际内容对象。

默认值别名：contentLoader.item

resolvedSizereal只读

抽屉从像素或百分比计算出的实际尺寸。

默认值由运行时计算

信号

签名作用

closeRejected()

关闭请求被 beforeClose 拒绝时触发。

openAutoFocused()

弹窗打开并完成自动聚焦时触发。

closeAutoFocused()

弹窗关闭并完成焦点恢复时触发。

resized(real size)

拖动改变抽屉尺寸时触发，size 为当前尺寸。

resizeEnded(real size)

拖动调整结束时触发，size 为最终尺寸。

resizeStarted(real size)

开始拖动调整抽屉尺寸时触发，size 为起始尺寸。

方法

签名作用

close()

关闭组件的面板或弹窗。

open()

打开组件的面板或弹窗。

requestClose()

请求关闭弹窗，并执行 beforeClose 检查。

EDrawer 抽屉 ​

示例与代码 ​

关闭前确认与尺寸调整 ​

抽屉 ​

属性 ​

信号 ​

方法 ​

EDrawer 抽屉

示例与代码

关闭前确认与尺寸调整

抽屉

属性

信号

方法