【鸿蒙实战开发】ArkUI-stepper组件开发指导

于 2024-08-13 20:01:47 发布
阅读量780 收藏 25
点赞数 21
分类专栏： 前端 鸿蒙 安卓 文章标签： harmonyos 华为 android 鸿蒙 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HarmonyOS007/article/details/141172445
版权
前端 同时被 3 个专栏收录
201 篇文章 0 订阅
订阅专栏
鸿蒙
201 篇文章 3 订阅
订阅专栏
安卓
201 篇文章 0 订阅
订阅专栏

当一个任务需要多个步骤时，可以使用stepper组件展示当前进展。具体用法请参考stepper API。

创建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;
}

0000000000011111111.20240813092131.84507062390017011087147416825645.gif

设置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;
}

0000000000011111111.20240813092131.88308297269327017404604310929746.gif

通过设置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'
    },
  },
}

0000000000011111111.20240813092131.08829613579846121408817262759081.gif

设置样式

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;
}

image.png

添加事件

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;
  }
}

0000000000011111111.20240813092131.15615071795314703902890741867699.gif

场景示例

在本场景中，开发者可以在界面上点击选择并实时显示选择结果，点击下一步按钮后可动态修改页面的字体颜色和字体大小。

用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
  }
}

0000000000011111111.20240813092131.08829613579846121408817262759081.gif

写在最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。

希望这一份鸿蒙学习文档能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！
如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

请点击→纯血版全套鸿蒙HarmonyOS学习文档

鸿蒙（HarmonyOS NEXT）5.0最新学习路线

在这里插入图片描述

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

《鸿蒙 (HarmonyOS)开发入门教学视频》

在这里插入图片描述

《鸿蒙生态应用开发V3.0白皮书》

在这里插入图片描述

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

在这里插入图片描述

《鸿蒙开发基础》

●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……
在这里插入图片描述

《鸿蒙开发进阶》

●Stage模型入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技术
●安全技能
●任务管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来设计
●鸿蒙系统移植和裁剪定制
……
在这里插入图片描述

《鸿蒙进阶实战》

●ArkTS实践
●UIAbility应用
●网络案例
……
在这里插入图片描述

获取以上完整鸿蒙HarmonyOS学习文档，请点击→纯血版全套鸿蒙HarmonyOS学习文档

在这里插入图片描述

