组件：步骤条

步骤条组件用于引导用户按流程完成多步骤任务，提供清晰的进度指示和导航能力。支持水平和垂直两种布局方向，可自定义步骤标题、描述，支持点击切换步骤，并提供了丰富的回调事件，便于在步骤切换时执行业务逻辑。

典型使用场景：

用户注册/登录流程（填写信息 → 验证身份 → 注册完成）
多步表单（基本信息 → 详细信息 → 确认提交）
订单流程（购物车 → 确认订单 → 支付 → 完成）
向导式操作（配置 → 预览 → 执行）

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

操作	属性/方法	示例
设置步骤条方向	`方向`	`步骤条1.方向 = "vertical"`
设置当前步骤（索引从0开始）	`当前步骤`	`步骤条1.当前步骤 = 2`
启用/禁用点击切换	`可点击`	`步骤条1.可点击 = 真`
添加单个步骤	`添加步骤(标题, 描述)`	`步骤条1.添加步骤("登录", "请输入账号密码")`
批量设置步骤	`置步骤数组(步骤数组)`	`步骤条1.置步骤数组([{title:"步骤1", description:"描述1"}, ...])`
跳到下一步	`下一步()`	`步骤条1.下一步()`
跳回上一步	`上一步()`	`步骤条1.上一步()`
设置切换回调	`置步骤被切换回调(回调函数)`	`步骤条1.置步骤被切换回调((源对象, 索引) => { ... })`

样式美化参考

以下为常用样式组合示例，可根据实际需求调整：

布局方向：

水平步骤条（默认）：方向 = "horizontal"，适合空间宽裕的场景，步骤从左到右排列。
垂直步骤条：方向 = "vertical"，适合侧边栏或空间有限的场景，步骤从上到下排列。

自定义样式（通过继承自视图的属性）：

设置整体背景：背景颜色 = "#fafafa"，边框圆角 = 8
设置步骤文本颜色：文本颜色 = "#1890ff"（当前激活步骤默认高亮）
调整内边距：内边距 = "16px"
设置字体大小：字体大小 = 14

步骤条内部样式（如步骤图标、连线颜色）由组件内部自动管理，继承属性主要作用于整体容器。如需深度自定义，可结合 CSS 样式类或 内联样式 进行微调。

基础示例

最简单的步骤条，展示三个步骤，默认选中第二个。

变量 步骤条1 = 创建 步骤条()
步骤条1.左边 = 100
步骤条1.顶边 = 100
步骤条1.宽度 = 500

' 添加步骤
步骤条1.添加步骤("登录", "使用账号登录")
步骤条1.添加步骤("验证", "短信验证码验证")
步骤条1.添加步骤("完成", "完成身份认证")

' 设置当前步骤（索引从0开始，此处设为第2步）
步骤条1.当前步骤 = 1

' 添加到父容器
添加组件(步骤条1)

综合示例：多步注册表单

本示例模拟一个用户注册流程，包含三个步骤（填写信息 → 验证邮箱 → 注册完成），并通过按钮控制步骤切换，同时展示回调事件的使用。

' ========== 创建步骤条 ==========
变量 步骤条1 = 创建 步骤条()
步骤条1.左边 = 20
步骤条1.顶边 = 20
步骤条1.宽度 = 600
步骤条1.方向 = "horizontal"
步骤条1.添加步骤("填写信息", "")
步骤条1.添加步骤("验证邮箱", "")
步骤条1.添加步骤("完成", "")
步骤条1.当前步骤 = 0
添加组件(步骤条1)

' ========== 创建步骤内容容器 ==========
变量 内容容器 = 创建 绝对布局()
内容容器.左边 = 20
内容容器.顶边 = 100
内容容器.宽度 = 600
内容容器.高度 = 200
内容容器.背景颜色 = "#f9f9f9"
内容容器.边框圆角 = 6
内容容器.内边距 = 20
添加组件(内容容器)

' ========== 创建步骤对应的面板（仅演示，实际可动态切换） ==========
' 面板1：填写信息
变量 面板1 = 创建 标签()
面板1.文本 = "第一步：请填写您的用户名和密码"
面板1.字体大小 = 16

变量 面板2 = 创建 标签()
面板2.文本 = "第二步：请点击发送验证码到您的邮箱"
面板2.字体大小 = 16

变量 面板3 = 创建 标签()
面板3.文本 = "第三步：注册成功！欢迎加入"
面板3.字体大小 = 16
面板3.文本颜色 = "#52c41a"

' 默认显示第一个面板
内容容器.添加组件(面板1)

' ========== 创建底部控制按钮 ==========
变量 上一步按钮 = 创建 按钮()
上一步按钮.左边 = 20
上一步按钮.顶边 = 320
上一步按钮.宽度 = 80
上一步按钮.高度 = 36
上一步按钮.文本 = "上一步"
上一步按钮.禁用 = 真  ' 初始禁用
添加组件(上一步按钮)

变量 下一步按钮 = 创建 按钮()
下一步按钮.左边 = 120
下一步按钮.顶边 = 320
下一步按钮.宽度 = 80
下一步按钮.高度 = 36
下一步按钮.文本 = "下一步"
下一步按钮.背景颜色 = "#1890ff"
下一步按钮.文本颜色 = "#ffffff"
添加组件(下一步按钮)

