AI 助理
备案控制台
开发者社区 大数据 文章 正文

HarmonyOS实战——TickTimer定时器组件基本使用

2021-10-04 550
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： HarmonyOS实战——TickTimer定时器组件基本使用
  • 【鸿蒙专栏，从入门到实战系列】：

https://blog.csdn.net/qq_41684621/category_10128500.html

1. TickTimer定时器组件说明：

  • 是Text的子类，所以可以使用Text的一些属性
  • 该组件目前有一些bug，后续版本中会修复这些bug的

常见属性：

属性名 功能说明
format 设置显示的格式
count_down true倒着计时，false正着计时

常见方法：
在这里插入图片描述
基本用法：

  1. xml文件：
<TickTimer
    ohos:id="$+id:my_tt"
    ohos:height="60vp"
    ohos:width="250vp"
    ohos:padding="10vp"
    ohos:text_size="20fp"
    ohos:text_color="#ffffff"
    ohos:background_element="#0000ff"
    ohos:text_alignment="center"
    ohos:layout_alignment="horizontal_center"
    ohos:top_margin="50vp" />
    //没有设置时间，默认是从1970年1月1日开始。
  • mm:ss 分别表示分钟和秒钟

在这里插入图片描述

2. 实现案例——计时器

  • 统计一段时间之类做了多少事情，这个时候就需要计时器了
  • 在定时器下面分别添加开始和结束计时的两个按钮

在这里插入图片描述

  • 新建项目：TickTimerApplication

ability_main

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <TickTimer
        ohos:id="$+id:ticktimer"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="30fp"
        ohos:text_color="#FFFFFF"
        ohos:background_element="#0000FF"
        ohos:text_alignment="center"
        ohos:layout_alignment="center"
        />

    <Button
        ohos:id="$+id:start"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="开始"
        ohos:text_size="30fp"
        ohos:text_color="#FFFFFF"
        ohos:background_element="#666600"
        ohos:text_alignment="center"
        ohos:layout_alignment="center"
        ohos:top_margin="30vp"
        />

    <Button
        ohos:id="$+id:end"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="结束"
        ohos:text_size="30fp"
        ohos:text_color="#FFFFFF"
        ohos:background_element="#666600"
        ohos:text_alignment="center"
        ohos:layout_alignment="center"
        ohos:top_margin="30vp"
        />

</DirectionalLayout>
  • ohos:text_alignment="center"：表示的是文本相对于组件是居中的
  • ohos:layout_alignment="center"：表示的是TickTimer组件在布局里面是居中的

MainAbilitySlice

package com.xdr630.ticktimerapplication.slice;

import com.xdr630.ticktimerapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.TickTimer;

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {

    TickTimer tickTimer;
    Button start;
    Button end;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        //1.找到定时器组件
        tickTimer = (TickTimer) findComponentById(ResourceTable.Id_ticktimer);
        //找到开始和结束两个按钮组件
        start = (Button) findComponentById(ResourceTable.Id_start);
        end = (Button) findComponentById(ResourceTable.Id_end);

        //2.给开始和结束按钮绑定单击事件
        start.setClickedListener(this);
        end.setClickedListener(this);

        //3.给定时器做一些基本设置
        //false：正向计时 0 1 2 3 4 ...
        //true：反向计时 10 9 8 7 6 ...
        tickTimer.setCountDown(false);

        //设置一下计时的格式
        tickTimer.setFormat("mm:ss ");
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }

    @Override
    //参数表示点击的按钮对象
    public void onClick(Component component) {
        if (component == start){
            //开启定时
            tickTimer.start();
        }else if (component == end){
            //结束计时
            tickTimer.stop();
        }
    }
}
  • 运行：

在这里插入图片描述

  • 点击“开始”按钮

在这里插入图片描述

  • 点击“结束”按钮后就停止计时了

3. TickTimer组件——bug汇总：

  1. 不要用 setBaseTimer 去设置基准时间
  2. 停止之后不用重新开始
  • 如果没有设置基准时间，把时间格式设置如下，就会看到是从什么时候开始计时的了

在这里插入图片描述

  • 运行，发现是从时间原点开始

在这里插入图片描述

  • 所以，如果没有设置基准时间，默认是从时间原点开始计时的
  • 如果设置了基准时间，参数为 0

在这里插入图片描述

  • 运行：

