步骤导航器。当完成一个任务需要多个步骤时，可以使用步骤导航器展示当前进展。
说明
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)
}
}
如对您有帮助，帮忙点个“在看 、关注” 让更多的人受益~！
