ESP32 LVGL8.1 ——Calendar 日历 (Calendar 25)
提示:本博客作为学习笔记,有错误的地方希望指正
文章目录
前言:匆匆忙忙,时光是一把岁月的杀猪刀,慢慢的改变我们的模样,2021年已经过去,迎接崭新的2022,无论过去,不问将来。新的一年元旦快乐!!
一、Calendar 简介
1.1概述 Overview
Calendar对象是一个经典的日历,它可以:
• 在一个7x7矩阵中显示任意月份的天数
• 显示日期的名称
•突出当前的一天(今天)
• 突出显示任何用户定义的日期
Calendar被添加到默认组(如果设置了它)。此外,日历是一个可编辑的对象,允许选择和单击日期与编码器导航。
为了使Calendar灵活,默认情况下它不显示当前的年或月。取而代之的是,可以附加到日历的外部“标题”区域。
1.2部分和风格 Parts and Styles
calendar对象在其内部使用Button矩阵对象将日期安排到一个矩阵中。
• LV_PART_MAIN 日历的背景。它使用了所有与背景相关的样式属性。
• LV_PART_ITEMS指的是日期和日期的名称。设置按钮矩阵控件标志来区分按钮,并添加一个自定义
折叠项事件来修改按钮的属性:
日期名称没有边界,没有背景,用灰色绘制
前一个月和下一个月的天数有LV_BTNMATRIX_CTRL_DISABLED标志
今天有一个更厚的边框与主题的原色
高亮的日子有一些不透明的主题原色。
1.3使用 Usage
一些函数使用lv_calendar_date_t类型,这是一个带有年、月和日字段的结构。
1.3.1当前日期 Current date
要设置当前日期(今天),使用lv_calendar_set_today_date(calendar, year, month, day)函数。月需要在1…12
rangeand day in 1…31范围。
1.3.2高亮显示天数 Highlighted days
高亮显示的日期列表应该存储在lv_calendar_date_t数组中,该数组由lv_calendar_set_highlighted_dates(calendar,highlighted_dates, date_num)加载。
只有数组指针会被保存,因此数组应该是静态或全局变量。
1.3.3天的名称 Name of the days
天数的名称可以用lv_calendar_set_day_names(calendar, day_names)调整,其中day_names看起来像const char *day_names[7] = {“Su”, “Mo”,…};只保存日期名称的指针,因此元素应该是静态、全局或常量变量。
1.4事件 Events
LV_EVENT_VALUE_CHANGED表示单击数据。Lv_calendar_get_pressed_date (calendar, &date)告诉当前按下的是哪一天。如果有有效的按下的数据,返回LV_RES_OK,否则LV_RES_INV。
1.5按键 Keys
• LV_KEY_RIGHT/UP/LEFT/RIGHT在按钮之间导航到日期
• LV_KEY_ENTER 按下/释放选定日期
1.6页眉 Headers
1.6.1 箭头按键 Arrow buttons
lv_calendar_header_arrow_crea te (pare nt, calend ar, button_size)创建一个页眉,页眉的两侧包含一个左右箭头,以及其中包含当前年份和月份的文本。
1.6.2 下拉 Drop-down
Lv_calendar_header_dropdown_create (calendar)创建了一个包含2个下拉列表的标题
一年,一个月。
二、Calendar API
lv_obj_t * lv_calendar_create(lv_obj_t * parent); //创建日历
void lv_calendar_set_today_date(lv_obj_t * obj, uint32_t year, uint32_t month, uint32_t day); //设定今天的日期
void lv_calendar_set_showed_date(lv_obj_t * obj, uint32_t year, uint32_t month); //设置当前显示
void lv_calendar_set_highlighted_dates(lv_obj_t * obj, lv_calendar_date_t highlighted[], uint16_t date_num);//设置突出显示的日期
void lv_calendar_set_day_names(lv_obj_t * obj, const char ** day_names); //设置天的名称
lv_obj_t * lv_calendar_get_btnmatrix(const lv_obj_t * obj); //获取日历的按钮矩阵对象
const lv_calendar_date_t * lv_calendar_get_today_date(const lv_obj_t * calendar); //得到今天的日期
const lv_calendar_date_t * lv_calendar_get_showed_date(const lv_obj_t * calendar); //获取当前显示的内容
lv_calendar_date_t * lv_calendar_get_highlighted_dates(const lv_obj_t * calendar); //获取突出显示的日期
uint16_t lv_calendar_get_highlighted_dates_num(const lv_obj_t * calendar); //获得突出显示的日期的数量
lv_res_t lv_calendar_get_pressed_date(const lv_obj_t * calendar, lv_calendar_date_t * date); //获得按压数据
lv_obj_t * lv_calendar_header_dropdown_create(lv_obj_t * parent); //创建一个日历标题,带有下拉框来选择年和月
三、示例
值得注意的是LVGL8 版本和8.1版本中的lv_calendar_header_dropdown_create(); 的这个API有些不同
3.1示例日历的基本显示
/*************************************************
* 函数名称 : calendar_event_handler
* 参 数 : 无
* 函数功能 : 日历回调显示
*************************************************/
static void calendar_event_handler(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e); //获取回调事件
lv_obj_t * obj = lv_event_get_current_target(e); //获得当前目标函数
if(code == LV_EVENT_VALUE_CHANGED){ //事件判断
lv_calendar_date_t date;
if(lv_calendar_get_pressed_date(obj,&date)){ //获取日期
LV_LOG_USER("Click date:%02d.%02d.%d",date.day,date.month,date.year);
}
}
}
/*************************************************
* 函数名称 : Calendar_show
* 参 数 : 无
* 函数功能 : 日历显示
*************************************************/
void Calendar_show()
{
lv_obj_t * calendar = lv_calendar_create(lv_scr_act()); //创建日历对象
lv_obj_set_size(calendar,185,185); //设置尺寸
lv_obj_align(calendar,LV_ALIGN_CENTER,0,27); //设置位置
lv_obj_add_event_cb(calendar,calendar_event_handler,LV_EVENT_ALL,NULL); //设置回调函数
lv_calendar_set_today_date(calendar,2022,01,01); //设置今天日期
lv_calendar_set_showed_date(calendar,2022,01); //设置当前日期
static lv_calendar_date_t highlighted_days[3];
highlighted_days[0].year = 2022;
highlighted_days[0].month = 01;
highlighted_days[0].day = 01;
highlighted_days[1].year = 2022;
highlighted_days[1].month = 01;
highlighted_days[1].day = 01;
highlighted_days[2].year = 2022;
highlighted_days[2].month = 01;
highlighted_days[2].day = 01;
lv_calendar_set_highlighted_dates(calendar,highlighted_days,3); //设置高亮日期
lv_calendar_header_dropdown_create(lv_scr_act(),calendar); //创建一个日历标题,带有下拉框来选择年和月 LVGL8.0
// lv_calendar_header_dropdown_create(calendar); //创建一个日历标题,带有下拉框来选择年和月 LVGL8.1
lv_calendar_set_showed_date(calendar,2022,01); //设置当前显示
}
更多推荐
所有评论(0)