代码改变世界996
关注
专栏目录
鸿蒙中级之 ListDialog （HarmonyOS鸿蒙开发基础知识）
iCloudEnd的博客
09-23 4861
ListDialog 创建一个ListDialog实例。 列表对话框包括单选框列表和复选框列表。 未经授权禁止转载 更多技术交流请加入QQ群 群名称：harmonyos鸿蒙技术交流 群 号：856567895 从零开始入门学习HarmonyOS鸿蒙2.0开发 原创 HarmonyOS 鸿蒙入门教程之01 基础环境和开发工具 （教程含源码） 原创 HarmonyOS 鸿蒙开发之02开发工具安装 原创 HarmonyOS 鸿蒙入门教程之03 运行开发工具完成基础配置DevE
HarmonyOS鸿蒙开发指南:容器组件 stepper开发指导
sybh的博客
01-08 816
用Stepper组件实现分步，再创建toggle组件实现选择显示功能，再使用select组件实现改变选中值动态修改字体颜色或大小。在本场景中，开发者可以在界面上点击选择并实时显示选择结果，点击下一步按钮后可动态修改页面的字体颜色和字体大小。当change与next或back同时存在时，会先执行next或back事件再去执行change事件。Stepper分别添加finish，change，next，back，skip事件。重新设置index属性值时要先清除index的值再重新设置，否则检测不到值的改变。
【鸿蒙实战开发】list组件开发指导
最新发布
HarmonyOS007的博客
08-13 709
list是用来显示列表的组件，包含一系列相同宽度的列表项，适合连续、多行地呈现同类数据。具体用法请参考list API。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Dialog对话框组件
zy0412326的专栏
12-26 1608
对话框的使用场景也很高频，比如 APP 上架应用市场要求 APP 首次启动要有服务协议和隐私权限提示弹框等，ArkUI开发框架提供了两种方式显示一个对话框，一种是使用。操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1。模块提供的 API 可以显示一个对话框外，还可以使用全局对话框。模块里提供的 API 显示，另一种是使用全局对话框。：事件回调，并显示对话框的点击下标。：显示对话框的配置项，：显示一个对话框，参数。
【愚公系列】2023年12月 HarmonyOS教学课程 020-ArkUI组件（CustomDialog）
热门推荐
时光隧道
12-08 6万+
HarmonyOS的@CustomDialog是一个自定义对话框控件，它可以帮助开发人员快速创建各种各样的对话框，包括提示框、确认框、输入框等。使用@CustomDialog，开发人员可以自定义对话框的标题、消息、按钮、图标等属性，以及对话框的样式和布局。此外，它还支持自定义对话框的背景、动画和触发事件等属性，以满足不同场景的需求。build() {Column() {Text('我是内容')@Entry@Component})build() {Column() {})
bs-stepper：用于Bootstrap 4.x的步进器
02-04
bs步进 Bootstrap 4的步进插件。 您也可以在和上使用它，因为此插件是使用最常用JavaScript框架。...npm install bs-stepper --save # yarn yarn add bs-stepper CDN CDN 链接 jsDelivr，缩小了js jsDelivr，c
react-native-simple-stepper:iOS中UIStepper控件的超级简单的本机实现
04-30
yarn add react-native-simple-stepper npm install react-native-simple-stepper --save 用法 import React , { Component } from 'react' ; import { SimpleStepper } from 'react-native-simple-stepper' ; ...
react-native-stepper:一个简单的步进器来响应本机
05-12
这是我的第一个带有react-native的程序包，我需要一个stepper实现，可以将任何类型的组件用作stepper按钮。 安装 npm i react-native-stepper --save 用法 import Stepper from 'react-native-stepper' //... ...
24-Stepper-motor.rar_单片机开发_C/C++_
08-12
标题中的“24-Stepper-motor.rar”表明这是一个关于步进电机控制的项目，而“单片机开发_C/C++”则暗示了程序代码是用C或C++语言编写的，适用于单片机环境。从描述来看，这个程序已经被实际应用于开发板上，证明其...
鸿蒙开发自定义Dialog
王鑫林的博客
06-08 1208
首先创建一个BaseDialog public class WbBaseDialog extends CommonDialog { /** * 类似Android Dialog的cancelable属性， * true: 支持点击外部或返回键消失。 * false: 则只有手动调用hide才会消失。 */ private boolean cancelable = true; protected boolean hideWithBackPre
HarmonyOS Next开发学习手册——旋转屏动画增强
maniuT的博客
07-03 596
在原旋转屏动画基础上，可配置渐隐和渐现的转场效果。完整的代码示例和效果如下。需要在EntryAbility.ets文件的onWindowStageCreate方法中添加处理逻辑以获取屏幕的显示方向需要在项目的 module.json5 文件中的 abilities 列表里添加 “orientation”，指定为 “auto_rotation”
鸿蒙 dialog各种用法教程
xq610928的博客
08-20 227
前言： 各位同学大家好。有段时间没有给大家更新文章了，具体多久呢我也记不清楚了哈，最近又在看鸿蒙相关的文档 学习了一些鸿蒙里面dialog的用法。所以今天就出一篇dialog的文章分享给大家，那么废话不多说我们正式开始。 准备工作： 1 安装鸿蒙开发环境 大家可以看我之前的文章 华为鸿蒙系统开发初体验 ：[https://www.jianshu.com/p/f94c847c7fdc] 效果图： 具体实现 main_ability_slice 布局文件 <?xml version="1
3.7、自定义弹窗（CustomDialog）
lujianfeiccie2009的专栏
04-17 184
使用@CustomDialog装饰器装饰自定义弹窗。@CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）。build() {Column() {Text('我是内容')3.创建构造器，与装饰器呼应相连。})4.点击与onClick事件绑定的组件使弹窗弹出})
Harmony 鸿蒙中类AlertDialog的CommonDialog使用
le0102的博客
06-11 852
Harmony 鸿蒙中类AlertDialog的CommonDialog使用 new CommonDialog(getFractionAbility()) .setTitleText("标题") .setContentText("内容") .setButton(0, "取消", new IDialog.Clicked
鸿蒙HarmonyOS实战-ArkUI组件（CustomDialog）
shudaoshanQAQ的博客
01-05 1557
CustomDialog组件是一种自定义对话框，可以通过开发人员根据特定的要求定制内容和布局。它允许开发人员创建一个完全可定制的对话框，可以显示任何类型的内容，例如文本、图像、表单和按钮。
3.8【HarmonyOS鸿蒙开发】组件ToastDialog
hanru723的博客
07-08 463
3.8【HarmonyOS鸿蒙开发】组件ToastDialog 作者：韩茹 公司：程序咖（北京）科技有限公司 鸿蒙巴士专栏作家 ToastDialog是在窗口上方弹出的对话框，是通知操作的简单反馈。ToastDialog会在一段时间后消失，在此期间，用户还可以操作当前窗口的其他组件。 所以它的特点： 不能够和用户交互，用户不能点击，触摸 不影响用户的其他操作 短时显示后，自动消失 一、创建一个ToastDialog 点击按钮，弹出ToastDialog。 我们现在xml布局文件中： <?xml
maters鸿蒙系统,Flutter入门进阶之旅（十）Dialog&Toast
weixin_28863779的博客
05-28 394
做原生开发的时候，我们都知道要想让一个app做的活灵活现，与用户交互时有更棒的体验，各种样式美轮美奂的对话框跟提示是必不可少的，Flutter在设计对话框的时候充分考虑到了在UI上的体验，帮助我们设计了一整套的基于material design风格的对话框以及轻量级的用于提示的widget。看完上面的效果图，读者是不是也觉得这一套UI设计给人以很棒的体验，下面我们就逐一介绍下上图中出现的常用于提示...
uView2没有u-stepper 步进器组件
06-06
非常抱歉，我之前的回答有误，uView2 中没有 `u-stepper` 步进器组件。 不过，你可以使用 `u-number-box` 数字框组件来实现步进器的功能。以下是一个示例： ```vue <u-popup :visible.sync="showPopup" :...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值