组件/反馈组件引入于 1.3.0

EDynamicDialog 动态弹窗

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 { height: 50 width: 420 EButton { text: qsTr("打开对话框") onClicked: dialog.openComponent(content, { "greeting": qsTr("动态创建内容") }) } EDynamicDialog { id: dialog title: qsTr("动态弹窗") onFinished: function(result, accepted) { sampleFeedback.open(accepted ? JSON.stringify(result) : qsTr("已取消")) } } Component { id: content Column { property var dialogRef property string greeting: qsTr("你好") spacing: 12 EText { text: parent.greeting } EButton { text: qsTr("返回结果") onClicked: parent.dialogRef.resolve({ "saved": true }) } } } EMessage { id: sampleFeedback type: EStyle.Info objectName: "sampleFeedback" } }

效果

运行代码，体验组件交互

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

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

传入参数

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Item { height: 50 width: 420 EButton { text: qsTr("打开对话框") onClicked: dialog.openComponent(content, { "greeting": "Parameters: EUI" }) } EDynamicDialog { id: dialog title: qsTr("动态弹窗") onFinished: function(result, accepted) { sampleFeedback.open(accepted ? JSON.stringify(result) : qsTr("已取消")) } } Component { id: content Column { property var dialogRef property string greeting: qsTr("你好") spacing: 12 EText { text: parent.greeting } EButton { text: qsTr("返回结果") onClicked: parent.dialogRef.resolve({ "saved": true }) } } } EMessage { id: sampleFeedback type: EStyle.Info objectName: "sampleFeedback" } }

效果

运行代码，体验组件交互

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

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

结果回调

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Item { height: 50 width: 420 EButton { text: qsTr("打开对话框") onClicked: dialog.openComponent(content, { "greeting": qsTr("动态创建内容") }) } EDynamicDialog { id: dialog title: qsTr("动态弹窗") onFinished: function(result, accepted) { sampleFeedback.open(accepted ? JSON.stringify(result) : qsTr("已取消")) } } Component { id: content Column { property var dialogRef property string greeting: qsTr("你好") spacing: 12 EText { text: parent.greeting } EButton { text: qsTr("返回结果") onClicked: parent.dialogRef.resolve({ "saved": true, "name": "EUI", "count": 3 }) } } } EMessage { id: sampleFeedback type: EStyle.Info objectName: "sampleFeedback" } }

效果

运行代码，体验组件交互

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

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

取消与关闭

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Item { height: 50 width: 420 EButton { text: qsTr("打开对话框") onClicked: dialog.openComponent(content, { "greeting": qsTr("动态创建内容") }) } EDynamicDialog { id: dialog title: qsTr("动态弹窗") onFinished: function(result, accepted) { sampleFeedback.open(accepted ? JSON.stringify(result) : qsTr("已取消")) } } Component { id: content Column { property var dialogRef property string greeting: qsTr("你好") spacing: 12 EText { text: parent.greeting } EButton { text: "Cancel dialog" onClicked: parent.dialogRef.reject() } } } EMessage { id: sampleFeedback type: EStyle.Info objectName: "sampleFeedback" } }

效果

运行代码，体验组件交互

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

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

重复打开与销毁

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Item { height: 50 width: 420 EButton { text: qsTr("打开对话框") onClicked: dialog.openComponent(content, { "greeting": qsTr("动态创建内容") }) } EDynamicDialog { id: dialog destroyOnClose: false title: qsTr("动态弹窗") onFinished: function(result, accepted) { sampleFeedback.open(accepted ? JSON.stringify(result) : qsTr("已取消")) } } Component { id: content Column { property var dialogRef property string greeting: qsTr("你好") spacing: 12 EText { text: parent.greeting } EButton { text: qsTr("返回结果") onClicked: parent.dialogRef.resolve({ "saved": true }) } } } EMessage { id: sampleFeedback type: EStyle.Info objectName: "sampleFeedback" } }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

contentalias

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

默认值dialogContent.data

textstring

显示的文字内容。

默认值未设置

topreal

对话框顶部位置，单位为像素；非垂直居中时生效。

默认值0

openDelayint

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

默认值0

closeDelayint

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

默认值0

centerbool

是否采用居中布局或居中文字。

默认值false

autofocusbool

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

默认值true

dialogRadiusreal

圆角半径，单位为像素。

默认值8

showClosebool

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

默认值true

beforeClosevar

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

默认值null

exitDurationint

动画或显示持续时间，单位为毫秒；组件的绑定表达式给出实际用途。

默认值180

showFooterbool

