「Mac畅玩鸿蒙与硬件32」UI互动应用篇9 - 番茄钟倒计时应用

news2024/11/12 18:39:36

本篇将带你实现一个番茄钟倒计时应用,用户可以设置专注时间和休息时间的时长,点击“开始专注”或“开始休息”按钮启动计时,应用会在倒计时结束时进行提醒。番茄钟应用对于管理时间、提升工作效率非常有帮助,并且还会加入猫咪图片作为界面装饰,让体验更加有趣。

在这里插入图片描述


关键词
  • UI互动应用
  • 番茄钟
  • 倒计时器
  • 状态管理
  • 用户交互

一、功能说明

番茄钟倒计时应用允许用户设置专注时间和休息时间,专注时间用于工作,休息时间用于放松。应用通过倒计时显示当前剩余时间,并在倒计时结束后提醒用户进行下一阶段。界面上还添加了一只猫咪图片作为装饰。


二、所需组件
  • @Entry@Component 装饰器
  • Column 布局组件
  • Image 组件用于显示猫咪图片
  • Text 组件用于显示倒计时和阶段提示
  • Button 组件用于用户交互
  • TextInput 组件用于输入专注和休息时间
  • 定时器函数 setIntervalclearInterval 用于控制倒计时
  • @State 修饰符用于状态管理
项目结构
  • 项目名称PomodoroTimerApp
  • 自定义组件名称PomodoroTimerPage
  • 代码文件PomodoroTimerPage.etsIndex.ets

三、代码实现
// 文件名:PomodoroTimerPage.ets

// 定义番茄钟倒计时页面组件
@Component
export struct PomodoroTimerPage {
  @State focusTime: number = 25 * 60; // 默认专注时间为25分钟(单位:秒)
  @State breakTime: number = 5 * 60; // 默认休息时间为5分钟(单位:秒)
  @State timeLeft: number = this.focusTime; // 倒计时时间
  @State isFocusMode: boolean = true; // 当前阶段:专注或休息
  @State isCountingDown: boolean = false; // 倒计时状态
  private timerId: number | null = null; // 定时器 ID

  // 构建页面布局和组件
  build() {
    Column({ space: 20 }) { // 创建垂直布局容器,子组件间距为 20
      // 显示猫咪图片
      Image($r('app.media.cat'))
        .width('22%')
        .height('49%')
        .margin({ bottom: 20 })
        .alignSelf(ItemAlign.Center);

      // 显示当前阶段
      Text(this.isFocusMode ? '专注时间' : '休息时间')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .alignSelf(ItemAlign.Center);

      // 显示倒计时时间
      Text(`剩余时间: ${this.formatTime(this.timeLeft)}`)
        .fontSize(20)
        .alignSelf(ItemAlign.Center)
        .fontColor(this.timeLeft > 0 ? Color.Black : Color.Red);

      // 开始倒计时按钮
      Button(this.isCountingDown ? '暂停' : (this.isFocusMode ? '开始专注' : '开始休息'))
        .onClick(() => {
          if (this.isCountingDown) {
            this.pauseCountdown();
          } else {
            this.startCountdown();
          }
        })
        .fontSize(20)
        .backgroundColor(this.isCountingDown ? Color.Red : (this.isFocusMode ? Color.Blue : Color.Green))
        .fontColor(Color.White)
        .margin({ top: 20 });

      // 重置按钮
      Button('重置')
        .onClick(() => this.resetCountdown())
        .fontSize(20)
        .backgroundColor(Color.Gray)
        .fontColor(Color.White)
        .margin({ top: 10 });

      // 设置专注时间和休息时间
      Row({ space: 10 }) {
        TextInput({ placeholder: '设置专注时间(分钟)' })
          .type(InputType.Number)
          .onChange((value: string) => {
            this.focusTime = (parseInt(value) || 25) * 60;
            if (this.isFocusMode) {
              this.timeLeft = this.focusTime;
            }
          });

        TextInput({ placeholder: '设置休息时间(分钟)' })
          .type(InputType.Number)
          .onChange((value: string) => {
            this.breakTime = (parseInt(value) || 5) * 60;
            if (!this.isFocusMode) {
              this.timeLeft = this.breakTime;
            }
          })
      }
      .justifyContent(FlexAlign.Center)
    }
    .padding(20)
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center);
  }

  // 格式化倒计时时间
  private formatTime(seconds: number): string {
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = seconds % 60;
    return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
  }

  // 开始倒计时的方法
  private startCountdown() {
    this.isCountingDown = true;
    this.timerId = setInterval(() => {
      if (this.timeLeft > 0) {
        this.timeLeft -= 1;
      } else {
        this.switchMode(); // 切换到下一个阶段
      }
    }, 1000);
  }

  // 暂停倒计时的方法
  private pauseCountdown() {
    this.isCountingDown = false;
    if (this.timerId !== null) {
      clearInterval(this.timerId);
      this.timerId = null;
    }
  }

  // 重置倒计时的方法
  private resetCountdown() {
    this.pauseCountdown();
    this.timeLeft = this.isFocusMode ? this.focusTime : this.breakTime;
  }

  // 切换专注和休息阶段
  private switchMode() {
    this.pauseCountdown();
    this.isFocusMode = !this.isFocusMode;
    this.timeLeft = this.isFocusMode ? this.focusTime : this.breakTime;
  }
}
// 文件名:Index.ets

