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

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

2021-10-04 532
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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实战组件
兮动人
目录
相关文章
lqj_本人
|
10天前
|
安全 API 数据处理
鸿蒙next版开发：ArkTS组件通用属性（隐私遮罩）
在HarmonyOS 5.0中，ArkTS引入了隐私遮罩功能，用于保护用户隐私和数据安全。本文详细介绍了隐私遮罩的通用属性和使用方法，并提供了示例代码。隐私遮罩支持Image和Text组件，在数据加载或处理过程中防止敏感信息泄露，提升用户体验和数据安全性。
lqj_本人
33 11
lqj_本人
|
10天前
|
开发者 UED 容器
鸿蒙next版开发：ArkTS组件通用属性（Flex布局）
在HarmonyOS next中，ArkTS的Flex布局是一种强大且灵活的布局方式，支持水平或垂直方向排列元素，并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap，适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
lqj_本人
37 10
lqj_本人
|
10天前
|
开发者 容器
鸿蒙next版开发：ArkTS组件通用属性（文本通用）
在HarmonyOS 5.0中，ArkTS提供了丰富的文本通用属性，如textAlign、maxLines、textOverflow、fontSize、fontColor、fontStyle、fontWeight、fontFamily、lineHeight、letterSpacing和decoration等，用于实现多样的文本显示和样式效果。本文详细解读了这些属性，并提供了示例代码，帮助开发者更好地利用这些工具，提升应用界面的美观和实用性。
lqj_本人
41 8
lqj_本人
|
10天前
|
开发框架 UED 开发者
鸿蒙next版开发：ArkTS组件通用属性（显隐控制）
在HarmonyOS 5.0中，ArkTS引入了显隐控制属性，允许开发者通过`visibility`属性控制组件的显示与隐藏，优化用户体验和应用性能。本文详细解析了`visibility`属性的三种状态（Visible、Hidden、None）及其应用场景，并通过示例代码展示了如何使用显隐控制属性，避免组件频繁创建和销毁，提升性能。
lqj_本人
33 8
lqj_本人
|
10天前
|
API UED 开发者
鸿蒙next版开发：ArkTS组件通用属性（透明度设置）
在HarmonyOS 5.0中，ArkTS引入了透明度设置属性`opacity`，允许开发者自定义组件的透明度，从而创建复杂的视觉效果和提升用户体验。本文详细解读了`opacity`属性的用法，并提供了示例代码，展示了如何在不同透明度下展示组件。透明度设置在UI开发中具有多种用途，如创建重叠效果、增强美观性和实现动画效果。
lqj_本人
27 7
lqj_本人
|
10天前
|
UED 开发者 容器
鸿蒙next版开发：ArkTS组件通用属性（位置设置）
在HarmonyOS next中，ArkTS提供了align、direction、position、markAnchor、offset和alignRules等通用属性，用于精确控制组件在用户界面中的位置和布局。本文详细解读了这些属性，并提供了示例代码进行说明。通过这些属性，开发者可以实现精确布局、动态界面调整和提升用户体验。
lqj_本人
43 6
lqj_本人
|
10天前
|
UED 开发者
鸿蒙next版开发：ArkTS组件通用属性（边框设置）
在HarmonyOS 5.0中，ArkTS提供了丰富的边框设置属性，允许开发者自定义组件的边框样式，提升应用的视觉效果和用户体验。本文详细解读了border属性的使用方法，并提供了示例代码，展示了如何设置不同边的边框宽度、颜色、圆角和样式。边框设置在UI开发中具有重要作用，如区分组件、强调重要元素和美化界面。
lqj_本人
38 6
lqj_本人
|
10天前
|
UED 开发者 容器
鸿蒙next版开发：ArkTS组件通用属性（布局约束）
在HarmonyOS next中，ArkTS提供了一系列通用属性来设置组件的布局约束，使开发者能够灵活控制组件的布局行为。本文详细解读了这些属性，包括`space`、`justifyContent`、`alignItems`、`layoutWeight`、`matchParent`和`wrapContent`，并通过示例代码展示了它们的使用方法。这些属性有助于实现响应式布局、动态界面调整和提升用户体验。
lqj_本人
32 5
lqj_本人
|
10天前
|
UED 开发者
鸿蒙next版开发：ArkTS组件通用属性（图片边框设置）
在HarmonyOS 5.0中，ArkTS提供了灵活的图片边框设置属性，使开发者可以为应用中的图片组件添加各种边框效果，提升视觉效果和用户体验。本文详细解读了ArkTS中图片边框设置的通用属性，并提供了示例代码。通过设置`borderImage`属性，可以控制边框的图源、切割宽度、边框宽度、延伸距离、平铺模式和是否填充。示例代码展示了如何使用这些属性来创建具有不同边框效果的图片组件。图片边框设置在美化界面、区分内容和增强交互方面有重要作用。
lqj_本人
32 5
lqj_本人
|
10天前
|
UED 开发者 容器
鸿蒙next版开发：ArkTS组件通用属性（背景设置）
在HarmonyOS 5.0中，ArkTS提供了多种背景设置属性，如backgroundColor、backgroundImage、backgroundSize、backgroundPosition和backgroundBlurStyle，允许开发者自定义组件的背景样式，提升应用的视觉效果和用户体验。本文详细解读了这些属性，并提供了示例代码进行说明。
lqj_本人
32 5

热门文章

最新文章

  • 1
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发（一） 嵌入式Linux开发基本概念以及开发流程介绍
  • 2
    鸿蒙应用开发项目新建过程与hap包生成方法
  • 3
    【鸿蒙软件开发】ArkUI容器组件之Grid(网格布局)
  • 4
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发（四）传输文件
  • 5
    【鸿蒙软件开发】文本显示（Text/Span）
  • 6
    【鸿蒙软件开发】UIAbility组件概况、生命周期与启动模式
  • 7
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发流程（六）烧写整个系统或更新部分系统
  • 8
    scrcpy投屏工具的在harmonyOS开发上的使用
  • 9
    【HarmonyOS 4.0 应用开发实战】ArkTS 快速入门
  • 10
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发（七）Ubuntu开发环境配置
  • 1
    鸿蒙HarmonyOS 与 Android 的NDK有什么区别？
    316
  • 2
    润开鸿与蚂蚁数科达成战略合作，发布基于鸿蒙的mPaaS移动应用开发产品
    123
  • 3
    HarmonyOS应用开发者基础认证 模拟考试 题库
    494
  • 4
    日志服务 HarmonyOS NEXT 日志采集最佳实践
    117292
  • 5
    MediaBox音视频终端SDK已适配鸿蒙星河版（HarmonyOS NEXT）
    309
  • 6
    首个身份认证SDK适配鸿蒙系统！阿里云金融级实人认证产品再升级
    602
  • 7
    “纯血鸿蒙”要来了，赶紧入手学习吧
    366
  • 8
    HarmonyOS的功能及场景应用
    213
  • 9
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Scroll容器组件
    618
  • 10
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之RowSplit容器组件
    154

    • 相关课程

    更多
  • React 入门教程开发文档
  • 前端开发框架Bootstrap使用教程
  • C++ 入门教程开发文档
  • React 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • ReactNative实战优化之路
  • React-Native 在iOS上的性能优化方案
  • 函数计算最佳实践：快速开发一个分布式 Puppeteer 网页截图服务

    • 相关实验场景

    更多
  • 函数计算入门-HelloWorld应用开发
  • 零基础入门Serverless：TodoList应用创建
    • 下一篇
    阿里云OSS设置跨域访问