是否显示底部操作区。

默认值false

showHeaderbool

是否显示头部区域。

默认值true

windowMarginreal

对话框与窗口边缘的最小间距，单位为像素。

默认值16

enterDurationint

动画或显示持续时间，单位为毫秒；组件的绑定表达式给出实际用途。

默认值220

fullscreenbool

是否使用全屏显示或全窗口覆盖。

默认值false

closeOnEscapebool

是否允许按 Escape 关闭。

默认值true

destroyOnClosebool

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

默认值true

closeIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值EIcons.XMARK

modalPenetrablebool

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

默认值false

showCancelButtonbool

是否显示取消按钮。

默认值true

showConfirmButtonbool

是否显示确认按钮。

默认值true

closeOnClickOutsidebool

点击弹层外部时关闭。

默认值true

contentComponentComponent

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

默认值

展开默认值

Item { id: content  property var item: null  function create() { if (item) { item.destroy() item = null } if (!control.component) return const properties = {} Object.keys(control.parameters || {}).forEach(function(key) { properties[key] = control.parameters[key] }) item = control.component.createObject(content, properties) if (!item) { control.loadFailed("component-creation-failed") return } if ("dialogRef" in item) item.dialogRef = control item.width = Qt.binding(function() { return content.width }) }  implicitHeight: item ? Math.max(item.implicitHeight || 0, item.height || 0) : 0  Component.onCompleted: create()  Connections { function onComponentChanged() { content.create() }  function onParametersChanged() { content.create() }  target: control } }

confirmStyleTypeint

语义配色风格。

EStyle.Default
EStyle.Primary
EStyle.Success
EStyle.Info
EStyle.Warning
EStyle.Danger

默认值EStyle.Primary

modalOverlayColorcolor

模态或非模态遮罩颜色。

默认值EPaletteManager.BasePalette.modalOverlay

textColorcolor

文字颜色。

默认值EPaletteManager.ThemePalette.textRegular(ETheme.dark)

modelessOverlayColorcolor

模态或非模态遮罩颜色。

默认值EPaletteManager.BasePalette.modelessOverlay

titleColorcolor

标题颜色。

默认值EPaletteManager.ThemePalette.textPrimary(ETheme.dark)

borderColorcolor

边框颜色。

默认值EPaletteManager.ThemePalette.borderDefault(ETheme.dark)

cancelTextstring

取消按钮文字。

默认值EControlConfig.textFor(control, "Cancel2", ELocale.texts)

overflowbool

是否允许对话框拖动超出窗口范围。

默认值EControlConfig.optionFor(control, "dialog", "overflow", false)

confirmTextstring

确认按钮文字。

默认值EControlConfig.textFor(control, "Confirm2", ELocale.texts)

draggablebool

允许通过拖拽移动条目。

默认值EControlConfig.optionFor(control, "dialog", "draggable", false)

backgroundColorcolor

背景颜色。

默认值EPaletteManager.ThemePalette.surfaceComponent(ETheme.dark)

alignCenterbool

是否采用居中布局或居中文字。

默认值EControlConfig.optionFor(control, "dialog", "alignCenter", true)

loadedContentalias只读

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

默认值contentLoader.item

maximumDialogWidthreal只读

扣除窗口边距后的对话框最大宽度。

默认值

展开默认值

Overlay.overlay && Overlay.overlay.width > 0 ? Overlay.overlay.width - windowMargin * 2 : implicitWidth

callbackvar

完成回调 callback(result, accepted)。

默认值null

parametersvar

动态内容创建时注入的初始属性。

默认值({})

componentComponent

需要动态创建的 QML Component。

默认值null

resultDatavar

动态弹窗通过 resolve(value) 返回的数据。

默认值undefined

instancevar只读

已创建的动态内容实例，未创建时为 null。

默认值loadedContent ? loadedContent.item : null

信号

签名作用

closeRejected()

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

openAutoFocused()

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

closeAutoFocused()

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

loadFailed(string message)

加载数据失败时触发，message 为失败原因。

finished(var result, bool accepted)

动态对话框结束时触发，result 为返回数据，accepted 表示是否确认。

方法

签名作用

close()

关闭组件的面板或弹窗。

open()

打开组件的面板或弹窗。

resetPosition()

将对话框恢复到初始位置。

requestClose()

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

resolve(value)

确认动态对话框，并将 value 作为返回结果。

finish(accepted)

结束动态对话框，accepted 表示确认或取消。

openComponent(source, properties)

加载并显示 source 对应的对话框内容，properties 为初始属性。