// 导入番茄钟倒计时页面组件
import { PomodoroTimerPage } from './PomodoroTimerPage'

// 定义应用入口组件
@Entry
@Component
struct Index {
  build() {
    Column() {
      PomodoroTimerPage() // 引用番茄钟页面组件
    }
    .padding(20) // 设置页面内边距
  }
}

效果示例:用户可以设置专注和休息时间,点击“开始专注”或“开始休息”按钮后,倒计时将开始,倒计时结束时自动切换到下一个阶段。页面包含猫咪图片装饰,提升用户的使用体验。

在这里插入图片描述


四、代码解读
  • @State timeLeft:保存倒计时剩余时间,倒计时每秒减少 1,当时间为 0 时切换到下一个阶段。
  • @State isFocusMode:用于标识当前是专注模式还是休息模式,每当倒计时结束时切换。
  • startCountdown() 方法:使用 setInterval 启动倒计时,每秒减少 timeLeft 值。
  • pauseCountdown() 方法:暂停倒计时并清除定时器。
  • switchMode() 方法:倒计时结束后切换到下一个阶段,并重新设置 timeLeft 为下一个阶段的时长。

五、优化建议
  1. 增加音效提醒:在每个阶段切换时播放提示音,帮助用户区分工作与休息。
  2. 动画效果:在倒计时减少时添加动画效果,如进度条或颜色变化。
  3. 历史记录:记录每次专注和休息的时长,帮助用户回顾和分析自己的时间使用情况。

六、相关知识点
  • 「Mac畅玩鸿蒙与硬件26」UI互动应用篇3 - 倒计时和提醒功能实现
  • 「Mac畅玩鸿蒙与硬件11」鸿蒙UI组件篇1 - Text 和 Button 组件详解

小结

本篇教程通过番茄钟倒计时应用的实现,展示了如何灵活使用状态管理和定时器控制来实现更复杂的时间管理功能,并结合专注和休息模式切换,帮助用户合理安排时间,提高效率。


下一篇预告

在下一篇「UI互动应用篇10 - 拼图小游戏」中,我们将探索一个有趣的项目,展示如何结合状态和动态图片实现更丰富的用户互动体验。


上一篇: 「Mac畅玩鸿蒙与硬件31」UI互动应用篇8 - 自定义评分星级组件
下一篇:「Mac畅玩鸿蒙与硬件33」UI互动应用篇10 - 拼图小游戏

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2237181.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SparkSql读取数据的方式

一、读取普通文件 方式一:给定读取数据源的类型和地址 spark.read.format("json").load(path) spark.read.format("csv").load(path) spark.read.format("parquet").load(path) 方式二:直接调用对应数据源类型的方法 …

模型训练中GPU利用率低?

买了块魔改华硕猛禽2080ti,找了下没找到什么测试显存的软件,于是用训练模型来测试魔改后的显存稳定性,因为模型训练器没有资源监测,于是用了Windows任务管理器来查看显卡使用情况,却发现GPU的利用率怎么这么低&#xf…

在gitlab,把新分支替换成master分支

1、备份master分支,可以打tag 2、删除master分支 正常情况下,master分支不允许删除,需要做两个操作才能删除 a、变更项目默认分支为非master分支,可以先随便选择 b、取消master为非保护分支 操作了上述两步,就可以删…

Transformer究竟是什么?预训练又指什么?BERT

目录 Transformer究竟是什么? 预训练又指什么? BERT的影响力 Transformer究竟是什么? Transformer是一种基于自注意力机制(Self-Attention Mechanism)的神经网络架构,它最初是为解决机器翻译等序列到序列(Seq2Seq)任务而设计的。与传统的循环神经网络(RNN)或卷…

UE5.4 PCG 自定义PCG蓝图节点

ExecuteWithContext: PointLoopBody: 效果:点密度值与缩放成正比

SLF4J: Failed to load class “org.slf4j.impl.StaticLoggerBinder”

SLF4J常见问题 1、SLF4J简介2、SLF4J实现原理3、SLF4J常见问题 1、SLF4J简介 SLF4J(Simple Logging Facade for Java)是一个为Java程序提供日志输出的统一接口,并不具备具体的日志实现方案,类似JDBC,SLF4J只做两件事&a…

