LVGL的学习笔记第一章

1.屏幕对象的创建过程

• lv_init

_lv_ll_init(&LV_GC_ROOT(_lv_disp_ll),sizeof(lv_disp_t));// 注册初始化显示器链表

• lv_disp_drv_register

_lv_ll_ins_head(&LV_GC_ROOT(_lv_disp_ll)); // 注册显示器到链表
disp->act_src = lv_obj_create(NULL); //在显示器上创建一个默认屏幕
lv_obj_class_create_obj
obj->coords.x1 =0;
obj->coords.y1=0;
obj->coords.x2 = lv_disp_get_hor_res(NULL)-1;//设置屏幕的水平宽度
obj->coords.y2 = lv_disp_get_ver_res(NULL)-1;//设置屏幕的垂直高度

2.LVGL的三层屏幕

• lv_scr_act(void);     //活动屏幕    disp->act_scr
• lv_layer_top(void);    //顶层    disp->top_layer
• lv_layer_sys(void);    //系统层    disp->sys_layer

3.LVGL 的大小设置

设置大小

• 设置宽度 ：   lv_object_set_width(obj,new_width);
• 设置高度：   lv_object_set_height(obj,new_height);
• 同时设置宽度,高度：  lv_object_set_size(obj,new_width,new_height);

获取大小

• 获取宽度：   lv_obj_get_width(obj);
• 获取高度：   lv_obj_get_width(obj);

4.LVGL的位置设置

• lvgl的坐标系位于第四象限，向下为正，向右为正，跟大部分移动端研发差不多

位置

• 设置x轴方向的坐标位置：   lv_obj_set_x(obj,new_x);
• 设置y轴方向的坐标位置：  lv_obj_set_y(obj,new_y);
• 同时设置x,y坐标位置：  lv_obj_set_pos(obj,new_x,new_y);

对齐

• 参照父对象对齐：   lv_obj_set_align(obj,LV_ALIGN_...);
• 参照父对象对齐后再设置坐标位置：   lv_obj_align(obj,LV_ALIGN_...，x,y);
• 参照另一个对象(同层级)对齐后设置坐标位置关系：
   lv_obj_align_to(obj_to_align,obj_refrence,LV_ALIGN_...,x,y);

类型 （LV_ALIGN_…）

获取位置

• 获取x轴坐标位置： lv_obj_get_x(obj);
• 获取y轴坐标位置： lv_obj_get_y(obj);

5.LVGL对象的盒子模型

LVGL和Css的border-box模型大致相同，对象的"盒子"由以下部分构成：

• 边界（bounding）：元素的宽度/高度围起来的区域
• 边框（border）：边框有大小和颜色等属性
• 填充（padding）：
• 内容（content）
• 轮廓（outline）
  

6.LVGL的样式（Styles）

• 样式是一个 lv_style_t 变量，它可以保存边框宽度、文本颜色等属性。
• 将样式(变量)分配给对象就可以改变其外观。在赋值过程中，可以指定目标部分和目标状态。
• 一个样式可以给多个对象使用（正常样式）
• 样式可以级联，也就是可以将多个样式分配给一个对象。所以，我们不用将所有属性都在一个样式中指定，可以通过多个样式组合的形式指定。 LVGL 会优先使用我们定义的样式，如果没有就会使用默认值。
• 后来添加的样式具有更高的优先级。也就是说如果在两种样式中指定了同一个属性，则将使用最后添加的样式。
• 如果对象中未指定某些属性（例如文本颜色），就会从父级继承
• 上面说的是 “正常” 样式，对象还有本地样式，它比 “正常” 样式具有更高的优先级。
• 可以定义有过渡效果的样式。
• 默认有一个样式主题，我们也可以自己定义样式主题，作为默认的样式主题使用。

初始化样式

  样式存储在 lv_style_t 变量中。样式变量应该是 静态 、全局或动态分配 的。 也就是它们不能是函数中的局部变量，因为当函数结束时它们会被销毁。样式初始化示例：

