华为仓颉鸿蒙HarmonyOS NEXT原生UI基础组件Stepper

步骤导航器。当完成一个任务需要多个步骤时，可以使用步骤导航器展示当前进展。
说明
Stepper暂不支持混合页面场景。
子组件
仅能包含子组件StepperItem。
构造函数
功能说明:构造一个步骤导航器组件.
init(UInt32, () => Unit)
public init(index: UInt32, content: () -> Unit)参数表格说明：
参数名
参数类型
必填
参数描述
index
UInt32
否
设置步骤导航器当前显示StepperItem的索引值。
默认值：0
content
() => Unit
是
将传入的值赋给从ContainerBase继承的child属性.
init( () => Unit)
public init(content: () -> Unit)参数表格说明：
参数名
参数类型
必填
参数描述
content
() => Unit
是
将传入的值赋给从ContainerBase继承的child属性.
函数
onFinish( () => void )
public func onFinish(callback: ()->Unit): This函数功能说明： 当步骤导航器最后一个步骤完成时,触发该事件。
函数参数表格说明：
参数名
参数类型
必填
默认值
描述
callback
() => void
是
无
被触发的回调函数。
onSkip( () => void)
public func onSkip(callback: ()->Unit): This函数功能说明：当前步骤导航器下一步按钮状态为skip，即可跳过时，点击右侧跳过按钮触发该事件。
函数参数表格说明：
参数名
参数类型
必填
默认值
描述
callback
() => void
是
无
被触发的回调函数。
onChange( (UInt32,UInt32) => Unit)
public func onChange(callback: (UInt32, UInt32)->Unit): This函数功能说明：点击当前StepperItem的prevLabel进行步骤切换时触发该回调；或点击当前StepperItem的nextLabel，当前页面不为步骤导航器最后一个StepperItem且ItemState属性为Normal时，触发该回调。
函数参数表格说明：
参数名
参数类型
必填
默认值
描述
callback
(UInt32,UInt32) => Unit
是
无
被触发的回调函数。
onNext( (UInt32,UInt32) => Unit)
public func onChange(callback: (UInt32, UInt32)->Unit): This函数功能说明：点击StepperItem的nextLabel切换下一步骤时，当前页面不为步骤导航器最后一个StepperItem且ItemState属性为Normal时，触发该回调。
函数参数表格说明：
参数名
参数类型
必填
默认值
描述
callback
(UInt32,UInt32) => Unit
是
无
被触发的回调函数。
onPrevious( (UInt32,UInt32) => Unit)
public func onNext(callback: (UInt32, UInt32)->Unit): This函数功能说明：点击StepperItem的prevLabel切换上一步骤时触发该回调。
函数参数表格说明：
参数名
参数类型
必填
默认值
描述
callback
(UInt32,UInt32) => Unit
是
无
被触发的回调函数。
示例
import ohos.base.*
import ohos.component.*
import ohos.state_manage.*
import ohos.state_macro_manage.*

@Entry
@Component
class MyView {

    @State var currentIndex: UInt32  = 0
    @State var firstState: ItemState = ItemState.Normal
    @State var secondState: ItemState = ItemState.Normal
    @State var thirdState: ItemState = ItemState.Normal

    func build() {
        Column() {
            Stepper(currentIndex) {
                // 第一个步骤页
                StepperItem() {
                    Column() {
                      Text("Page One").fontSize(35).fontColor(0x182431)
                      Button("change status: ${this.firstState.getValue()}")
                        .backgroundColor(0x007dFF)
                        .onClick({ evt =>
                            if(this.firstState.toString() == "Skip") {
                                this.firstState = ItemState.Normal
                            } else {
                                this.firstState = ItemState.Skip
                            }
                        })
                    }
                }
                .nextLabel("下一页")
                .status(this.firstState)
                // 第二个步骤页
                StepperItem() {
                    Column() {
                      Text("Page Two").fontSize(35).fontColor(0x182431)
                      Button("change status: ${this.secondState.getValue()}")
                        .backgroundColor(0x007dFF)
                        .onClick({ evt =>
                            if(this.secondState.toString() == "Disabled") {
                                this.secondState = ItemState.Normal
                            } else {
                                this.secondState = ItemState.Disabled
                            }
                        })
                    }
                }
                .nextLabel("下一页")
                .prevLabel("上一页")
                .status(this.secondState)
                // 第三个步骤页
                StepperItem() {
                    Column() {
                      Text("Page Three").fontSize(35).fontColor(0x182431)
                      Button("change status: ${this.thirdState.getValue()}")
                        .backgroundColor(0x007dFF)
                        .onClick({ evt =>
                            if(this.thirdState.toString() == "Waiting") {
                                this.thirdState = ItemState.Normal
                            } else {
                                this.thirdState = ItemState.Waiting
                            }
                        })
                    }
                }
                .nextLabel("下一页")
                .prevLabel("上一页")
                .status(this.thirdState)
                // 第四个步骤页
                StepperItem() {
                    Column() {
                        Text("Page Four").fontSize(35).fontColor(0x182431)
                    }
                }
            }
            .backgroundColor(0xF1F3F5)
            .onFinish({=>
                // 此处可处理点击最后一页的Finish时的逻辑，例如路由跳转等
                AppLog.info("onFinish")
            })
            .onSkip({=>
                // 此处可处理点击跳过时的逻辑，例如动态修改Stepper的index值使其跳转到某一步骤页等
                AppLog.info("onSkip")
            })
            .onChange({prevIndex: UInt32, index: UInt32 =>
                if(index != 0){
                    currentIndex = index
                }
            })
        }
        .width(100.percent)
        .padding(top: 5)
    }
}

​
如对您有帮助，帮忙点个“在看 、关注” 让更多的人受益~！
技术交流群可加wx“LB-9191” 备注cangjie