「Mac畅玩鸿蒙与硬件30」UI互动应用篇7 - 简易计步器-阿里云开发者社区

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

2024-11-26 35

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

关键词

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

一、功能说明

该简易计步器应用允许用户记录每日步数并显示步数进度条。通过点击“增加步数”按钮，步数会逐步增加，进度条显示步数目标的完成情况。用户还可以点击“重置”按钮将步数清零，重新开始计步。

二、所需组件

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

项目结构

项目名称：StepCounterApp
自定义组件名称：StepCounterPage
代码文件：StepCounterPage.ets、Index.ets

三、代码实现

// 文件名：StepCounterPage.ets

// 定义计步器页面组件
@Component
export struct StepCounterPage {
   
  @State stepCount: number = 0; // 初始步数
  maxSteps: number = 10000; // 设定步数目标

  // 构建页面布局和组件
  build() {
   
    Column({
    space: 20 }) {
    // 创建垂直布局容器，子组件间距为 20
      // 应用标题
      Text('简易计步器')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .alignSelf(ItemAlign.Center);

      // 显示当前步数
      Text(`当前步数: ${
     this.stepCount}`)
        .fontSize(20)
        .alignSelf(ItemAlign.Center);

      // 显示目标步数
      Text(`目标步数: ${
     this.maxSteps}`)
        .fontSize(18)
        .fontColor(Color.Gray)
        .alignSelf(ItemAlign.Center);

      // 线性进度条，显示当前步数的进度
      Progress({
   
        value: this.getProgress(), // 进度百分比
        total: 100, // 进度条总长度设定为 100%
        type: ProgressType.Linear, // 线性进度条
      })
        .color(Color.Green) // 设置进度颜色
        .backgroundColor(Color.Gray) // 设置背景色
        .height(8) // 设置进度条高度
        .width('80%')
        .alignSelf(ItemAlign.Center);

      // “增加步数”按钮，模拟计步功能
      Button('增加步数')
        .onClick(() => {
   
          this.increaseStepCount(); // 点击增加步数
        })
        .fontSize(20)
        .backgroundColor(Color.Blue)
        .fontColor(Color.White)
        .margin({
    top: 20 });

      // “重置”按钮，清零步数
      Button('重置')
        .onClick(() => {
   
          this.resetStepCount(); // 点击重置步数
        })
        .fontSize(20)
        .backgroundColor(Color.Red)
        .fontColor(Color.White)
        .margin({
    top: 10 });
    }
    .padding(20)
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center);
  }

  // 获取进度百分比
  private getProgress(): number {
   
    return Math.min((this.stepCount / this.maxSteps) * 100, 100); // 限制进度不超过 100%
  }

  // 增加步数的逻辑
  private increaseStepCount() {
   
    if (this.stepCount < this.maxSteps) {
    // 防止步数超过目标
      this.stepCount += 500; // 模拟步数增加，每次增加 500 步
    }
  }

  // 重置步数的逻辑
  private resetStepCount() {
   
    this.stepCount = 0; // 重置步数为 0
  }
}

// 文件名：Index.ets

// 导入计步器页面组件
import {
    StepCounterPage } from './StepCounterPage'

// 定义应用入口组件
@Entry
@Component
struct Index {
   
  build() {
   
    Column() {
   
      StepCounterPage() // 引用计步器页面组件
    }
    .padding(20) // 设置页面内边距
  }
}