「Mac畅玩鸿蒙与硬件30」UI互动应用篇7 - 简易计步器

本篇将带你实现一个简易计步器应用，用户通过点击按钮增加步数并及时检察步数进度，目标步数为 10000 步。该项目示例展示了如何使用 Progress 组件和 Button 组件，并结合状态管理，实现交互式应用。

---

关键词

• UI互动应用
  
• 计步器
  
• Button 组件
  
• Progress 组件
  
• 状态管理
  

---

一、功能说明

该简易计步器应用答应用户记载每日步数并表现步数进度条。通过点击“增加步数”按钮，步数会渐渐增加，进度条表现步数目标的完成环境。用户还可以点击“重置”按钮将步数清零，重新开始计步。

---

二、所需组件

• @Entry 和 @Component 装饰器
  
• Column 布局组件
  
• Text 组件用于表现步数
  
• Button 组件用于用户交互
  
• Progress 组件用于表现进度
  
• @State 修饰符用于状态管理
  

项目结构

• 项目名称：StepCounterApp
  
• 自界说组件名称：StepCounterPage
  
• 代码文件：StepCounterPage.ets、Index.ets
  

---

三、代码实现

1. // 文件名：StepCounterPage.ets
3. // 定义计步器页面组件
4. @Component
5. export struct StepCounterPage {
6.   @State stepCount: number = 0; // 初始步数
7.   maxSteps: number = 10000; // 设定步数目标
9.   // 构建页面布局和组件
10.   build() {
11.     Column({ space: 20 }) { // 创建垂直布局容器，子组件间距为 20
12.       // 应用标题
13.       Text('简易计步器')
14.         .fontSize(24)
15.         .fontWeight(FontWeight.Bold)
16.         .alignSelf(ItemAlign.Center);
18.       // 显示当前步数
19.       Text(`当前步数: ${this.stepCount}`)
20.         .fontSize(20)
21.         .alignSelf(ItemAlign.Center);
23.       // 显示目标步数
24.       Text(`目标步数: ${this.maxSteps}`)
25.         .fontSize(18)
26.         .fontColor(Color.Gray)
27.         .alignSelf(ItemAlign.Center);
29.       // 线性进度条，显示当前步数的进度
30.       Progress({
31.         value: this.getProgress(), // 进度百分比
32.         total: 100, // 进度条总长度设定为 100%
33.         type: ProgressType.Linear, // 线性进度条
34.       })
35.         .color(Color.Green) // 设置进度颜色
36.         .backgroundColor(Color.Gray) // 设置背景色
37.         .height(8) // 设置进度条高度
38.         .width('80%')
39.         .alignSelf(ItemAlign.Center);
41.       // “增加步数”按钮，模拟计步功能
42.       Button('增加步数')
43.         .onClick(() => {
44.           this.increaseStepCount(); // 点击增加步数
45.         })
46.         .fontSize(20)
47.         .backgroundColor(Color.Blue)
48.         .fontColor(Color.White)
49.         .margin({ top: 20 });
51.       // “重置”按钮，清零步数
52.       Button('重置')
53.         .onClick(() => {
54.           this.resetStepCount(); // 点击重置步数
55.         })
56.         .fontSize(20)
57.         .backgroundColor(Color.Red)
58.         .fontColor(Color.White)
59.         .margin({ top: 10 });
60.     }
61.     .padding(20)
62.     .width('100%')
63.     .height('100%')
64.     .alignItems(HorizontalAlign.Center);
65.   }
67.   // 获取进度百分比
68.   private getProgress(): number {
69.     return Math.min((this.stepCount / this.maxSteps) * 100, 100); // 限制进度不超过 100%
70.   }
72.   // 增加步数的逻辑
73.   private increaseStepCount() {
74.     if (this.stepCount < this.maxSteps) { // 防止步数超过目标
75.       this.stepCount += 500; // 模拟步数增加，每次增加 500 步
76.     }
77.   }
79.   // 重置步数的逻辑
80.   private resetStepCount() {
81.     this.stepCount = 0; // 重置步数为 0
82.   }
83. }

复制代码

1. // 文件名：Index.ets
3. // 导入计步器页面组件
4. import { StepCounterPage } from './StepCounterPage'
6. // 定义应用入口组件
7. @Entry
8. @Component
9. struct Index {
10.   build() {
11.     Column() {
12.       StepCounterPage() // 引用计步器页面组件
13.     }
14.     .padding(20) // 设置页面内边距
15.   }
16. }

复制代码

  效果示例：用户点击“增加步数”按钮后，步数会及时更新并表现进度条的变革，用户也可以点击“重置”按钮将步数清零。
  

  

---

四、代码解读

• @State stepCount：
  使用状态变量生存当前步数，通过 @State 修饰符管理变革。
  
• Progress 组件：
  线性进度条组件用于表现当前步数在目标步数中的完成比例，设置 total 为 100 以代表百分比。
  
• increaseStepCount() 方法：
  通过点击按钮增加步数，每次增加一定数量，模拟步数的增长。
  
• resetStepCount() 方法：
  将 stepCount 重置为 0，清除进度。
  

---

五、优化发起

• 动态目标设置：答应用户设置自己的步数目标，让应用更具个性化。
  
• 动画效果：在进度条更新时增加动画，使用户体验更流通。
  
• 主动生存步数：在应用重启后保持步数不变，提供一连性记载功能。
  
• 成绩体系：实现步数达标后的成绩提示，增加用户的成绩感。
  

---

六、干系知识点

• 「Mac畅玩鸿蒙与硬件15」鸿蒙UI组件篇5 - Slider 和 Progress 组件
  
• 「Mac畅玩鸿蒙与硬件11」鸿蒙UI组件篇1 - Text 和 Button 组件详解
  

---

小结

本篇教程通过简易计步器应用，演示了如何使用 Progress 组件和 Button 组件，及时更新状态并表现进度。通过该项目，你学会了如何在应用中进行状态管理和数据的及时展示。

---

下一篇预报

下一篇「UI互动应用篇8 - 自界说评分星级组件」将先容如何实现一个评分体系，资助用户通过点击星星来进行评分。

---

上一篇：「Mac畅玩鸿蒙与硬件29」UI互动应用篇6 - 多选问卷小应用

下一篇：「Mac畅玩鸿蒙与硬件31」UI互动应用篇8 - 自界说评分星级组件

---

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。