MySQL记录锁、间隙锁、临键锁(Next-Key Locks)详解

行级锁,每次操作锁住对应的行数据。锁定粒度最小,发生锁冲突的概率最低,并发度最高。 应用在InnoDB存储引擎中。InnoDB的数据是基于索引组织的,行锁是通过对索引上的索引项加锁来实现的,而不是对记录加的锁。 对于行…

前端-懒加载

目录 1.懒加载的概念 2.懒加载的特点 3.懒加载的实现原理 4.懒加载与预加载的区别 5.懒加载实现 6.预加载实现 1.懒加载的概念 懒加载也加延迟加载、按需加载,指在长网页中延迟加载图片数据,是一种较好的网页性能优化的方式。 2.懒加载的特点 &…

uniapp 实现瀑布流

效果演示 组件下载 瀑布流布局-waterfall - DCloud 插件市场

若依后端项目打包镜像部署

添加打包依赖 <build><finalName>${project.artifactId}</finalName><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><executions><executi…

使用Python实现音频降噪

在音频处理领域&#xff0c;背景噪声是一个常见的问题。为了提高音频的质量&#xff0c;我们需要对音频进行降噪处理。本文将介绍如何使用 Python 实现音频降噪。 依赖库安装 在开始之前&#xff0c;我们需要安装以下依赖库&#xff1a; pydub&#xff1a;用于音频文件的读取…

18、论文阅读:AOD-Net:一体化除雾网络

AOD-Net: All-in-One Dehazing Network 前言介绍相关工作物理模型传统方法深度学习方法 建模与扩展变换后的公式网络设计与高级特征任务相结合 除雾评价数据集和实现 前言 该论文提出了一种基于卷积神经网络&#xff08;CNN&#xff09;的图像去雾模型&#xff0c;称为 All-in…

软件工程。

图 UML 数据流图&#xff08;DFD&#xff09; 1&#xff0c;数据流图概念 描绘信息流和数据从输入移动到输出的过程中所经受的变换。 也就是 数据流图。 数据流图以图形的方式描绘数据在系统中流动和处理的过程。 数据流图&#xff08;DFD&#xff0c;Data Flow Diagram&a…

机器学习—为什么我们需要激活函数

如果我们使用神经网络中每个神经元的线性激活函数&#xff0c;回想一下这个需求预测示例&#xff0c;如果对所有节点使用线性激活函数&#xff0c;在这个神经网络中&#xff0c;事实证明&#xff0c;这个大神经网络将变得与线性回归没有什么不同&#xff0c;所以这将挫败使用神…

Java基础使用②Java数据变量和类型+小知识点

目录 1. Java小知识点 1.1 Java注释 1.2 Java标识符命名 1.3 Java关键字 2. 字面常量和数据变量 2.1 字面常量 2.2 数据类型 3.变量 3.1 变量概念 3.2 语法格式 3.3 整型变量 3.4 浮点型变量 3.5 字符型变量 3.6 布尔型变量 3.7 类型转换 3.8 类型提升 4. 字符…

Blender 几何、线框猴头的构建 笔记

一、学习blender视频教程链接 案例7&#xff1a;猴头构建_建模动画_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1Bt4y1E7qn?spm_id_from333.788.videopod.episodes&vd_sourced0ea58f1127eed138a4ba5421c577eb1&p23 二、几何节点基础教程 1.首先添加几何节…

Kafka面试题解答(二)

1.怎么尽可能保证 Kafka 的可靠性 kafka是可能会出现数据丢失问题的&#xff0c;Leader维护了一个动态的in-sync replica set&#xff08;ISR&#xff09;&#xff0c;意为和 Leader保持同步的FollowerLeader集合(leader&#xff1a;0&#xff0c;isr:0,1,2)。 如果Follower长…

用科技力量,重塑数字化园区新生态!

数字化园区的成功打造绝非易事&#xff0c;它需要在多个关键层面付出持之以恒的努力&#xff0c;而成都树莓集团在这一进程中无疑发挥着重要作用。 在数据的管理与应用方面&#xff0c;成都树莓集团更是展现出卓越的实力。集团运用先进的数据挖掘、分析技术&#xff0c;助力园区…

Mac上无法访问usr/local的文件

sudo chmod 755 /usr/loca 最后用百度提供的方法解决了

【Lucene】原理学习路线

基于《Lucene原理与代码分析完整版》&#xff0c;借助chatgpt等大模型&#xff0c;制定了一个系统学习Lucene原理的计划&#xff0c;并将每个阶段的学习内容组织成专栏文章&#xff0c;zero2hero 手搓 Lucene的核心概念和实现细节。 深入的学习和专栏计划&#xff0c;覆盖Lucen…