在这里插入图片描述

  • 点击“开始”按钮后，瞬间变成了当前的时间开始计时

在这里插入图片描述

  • 所以，如果设置了基准时间，参数为 0，是从当前时间开始计时的
  • 如果设置了基准时间，参数为非 0 ，具体数值：3600*1000（表示一小时的毫秒值）

在这里插入图片描述

  • 运行，点击“开始”按钮后，并没有对当前时间做一个增加，反而对当前时间做一个减少

在这里插入图片描述
在这里插入图片描述

  • 所以，如果设置了基准时间，参数为非 0，也是从当前时间开始计时的，并且还会减少对应增加的时间，说明有 bug

总结：

  • 如果没有设置基准时间，默认是从时间原点开始计时的
  • 如果设置基准时间，参数为0，是从当前时间开始计时的
  • 如果设置基准时间，参数为非0，也是从当前时间开始计时的
  • 所以，tickTimer.setBaseTime(); 这个方法是有 bug 的，暂时不要用这个方法，相信以后HarmonyOS在更新的时候会修复这个 bug
  • 还有一个 bug，把时间格式设置为分秒计时

在这里插入图片描述

  • 运行后，它不是从 0 秒开始计时的，而是从运行开始项目后就开始了，当你点击“开始”按钮后，就会发现已经开始计时了，按下结束再开始，也不是从刚刚暂停的时间再开始计时的，而是一直往后面计时

请添加图片描述

  • 虽然点击了结束，在这个APP界面当中时间不再跳动，但是在系统的底层，时间并没有停止

建议：

  1. 该组件目前还是有 bug 的
  2. 计时器一旦点击结束之后，就不要重新开始再计时了，也就是说每个计时器只用一次就行了

4. TickTimer定时器案例——统计10秒内按钮点击的次数

  • 使用定时器统计10秒之内按了多少次?

需求：

  • 最上面是TickTimer定时器，中间的是文本显示次数，下面是“开始计时”按钮，当点击了这个按钮之后，按钮上面的文字就会变成“请疯狂点我”，然后就不断的点击这个按钮，点击一次，上面显示的文本就会增加一次计数，此时，定时器也会不断走动的状态，当到达10秒钟之后，“请疯狂点我”按钮里面的文字就会显示“游戏结束了”，中间的按钮就会展示我在 10秒之内一共点击了多少按钮次数

在这里插入图片描述

  • 新建项目：TickTimerPracticeApplication

ability_main

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <TickTimer
        ohos:id="$+id:ticktimer"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="30fp"
        ohos:text_color="#FFFFFF"
        ohos:background_element="#0000FF"
        ohos:text_alignment="center"
        ohos:layout_alignment="center"
        />

    <Text
        ohos:id="$+id:count"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:top_margin="10vp"
        ohos:text="0次"
        ohos:text_size="30fp"
        />

    <Button
        ohos:id="$+id:but"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:top_margin="10vp"
        ohos:text_size="30fp"
        ohos:text="开始计时"
        ohos:background_element="#FF0000"
        />



</DirectionalLayout>
  • 定时器的格式：00:01 ，可以用 ticktimer.setText(); 获取到定时器现在的时间，不过现在是字符串的表示，如：“00:01”，所以还需要把它变为毫秒值
  • 添加一个方法进行转换

在这里插入图片描述
在这里插入图片描述

MainAbilitySlice

package com.xdr630.ticktimerpracticeapplication.slice;

import com.xdr630.ticktimerpracticeapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.Text;
import ohos.agp.components.TickTimer;

