LVGL AnalogClock控件和Dclock控件详解

一、AnalogClock控件详解

1. 概述

analogClock 是 LVGL 库中的一个组件，用于创建模拟时钟。它可以显示小时、分钟和秒针，提供直观的时钟界面。

2. 创建模拟时钟

2.1 函数

lv_obj_t * lv_analogclock_create(lv_obj_t * parent);

2.2 参数

• parent: 父对象。

2.3 返回值

• 新创建的模拟时钟对象。

3. 设置时间

3.1 函数

void lv_analogclock_set_time(lv_obj_t * obj, uint8_t hour, uint8_t minute, uint8_t second);

3.2 参数

• obj: 模拟时钟对象。
• hour: 小时（0-23）。
• minute: 分钟（0-59）。
• second: 秒（0-59）。

4. 获取时间

4.1 函数

void lv_analogclock_get_time(lv_obj_t * obj, uint8_t * hour, uint8_t * minute, uint8_t * second);

4.2 参数

• obj: 模拟时钟对象。
• hour: 存储小时的指针。
• minute: 存储分钟的指针。
• second: 存储秒的指针。

5. 设置样式

5.1 常用样式属性

• LV_ANALOGCLOCK_STYLE_MAIN: 主要样式，包括背景和表盘。
• LV_ANALOGCLOCK_STYLE_NEEDLE_HOUR: 小时指针样式。
• LV_ANALOGCLOCK_STYLE_NEEDLE_MIN: 分钟指针样式。
• LV_ANALOGCLOCK_STYLE_NEEDLE_SEC: 秒针样式。

5.2 示例代码

lv_style_t style;
lv_style_init(&style);
lv_style_set_bg_color(&style, lv_color_hex(0x000000)); // 设置背景颜色
lv_style_set_bg_img_src(&style, &my_dial_img); // 设置表盘图片lv_obj_add_style(obj, &style, LV_PART_MAIN);

6. 更新时间

6.1 定时器回调示例

static void timer_cb(lv_timer_t * timer)
{lv_obj_t * clock = (lv_obj_t *)timer->user_data;time_t now = time(NULL);struct tm * local_time = localtime(&now);lv_analogclock_set_time(clock, local_time->tm_hour, local_time->tm_min, local_time->tm_sec);
}

6.2 创建定时器

lv_timer_t * timer = lv_timer_create(timer_cb, 1000, clock);

7. 示例代码

7.1 完整示例

#include "lvgl/lvgl.h"static void timer_cb(lv_timer_t * timer)
{lv_obj_t * clock = (lv_obj_t *)timer->user_data;time_t now = time(NULL);struct tm * local_time = localtime(&now);lv_analogclock_set_time(clock, local_time->tm_hour, local_time->tm_min, local_time->tm_sec);
}int main(void)
{lv_init();// 初始化显示器驱动// lv_disp_drv_t disp_drv;// lv_disp_drv_init(&disp_drv);// disp_drv.disp_flush = my_disp_flush;// lv_disp_drv_register(&disp_drv);// 创建模拟时钟lv_obj_t * clock = lv_analogclock_create(lv_scr_act());// 设置初始时间lv_analogclock_set_time(clock, 12, 30, 45);// 创建定时器lv_timer_t * timer = lv_timer_create(timer_cb, 1000, clock);while (1) {lv_task_handler();lv_timer_handler();usleep(5000);}return 0;
}

二、Dclock控件详解

在LVGL中使用时钟控件（Dclock）可以实现以下功能：

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

三、效果展示

四、源码分享

ui.h

typedef struct
{lv_obj_t *screen;bool screen_del;lv_obj_t *screen_analog_clock_1;lv_obj_t *screen_digital_clock_1;
}lv_ui;

ui.c