static lv_style_t style_obj;
lv_style_init(&style_obj);

设置样式属性

• 当我们初始化好一个样式之后就可以设置它的样式属性了，接口函数是这样的格式：

lv_style_set<pproperty_name>(&style,<value>);

• 示例：

lv_style_set_bg_color(&style_obj,lv_color_hex(0x666666));//设置背景色
lv_style_set_bg_opa(&style_obj,LV_OPA_50);//设置背景透明度
lv_style_set...
...

添加样式到对象

• 初始化并且设置好一个样式后，可以添加到对象上面，接口函数如下：

lv_obj_add_style(obj,&style,<selector>);

• 参数 “obj”是要添加到的对象，"style"是指向样式变量的指针，是应添加样式的部分和状态的OR-ed值示例：

lv_obj_add_style(obj,&style_obj,0);//默认
lv_obj_add_style(obj,&style_obj,LV_STATE_PRESSED);//在对象被按下时应用样式

获取样式属性

• 我们可以获取属性的最终值，接口函数格式：

lv_obj_get_style_<property_name>(obj,<part>);

• 函数使用对象的当前状态，如果没有更好的候选对象，则返回默认值，例如：

lv_color_t_color=lv_obj_get_style_bg_color(obj,LV_PART_MAIN);

删除样式

• 删除对象的所有样式：lv_obj_remove_style_all(obj);
• 删除对象的特定样式：lv_obj_remove_style(obj,&style_obj,selector);
• 只有当 selector 与 lv_obj_add_style 中使用的 selector 匹配时，此函数才会删除 style如果 style 是空，那么会根据给出的 selector 检查并删除所有匹配的样式如果 selector 是 LV_STATE_ANY 或 LV_PART_ANY 就会删除具有任何状态或部分的样式。下面这个效果和lv_obj_remove_style_all 的效果是一样的：

lv_obj_remove_style(obj,NULL,LV_STATE_ANY|LV_PART_ANY);

查看样式

• 文档位置：
  英文原版
  中文翻译

状态

对象可以处于以下状态组合:

• LV_STATE_DEFAULT (0x0000) 正常，释放状态
• LV_STATE_CHECKED (0x0001) 切换或检查状态
• LV_STATE_FOCUSED (0x0002) 通过键盘或编码器聚焦或通过触摸板/鼠标点击
• LV_STATE_FOCUS_KEY (0x0004) 通过键盘或编码器聚焦，但不通过触摸板/鼠标聚焦
• LV_STATE_EDITED (0x0008) 由编码器编辑
• LV_STATE_HOVERED (0x0010) 鼠标悬停（现在不支持）
• LV_STATE_PRESSED (0x0020) 被按下
• LV_STATE_SCROLLED (0x0040) 正在滚动
• LV_STATE_DISABLED (0x0080) 禁用状态
• LV_STATE_USER_1 (0x1000) 自定义状态
• LV_STATE_USER_2 (0x2000) 自定义状态
• LV_STATE_USER_3 (0x4000) 自定义状态
• LV_STATE_USER_4 (0x8000) 自定义状态

7.部分

对象可以有部分（parts）,他们也可以有自己的样式，lvgl中存在以下预定定义部分：

• LV_PART_MAIN 类似矩形的背景

• LV_PART_SCROLLBAR 滚动条

• LV_PART_INDICATOR 指标，例如用于滑块、条、开关或复选框的勾选框

• LV_PART_KNOB 像手柄一样可以抓取调整值

• LV_PART_SELECTED 表示当前选择的选项或部分

• LV_PART_ITEMS 如果小部件具有多个相似元素（例如表格单元格）

• LV_PART_TICKS 刻度上的刻度，例如对于图表或仪表

• LV_PART_CURSOR 标记一个特定的地方，例如文本区域或图表的光标