import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener, TickTimer.TickListener {

        TickTimer ticktimer;
        Text text;
        Button but;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        //1.找到三个组件对象
        ticktimer = (TickTimer) findComponentById(ResourceTable.Id_ticktimer);
        text = (Text) findComponentById(ResourceTable.Id_count);
        but = (Button) findComponentById(ResourceTable.Id_but);

        //2.给按钮绑定单击事件
        but.setClickedListener(this);

        //3.给定时器做一些基本设置
        //false：正向计时 1 2 3 4 ...
        //true：反向计时 10 9 8 7 ...
        ticktimer.setCountDown(false);

        //设置计时格式
        ticktimer.setFormat("mm:ss");

        //4.给定时器绑定定时事件
        ticktimer.setTickListener(this);
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }


    //判断是否是第一次被点击
    //true：表示第一次被点击
    //false，表示不是第一次被点击
    boolean first = true;

    //定义一个变量用了统计点击的次数
    int count = 0;

    //记录游戏开始的时间
    long startTime = 0;

    @Override
    public void onClick(Component component) {
        //当该方法被调用，证明按钮被点击了一次
        count++;

        //判断当前是否是第一次被点击
        if (first){
            //第一次点击了
            //记录游戏开始的时间
            //要获取定时器现在的时间
            //ticktimer.getText();//”00:01“
            startTime = StringToLong(ticktimer.getText());
            //修改按钮里面的文本内容
            but.setText("请疯狂点我");
            //修改标记
            first = false;
            //开启定时器
            ticktimer.start();
        }
        //如果不是第一次点击
        //那么就不需要做上面的事情，直接修改文本的内容就可以了
        text.setText(count + "次");
    }

    //当定时器开始计时的时候，就会不断去调用onTickTimerUpdate这个方法
    //tickTimer表示计时器的对象
    @Override
    public void onTickTimerUpdate(TickTimer tickTimer) {
        //1.获取当前定时器的时间，并把时间变为毫秒值
        long nowTime = StringToLong(tickTimer.getText());
        //2.判断nowTime跟startTime之间的差有没有超过10秒
        if ((nowTime - startTime) >= 10000){
            tickTimer.stop();
            text.setText("最终成绩为：" + count + "次");
            but.setText("游戏结束了");
            //取消按钮的点击事件
            but.setClickable(false);
        }
    }

    //作用：把字符串类型的时间变成毫秒值(long)
    public long StringToLong(String time) {
        SimpleDateFormat sdf = new SimpleDateFormat("mm:ss");
        Date  date = null;
        try {
            date = sdf.parse(time);
        } catch (ParseException e) {
            e.printStackTrace();
        }
        long result = date.getTime();
        return result;
    }
}
  • 运行：

请添加图片描述

文章标签：
数据格式
XML
关键词：
HarmonyOS组件
HarmonyOS实战
HarmonyOS定时器
HarmonyOS实战组件基本使用
HarmonyOS实战组件
兮动人
目录
相关文章
二流小码农
|
16天前
|
JSON 前端开发 网络架构
鸿蒙开发：一文探究Navigation路由组件
如果你还在使用router做为页面跳转，建议切换Navigation组件作为应用路由框架，不为别的，因为官方目前针对router已不在推荐。
二流小码农
151 101
鸿蒙开发：一文探究Navigation路由组件
一键难忘
|
15天前
|
存储 JavaScript 开发工具
基于HarmonyOS 5.0（NEXT）与SpringCloud架构的跨平台应用开发与服务集成研究【实战】
本次的.HarmonyOS Next ，ArkTS语言，HarmonyOS的元服务和DevEco Studio 开发工具，为开发者提供了构建现代化、轻量化、高性能应用的便捷方式。这些技术和工具将帮助开发者更好地适应未来的智能设备和服务提供方式。
一键难忘
40 8
基于HarmonyOS 5.0（NEXT）与SpringCloud架构的跨平台应用开发与服务集成研究【实战】
二流小码农
|
14天前
鸿蒙开发：组件样式的复用
如果要实现多页面之间的组件属性样式复用，建议使用AttributeModifier，如果是单页面，通用属性可以使用@Styles，组件自有属性可以使用@Extend。
二流小码农
73 2
鸿蒙开发：组件样式的复用
一键难忘
|
22天前
|
自然语言处理 搜索推荐 数据安全/隐私保护
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0（Next）】
鸿蒙登录页面设计展示了 HarmonyOS 5.0（Next）的未来美学理念，结合科技与艺术，为用户带来视觉盛宴。该页面使用 ArkTS 开发，支持个性化定制和无缝智能设备连接。代码解析涵盖了声明式 UI、状态管理、事件处理及路由导航等关键概念，帮助开发者快速上手 HarmonyOS 应用开发。通过这段代码，开发者可以了解如何构建交互式界面并实现跨设备协同工作，推动智能生态的发展。
一键难忘
136 10
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0（Next）】
zacksleo
|
18天前
|
Dart 前端开发 IDE
鸿蒙Flutter实战：14-现有Flutter 项目支持鸿蒙 II
本文介绍了如何将现有 Flutter 项目适配鸿蒙系统，详细步骤包括安装 FVM、使用 FVM 安装 Flutter SDK、搭建开发环境、创建项目架构和壳工程等。
zacksleo
116 4
鸿蒙Flutter实战：14-现有Flutter 项目支持鸿蒙 II
64ml4hiqojt5k
|
20天前
|
索引
【HarmonyOS Next开发】日历组件详细日界面组件
原生UI没有提供日历相关的组件，于是手撸了详细页面的日程。一开始打算使用list加tab的方式来实现切换的效果，但是list的切换是没有办法确定当前展示的索引的，所以没有办法实现日历内容动态添加等效果。在业内大佬的指导下，使用了两个swiper组件分别实现周和日的切换，实现了想要的效果
64ml4hiqojt5k
56 6
猫林老师
|
21天前
|
JavaScript Java 容器
鸿蒙应用开发从入门到入行 - 篇4:层叠布局、自定义组件、ForEach
导读：在本篇文章里，您将掌握层叠布局、自定义组件的用法，特别是自定义组件将来的开发中必然会用，其中应该特别关注自定义组件的一些规范与装饰器。
猫林老师
53 7
鸿蒙应用开发从入门到入行 - 篇4:层叠布局、自定义组件、ForEach
二流小码农
|
20天前
鸿蒙开发：一个轻盈的上拉下拉刷新组件
在和可滑动组件使用的时候，记得一定要和nestedScroll属性配合使用，用于解决滑动冲突，除此之外，还需要传递滑动组件的scroller属性，用于手势操作。
二流小码农
64 2
鸿蒙开发：一个轻盈的上拉下拉刷新组件
二流小码农
|
14天前
|
前端开发 中间件 索引
鸿蒙开发：Navigation路由组件使用由繁入简
使用了插件和路由库之后，在每个Module下都会生成一个路由配置文件，以Module名字+RouterConfig为文件命名，此路由配置文件，也会在AbilityStage中，通过routerInitConfig方法进行自动配置。
二流小码农
70 8
二流小码农
|
17天前
鸿蒙开发：自定义一个剪辑双滑块组件
既然是一个剪辑截取的功能，音频也好，视频也好，大同小异，无非就是轨道不一，进度不一，但拖拽的滑块都是相似的，除了常见的音视频使用之外，有双向滑动需求的场景也是可以满足的。
二流小码农
60 0
鸿蒙开发：自定义一个剪辑双滑块组件

