使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第四十三讲)
这一期讲解的控件是模拟时钟,analogClock 是 LVGL 库中的一个组件,用于创建模拟时钟。它可以显示小时、分钟和秒针,提供直观的时钟界面。
上图是GUI_guider中支持的属性参数,可以控制间距隐藏数字以及原点,还可以控制时针、分针和秒针的颜色线条宽度以及指针类型。
以下是代码:
//Write codes screen_1_analog_clock_1
static bool screen_1_analog_clock_1_timer_enabled = false;
//创建模拟时钟控件
ui->screen_1_analog_clock_1 = lv_analogclock_create(ui->screen_1);
//显示/隐藏数字刻度
lv_analogclock_hide_digits(ui->screen_1_analog_clock_1, false);
//设置主要刻度(小时刻度)
lv_analogclock_set_major_ticks(ui->screen_1_analog_clock_1, 2, 10, lv_color_hex(0x555555), 10);
//设置次要刻度(分钟刻度)
lv_analogclock_set_ticks(ui->screen_1_analog_clock_1, 2, 5, lv_color_hex(0x333333));
//设置时针
lv_analogclock_set_hour_needle_line(ui->screen_1_analog_clock_1, 2, lv_color_hex(0x00ff00), -40);
//设置分针
lv_analogclock_set_min_needle_line(ui->screen_1_analog_clock_1, 2, lv_color_hex(0xE1FF00), -30);
//设置秒针
lv_analogclock_set_sec_needle_line(ui->screen_1_analog_clock_1, 2, lv_color_hex(0x6600FF), -10);
//设置时间
lv_analogclock_set_time(ui->screen_1_analog_clock_1, screen_1_analog_clock_1_hour_value, screen_1_analog_clock_1_min_value,screen_1_analog_clock_1_sec_value);
// create timer
//创建定时器
if (!screen_1_analog_clock_1_timer_enabled) {
lv_timer_create(screen_1_analog_clock_1_timer, 1000, NULL);
screen_1_analog_clock_1_timer_enabled = true;
}
//设置位置以及大小
lv_obj_set_pos(ui->screen_1_analog_clock_1, 106, 106);
lv_obj_set_size(ui->screen_1_analog_clock_1, 263, 263);
//Write style for screen_1_analog_clock_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
//设置不透明度
lv_obj_set_style_bg_opa(ui->screen_1_analog_clock_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置颜色背景
lv_obj_set_style_bg_color(ui->screen_1_analog_clock_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
//渐变方向
lv_obj_set_style_bg_grad_dir(ui->screen_1_analog_clock_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
//边框宽度
lv_obj_set_style_border_width(ui->screen_1_analog_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
//阴影宽度
lv_obj_set_style_shadow_width(ui->screen_1_analog_clock_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
//Write style for screen_1_analog_clock_1, Part: LV_PART_TICKS, State: LV_STATE_DEFAULT.
//刻度文本颜色
lv_obj_set_style_text_color(ui->screen_1_analog_clock_1, lv_color_hex(0xff0000), LV_PART_TICKS|LV_STATE_DEFAULT);
//刻度文本字体
lv_obj_set_style_text_font(ui->screen_1_analog_clock_1, &lv_font_montserratMedium_12, LV_PART_TICKS|LV_STATE_DEFAULT);
//刻度文本不透明度
lv_obj_set_style_text_opa(ui->screen_1_analog_clock_1, 255, LV_PART_TICKS|LV_STATE_DEFAULT);
//Write style for screen_1_analog_clock_1, Part: LV_PART_INDICATOR, State: LV_STATE_DEFAULT.
//指针背景不透明度
lv_obj_set_style_bg_opa(ui->screen_1_analog_clock_1, 255, LV_PART_INDICATOR|LV_STATE_DEFAULT);
//指针背景颜色
lv_obj_set_style_bg_color(ui->screen_1_analog_clock_1, lv_color_hex(0x000000), LV_PART_INDICATOR|LV_STATE_DEFAULT);
//指针渐变方向
lv_obj_set_style_bg_grad_dir(ui->screen_1_analog_clock_1, LV_GRAD_DIR_NONE, LV_PART_INDICATOR|LV_STATE_DEFAULT);
本文章由威三学社出品
对课程感兴趣可以私信联系
DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐

所有评论(0)