HarmonyOS鸿蒙Next中步骤条的实现
HarmonyOS鸿蒙Next中步骤条的实现
class OptionsModel { title?: string; }
@Entry @Component struct StepsPage { scroller: Scroller = new Scroller() @State options: OptionsModel[] = []; @State active: number = 1 @State dividerSize: number = 58 @State activeColor: ResourceColor = “#ff1398a0” @State inactiveColor: ResourceColor = “#919191” @State activeDividerColor: ResourceColor = “#ff0b69b1” @State inactiveDividerColor: ResourceColor = “#D9D9D9” @State optionsData: OptionsModel[] = [{ title: ‘已发布’ }, { title: ‘已响应’ }, { title: ‘已完成’ }]
@Builder buildTitleBar() { Text(‘Steps’) .fontSize(24) .fontWeight(FontWeight.Medium) .height(56) .width(‘100%’) .padding({ left: 16, right: 16 }) }
aboutToAppear(): void { this.options = this.optionsData }
@Builder customStep(option: OptionsModel, index: number) { Column({ space: 4 }) { Text(option.title) .fontSize(14) .fontColor(index <= this.active ? this.activeColor : “#919191”) Row() { Row() {
}
.width(9)
.height(9)
.borderRadius(9)
.backgroundColor(index <= this.active ? "#ff0b69b1" : "#CACACA")
}
.width(15)
.height(15)
.borderRadius(15)
.backgroundColor(index <= this.active ? "rgba(0, 197, 209, 0.5)" : "#e1e2e4")
.justifyContent(FlexAlign.Center)
}
.width('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)}
build() { Column() { Column() { Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween, }) { ForEach(this.options, (option: OptionsModel, index: number) => { this.customStep(option, index) if (index < this.options.length - 1) { Divider() .strokeWidth(1) .color(index < this.active ? this.activeDividerColor : this.inactiveDividerColor) .width(180) .margin({ top: 27, bottom: 10 }) } }) } .width(‘100%’) .padding({ top: 20, bottom: 20 }) } .width(‘100%’) .height(‘100%’) .backgroundColor("#F3F4F5") .justifyContent(FlexAlign.Center) .padding({ left: 16, right: 16 })
}
.width('100%')
.height('100%')
.backgroundColor("#F3F4F5")
.justifyContent(FlexAlign.Center)
.padding({ left: 16, right: 16 })} }
参考自 三方库 https://ohpm.openharmony.cn/#/cn/detail/@hw-agconnect%2Fui-steps
在HarmonyOS鸿蒙Next中，步骤条的实现主要依赖于StepIndicator组件。StepIndicator用于展示多步骤流程的进度，用户可以通过它清晰地了解当前所处的步骤以及后续步骤。
StepIndicator组件的使用步骤如下：
- 引入组件：首先需要在代码中引入
StepIndicator组件。
import { StepIndicator } from '@ohos/stepindicator';- 定义步骤：通过
StepIndicator的steps属性定义步骤内容。每个步骤可以包含标题、描述等信息。
const steps = [
{ title: 'Step 1', description: 'Initial setup' },
{ title: 'Step 2', description: 'Configuration' },
{ title: 'Step 3', description: 'Final review' }
];- 设置当前步骤：通过
currentStep属性设置当前所处的步骤。
const currentStep = 1; // 表示当前处于第二步- 渲染组件：将
StepIndicator组件添加到页面中，并传入定义好的步骤和当前步骤。
<StepIndicator steps={steps} currentStep={currentStep} />- 样式定制（可选）：可以通过
style属性对步骤条的样式进行定制，例如颜色、字体大小等。
const customStyle = {
stepIndicator: { backgroundColor: '#f0f0f0' },
activeStep: { color: '#007bff' }
};
<StepIndicator steps={steps} currentStep={currentStep} style={customStyle} />通过以上步骤，可以在HarmonyOS鸿蒙Next中实现一个基本的步骤条。StepIndicator组件提供了灵活的配置选项，可以根据具体需求进行定制。
更多关于HarmonyOS鸿蒙Next中步骤条的实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