' ========== 步骤切换逻辑 ==========
' 更新面板显示的函数
函数 更新面板(步骤索引)
    ' 清空容器
    内容容器.清空()
    
    判断(步骤索引)
        分支 0
            内容容器.添加组件(面板1)
        分支 1
            内容容器.添加组件(面板2)
        分支 2
            内容容器.添加组件(面板3)
    结束 判断
    
    ' 更新按钮状态
    如果(步骤索引 == 0)
        上一步按钮.禁用 = 真
    否则
        上一步按钮.禁用 = 假
    结束 如果
    
    如果(步骤索引 == 2)
        下一步按钮.文本 = "完成"
    否则
        下一步按钮.文本 = "下一步"
    结束 如果
结束 函数

' 上一步按钮点击
上一步按钮.置被单击回调((源对象, 事件对象) => {
    变量 当前 = 步骤条1.当前步骤
    如果(当前 > 0)
        步骤条1.当前步骤 = 当前 - 1
        更新面板(步骤条1.当前步骤)
    结束 如果
})

' 下一步按钮点击
下一步按钮.置被单击回调((源对象, 事件对象) => {
    变量 当前 = 步骤条1.当前步骤
    如果(当前 < 2)
        步骤条1.当前步骤 = 当前 + 1
        更新面板(步骤条1.当前步骤)
    否则
        ' 完成所有步骤
        弹出提示("注册流程已完成！")
    结束 如果
})

' ========== 步骤切换回调（当用户点击步骤标题时触发） ==========
' 前提：需将 可点击 属性设为 真
步骤条1.可点击 = 真
步骤条1.置步骤被切换回调((源对象, 新索引) => {
    ' 当用户直接点击步骤标题时，同步更新面板
    更新面板(新索引)
})

' 初始化显示
更新面板(0)

属性详解

方向

类型： 文本型
说明： 设置或获取步骤条的排列方向，可选值 "horizontal"（水平，默认）或 "vertical"（垂直）。

当前步骤

类型： 数值型
说明： 设置或获取当前激活的步骤索引，索引从 0 开始。例如步骤总数为3，则有效值为 0、1、2。

可点击

类型： 逻辑型
说明： 设置或获取是否允许用户直接点击步骤标题来切换步骤。默认为 假（禁止点击切换），设置为 真 后用户可通过点击标题跳转到对应步骤，并触发 置步骤被切换回调 事件。

函数详解

添加步骤(标题, 描述)

功能： 向步骤条末尾添加一个新的步骤项。
参数：
- 标题：文本型，必填，步骤的标题。
- 描述：文本型，可选，步骤的补充描述（可省略）。
返回值： 数值型，新添加步骤的索引位置（从0开始）。

示例：

变量 索引 = 步骤条1.添加步骤("支付", "请选择支付方式")

置步骤数组(步骤数组)

功能： 批量设置步骤，会替换当前所有步骤。
参数： 步骤数组，对象数组，每个元素须包含 title（标题）和可选的 description（描述）。

示例：

步骤条1.置步骤数组([
    { title: "第一步", description: "描述1" },
    { title: "第二步", description: "描述2" }
])

下一步()

功能： 跳转到当前步骤的下一个步骤。如果已是最后一步，则无效果。
返回值： 无。
示例： 步骤条1.下一步()

上一步()

功能： 跳转到当前步骤的上一个步骤。如果已是第一步，则无效果。
返回值： 无。
示例： 步骤条1.上一步()

置步骤被切换回调(回调函数)

功能： 设置当步骤被切换（无论是通过代码设置 当前步骤、调用 下一步/上一步，还是用户点击可点击的步骤标题）时触发的回调函数。
参数： 回调函数，拉姆达表达式，格式为 (源对象, 当前步骤索引) => { ... }。
- 源对象：触发事件的步骤条组件本身。
- 当前步骤索引：切换后的新步骤索引。

示例：

步骤条1.置步骤被切换回调((源对象, 索引) => {
    调试输出("切换到第 " + (索引 + 1) + " 步")
})

事件：步骤被切换(源对象,当前步骤索引)

功能： 当步骤被切换时触发，与 置步骤被切换回调 等效。此事件可用于 .spldg 设计文件中定义的组件，采用 VB6 风格书写。
参数：
- 源对象：触发事件的步骤条组件。
- 当前步骤索引：切换后的步骤索引。

示例（仅限设计文件中的组件）：

事件 步骤条1.步骤被切换(源对象, 当前步骤索引)
    调试输出("当前步骤：" + 当前步骤索引)
结束 事件

⚠️ 注意事项

索引从0开始：当前步骤 属性以及回调中的索引均从 0 开始计数，与数组索引一致。
方向默认水平：若不设置 方向 属性，默认为水平排列。垂直方向适合侧边栏或移动端窄屏。
点击切换需启用：若希望用户点击步骤标题进行切换，必须将 可点击 属性设为 真，否则点击无效。
回调触发时机：置步骤被切换回调 会在步骤发生变化时触发，包括调用 下一步/上一步、直接赋值 当前步骤 以及用户点击（若启用）。注意避免在回调中再次修改 当前步骤 导致死循环。
步骤数量动态变化：使用 添加步骤 和 置步骤数组 可以动态增删步骤，但需注意更新后 当前步骤 的有效性（若超过新总数，需手动修正）。
样式继承：组件自身的主题样式由框架控制，如需自定义颜色、字体等，可参考 视图 类提供的属性进行整体调整，但内部步骤图标和连线的样式暂时不支持细粒度定制。

轻语言网站开发SDK文档

组件：步骤条

📌 继承自视图的成员速查

常用操作速查

样式美化参考

基础示例

综合示例：多步注册表单

属性详解

方向

当前步骤

可点击

函数详解

添加步骤(标题, 描述)

置步骤数组(步骤数组)

下一步()

上一步()

置步骤被切换回调(回调函数)

事件：步骤被切换(源对象,当前步骤索引)

⚠️ 注意事项

相关文档