倒计时案例

使用定时器以及数字时钟实现倒计时功能，点击按钮开始倒计时，倒计时结束后自动停止。

本章目录
本章正文

创建控件

  • 分别创建定时器、数字时钟以及按钮这三种控件
  • 点击工具栏中的模型添加消息模型，并且设置想要的倒计时初始事件，示例此处为10秒
  • 修改数字时钟控件属性中的时间以及日期格式，并绑定消息模型

设置按钮触发事件并编写事件代码

//上半部分
struct
{
  int btn1;
} btn_clicked_cnt = {
  .btn1 = 1,
};

struct tm btn_1_time_var = {
  .tm_min = 0,
  .tm_sec = 10,
};

//下半部分
btn_clicked_cnt.btn1++;
btn_1_time_var.tm_sec = 10;  //对应倒计时的秒
btn_1_time_var.tm_min = 0;   //对应倒计时的分

gui_msg_send(GUI_COUNT_MSG_ID_TIME, (uint16_t *)&btn_1_time_var, 4);
if (btn_clicked_cnt.btn1 == 2) {
    if (ui_scr->home_timer_1 == NULL) {
        ui_scr->home_timer_1 = lv_timer_create(home_timer_1_timer_cb, 1000, "");
    }
    lv_timer_set_period(ui_scr->home_timer_1, 1000);
    lv_timer_set_repeat_count(ui_scr->home_timer_1, 10);
    lv_timer_resume(ui_scr->home_timer_1);
    btn_clicked_cnt.btn1 = 0;
    lv_obj_clear_flag(ui_scr->home_btn_1, LV_OBJ_FLAG_CLICKABLE);
}

设置时钟属性以及编写事件回调代码

//上半部分
extern struct tm btn_1_time_var;

//下半部分
btn_1_time_var.tm_sec--;
gui_msg_send(GUI_COUNT_MSG_ID_TIME, (uint16_t *)&btn_1_time_var, 4);

if (btn_1_time_var.tm_sec <= 0 && btn_1_time_var.tm_min != 0) {
    btn_1_time_var.tm_sec = 60;
    btn_1_time_var.tm_min--;
}
else if (btn_1_time_var.tm_sec == 0) {
    lv_obj_add_flag(ui_scr->home_btn_1, LV_OBJ_FLAG_CLICKABLE);
}

编译仿真

  • 编译仿真后，点击开始倒计时，即可观察到数字时钟控件倒数

计时暂停与恢复

  • 添加新的模型消息并绑定至按钮控件
  • 修改按钮触发事件代码
//上半部分
struct
{
  int btn1;
} btn_clicked_cnt = {
  .btn1 = 0,
};

struct tm btn_1_time_var = {
  .tm_min = 0,
  .tm_sec = 10,
};

//下半部分
btn_clicked_cnt.btn1++;

if (btn_clicked_cnt.btn1 < 2) {
    gui_msg_send(GUI_COUNT_MSG_ID_PROP, "暂停倒计时", 1);
    gui_msg_send(GUI_COUNT_MSG_ID_TIME, (uint16_t *)&btn_1_time_var, 4);
    lv_timer_set_period(ui_scr->home_timer_1, 1000);
    lv_timer_resume(ui_scr->home_timer_1);
}
else if (btn_clicked_cnt.btn1 == 2) {
    if (ui_scr->home_timer_1 == NULL) {
        ui_scr->home_timer_1 = lv_timer_create(home_timer_1_timer_cb, 1000, "");
    }

    lv_timer_pause(ui_scr->home_timer_1);
    if (btn_1_time_var.tm_sec <= 0) {
        btn_1_time_var.tm_sec = 10;
        btn_1_time_var.tm_min = 0;
        lv_timer_set_repeat_count(ui_scr->home_timer_1, btn_1_time_var.tm_min * 60 + btn_1_time_var.tm_sec);
    }

    gui_msg_send(GUI_COUNT_MSG_ID_PROP, "开始倒计时", 1);
    btn_clicked_cnt.btn1 = 0;
}
  • 修改定时器回调事件代码
//上半部分
extern struct tm btn_1_time_var;

//下半部分
btn_1_time_var.tm_sec--;
gui_msg_send(GUI_COUNT_MSG_ID_TIME, (uint16_t *)&btn_1_time_var, 4);

if (btn_1_time_var.tm_sec < 0 && btn_1_time_var.tm_min != 0) {
    btn_1_time_var.tm_sec = 59;
    btn_1_time_var.tm_min--;
}
else if (btn_1_time_var.tm_sec == 0 && btn_1_time_var.tm_min == 0) {
    gui_msg_send(GUI_COUNT_MSG_ID_PROP, "计时完毕", 1);
    lv_obj_add_flag(ui_scr->home_btn_1, LV_OBJ_FLAG_CLICKABLE);
}

编译仿真

  • 打包完之后再进行仿真