• 【鴻蒙專欄，從入門到實戰系列】：
  https://blog.csdn.net/qq_41684621/category_10128500.html

• 1. TickTimer定時器元件說明：
• 2. 實現案例——計時器
• 3. TickTimer元件——bug彙總：
• 4. TickTimer定時器案例——統計10秒內按鈕點選的次數

1. TickTimer定時器元件說明：

• 是Text的子類，所以可以使用Text的一些屬性
• 該元件目前有一些bug，後續版本中會修復這些bug的

常見屬性：

常見方法：

基本用法：

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;
    }
}

• 執行：