4. LVGL滚动属性
4.1滚动的类型:水平、垂直
4.2滚动条模式
LV_SCROLLBAR_MODE_OFF:从不显示滚动条
LV_SCROLLBAR_MODE_ON:始终显示滚动条
LV_SCROLLBAR_MODE_ACTIVE:滚动对象时显示滚动条
LV_SCROLLBAR_MODE_AUTO:当内容大到可以滚动时显示滚动条
void lv_obj_set_scrollbar_mode(lv_obj_t * obj, lv_scrollbar_mode_t mode)
例子
static lv_style_t style_red;
lv_style_init(&style_red);
/*设置背景颜色*/
lv_style_set_bg_color(&style_red,lv_color_red());
/*设置滚动条部分*/
lv_obj_add_style(obj,&style_red,LV_STATE_SCROLLED | LV_PART_SCROLLBAR):
4. 3 滚动条的回调事件
LV_EVENT_SCROLL_BEGIN:滚动开始。
LV_EVENT_SCROLL_END:滚动结束。
LV_EVENT_SCROLL:滚动发生了,每次位置变化时触发。
4.4 控制滚动条
滚动方向:
LV_DIR_TOP:只向上滚。
LV_DIR_LEFT:只向左滚动。
LV_DIR_BOTTOM:只向下滚动。
LV_DIR_RIGHT:只向右滚动。
LV_DIR_HOR:仅水平滚动。
LV_DIR_VER:仅垂直滚动。
LV_DIR_ALL:滚动任何方向。
void lv_obj_set_scroll_dir(lv_obj_t * obj,lv_dir_t dir)
清除的状态:void lv_obj_clear_flag(lv_obj_t * obj,lv_ohj_flag_t f)
4. 5 滚动条其它特性
4.5.1.滚动链:LV_OBJ_FLAG_SCROLL_CHAIN_HOR/VER
4.5.2.滚动步量:LV_OBJ_FLAG_SCROLL_MOMENTUM
4.5.3.弹性滚动:LV_OBJ_FLAG_SCROLL_ELASTIC
4.5.4.滚动捕捉对象:LV_OBJ_FLAG_SNAPPABLE
4种捕捉方式:
LV_SCROLL_SNAP_NONE:捕捉被禁用(默认)
LV_SCROLL_SNAP_START:将子项与滚动对象的左侧/项部对齐
LV_SCROLL_SNAP_END:将子项与滚动对象的右侧/底部对齐。
LV_SSCROLL_SNAP_CENTER:将子项与滚动对象的中心对齐
5. LVGL动画
函数刷新变量值原型:void func(void * var,lv_anim_var_t value);
5.1创建动画
5.1.1必须设置
//初始化一个动画
lv_anim_t a;
lv_anim_init(&a);
/*强制设置*/
/*设置“动画”函数*/
lv_anim_set_exec_cb(&a,(lv_anim_exec_xcb_t)lv_obj_set_x);
/*设置动画的目标*/
lv_anim_set_var(&a,obj);
/*动画长度[ms]*/
lv_anim_set_time(&a,duration);
/*设置起始值和结束值。例如0,150*/
lv_anim_set_values(&a,start,end);
/*开始动画*/
lv_anim_start(&a);
5.1.2.可选设置
/*可选设置*/
/*启动画前的等待时间[ms]*/
lv_anim_set_delay(&a,delay);
/*设置路径(曲线)。默认是线性的*/
lv_anim_set_path(&a,lv_anim_path_ease_in);
/*设置一个回调函数来指示动画何时准备好(空闲)*/
lv_anim_set_ready_cb(&a,ready_cb);
/*设置一个回调函数来指示动画何时启动(延迟之后)*/
lv_anim_set_start_cb(&a,start_cb);
/*准备好后,按此持续时间倒放动画。默认为0(禁用)[ms]*/
lv_anim_set_playback_time(&a,time);
/*延迟在回放。默认为0(禁用)[ms]*/
lv_anim_set_playback_delay(&a,delay);
/*重复的数量。默认值为1。LV_ANIM_REPEAT_INFINITE用于无限重复*/
lv_anim_set_repeat_count(&a,cnt);
/*重复前延迟。默认为0(禁用)[ms]*/
lv_anim_set_repeat_delay(&a,delay);
/*True(默认):立即应用起始值,false:延迟后应用起始值。真正的开始*/
lv_anim_set_early_apply(&a,true/false);
5.2设置动画路径
static inline void lv_anim_set_path_cb(lv_anim_t * a,lv_anim_path_cb_t path_cb)
参数与描述:
path_cb:
lv_anim_path_linear:线性动画
lv_anim_path_step:最后一步改变
lv_anim_path_ease_in :一开始很慢
lv_anim_path_ease_out:最后慢
lv_anim_path_ease_in_out:开始和结束都很慢
lv_anim_path_overshoot :超出最终值
lv_anim_path_bounce :从最终值反弹一点(如撞墙)
5.3设置动画速度和时间
uint32_t lv_anim_speed_to_time(uint32_t speed, int32_t start, int32_t end);
参数与描述:
speed:动画速度(单位/秒)
start:动画的起始值
end:动画的结束值
5.4删除动画
bool lv_anim_del(void * var,lv_anim_exec_xcb_t_exec_cb);
参数与描述:
var:变量指针
exec_cb:一个函数指针
5.5动画实例
static void anim_x_cb(void* var, int32_t v)
{
lv_obj_set_x(var, v);
}
void lv_example(void)
{
/* 第一步:创建标签 */
lv_obj_t* lv_obj = lv_label_create(lv_scr_act());
lv_label_set_text(lv_obj,"Hello World");
lv_obj_set_pos(lv_obj, 100, 10);
/* 第二步:动画初始化 */
lv_anim_t a;
lv_anim_init(&a);
/*第三步:设置动画目标为标签对象*/
lv_anim_set_var(&a, lv_obj);
/*第四步:设置动画起点和终点*/
lv_anim_set_values(&a, lv_obj_get_x(lv_obj), 0);
/*第五步:设置动画时间*/
lv_anim_set_time(&a, 500);
/* 第六步:设置动画回调函数 */
lv_anim_set_exec_cb (&a, anim_x_cb);
/* 第七步:设置动画轨道 */
lv_anim_set_path_cb(&a, lv_anim_path_overshoot) ;
/* 第八步:开启动画 */
lv_anim_start (&a) ;
}
5.6动画时间线
5.6.1动画时间线相关API函数
①lv_anim_timeline_t * lv_anim_timeline_create(void)
②void lv_anim_timeline_add(lv_anim_timeline_t * at,uint32_t start_time,lv_anim_t * a)
参数与描述:
at:时间线指针
start_time:开始时间
a:挂载的动画
③uint32_t lv_anim_timeline_start (lv_anim_timeline_t * at)
参数与描述:
at:时间线指针
④void lv_anim_timeline_set_reverse(lv_anim_timeline_t * at, bool reverse)
参数与描述:
at:时间线指针
reverse:Ture:支持,false:不支持
⑤void lv_anim_timeline_stop(lv_anim_timeline_t * at)
参数与描述:
at:时间线指针
⑥void lv_anim_timeline_set_progress(lv_anim_timeline_t * at,uintl6_t_progress)
参数与描述:
at:时间线指针
progress:进度数值
⑦获取动画时间线总时长:uint32_t lv_anim_timeline_get_playtime(lv_anim_timeline_t * at)
⑧bool lv_anim_timeline_get_reverse(lv_anim_timeline_t * at)
⑨清除状态标记void lv_anim_timeline_del(lv_anim_timeline_t * at)
5.7动画相关API函数
lv_anim_init():初始化一个动画变量
lv_anim_set_var():设置一个变量来动画
lv_anim_set_exec_cb():设置动画回调函数
lv_anim_set_time():设置动画的持续时间
lv_anim_set_delay():在开始动画之前设置延迟
lv_anim_set_values():设置动画的开始和结束值
lv_anim_set_path_cb():设置动画的路径(曲线)
lv_anim_set_start_cb():在动画真正开始时设置函数调用
lv_anim_set_get_value_cb():设置动画回调函数以使用变量的当前值
lv_anim_set_ready_cb():在动画准备好时设置函数调用
lv_anim_set_playback_time():使动画在前进方向准备好时播放
lv_anim_set_playback_delay():使动画在前进方向准备好时播放
lv_anim_set_repeat_count():让动画自己重复次数
lv_anim_set_repeat_delay():在重复动画之前设置延迟
lv_anim_set_early_apply():设置一个动画是应该立即应用还是仅在延迟到期时应用
lv_anim_set_user_data():设置动画的自定义用户数据字段
lv_anim_start():开启动画
lv_anim_get_delay():在开始动画之前获得延迟
lv_anim_get_playtime():获取用于播放动画的时间
lv_anim_get_user_data():获取动画的 user_data 字段
lv_anim_del():使用给定的动画器函数删除变量的动画
lv_anim_del_all():删除所有动画
lv_anim_count_running():获取当前正在运行的动画数量
lv_anim_speed_to_time():计算具有给定速度的动画的时间以及开始和结束值
lv_anim_refr_now()手动刷新动画的状态
lv_anim_path_linear():计算应用线性特征的动画的当前值
lv_anim_path_ease_in(): 计算减缓开始阶段的动画的当前值
lv_anim_path_ease_out():计算减缓结束阶段的动画的当前值
lv_anim_path_ease_in_out():计算应用"S"特征(余弦)的动画的当前值
lv_anim_path_overshoot():计算结束时有过冲的动画的当前值
lv_anim_path_bounce():计算具有3次反弹的动画的当前值
lv_anim_path_step():计算应用步进特性的动画的当前值
6. LVGL定时器
6.1创建定时器
①lv_timer_t * lv_timer_create(timer_cb,period_ms,user_data)
参数与描述:
timer_cb:定时器回调函数
参考原型:void (*lv_timer_cb_t) (lv_timer_t *);
period_ms:定时周期
user_data:传入参数
②
lv_timer_t * lv_timer_create_basic (void)
{
return lv_timer_create (NULL, DEF_PERIOD, NULL);
}
6. 2 重设/就绪定时器
①设置定时器参数:void lv_timer_set_cb(lv_timer_t * timer, lv_timer_cb_t timer_cb)
参数与描述:
timer:定时器控制块
timer_cb:定时器回调函数
参考原型:void (*lv_timer_cb_t) (lv_timer_t *);
②设置定时器周期:void lv_timer_set_period(Iv_timer_t * timer,uint32_t period)
参数与描述:
timer:定时器控制块
new_period:定时周期
③.重复计数:void lv_timer_set_repeat_count(lv_timer_t *timer, int32_t repeat_count )
参数与描述:
timer:定时器控制块
repeat_count:-1:无穷大;0:停止;n>0:剩余次数
④.获取空闲时间百分比:uint8_t lv_timer_get_idle(void)
6. 3 定时器 API 函数
①删除一个定时器:void lv_timer_del ( lv_timer_t *timer)
②暂停定时器:void lv_timer_pause (lv_timer_t *timer)
③恢复定时器:void lv_timer_resume ( lv_timer_t *timer)
④启用或禁用整个Iv_timer处理:void lv_timer_enable ( bool en )
参数与描述
en:true: lv_timer处理正在运行, false: lv_timer处理已暂停
⑤获取下一个定时器控制块:lv_timer_t * lv_timer_get_next (lv_timer_t * timer)
7.LVGL事件
事件(Event):可以理解为对一个部件的某种同类型操作动作的集合。
7.1添加事件
lv_obj_t * btn = lv_btn_create(lv_scr_act());
lv_obj_add_event_cb(btn,my_event_cb,LV_EVENT_CLICKED,NULL);
static void my_event_cb(lv_event_t * event)
{
printf("Clicked\n");
}
添加参数的函数原型:struct _lv_event_dsc_t * lv_obj_add_event_cb(lv_obj_t * obj, lv_event_cb_t event_cb, lv_event_code_t filter, void * user_data)
参数与描述:
obj:指向对象的指针
event_cb:事件回调函数
filter:事件类型
user_data:事件参数
7.2删除事件
bool lv_obj_remove_event_cb(struct _lv_obj_t * obj, lv_event_cb_t event_cb);
参数与描述:
obj:指向对象的指针
event_cb:事件回调函数
7.3事件类型
①输入设备事件
事件类型与描述
LV_EVENT_PRESSED:按下状态
LV_EVENT_PRESSING:按下时连续调用
LV_EVENT_PRESS_LOST:对象仍被按下,但光标/手指滑离对象
LV_EVENT_SHORT_CLICKED:短按,滚动不调用
LV_EVENT_LONG_PRESSED:长按(long_press_time指定长按时间),滚动不调用
LV_EVENT_LONG_PRESSED_REPEAT:长按,只调用一次。滚动则不调用。
LV_EVENT_CLICKED:如果对象没有滚动(不管长按还是短按),则在释放时调用
LV_EVENT_RELEASED:每次释放对象时调用
LV_EVENT_SCROLL_BEGIN:滚动开始
LV_EVENT_SCROLL_END:滚动结束
LV_EVENT_SCROLL:滚动了一个对象
LV_EVENT_GESTURE:检测到手势
LV_EVENT_KEY:KEY被发送到对象(按键输入设备有关)
LV_EVENT_FOCUSED:一个对象被聚焦
LV_EVENT_DEFOCUSED:对象未聚焦
LV_EVENT_LEAVE:对象未聚焦但仍被选中
LV_EVENT_HIT_TEST:执行高级命中测试。使用并检查是否可以单击对象
②绘图事件:主要描述部件绘画的事件流程
LV_EVENT_COVER_CHECK:检查一个物体是否完全覆盖了一个区域
LV_EVENT_REFR_EXT_DRAW_SIZE:获取对象周围所需的额外绘制区域(例如阴影)
LV_EVENT_DRAW_MAIN_BEGI:开始主要绘图阶段
LV_EVENT_DRAW_MAIN:执行主图
LV_EVENT_DRAW_MAIN_END:完成主要绘图阶段
LV_EVENT_DRAW_POST_BEGIN:开始绘制后阶段(当所有子类都被绘制时)
LV_EVENT_DRAW_POST:执行绘制后阶段(当所有子类都被绘制时)
LV_EVENT_DRAW_POST_END:完成后期绘制阶段(当所有子类都被绘制时)》
LV_EVENT_DRAW_PART_BEGIN:开始画一个部分
LV_EVENT_DRAW_PART_END:完成绘制一个部分
③其他事件:主要描述删除、大小、样式等事件
LV_EVENT_DELETE:正在删除对象
LV_EVENT_CHILD_CHANGED:子类被删除/添加
LV_EVENT_CHILD_CREATED:子类被创造出来:
LV_EVENT_CHILD_DELETED:子类被删除:
LV_EVENT_SIZE_CHANGED:对象坐标/大小已更改:
LV_EVENT_STYLE_CHANGED:对象的样式已更改:
LV_EVENT_BASE_DIR_CHANGED:基本目录已更改:
LV_EVENT_GET_SELF_SIZE:获取小部件的内部大小:
LV_EVENT_SCREEN_UNLOAD_START:屏幕卸载开始:
LV_EVENT_SCREEN_LOAD_STAR:屏幕加载开始:
LV_EVENT_SCREEN_LOADED:加载了一个屏幕:
LV_EVENT_SCREEN_UNLOADED:卸载屏幕
④ 特别事件:主要描述对象数值被修改等事件
LV_EVENT_VALUE_CHANGED:对象的值已更改(即滑块部件移动)
LV_EVENT_INSERT:文本被插入到对象中
LV_EVENT_REFRESH:通知对象刷新它上面的东西
LV_EVENT_READY:一个过程已经完成
LV_EVENT_CANCEL:一个进程已被取消
⑤ 自定义事件:
注册:uint32_t MY_EVENT_1 = lv_event_register_id();
lv_res_t lv_event_send (lv_obj_t * obj, lv_event_code_t event_code, void * param)
参数与描述:
obj:指向对象的指针
event_dsc:发送自定义事件类型
param:发送事件的参数
7.4获取事件字段
函数与描述
lv_event_get_code(e):获取事件类型(按下、滑动、长按等类型)
lv_event_get_current_target(e):获取向其发送事件的对象(触发这个事件的对象)
lv_event_get_target(e):获取最初触发事件的对象
lv_event_get_user_data(e):获取传入参数
lv_event_get_param(e):获取由函数lv_event_send()传入的参数
8.LVGL字库的使用
8.1.如何启用UTF-8编码
lv_conf.h文件下LV_TXT_ENC配置项定义
Keil中“魔术棒”->Editor->Encoding:Chinese GB2312(Simplified)
8.2.如何使用LVGL内置图标字体
lv_symbol_def.h文件中
使用函数
void lv_mainstart(void)
{
lv_obj_t* label = lv_label_create(lv_scr_act());
lv_label_set_text(label,LV_SYMBOL_AUDIO"AUDIO");
}
![]()
8.3.如何使用LVGL内部字库
lv_conf.h 文件中需要哪个字体就使能为1
添加字体:创建label部件,调用函数lv_obj_set_style_text_font/lv_style_set_text_font指向字库
例子:
void lv_mainstart(void)
{
lv_obj_t* label = lv_label_create(lv_scr_act());
lv_obj_set_style_text_font(label,&lv_font_montserrat_16,LV_STATE_DEFAULT);
lv_label_set_text(label,"Hello_World!");
}
8.4.如何自定义字库
①地址为:https://lvgl.io/tools/fontconverter
需要有TTF/WOFF文件
②下载:http://dz.lfly.xyz/forum. php
打开LvglFontTool软件生成myFont.c->把此文件放在Middlewares/LVGL/GUI_FONT中
使用前先进行声明:#define LV_FONT_CUSTOM_DECLARE LV_FONT_DECLARE (myFont24)
void lv_mainstart(void)
{
lv_obj_t* label = lv_label_create(lv_scr_act_());
lv_obj_set_style_text_font(label,_&myFont14,LV_STATE_DEFAULT);
lv_label_set_text_(label,"Hello_World!");
}
9.基础对象
9.1.基础对象的角色定位
基础对象(lv_obj)是调用函数lv_obj_create创建的
基础对象(lv_obj)在UI的作用
界面切换原理
(1)删除法lv_obj_del
(2)隐蔽法
①添加隐藏标记:void lv_obj_add_flag(lv_obj_t *obj,lv_obj_flag_t f)
参数与描述
obj:指向对象的指针
f:R-ed 值从 Iv_obj_flag_t 设置
②清除隐藏标记:void lv_obj_clear_flag(lv_objt *obj,lv_obj_flag_t f)
9.2.基础对象的相关知识
①扩展点击区域:void lv_obj_set_ext_click_area (lv_obj_t * obj, lv_coord_t size)
参数与描述
obj:指向对象的指针
size:设置点击区域大小
②组的定义:lv_group_t * lv_group_create(void)
void lv_group_add_obj(lv_group_t * group,struct_lv_obj_t * obj);
参数与描述
group:指向组的指针
obj:指向对象的指针
9.3.基础对象的API函数
①创建基础对象(矩形):lv_obj_t * lv_obj_create (lv_obj_t * parent)
参数与描述
parent:部件的父类
②设置对象的 user_data 字段:lv_state_t lv_obj_get_state(const lv_obj_t * obj)
lv_obj_has_flag():检查是否在对象上设置了给定标志或所有给定标志
lv_obj_has_flag_any():检查是否在对象上设置了给定标志或任何标志
lv_obj_get_state():获取对象的状态
lv_obj_has_state():检查对象是否处于给定状态
lv_obj_get_group():获取对象的组
lv_obj_get_user_data(): 获取对象的 user_data 字段
lv_obj_allocate_spec_attr():如果尚未分配,则为对象分配特殊数据
lv_obj_check_type():检查 obj 的类型
lv_obj_has_class():检查是否有任何对象具有给定的类(类型)
lv_obj_get_class():获取对象的类(类型)
lv_obj_is_valid():检查是否有任何对象仍然“活着”
10.lv_arc圆弧
10.1.圆弧的组成
圆弧(lv_ard)控件由背景弧、前景弧和指示器组成。
10.2.圆弧的相关知识
①圆弧的值和范围设置:
void lv_mainstart(void)
{
lv_obj_t* arc = lv_arc_create(lv_scr_act_());
lv_arc_set_range(arc,0,l00); /*设置arc的范围*/
lv_arc_set_value(arc,50); /*设置arc的值*/
lv_obj_set_size(arc,200,200);
lv_obj_align_to(arc,NULL,LV_ALIGN_CENTER,0,0);
}
![]()
②圆弧控件角度设置:
lv_arc_set_bg_angles (arc, start_angle, end_angle) /* 背景起始角度和终止角度 */
lv_arc_set_bg_start/end_angle(arc, start_angle) /*背景设置起始角度/终止角度*/
lv_arc_set_angles (arc, start_angle, end_angle) /*设置前景弧起始角度和终止角度*/
lv_arc_set_start/end_angle(arc, start_angle) /*设置前景弧起始角度/终止角度*/
void lv_mainstart(void)
{
lv_obj_t* arc = lv_arc_create(lv_scr_act_());
lv_arc_set_bg_angles(arc,135,45);/*设置背景弧的起始角度和终止角度*/
lv_arc_set_angles(arc,135,270);/*设置前景弧的起始角度和终止角度*/
lv_obj_set_size(arc,200,200);
lv_obj_align_to(arc,NULL,LV_ALIGN_CENTER,0,0);
}
![]()
③圆弧控件旋转设置lv_arc_set_rotation
void lv_mainstart()
{
lv_obj_t* arc = lv_arc_create(lv_scr_act_());
lv_arc_set_bg_angles(arc,135,45);
lv_arc_set_angles(arc,135,270);
lv_arc_set_rotation(arc,180);
lv_obj_set_size(arc,200,200);
lv_obj_align_to(arc,NULL,LV_ALIGN_CENTER,0,0);
}
![]()
④圆弧的模式选择lv_arc_set_mode
LV_ARC_TYPE_NORMAL:指示器弧顺时针绘制。
LV_ARC_TYPE_REVERSE:指示器弧沿逆时针方向绘制。
LV_ARC_TYPE_SYMMETRIC:从中间点到当前值的指示弧线。
⑤圆弧的变化率设置lv_arc_set_change_rage
⑥移除按钮:lv_obj_remove_style (arc,NULL,LV_PART_KNOB);
lv_obj_clear_flag (arc,LV_OBJ_FLAG_CLICKABLE);
⑦圆弧控件事件
输入设备事件:LV_EVENT_VALUE_CHANGED
绘图事件:
LV_ARC_DRAW_PART_BACKGROUND:绘制背景弧线。
LV_ARC_DRAW_PART_FOREGROUND:绘制前景弧线。
LV_ARC_DRAW_PART_KNOB:绘制旋钮。
10.3.圆弧的API函数
创建圆弧对象:lv_obj_t * lv_arc_create ( lv_obj_t *parent)
设置圆弧的起始角度:void lv_arc_set_start_angle (lv_obj_t * arc,uint16_t start)
设置圆弧的结束角度:void lv_arc_set_end_angle ( lv_obj_t * arc , uint16_t end )
设置开始和结束角度:void lv_arc_set_angles (lv_obj_t * arc,uint16_t start,uint16_t end)
设置圆弧背景的起始角度:void lv_arc_set_bg_start_angle (lv_obj_t * arc,uint16_t start)
设置圆弧背景的结束角度:void lv_arc_set_bg_end_angle (lv_obj_t * arc,uint16_t end)
设置圆弧背景的起止和结束角度:void lv_arc_set_bg_angles ( lv_obj_t * arc, uint16_t start, uintl6_t end)
设置整个圆弧的旋转:void lv_arc_set_rotation ( lv_obj_t * arc , uint16_t rotation)
设置圆弧的类型:void lv_arc_set_mode ( lv_obj_t * arc , lv_arc_mode_t type)
在圆弧上设置新值:void lv_arc_set_value ( lv_obj_t * arc , int16_t value)
设置弧的最小值和最大值:void lv_arc_set_range (lv_obj_t * arc, int16_t min , int16_t max )
设置一个变化率来限制圆弧到达按压点的速度:void lv_arc_set_change_rate ( lv_obj_t * arc , uint16_t rate)
lv_arc_get_angle_start(): 获取圆弧的起始角度
lv_arc_get_angle_end():获取圆弧的结束角度
lv_arc_get_bg_angle_start():获取圆弧背景的起始角度
lv_arc_get_bg_angle_end(): 获取圆弧背景的结束角度
lv_arc_get_value():获取圆弧的值
lv_arc_get_min_value(): 获取弧的最小值
lv_arc_get_max_value():获取弧的最大值
lv_arc_get_mode():获取弧线是否为类型