热门文章

最新文章

  • 1
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发（一） 嵌入式Linux开发基本概念以及开发流程介绍
  • 2
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发（四）传输文件
  • 3
    【鸿蒙软件开发】文本显示（Text/Span）
  • 4
    【华为鸿蒙系统学习】- HarmonyOS4.0开发|自学篇
  • 5
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发流程（六）烧写整个系统或更新部分系统
  • 6
    scrcpy投屏工具的在harmonyOS开发上的使用
  • 7
    【HarmonyOS 4.0 应用开发实战】ArkTS 快速入门
  • 8
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Navigation组件
  • 9
    鸿蒙操作系统如何支持不同设备的适配和兼容性？
  • 10
    鸿蒙操作系统在安全性方面有哪些特点和措施？
  • 1
    鸿蒙HarmonyOS 与 Android 的NDK有什么区别？
    457
  • 2
    润开鸿与蚂蚁数科达成战略合作，发布基于鸿蒙的mPaaS移动应用开发产品
    145
  • 3
    HarmonyOS应用开发者基础认证 模拟考试 题库
    588
  • 4
    日志服务 HarmonyOS NEXT 日志采集最佳实践
    117454
  • 5
    MediaBox音视频终端SDK已适配鸿蒙星河版（HarmonyOS NEXT）
    338
  • 6
    首个身份认证SDK适配鸿蒙系统！阿里云金融级实人认证产品再升级
    655
  • 7
    “纯血鸿蒙”要来了，赶紧入手学习吧
    449
  • 8
    HarmonyOS的功能及场景应用
    346
  • 9
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Scroll容器组件
    708
  • 10
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之RowSplit容器组件
    175

    • 相关课程

    更多
  • React 入门教程开发文档
  • React 入门与实战

    • 相关电子书

    更多
  • React-Native 在iOS上的性能优化方案
  • ReactNative实战优化之路
  • ReactNative启动性能优化
    • 下一篇
    DataWorks智能交互式数据开发与分析之旅