组件/导航组件引入于 1.2.0

EWizard 步骤向导

import EUI 1.0

示例与代码

分步配置

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EWizard { id: wizard width: Math.min(520, parent ? parent.width : 520) model: [{title: qsTr("基本信息"), component: firstPage}, {title: qsTr("确认配置"), component: reviewPage}] Component { id: firstPage EInput { placeholderText: qsTr("输入名称后才能继续") } } Component { id: reviewPage EText { text: qsTr("确认配置") } } }

效果

运行代码，体验组件交互

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

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

切换前校验

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EWizard { id: wizard width: Math.min(520, parent ? parent.width : 520) beforeLeave: function(from, to) { return to <= from || wizard.currentPage.text.length > 0 } model: [{title: qsTr("基本信息"), component: firstPage}, {title: qsTr("确认配置"), component: reviewPage}] Component { id: firstPage EInput { placeholderText: qsTr("输入名称后才能继续") } } Component { id: reviewPage EText { text: qsTr("确认配置") } } }

效果

运行代码，体验组件交互

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

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

异步校验

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EWizard { id: wizard width: Math.min(520, parent ? parent.width : 520) beforeLeave: function() { return Promise.resolve(true) } model: [{title: qsTr("基本信息"), component: firstPage}, {title: qsTr("确认配置"), component: reviewPage}] Component { id: firstPage EInput { placeholderText: qsTr("输入名称后才能继续") } } Component { id: reviewPage EText { text: qsTr("确认配置") } } }

效果

运行代码，体验组件交互

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

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

允许跳转步骤

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EWizard { id: wizard width: Math.min(520, parent ? parent.width : 520) allowJump: true model: [{title: qsTr("基本信息"), component: firstPage}, {title: qsTr("确认配置"), component: reviewPage}] Component { id: firstPage EInput { placeholderText: qsTr("输入名称后才能继续") } } Component { id: reviewPage EText { text: qsTr("确认配置") } } }

效果

运行代码，体验组件交互

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

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

跳过禁用步骤

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EWizard { id: wizard width: Math.min(520, parent ? parent.width : 520) model: [{title: qsTr("基本信息"), component: firstPage}, {title: qsTr("附加配置"), disabled: true}, {title: qsTr("确认配置"), component: reviewPage}] Component { id: firstPage EInput { placeholderText: qsTr("输入名称后才能继续") } } Component { id: reviewPage EText { text: qsTr("确认配置") } } }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

allowJumpbool

允许点击步骤条进行跳转，仍执行 beforeLeave 校验。

默认值false

beforeLeavevar

步骤切换前回调 (from, to)，支持布尔值或 Promise；false 阻止切换。

默认值null

currentIndexint

当前选中的命令或步骤索引。

-1：未选择
0 起：条目索引

默认值0

enabledbool

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

默认值true

finishTextstring

完成按钮文字。

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

fontfont

字体配置，控制字体、字号及文字样式。

常用字段：
family、pixelSize、pointSize
bold、italic、weight
underline、strikeout
letterSpacing、wordSpacing

默认值Qt.font({ pixelSize: 16 })

heightreal

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

默认值implicitHeight

lazybool

首次进入步骤时才创建其内容，离开后保留已创建页面。

默认值true

modelvar

项目模型；组件示例及使用指南说明其字段。

默认值[]

nextTextstring

下一步按钮文字。

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

previousTextstring

上一步按钮文字。

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

showCancelbool

显示取消按钮；点击发送 canceled 信号。

默认值true

visiblebool

是否显示组件。

默认值true

widthreal

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

默认值implicitWidth

busybool只读

等待异步校验期间为 true，此时阻止重复导航。

默认值由运行时计算

completebool只读

向导是否已完成；reset() 清除此状态。

默认值由运行时计算

currentPagevar只读

当前步骤加载的内容对象。

默认值由运行时计算

hasNextbool只读

当前步骤之后是否存在可用步骤。

默认值由运行时计算

hasPreviousbool只读

当前步骤之前是否存在可用步骤。

默认值由运行时计算

pagesvar只读

有效的步骤模型数组。

默认值由运行时计算

信号

签名作用

canceled()

取消当前操作时触发。

completed()

向导完成时触发，可在此保存数据或结束流程。

stepChanged(int index)

当前步骤变化时触发，index 为新的步骤索引。

navigationRejected(int index, string reason)

步骤切换被拒绝时触发，index 为目标步骤，reason 为拒绝原因。

方法

签名作用

previous()

切换到上一项或上一步。

finish()

尝试完成向导，并执行完成校验。

next()

切换到下一项或下一步。

reset()

恢复组件的初始状态。

navigate(index)

尝试切换到 index 指定的步骤，切换前执行步骤校验。