HarmonyOS Next开发学习手册——容器组件(stepper开发）

于 2024-07-16 17:56:15 发布
阅读量694 收藏 10
点赞数 30
分类专栏： 移动开发 鸿蒙开发 HarmonyOS 文章标签： harmonyos 学习 OpenHarmony ui 深度学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maniuT/article/details/140473063
版权
移动开发 同时被 3 个专栏收录
956 篇文章 7 订阅
订阅专栏
HarmonyOS
871 篇文章 13 订阅
订阅专栏
鸿蒙开发
504 篇文章 1 订阅
订阅专栏

当一个任务需要多个步骤时，可以使用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

OpenHarmony_小贾
关注
  • 30
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CanvasPath2D对象与绘制文本
weixin_44966759的博客
09-22 761
Path2D对象 Path2() Path2()可使用最新版本的浏览器中的对象来缓存或记录这些绘图命令。您可以快速播放路径。 Path2D()构建函数返回一个新实例化的Path2D对象任意的与另一条路径作为参数（创建一个副本）或任选的用有一串svg路径数据 new Path2D(); //空路径对象 new Path2D(path); // 从另一个Path2D对象复制 new Path2D(d); // SVG路径数据中的路径 实例演示： 创建一个矩形和一个圆两者存储为path2D对象，以
Stepper-motor.rar_单片机开发_Visual_C++_
08-11
标题中的"Stepper-motor.rar_单片机开发_Visual_C++_"表明这是一个关于使用Visual C++进行单片机编程，特别是针对步进电机控制的项目。在描述中提到，该程序是用C语言编写的，实现了步进电机的正反转以及停机功能。...
HarmonyOS Next开发学习手册——旋转屏动画增强
最新发布
maniuT的博客
07-03 532
在原旋转屏动画基础上，可配置渐隐和渐现的转场效果。完整的代码示例和效果如下。需要在EntryAbility.ets文件的onWindowStageCreate方法中添加处理逻辑以获取屏幕的显示方向需要在项目的 module.json5 文件中的 abilities 列表里添加 “orientation”，指定为 “auto_rotation”
【鸿蒙开发】详解HarmonyOS中的容器组件
HarmonyOS_001的博客
06-23 1091
有很多小伙伴不知道该从哪里开始学习鸿蒙开发技术？也不知道鸿蒙开发的知识点重点掌握的又有哪些？自学时频繁踩坑，导致浪费大量时间。结果还是一知半解。所以有一份实用的鸿蒙（HarmonyOS NEXT）全栈开发资料用来跟着学习是非常有必要的。
5.21 marquee组件
qq_63202674的博客
05-21 328
跑马灯组件，用于展示一段单行滚动的文字。 支持设备 手机 平板 智慧屏 智能穿戴 支持 支持 支持 支持 子组件 不支持。 属性 除支持通用属性外，还支持如下属性： 名称 类型 默认值 必填 描述 .
HarmonyOS 鸿蒙应用开发( 八、线程模型及线程间通信 Emitter、Worker和TaskPool介绍）
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
01-27 4443
在HarmonyOS应用中每个进程都会有一个主线程(UI线程)，用于处理UI更新、事件分发等操作。对于耗时任务，开发者需要创建工作线程进行处理，以避免阻塞主线程影响UI流畅性。主线程有如下职责：1.执行UI绘制，主线程负责处理与用户界面相关的所有操作，包括布局计算、渲染以及屏幕刷新等。在鸿蒙系统中，ArkTS引擎用于管理主线程上的UI渲染。2.管理主线程的ArkTS引擎实例，使多个UIAbility组件能够运行在其之上。
2024年最全鸿蒙 线程讲解（任务分发、线程通信），HarmonyOS鸿蒙面试 高级
2401_84853434的博客
05-08 981
, 10);在onStart()中调用//取消异步任务。
stepper-motor.zip_单片机开发_C/C++_
08-11
标题中的"stepper-motor.zip_单片机开发_C/C++_"表明了这个压缩包包含的是关于使用C或C++编程语言在单片机上开发步进电机控制程序的资源。描述提到这是一个针对四线两相步进电机的ICC AVR代码，特别适合初学者学习...
stepper-motot.rar_单片机开发_Visual_C++_
08-11
标题中的"stepper-motot.rar_单片机开发_Visual_C++_"表明这是一个关于步进电机控制的项目，采用单片机进行开发，并且使用了Visual C++作为编程环境。这个项目可能包含了从软件设计到硬件控制的全套解决方案。 在...
Stepper-motor-program-control.zip_单片机开发_C51_
08-11
标题 "Stepper-motor-program-control.zip_单片机开发_C51_" 涉及的主要内容是关于使用C51单片机编程控制步进电机的技术。步进电机是一种能够将电脉冲信号转化为精确角位移的执行元件，常在自动化设备、精密定位系统...
24-Stepper-motor.rar_单片机开发_C/C++_
08-12
标题中的“24-Stepper-motor.rar”表明这是一个关于步进电机控制的项目，而“单片机开发_C/C++”则暗示了程序代码是用C或C++语言编写的，适用于单片机环境。从描述来看，这个程序已经被实际应用于开发板上，证明其...
如何获取对方的IP地址
热门推荐
wuli1024的博客
01-15 1万+
在互联网中，我们经常需要与其他人进行远程通信，如聊天、视频等。而要实现这些功能，我们需要知道对方的IP地址才能建立起连接。
2024年HarmonyOS鸿蒙最新10款用于查询IP地址的工具网站_ip查询域名网站工具(4)，HarmonyOS鸿蒙面试宝典pdf
2401_84871031的博客
05-14 1082
*网址：**该网址可以进行全球IP地址通查。
canvas笔记--Path2D篇
qq_44758643的博客
09-23 2992
Path2D对象 Path2() Path2()可使用最新版本的浏览器中的对象来缓存或记录这些绘图命令。您可以快速播放路径。 Path2D()构建函数返回一个新实例化的Path2D对象任意的与另一条路径作为参数（创建一个副本）或任选的用有一串svg路径数据 new Path2D(); //空路径对象 new Path2D(path); // 从另一个Path2D对象复制 new Path2D(d); // SVG路径数据中的路径 实例演示： 创建一个矩形和一个圆两者存储为path2D对象，以
HarmonyOS Next开发学习手册——显示图片 (Image)
maniuT的博客
07-01 1371
开发者经常需要在应用中显示一些图片，例如：按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现，Image支持多种图片格式，包括png、jpg、bmp、svg和gif，具体用法请参考 Image 组件。该接口通过图片数据源获取图片，支持本地图片和网络图片的渲染展示。其中，src是图片的数据源，加载方式请参考 加载图片资源。
marquee组件学习
qq_61897144的博客
05-14 220
属性：scrollamount 跑马灯每次滚动时移动的最大长度 loop 跑马灯滚动的次数 direction 设置跑马灯的文字滚动方向 样式：font-family：设置跑马灯中文字的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体 font-weight：设置跑马灯中文字的字体的粗细，见text组件font-weight的样式属性 该组件所能表现的;bounce(Rich):当文本滚动到末尾时触发该事件 fin
鸿蒙 HarmonyOS ArkTS ArkUI 动画 中心旋转、空翻、旋转缩放
特创数字
01-21 1304
【代码】鸿蒙 HarmonyOS ArkTS ArkUI 动画 中心旋转、空翻、旋转缩放
Canvas.drawTextOnPath 2D绘图
zhouzizhi的博客
07-23 148
绘制文字效果，如下图 [img]http://dl2.iteye.com/upload/attachment/0099/4653/1d587c5d-a988-3021-be2c-17bf511d0877.jpg[/img] [code="java"]protected void onDraw(Canvas canvas) { Paint paint = new Paint(...
鸿蒙os开发做全局路由拦截
weixin_42776027的博客
03-06 1211
请注意，以上示例代码基于假设和类比其他前端框架的路由拦截原理，具体实现可能需要参考鸿蒙OS最新的官方文档和SDK说明来定制符合实际需求的解决方案。： 如果框架不支持直接的全局路由拦截器，可以考虑在所有页面跳转路径上的一个公共父组件或通过事件总线（EventBus）与服务通信的方式实现拦截。在进入每个页面前，由这个中间层组件或服务来决定是否允许继续跳转。： 对于涉及系统权限级别的拦截，应遵循HarmonyOS的安全规范和API设计，结合系统提供的权限管理机制，在用户授权之前阻止访问某些特定页面。
uView2没有u-stepper 步进器组件
06-06
非常抱歉，我之前的回答有误，uView2 中没有 `u-stepper` 步进器组件。 不过，你可以使用 `u-number-box` 数字框组件来实现步进器的功能。以下是一个示例： ```vue 科技风格页面弹窗 标题"> 请输入标题...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值