/*
* Copyright 2025 NXP
* NXP Confidential and Proprietary. This software is owned or controlled by NXP and may only be used strictly in
* accordance with the applicable license terms. By expressly accepting such terms or by downloading, installing,
* activating and/or otherwise using the software, you are agreeing that you have read, and that you agree to
* comply with and are bound by, such license terms.  If you do not agree to be bound by the applicable license
* terms, then you may not retain, install, activate or otherwise use the software.
*/#include "lvgl.h"
#include <stdio.h>
#include "gui_guider.h"
#include "events_init.h"
#include "widgets_init.h"
#include "custom.h"int screen_analog_clock_1_hour_value = 3;
int screen_analog_clock_1_min_value = 20;
int screen_analog_clock_1_sec_value = 50;
int screen_digital_clock_1_min_value = 25;
int screen_digital_clock_1_hour_value = 11;
int screen_digital_clock_1_sec_value = 50;
char screen_digital_clock_1_meridiem[] = "AM";
void setup_scr_screen(lv_ui *ui)
{//Write codes screenui->screen = lv_obj_create(NULL);lv_obj_set_size(ui->screen, 800, 480);lv_obj_set_scrollbar_mode(ui->screen, LV_SCROLLBAR_MODE_OFF);//Write style for screen, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.lv_obj_set_style_bg_opa(ui->screen, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_color(ui->screen, lv_color_hex(0x21d0e3), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_grad_dir(ui->screen, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);//Write codes screen_analog_clock_1static bool screen_analog_clock_1_timer_enabled = false;ui->screen_analog_clock_1 = lv_analogclock_create(ui->screen);lv_analogclock_hide_digits(ui->screen_analog_clock_1, false);lv_analogclock_set_major_ticks(ui->screen_analog_clock_1, 2, 10, lv_color_hex(0x555555), 10);lv_analogclock_set_ticks(ui->screen_analog_clock_1, 2, 5, lv_color_hex(0x333333));lv_analogclock_set_hour_needle_line(ui->screen_analog_clock_1, 2, lv_color_hex(0x00ff00), -40);lv_analogclock_set_min_needle_line(ui->screen_analog_clock_1, 2, lv_color_hex(0xE1FF00), -30);lv_analogclock_set_sec_needle_line(ui->screen_analog_clock_1, 2, lv_color_hex(0x6600FF), -10);lv_analogclock_set_time(ui->screen_analog_clock_1, screen_analog_clock_1_hour_value, screen_analog_clock_1_min_value,screen_analog_clock_1_sec_value);// create timerif (!screen_analog_clock_1_timer_enabled) {lv_timer_create(screen_analog_clock_1_timer, 1000, NULL);screen_analog_clock_1_timer_enabled = true;}lv_obj_set_pos(ui->screen_analog_clock_1, 79, 115);lv_obj_set_size(ui->screen_analog_clock_1, 200, 200);//Write style for screen_analog_clock_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.lv_obj_set_style_bg_opa(ui->screen_analog_clock_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_color(ui->screen_analog_clock_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_grad_dir(ui->screen_analog_clock_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_border_width(ui->screen_analog_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_shadow_width(ui->screen_analog_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);//Write style for screen_analog_clock_1, Part: LV_PART_TICKS, State: LV_STATE_DEFAULT.lv_obj_set_style_text_color(ui->screen_analog_clock_1, lv_color_hex(0xff0000), LV_PART_TICKS|LV_STATE_DEFAULT);lv_obj_set_style_text_font(ui->screen_analog_clock_1, &lv_font_montserratMedium_12, LV_PART_TICKS|LV_STATE_DEFAULT);lv_obj_set_style_text_opa(ui->screen_analog_clock_1, 255, LV_PART_TICKS|LV_STATE_DEFAULT);//Write style for screen_analog_clock_1, Part: LV_PART_INDICATOR, State: LV_STATE_DEFAULT.lv_obj_set_style_bg_opa(ui->screen_analog_clock_1, 255, LV_PART_INDICATOR|LV_STATE_DEFAULT);lv_obj_set_style_bg_color(ui->screen_analog_clock_1, lv_color_hex(0x000000), LV_PART_INDICATOR|LV_STATE_DEFAULT);lv_obj_set_style_bg_grad_dir(ui->screen_analog_clock_1, LV_GRAD_DIR_NONE, LV_PART_INDICATOR|LV_STATE_DEFAULT);//Write codes screen_digital_clock_1static bool screen_digital_clock_1_timer_enabled = false;ui->screen_digital_clock_1 = lv_dclock_create(ui->screen, "11:25:50 AM");if (!screen_digital_clock_1_timer_enabled) {lv_timer_create(screen_digital_clock_1_timer, 1000, NULL);screen_digital_clock_1_timer_enabled = true;}lv_obj_set_pos(ui->screen_digital_clock_1, 541, 208);lv_obj_set_size(ui->screen_digital_clock_1, 130, 36);//Write style for screen_digital_clock_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.lv_obj_set_style_radius(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_color(ui->screen_digital_clock_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_font(ui->screen_digital_clock_1, &lv_font_montserratMedium_16, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_opa(ui->screen_digital_clock_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_letter_space(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_text_align(ui->screen_digital_clock_1, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_opa(ui->screen_digital_clock_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_color(ui->screen_digital_clock_1, lv_color_hex(0x2195f6), LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_grad_dir(ui->screen_digital_clock_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_pad_top(ui->screen_digital_clock_1, 7, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_pad_right(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_pad_bottom(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_pad_left(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_shadow_width(ui->screen_digital_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);//The custom code of screen.//Update current screen layout.lv_obj_update_layout(ui->screen);}

觉得整理的好的话麻烦点个赞呗！