当一个任务需要多个步骤时,可以使用stepper组件展示当前进展。
创建stepper组件
在pages/index目录下的hml文件中创建一个stepper组件。
<!-- xxx.hml -->
<div class="container">
<stepper>
<stepper-item>
<text>Step 1</text>
</stepper-item>
<stepper-item>
<text>Step 2</text>
</stepper-item>
</stepper>
</div>
/* xxx.css */
.container {
width:100%;
height:100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
text{
width: 100%;
height: 100%;
text-align: center;
}
设置index属性
页面默认显示索引值为index的步骤。
<!-- xxx.hml -->
<div class="container">
<stepper index="2">
<stepper-item>
<text>stepper-item1</text>
</stepper-item>
<stepper-item>
<text>stepper-item2</text>
</stepper-item>
<stepper-item>
<text>stepper-item3</text>
</stepper-item>
</stepper>
</div>
/* xxx.css */
.container {
width:100%;
height:100%;
flex-direction: column;
background-color: #F1F3F5;
}
text{
width: 100%;
height: 100%;
text-align: center;
}
通过设置label属性,自定义stepper-item的提示按钮。
<!-- xxx.hml -->
<div class="container">
<stepper index="1">
<stepper-item label="{{label_1}}">
<text>stepper-item1</text>
</stepper-item>
<stepper-item label="{{label_2}}">
<text>stepper-item2</text>
</stepper-item>
<stepper-item label="{{label_3}}">
<text>stepper-item3</text>
</stepper-item>
<stepper-item>
<text>stepper-item4</text>
</stepper-item>
</stepper>
</div>
/* xxx.css */
.container {
width:100%;
height:100%;
flex-direction: column;
background-color: #F1F3F5;
}
text{
width: 100%;
height: 100%;
text-align: center;
}
// xxx.js
export default {
data: {
label_1:{
nextLabel: 'NEXT',
status: 'normal'
},
label_2:{
prevLabel: 'BACK',
nextLabel: 'NEXT',
status: 'normal'
},
label_3:{
prevLabel: 'BACK',
nextLabel: 'END',
status: 'disabled'
},
},
}
设置样式
stepper组件默认填充父容器,通过border和background-color设置边框、背景色。
<!-- xxx.hml -->
<div class="container" >
<div class="stepperContent">
<stepper class="stepperClass">
<stepper-item>
<text>stepper-item1</text>
</stepper-item>
</stepper>
</div>
</div>
/* xxx.css */
.container {
width:100%;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color:#F1F3F5;
}
.stepperContent{
width: 300px;
height: 300px;
}
.stepperClass{
border:1px solid silver ;
background-color: white;
}
text{
width: 100%;
height: 100%;
text-align: center;
}
添加事件
stepper分别添加finish,change,next,back,skip事件。
-
当change与next或back同时存在时,会先执行next或back事件再去执行change事件。
-
重新设置index属性值时要先清除index的值再重新设置,否则检测不到值的改变。
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;">
<div >
<stepper onfinish="stepperFinish" onchange="stepperChange" onnext="stepperNext" onback="stepperBack" onskip="stepperSkip" id="stepperId" index="{{index}}">
<stepper-item>
<text>stepper-item1</text>
<button value="skip" onclick="skipClick"></button>
</stepper-item>
<stepper-item>
<text>stepper-item2</text>
<button value="skip" onclick="skipClick"></button>
</stepper-item>
<stepper-item>
<text>stepper-item3</text>
</stepper-item>
</stepper>
</div>
</div>
/* xxx.css */
.doc-page {
width:100%;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
stepper-item{
width: 100%;
flex-direction: column;
align-self: center;
justify-content: center;
}
text{
margin-top: 45%;
justify-content: center;
align-self: center;
margin-bottom: 50px;
}
button{
width: 80%;
height: 60px;
margin-top: 20px;
}
// xxx.js
import promptAction from '@ohos.promptAction';
export default {
data: {
index:0,
},
stepperSkip(){
this.index = null;
this.index=2;
},
skipClick(){
this.$element('stepperId').setNextButtonStatus({status: 'skip', label: 'SKIP'});
},
stepperFinish(){
promptAction.showToast({
message: 'All Finished'
})
},
stepperChange(e){
console.log("stepperChange"+e.index)
promptAction.showToast({
// index表示当前步骤的序号
message: 'Previous step: '+e.prevIndex+"-------Current step:"+e.index
})
},
stepperNext(e){
console.log("stepperNext"+e.index)
promptAction.showToast({
// pendingIndex表示将要跳转的序号
message: 'Current step:'+e.index+"-------Next step:"+e.pendingIndex
})
var index = {pendingIndex:e.pendingIndex }
return index;
},
stepperBack(e){
console.log("stepperBack"+e.index)
var index = {pendingIndex: e.pendingIndex }
return index;
}
}
场景示例
在本场景中,开发者可以在界面上点击选择并实时显示选择结果,点击下一步按钮后可动态修改页面的字体颜色和字体大小。
用stepper组件实现分步,再创建 Toggle 组件实现选择显示功能,再使用 Select 组件实现改变选中值动态修改字体颜色或大小。
<!-- xxx.hml -->
<div class="container">
<stepper id="mystep" index="0" onfinish="back" style="text-color: indigo;">
<stepper-item label="{{label1}}">
<div style="flex-direction: column;padding: 0px 10px;">
<text class="text" style="margin-top: 10%;text-align: center;width: 100%;">Select error types:</text>
<text style="margin-top: 20px;padding: 10px">
<span>{{error}}</span>
</text>
<div style="justify-content: space-around;flex-wrap: wrap;">
<toggle for="{{togglelist1}}" value="{{$item}}" class="tog" onchange="multiTog({{$item}})"></toggle>
</div>
</div>
</stepper-item>
<stepper-item label="{{label2}}">
<div style="flex-direction: column;align-items: center;">
<text class="txt" style="margin-top: 10%;">Toggle</text>
<div style="justify-content: space-around;flex-wrap: wrap;;margin-top:10%">
<toggle class="tog" for="{{togglelist1}}" value="{{$item}}" style="text-color: {{tcolor}};font-size: {{tsize}}; font-style: {{tstyle}};font-weight: {{tweight}};font-family: {{tfamily}};">
</toggle>
</div>
<div style="flex-wrap: wrap;width: 700px;margin-top:10%">
<div style="flex-direction: column;width: 350px;height: 185px;align-items: center;">
<text class="txt">text-color</text>
<select onchange="settcolor">
<option for="{{color_list}}" value="{{$item}}">{{$item}}</option>
</select>
</div>
<div style="flex-direction: column;width: 350px;height: 185px;align-items: center;">
<text class="txt">font-size</text>
<select onchange="settsize">
<option for="{{size_list}}" value="{{$item}}">{{$item}}</option>
</select>
</div>
</div>
</div>
</stepper-item>
</stepper>
</div>
/* xxx.css */
.container {
width:100%;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color:#F1F3F5;
}
.dvd {
stroke-width: 8px;
color: orangered;
margin: 65px;
}
.tog{
margin-right: 20px;
margin-top: 30px;
}
// xxx.js
import promptAction from '@ohos.promptAction';
import router from '@ohos.router';
let myset = new Set();
export default {
data: {
error: '',
tcolor:'#FF4500',
color_list:['#FF4500','#5F9EA0','#0000FF'],
tsize: '12px',
size_list: ['12px', '30px', '8px', '50px'],
label1: {
prevLabel: 'The text on the left of the starting step is invalid.',
nextLabel: 'Toggle'
},
label2: {
prevLabel: 'toggle',
nextLabel: 'END'
},
togglelist1:['Program error', 'Software', 'System', 'Application'],
},
multiTog(arg, e) {
this.error = ' '
if (e.checked) {
myset.add(arg)
} else {
myset.delete(arg)
}
for (let item of myset) {
this.error += item + ' '
}
},
settcolor(e) {
this.tcolor = e.newValue
},
settsize(e) {
this.tsize = e.newValue
}
}
鸿蒙全栈开发全新学习指南
有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以要有一份实用的鸿蒙(HarmonyOS NEXT)学习路线与学习文档用来跟着学习是非常有必要的。
针对一些列因素,整理了一套纯血版鸿蒙(HarmonyOS Next)全栈开发技术的学习路线,包含了鸿蒙开发必掌握的核心知识要点,内容有(ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、WebGL、元服务、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植等等)鸿蒙(HarmonyOS NEXT)技术知识点。
本路线共分为四个阶段:
第一阶段:鸿蒙初中级开发必备技能
第二阶段:鸿蒙南北双向高工技能基础:gitee.com/MNxiaona/733GH
第三阶段:应用开发中高级就业技术
第四阶段:全网首发-工业级南向设备开发就业技术:gitee.com/MNxiaona/733GH
《鸿蒙 (Harmony OS)开发学习手册》(共计892页)
如何快速入门?
1.基本概念
2.构建第一个ArkTS应用
3.……
开发基础知识:gitee.com/MNxiaona/733GH
1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……
基于ArkTS 开发
1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……
鸿蒙开发面试真题(含参考答案):gitee.com/MNxiaona/733GH
鸿蒙入门教学视频:
美团APP实战开发教学:gitee.com/MNxiaona/733GH
写在最后
- 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
- 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
- 关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。
- 想要获取更多完整鸿蒙最新学习资源,请移步前往小编:
gitee.com/MNxiaona/733GH