基本概念

Stepper 组件：在 HarmonyOS(假设 ArkTS 相关内容用于 HarmonyOS 开发)中，Stepper 是一个用于实现步骤导航或分步操作的组件。它提供了一种清晰的方式来引导用户完成一系列相关的任务，比如多步骤的表单填写、安装向导等。

StepperItem 组件：StepperItem 是 Stepper 的子组件，用于定义每个步骤的具体内容。每个 StepperItem 通常包含与该步骤相关的标题、描述、输入框、按钮等元素。

Stepper 常用属性

orientation：

功能：用于确定 Stepper 的布局方向，是水平(Horizontal)还是垂直(Vertical)。

示例代码：

Stepper({orientation: "Vertical"}) {
    StepperItem() {
        // 第一个步骤的内容
    }
    StepperItem() {
        // 第二个步骤的内容
    }
}

在这个例子中，Stepper 的布局方向为垂直，两个 StepperItem 会垂直排列，引导用户按顺序完成步骤。

• currentIndex：
• 功能：设置或获取当前处于活动状态的 StepperItem 的索引。默认值通常为 0，表示第一个 StepperItem 是初始活动状态。
• 示例代码：

@State currentIndex: number = 1;
Stepper({currentIndex: this.currentIndex}) {
    StepperItem() {
        // 第一个步骤的内容
    }
    StepperItem() {
        // 第二个步骤的内容
    }
}

这里通过@State变量currentIndex将初始活动的 StepperItem 设置为第二个(索引为 1)。

StepperItem 常用属性

title：

功能：用于设置步骤的标题，清晰地告知用户该步骤的主要内容。

示例代码：

StepperItem({title: "填写个人信息"}) {
    // 步骤内的具体内容，如姓名、年龄等输入框
}

这个 StepperItem 的标题为 “填写个人信息”，用户可以直观地知道该步骤的任务。

• description：
• 功能：提供步骤的详细描述，用于补充标题信息，让用户更好地理解该步骤的要求或目的。
• 示例代码：

StepperItem({
    title: "配置网络",
    description: "请输入Wi - Fi名称和密码进行网络连接。"
}) {
    // 网络名称和密码输入框等内容
}

除了标题 “配置网络”，还通过描述进一步说明用户需要在这个步骤中输入 Wi - Fi 名称和密码。

事件处理

onChange 事件(Stepper)：

功能：当用户切换 StepperItem(例如通过点击步骤指示器或导航按钮)时触发。可以用于更新页面状态或执行与步骤切换相关的逻辑。

示例代码：

@Entry
@Component
struct StepperExample {
    @State currentIndex: number = 0;
    build() {
        Stepper({
            onChange: (index: number) => {
                this.currentIndex = index;
            },
            currentIndex: this.currentIndex
        }) {
            StepperItem() {
                // 第一个步骤的内容
            }
            StepperItem() {
                // 第二个步骤的内容
            }
        }
    }
}

在这个例子中，当 Stepper 的活动步骤改变时，onChange事件会更新currentIndex状态变量，以跟踪当前活动步骤。

应用场景

多步骤表单填写：在注册或信息提交页面，使用 Stepper 和 StepperItem 可以将复杂的表单拆分为多个简单的步骤，如基本信息填写、联系方式填写、确认信息等步骤，提高用户体验。

安装向导：对于软件或设备的安装过程，通过 Stepper 展示如安装前准备、安装中步骤、安装后配置等多个阶段，引导用户顺利完成安装。

购物流程引导：在电商应用中，购物流程可能包括选择商品、填写收货信息、选择支付方式等步骤，Stepper 可以清晰地引导用户完成整个购物流程。