第68节 步骤导航器 Stepper 开发

在 HarmonyOS ArkTS 中，步骤导航器 Stepper 是一个用于引导用户按照步骤完成任务的组件。以下是对Stepper组件开发的详细解析：

一、组件介绍

• Stepper组件：适用于多步骤任务的导航和进度追踪场景，如用户注册、表单填写等。它仅能包含子组件StepperItem，每个StepperItem代表一个步骤。
• StepperItem组件：作为Stepper的子组件，用于定义每个步骤的内容。它支持设置左侧文本按钮（prevLabel）和右侧文本按钮（nextLabel）的内容，以及步骤的状态（如normal、disabled等）。

二、组件属性

Stepper组件属性：

index ：设置当前显示的StepperItem的索引值，用于追踪进度。

事件回调：

• onFinish ：当步骤导航器最后一个StepperItem的nextLabel被点击时触发。
• onSkip ：当前显示的StepperItem状态为Skip时，nextLabel被点击时触发。
• onChange ：点击当前StepperItem的prevLabel或nextLabel进行步骤切换时触发。
• onNext ：点击StepperItem的nextLabel切换下一步骤时触发。
• onPrevious ：点击StepperItem的prevLabel切换上一步骤时触发。

StepperItem组件属性：

prevLabel ：设置左侧文本按钮内容，第一页没有左侧文本按钮，其余页默认值为“返回”。

nextLabel ：设置右侧文本按钮内容，最后一页默认值为“开始”，其余页默认值为“下一步”。

status ：设置步骤导航器nextLabel的显示状态，如normal、disabled、waiting、skip等。

三、组件使用

1. 定义Stepper和StepperItem组件：在ArkTS中，通过Stepper和StepperItem组件来定义多步骤导航。
2. 设置StepperItem内容：在每个StepperItem中，可以定义该步骤的内容，如文本、按钮等。
3. 设置事件回调：利用Stepper组件提供的事件回调，可以在步骤切换时触发相应的逻辑处理，如数据验证、页面跳转等。
4. 追踪进度：通过Stepper组件的index属性来设置当前显示的StepperItem的索引值，从而追踪任务进度。在步骤切换时，可以通过事件回调获取当前步骤和下一步骤的索引值，实现进度的实时更新。

四、注意事项

• StepperItem组件不支持设置通用宽度和高度属性，其大小由Stepper父组件决定。
• 从API Version 11开始，Stepper组件支持在原子化服务中使用。

五、示例代码

以下是一个简单的示例代码，展示了如何使用 Stepper 和 StepperItem 组件来创建一个步骤导航器：

@ Entry

@ Component

struct StepperExample {

@ State currentIndex : number = 0 ;

@ State firstState : ItemState = ItemState . Normal ;

@ State secondState : ItemState = ItemState . Normal ;

@ State thirdState : ItemState = ItemState . Normal ;

build () {

Stepper ({ index : this . currentIndex }) {

StepperItem () {

Column () {

Text ( 'Page One' ). itemTextStyle ()

Button ( 'change status:' + this . firstState )

. backgroundColor ( '#007dFF' )

. onClick (() => {

this . firstState = this . firstState === ItemState . Skip

? ItemState . Normal : ItemState . Skip ;

})

}. itemStyle ()

}. nextLabel ( 'Next' ). status ( this . firstState )

StepperItem () {

Column () {

Text ( 'Page Two' ). itemTextStyle ()

Button ( 'change status:' + this . secondState )

. backgroundColor ( '#007dFF' )

. onClick (() => {

this . secondState = this . secondState ===

ItemState . Disabled ? ItemState . Normal : ItemState . Disabled ;

})

}. itemStyle ()

}. nextLabel ( 'Next' ). prevLabel ( 'Previous' ). status ( this . secondState )

StepperItem () {

Column () {

Text ( 'Page Three' ). itemTextStyle ()

Button ( 'change status:' + this . thirdState )

. backgroundColor ( '#007dFF' )

. onClick (() => {

this . thirdState = this . thirdState ===

ItemState . Waiting ? ItemState . Normal : ItemState . Waiting ;

})

}. itemStyle ()

}. status ( this . thirdState )

// 可以继续添加更多的 StepperItem

}. backgroundColor ( '#F1F3F5' )

}

}

// 样式定义

@ Styles

function itemStyle () {

return {

width : '336px' ,

height : '621px' ,

marginTop : '48px' ,

marginLeft : '12px' ,

borderRadius : '24px' ,

backgroundColor : '#FFFFFF'

}

}

@ Extend ( Text )

function itemTextStyle () {

return {

fontColor : '#182431' ,

fontSize : '36px' ,

fontWeight : 500 ,

opacity : 0.4 ,

marginTop : '82px' ,

marginBottom : '40px'

}

}

在上面的示例代码中，我们定义了一个包含三个步骤的步骤导航器，并为每个步骤设置了不同的状态。

同时，我们还为每个步骤添加了一个按钮，用于更改该步骤的状态。

综上所述，通过合理设置 Stepper 和 StepperItem 组件的属性，并利用其提供的事件回调，可以轻松实现步骤导航与进度追踪功能。