• LV_PART_CUSTOM_FIRST 可以从这里添加自定义部件
  例如一个滑杆（Slider）包含三个部分

• 背景

• 指示

• 旋钮
  这意味着滑块的所有三个部分都可以有自己的样式：示例查看

8.本地样式

• 除了"普通"样式外，对象还可以存储本地样式（私有样式）
• 本地样式与普通样式类似，但是它不能在其他对象之间共享。如果使用本地样式，将自动分配局部样式，并在删除对象时释放。本地样式对于向对象添加本地自定义很有用。
• 本地样式的接口函数是这样的格式：

lv_obj_set_style<property_name>(obj,<value>,<selector>);
//示例：
lv_obj_set_style_bg_color(obj,lv_color_hex()xffffff),0);//设置背景色
lv_obj_set_style_bg_opa(obj, LV_OPA_50, 0);	          // 设置背景透明度	

• 删除本地样式的时候我们删除某一个样式：

lv_obj_remove_local_style_prop(obj,LV_STYLE_...,selector);

9.过渡特效

• 在默认情况下，当一个对象改变状态（例如它被按下）时，新状态的属性会立即设置，但是，通过转换，可以在，状态改变时播放动画，例如按下按钮时，背景可以在一段时间内，显示按下的颜色
• demo体验
• demo

10.样式主题

• 主题是风格的集合。如果存在活动主题，LVGL将其应用于每个创建的部件(对象)。 这将为UI提供一个默认外观，然后可以通过添加更多样式对其进行修改。
• demo
• demo体验

11.LVGL中的事件

• 添加事件

lv_obj_add_event_cb(obj,event_cb,event_code,user_data);

• 发送事件

lv_event_send(obj,event_cb,event_code,user_data);

• 删除事件

lv_obj_remove_event_cb(obj,event_cb);

lv_obj_remove_event_dsc(obj,event_dsc);//event_dsc是lv_obj_add_event_cb返回的指针

事件的类型（event_code）

• 输入设备事件 (Input device events)
• 绘图事件（Drawing events）
• 其他事件（Special events）
• 特殊事件（Other events）
• 自定义事件（Custom events）

开发文档
英文
中文

事件回调函数的lv_event_t参数

事件回调函数只有一个参数：

static void my_event_cb(lv_event_t*event);

• 获取触发的事件代码：  lv_event_code_t code = lv_event_get_code(e);
• 获取触发事件的对象：  lv_obj_t *target = lv_event_get_target(e);
• 获取最初触发事件的对象（事件冒泡）：lv_obj_t *target = lv_event_get_current_target(e);
• 获取事件传递的用户数据

lv_event_get_user_data(e) 获取使用 lv_obj_add_event_cb传递的用户数据
lv_event_get_param(e)获取使用 lv_event_send 传递的用户数据

• 一个事件回调函数可以给多个对象使用 我们创建一个事件处理函数之后是可以给不同的对象使用的
• 一个对象可以使用多个事件的回调函数我们创建的对象可以绑定多个事件，比如一个事件是处理点击类型的事件，一个事件是处理按下类型的事件
• 其他如果传入的用户数据不一样，一个对象可以绑定同一个事件回调函数多次，事件将按照添加的书序调用

lv_obj_add_event_cb(obj,my_clicked_event_cb,LV_EVENT_CLICKED,&num1);
lv_obj_add_event_cb(obj,my_clicked_event_cb,LV_EVENT_CLICKED,&num2);

事件冒泡

如果对象启用了lv_obj_add_flag(obj,LV_OBJ_FLAG_EVENT_BUBBLE)那么该对象的所有事件将发送到该对象的父级，如果父级也启用了 LV_OBJ_FLAG_EVENT_BUBBLE，那么事件将继续发送到他的父级，以此类推

• lv_event_get_target(e);获取触发事件的当前对象
• lv_event_get_current_target(e);获取事件冒泡的父对象