LVGL 学习笔记

一 字符相关接口

---

lv_style_set_text_letter_space 设置字符间距

lv_style_set_text_line_space 设置字符行间距

二 硬件接口相关

---

1 TP

LVGL 读取TP坐标流程如下：

lv_port_indev_init -> lv_indev_drv_register --> lv_timer_create(lv_indev_read_timer_cb, LV_INDEV_DEF_READ_PERIOD, indev)

每隔壁 10 毫秒调用一次 lv_indev_read_timer_cb --> _lv_indev_read --> touchpad_read 通过 lv_touchpad_handler调用 touch_pannel_get_coord(int *x, int *y) --> dev_ioctl(touch_panel, TOUCH_PANEL_CMD_COORD, (u32)coord) 最终调用硬件驱动获取坐标

--> indev_pointer_proc(indev_act, &data) ,read 到坐标后，通过此函数进一步处理

注：

lv_indev_read_timer_cb 中通过continue_reading判断是否循环读，而SDK里没有根据读的过程给该变量重新赋值，所以在 touchpad_read 的时候，加上如果是按下就继续读，否则不继续。 （LVGL 本身就是定时采样，此修改会造成更多无效读？）

LVGL 如何区分TP 点击，长按，拖动？

2 LCD

和TP类似，刷屏定时器回调也是每隔10MS 运行一次，均是在主线程每隔1TICK运行的lv_timer_handler里调用。刷屏回调的时候会暂停刷屏定时器。

lvgl_task --> lv_port_disp_init() --> lv_disp_drv_register(&disp_drv)-->lv_timer_create(_lv_disp_refr_timer, LV_DISP_DEF_REFR_PERIOD, disp)

void _lv_disp_refr_timer(lv_timer_t *tmr)

{

.....

lv_timer_pause(tmr); // 暂停刷屏定时器

/*Refresh the screen's layout if required*/

lv_obj_update_layout(disp_refr->act_scr);

if (disp_refr->prev_scr) {

lv_obj_update_layout(disp_refr->prev_scr);

}

lv_obj_update_layout(disp_refr->top_layer);

lv_obj_update_layout(disp_refr->sys_layer);

/*Do nothing if there is no active screen*/

if (disp_refr->act_scr == NULL) {

disp_refr->inv_p = 0;

LV_LOG_WARN("there is no active screen");

REFR_TRACE("finished");

return;

}

lv_refr_join_area();// 计算局部更新域

refr_invalid_areas(); // 局部刷新

.....

}

当屏幕有内容更新的时候，会调用 lv_obj_invalidate_area(obj, &inv_area) --> _lv_inv_area(lv_obj_get_disp(obj), &area_tmp) -->

lv_timer_resume(disp->refr_timer) 恢复刷屏定时器

二 控件使用技巧

---

1 滑杆

滑杆的背景框（LV_PART_MAIN）和 指示（LV_PART_INDICATOR），均可以用定制的图片。需要注意的是指示部分用图片的时候要选择能完整覆盖的图片,并且背景的不透明度要设置为0。

lv_obj_set_width(ui_Slider_Speed, 123);

lv_obj_set_height(ui_Slider_Speed, 244);

lv_obj_set_x(ui_Slider_Speed, -100);

lv_obj_set_y(ui_Slider_Speed, -1);

lv_obj_set_align(ui_Slider_Speed, LV_ALIGN_CENTER);

lv_obj_set_style_bg_color(ui_Slider_Speed, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_DEFAULT);

lv_obj_set_style_bg_opa(ui_Slider_Speed, 0, LV_PART_MAIN | LV_STATE_DEFAULT);

lv_obj_set_style_bg_color(ui_Slider_Speed, lv_color_hex(0xFFFFFF), LV_PART_INDICATOR | LV_STATE_DEFAULT);

lv_obj_set_style_bg_opa(ui_Slider_Speed, 0, LV_PART_INDICATOR | LV_STATE_DEFAULT);

lv_obj_set_style_bg_img_src(ui_Slider_Speed, &ui_img_speed_slider_png, LV_PART_INDICATOR | LV_STATE_DEFAULT);

3 tileview_

可以用 lv_obj_set_tile 设定tileview_显示在指定页面

lv_obj_set_tile(main_ui_view, tabview_arr[5], 1);

4 字库

字库路径： lvgl_v8.3.0\src\font

字库申明： lvgl_v8.3.0\src\font\lv_font.h

LV_FONT_DECLARE(lv_font_15_jl)

LVGL 默认字库

lv_conf.h

#define LV_FONT_DEFAULT &lv_font_15_jl

5 对象属性

如果要实现点击标签的事件回调，须先给其添加可点击属性

lv_obj_add_flag(lights_title, LV_OBJ_FLAG_CLICKABLE);

lv_obj_add_event_cb(lights_title, back_to_scene_page, LV_EVENT_RELEASED, NULL);

画圆弧的时候，圆弧的粗细可以用lv_style_set_arc_width()来设置

lv_style_set_arc_width(&wheel_style, 30);

lv_obj_add_style(cw, &wheel_style, LV_PART_MAIN);

2 样式

表示样式属性的变量必须是全局或者静态变量。

ui_Slider_Speed = lv_slider_create(ui_Driving);

lv_slider_set_value(ui_Slider_Speed, 75, LV_ANIM_OFF);

colorwheel 圆弧的 宽度，可以用lv_style_set_arc_width()来设置；knob 的宽度，用lv_style_set_pad_all（）设置; 颜色模式用

lv_colorwheel_set_mode（比如彩色还是单色）；显示哪种颜色用 lv_colorwheel_set_rgb

lv_style_set_arc_width(&wheel_style, 25);

lv_obj_add_style(cw, &wheel_style, LV_PART_MAIN);

lv_style_set_pad_all(&knob_style, -2);

lv_style_set_border_color(&knob_style,lv_color_white()); // 设置2像素的白色边框

lv_style_set_border_width(&knob_style,2);

lv_style_set_pad_all(&knob_style, -2);

lv_style_set_border_color(&knob_style,lv_color_white());

lv_style_set_border_width(&knob_style,2);

lv_colorwheel_set_rgb(cw,lv_color_make(0xe9, 0xab, 0x89));// 固定用暖色

lv_colorwheel_set_mode(cw,LV_COLORWHEEL_MODE_SATURATION);

lv_colorwheel_set_mode_fixed(cw, true);