使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第四十四讲)

这一期讲解的控件是时钟控件，dclock 是 LVGL 库中的一个组件，用于创建模拟时钟时用来用数字显示当前的时间。

• 显示当前时间：时钟控件可以显示当前的小时和分钟。
• 自定义外观：开发人员可以自定义时钟控件的外观，包括字体、颜色、背景等。
• 动态更新：时钟控件可以根据实时时间进行动态更新，显示当前时间。
• 事件处理：时钟控件可以处理用户交互事件，例如点击或按压事件。

如上图所示，在GUI_guider中使用控件拖拽的方式在右侧的属性列表中，使用特定参数控制数字时钟的时间、颜色、位置大小以及主题等设置。

以下是实现的代码：

//全局变量
int screen_1_digital_clock_1_min_value = 25;
int screen_1_digital_clock_1_hour_value = 11;
int screen_1_digital_clock_1_sec_value = 50;
char screen_1_digital_clock_1_meridiem[] = “AM”;

//Write codes screen_1_digital_clock_1
//静态布尔变量，用于标记定时器是否已启用
static bool screen_1_digital_clock_1_timer_enabled = false;
//创建数字时钟控件
ui->screen_1_digital_clock_1 = lv_dclock_create(ui->screen_1, “11:25:50 AM”);
//创建并启用定时器
if (!screen_1_digital_clock_1_timer_enabled) {
lv_timer_create(screen_1_digital_clock_1_timer, 1000, NULL);
screen_1_digital_clock_1_timer_enabled = true;
}
//设置位置以及大小
lv_obj_set_pos(ui->screen_1_digital_clock_1, 185, 186);
lv_obj_set_size(ui->screen_1_digital_clock_1, 130, 36);

//Write style for screen_1_digital_clock_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
//设置圆角半径为0
lv_obj_set_style_radius(ui->screen_1_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置文字颜色为#FFFFFF白色
lv_obj_set_style_text_color(ui->screen_1_digital_clock_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
//使用 Montserrat Medium 16号字体
lv_obj_set_style_text_font(ui->screen_1_digital_clock_1, &lv_font_montserratMedium_16, LV_PART_MAIN|LV_STATE_DEFAULT);
//文字不透明度255
lv_obj_set_style_text_opa(ui->screen_1_digital_clock_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
//字间距为0
lv_obj_set_style_text_letter_space(ui->screen_1_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
//文字对齐
lv_obj_set_style_text_align(ui->screen_1_digital_clock_1, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);
//背景不透明度255
lv_obj_set_style_bg_opa(ui->screen_1_digital_clock_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
//背景颜色蓝色#2195f6
lv_obj_set_style_bg_color(ui->screen_1_digital_clock_1, lv_color_hex(0x2195f6), LV_PART_MAIN|LV_STATE_DEFAULT);
//无渐变效果
lv_obj_set_style_bg_grad_dir(ui->screen_1_digital_clock_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
//上内边距：7px 右、下、左内边距：0px
lv_obj_set_style_pad_top(ui->screen_1_digital_clock_1, 7, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_pad_right(ui->screen_1_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_pad_bottom(ui->screen_1_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_pad_left(ui->screen_1_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
//阴影宽度为0（无阴影）
lv_obj_set_style_shadow_width(ui->screen_1_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
本文章由威三学社出品
对课程感兴趣可以私信联系