LVGL_v8.2 学习笔记

决战嵌入式

已于 2024-11-26 13:59:43 修改

阅读量450

点赞数 5

分类专栏： STM32笔记文章标签：学习笔记

于 2024-11-14 11:11:33 首次发布

本文链接：https://blog.youkuaiyun.com/AIshixian/article/details/143705458

版权

STM32笔记专栏收录该内容

10 篇文章

订阅专栏

参考资料：正点原子LVGL教程

一、基础对象操作

设置大小，位置，对齐方式，样式，事件

void my_gui(void)
{
    /* 获取当前屏幕的宽高 */
    lv_obj_get_width(lv_scr_act());
    lv_obj_get_height(lv_scr_act());

    /*  obj幕布控件  */
    lv_obj_t * obj = lv_obj_create(lv_scr_act());

    // 大小设置（size）
    lv_obj_set_size(obj, 100, 100); // 设置幕布大小 100*100
    // lv_obj_set_width(obj, 100);     // 设置高度
    // lv_obj_set_height(obj, 100);    // 设置宽度
    
    // 位置设置（position）
    lv_obj_set_pos(obj, 100, 100);  // 幕布在住屏幕上，x,y各偏移100 
    // lv_obj_set_x(obj, 100);     // 设置X轴偏移量
    // lv_obj_set_y(obj, 100);     // 设置Y轴偏移量

    // 对齐方式（alignment）
    lv_obj_set_align(obj, LV_ALIGN_CENTER);  // 参考父对象，居中对齐 对齐方式有很多种，LV_ALIGN_···，可参考正点原子 LVGL开发指南v1.3
    // lv_obj_align(obj, LV_ALIGN_CENTER, 10, 20); // 参考父对象，居中对齐并偏移
    // lv_obj_align_to(obj, obj2, LV_ALIGN_CENTER, 10, 20); // obj参考obj2对齐，并发生偏移

    // 样式设置（styles）
    /*  1、添加普通样式（共享）  */
    static lv_style_t style;    /*定义样式变量*/
    lv_style_init(&style);      /*初始化样式*/
    lv_style_set_bg_color(&style, lv_color_hex(0x0f4b183));/*设置背景颜色*/
    // lv_style_set_···  可选择多种样式设置

    lv_obj_t * obj1 = lv_obj_create(lv_scr_act());
    lv_obj_add_style(obj1, &style, LV_STATE_DEFAULT);/*设置部件的样式*/  /*LV_STATE_··· 设置触发样式变化的要求*/

    // /*  2、添加本地样式  */
    lv_obj_t * obj2 = lv_obj_create(lv_scr_act());
    lv_obj_set_style_bg_color(obj2, lv_color_hex(0x0f4b183), LV_STATE_DEFAULT);
    // lv_obj_set_style_···  可选择多种样式设置  LV_PART_···控件上部件的修改

    // 事件设置（events）
    lv_obj_t * obj3 = lv_obj_create(lv_scr_act());
    lv_obj_add_event_cb(obj3, my_event_cb, LV_EVENT_CLICKED, 0);// 添加事件，事件回调函数
}


static my_event_cb(lv_event_cb_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);    /*获取事件类型*/
    if(code == LV_EVENT_CLICKED)                    /*判断事件类型*/
    {   
        LV_LOG_USER("event check!\r\n");            /*执行对应操作*/   
    }
    else if(code == LV_EVENT_LONG_PRESSED)
    {
        LV_LOG_USER("event long pressed!\r\n"); 
    }

    lv_obj_t * target = lv_event_get_target(e);     /*获取触发事件的部件*/
    if(target == obj3)
    {
        LV_LOG_USER("obj3 event!\r\n");             
    }
}

二、部件

1、标签部件（lv_label）

    lv_obj_t * label = lv_label_create(lv_scr_act());
    lv_obj_set_size(label, LV_SIZE_CONTENT, LV_SIZE_CONTENT); // 设置控件的大小，LV_SIZE_CONTENT为自适应
    lv_label_set_long_mode(label, LV_LABEL_LONG_SCROLL_CIRCULAR);// 长文本下设置长文本模式

    lv_label_set_text(label, "HELLO");              // 设置label文本内容
    // lv_label_set_text_fmt(label, "%s:%d", "787878", 99); // 像 printf 设置label文本内容

    lv_obj_set_style_bg_color(label, lv_color_hex(0x0f4b183), LV_STATE_DEFAULT);    // 设置背景颜色
    lv_obj_set_style_bg_opa(label, 100, LV_STATE_DEFAULT);  // 设置背景透明度

    lv_obj_set_style_text_font(label, &lv_font_montserrat_30, LV_STATE_DEFAULT);    // 设置字体大小
    lv_obj_set_style_text_color(label, lv_color_hex(0x0f4b100), LV_STATE_DEFAULT);  // 设置字体颜色

    // 设置个别文本的字体颜色
    lv_label_set_recolor(label, true);                  // 开启重新着色功能
    lv_label_set_text(label, "hello #ff0000 lvgl#");    // 单独设置颜色

    // 设置文本对齐
    lv_obj_set_style_text_align(label, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN); // 设置文本居中对齐

2、按钮部件（lv_btn）

    lv_obj_t * btn = lv_btn_create(lv_scr_act());   // 创建按钮部件
    lv_obj_set_size(btn, 100, 50);                  // 设置按键大小
    lv_obj_set_align(btn, LV_ALIGN_CENTER);         // 设置居中
    // lv_obj_set_style_bg_color(btn, lv_color_hex(0xff1020), LV_STATE_PRESSED);   // 设置按下时的背景颜色
    lv_obj_add_flag(btn, LV_OBJ_FLAG_CHECKABLE);    // 点击时切换状态
    lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_VALUE_CHANGED, NULL);   // 数值变化时触发事件  LV_EVENT_VALUE_CHANGED需与FLAG同时使用

3、开关部件（lv_switch）

    lv_obj_t * switch1 = lv_switch_create(lv_scr_act());
    lv_obj_set_style_bg_color(switch1, lv_color_hex(0xdf5345), LV_PART_MAIN);       // 修改开关主体颜色
    lv_obj_set_style_bg_color(switch1, lv_color_hex(0x5345), LV_PART_KNOB);         // 修改开关手柄颜色 
    lv_obj_set_style_bg_color(switch1, lv_color_hex(0xdf0045), LV_STATE_CHECKED | LV_PART_INDICATOR);  // 修改开关指示器颜色

    lv_obj_add_state(switch1, LV_STATE_CHECKED | LV_STATE_DISABLED);    // 添加开关状态  开启且不可修改
    // lv_obj_clear_state(switch1, LV_STATE_CHECKED | LV_STATE_DISABLED);  // 清除开关状态

    lv_obj_has_state(switch1, LV_STATE_CHECKED);    // 获取开关状态 返回值：bool类型，开:1  关:0

4、复选框部件（lv_checkbox）

    lv_obj_t *checkbox = lv_checkbox_create(lv_scr_act());
    lv_checkbox_set_text(checkbox, "1597532468");   // 设置复选框文本
    lv_obj_set_style_pad_column(checkbox, 20, LV_STATE_DEFAULT);    // 设置文本和勾选框的间距

    lv_obj_add_state(checkbox, LV_STATE_CHECKED | LV_STATE_DISABLED);   //添加状态：默认选中且不可修改
    lv_obj_clear_state(checkbox, LV_STATE_CHECKED | LV_STATE_DISABLED);  //删除复选框状态

    lv_obj_has_state(checkbox, LV_STATE_CHECKED);       // 返回值：1，选择中  0，非选中

5、进度条部件（lv_bar）

lv_obj_t * bar = lv_bar_create(lv_scr_act());
lv_obj_set_align(bar, LV_ALIGN_CENTER);

lv_obj_set_size(bar, 400, 20);
lv_bar_set_range(bar, 0, 100);       // 设置范围值 0-100
lv_obj_set_style_anim_time(bar, 500, LV_STATE_DEFAULT); // 动画设置必须放在当前值设置之前
lv_bar_set_value(bar, 50, LV_ANIM_ON);  // 设置当前值

/* 特殊用法 */
lv_bar_set_mode(bar_ LV_BAR_MODE_RANGE);        /*设置模式*/
lv_bar_set_start_value(bar, 10, LV_ANIM_OFF);   /*设置起始值*/

6、加载器部件（lv_spinner）

    lv_obj_t * spinner = lv_spinner_create(lv_scr_act(), 1000, 60); // 参数：父对象， 旋转一周时间（ms），指示器长度

    lv_obj_set_style_arc_color(spinner, lv_color_hex(0x123456), LV_PART_MAIN);  // 设置主体圆弧颜色
    lv_obj_set_style_arc_color(spinner, lv_color_hex(0xff3456), LV_PART_INDICATOR);  // 设置指示器圆弧颜色

    lv_obj_set_style_arc_width(spinner, 30, LV_PART_MAIN);          // 设置主体圆弧宽度
    lv_obj_set_style_arc_width(spinner, 30, LV_PART_INDICATOR);     // 设置指示器圆弧宽度

7、LED部件（lv_led）

    lv_obj_t * led = lv_led_create(lv_scr_act());
    lv_obj_set_size(led, 50, 50);
    lv_obj_center(led);

    lv_led_set_color(led, lv_color_hex(0xff0000));  // 设置LED颜色
    lv_led_set_brightness(led, 25);                 // 设置LED亮度， 范围0-255

    lv_led_on(led);     // 打开LED（设置亮度为255）
    lv_led_off(led);    // 关闭LED（设置亮度为0）
    lv_led_toggle(led); // 翻转LED状态

8、列表部件（lv_list）

    lv_obj_t * list = lv_list_create(lv_scr_act());
    lv_obj_set_size(list, 200, 400);
    lv_obj_center(list);

    lv_list_add_text(list, "Settings");     // 添加列表文本
    lv_obj_t *btn1 = lv_list_add_btn(list, LV_SYMBOL_WIFI,"WLAN");   // 添加列表按钮
    lv_obj_t *btn2 = lv_list_add_btn(list, LV_SYMBOL_FILE,"FILE");   // 添加列表按钮
    
    lv_obj_add_state(btn1, LV_STATE_FOCUS_KEY);     // 添加状态（聚焦）
    LV_LOG_USER("%s", lv_list_get_btn_text(list, btn1));   // 获取列表按钮文本

9、下拉列表部件（lv_dropdown）

    lv_obj_t * dd = lv_dropdown_create(lv_scr_act());

    lv_dropdown_set_options(dd, "a\nb\nc\nd");  // 设置选项
    // lv_dropdown_set_options_static(dd, "a\nb\nc\n");  // 设置选项(静态)
    lv_dropdown_add_option(dd, "e", 4); // 添加选项，索引从0开始

    lv_dropdown_set_selected(dd, 1);    //设置当前所选项  注意：索引从0开始
    lv_dropdown_get_selected(dd);       // 获取索引

    char buf[10];
    lv_dropdown_get_selected_str(dd, buf, sizeof(buf));     // 获取选项文本

    lv_dropdown_set_dir(dd, LV_DIR_RIGHT);  // 设置列表展开方向
    lv_dropdown_set_symbol(dd, LV_SYMBOL_RIGHT);    // 设置图标

10、滚轮部件（lv_roller）

    lv_obj_t *roller = lv_roller_create(lv_scr_act());
    lv_obj_set_style_text_line_space(roller, 30, LV_STATE_DEFAULT);         // 设置选项之间的间隔
    lv_roller_set_options(roller, "a\nb\nc\nd", LV_ROLLER_MODE_NORMAL);     // 设置选项内容、滚动模式
    
    lv_roller_set_selected(roller, 3, LV_ANIM_ON);      // 设置当前所选项
    lv_roller_set_visible_row_count(roller, 2);         // 设置可见行数
   
    lv_roller_get_selected(roller);                     // 获取索引

    char buf[10];
    lv_roller_get_selected_str(roller, buf, siziof(buf));// 获取选项文本

11、滑块部件（lv_slider）

    lv_obj_t * slider = lv_slider_create(lv_scr_act());
    lv_obj_set_size(slider, 200, 20);
    lv_obj_center(slider);

    lv_slider_set_value(slider, 50, LV_ANIM_OFF);   // 设置当前值
    lv_slider_set_range(slider, 0, 100);            // 设置范围值
    // lv_slider_get_value(slider);                    // 获取当前值

    /* 特殊用法 */
    lv_slider_set_mode(slider, LV_SLIDER_MODE_NORMAL);  // 设置模式

    lv_slider_set_left_value(slider, 20, LV_ANIM_OFF);  // 设置左值
    lv_slider_get_left_value(slider);                   // 获取左值

12、圆弧部件（lv_arc）

    lv_obj_t * arc = lv_arc_create(lv_scr_act());
    lv_arc_set_range(arc, 0, 100);      // 设置范围值
    lv_arc_set_value(arc, 50);          // 设置当前值
    lv_arc_get_value(arc);              // 获取当前值

    lv_arc_set_angles(arc, 135, 270);       // 设置前景弧角度  尽可能不与设置当前值混用
    lv_arc_set_bg_angles(arc, 135, 45);     // 设置背景弧角度

    lv_arc_set_rotation(arc, 180);      // 设置旋转角度
    lv_arc_set_mode(arc, LV_ARC_MODE_REVERSE);      // 设置模式
    lv_arc_set_change_rate(arc, 90);                // 绘制速率：90°/秒

13、线条部件（lv_line）

    lv_obj_t * line = lv_line_create(lv_scr_act());

    static lv_point_t line_points[]={{15,5}, {25,20}, {5,20}, {15,5}};
    lv_line_set_points(line, line_points,4);                     // 创建线条坐标点

    lv_obj_set_style_line_width(line, 8, LV_PART_MAIN);          // 设置宽度
    lv_obj_set_style_line_rounded(line, true, LV_PART_MAIN);     // 设置圆角

    lv_line_set_y_invert(line, true);                            // 设置Y轴翻转

14、图片部件（lv_img）

    lv_obj_t * img = lv_img_create(lv_scr_act());

    LV_IMG_DECLARE(c);       // 声明图片     须通过LVGL官网图片转换成C文件
    lv_img_set_src(img, &c); // 设置图片源

    lv_img_set_offset_x(img, 20) /* 图片往 X 轴偏移 20*/
    lv_img_set_offset_y(img, 100) /* 图片往 Y 轴偏移 100*/

    lv_obj_set_style_img_recolor(img, lv_color_hex(0xff1122), LV_PART_MAIN);    // 图片重新着色
    lv_obj_set_style_img_opa(img, 150, LV_PART_MAIN);                           // 设置透明度

    lv_img_set_zoom(img, 512);  // 放大2倍  128->一半  256 原尺寸 512 两倍
    lv_img_set_angle(img, 900); // 顺时针旋转90°

    lv_obj_update_layout(img);  // 更新图片布局信息
    lv_img_set_pivot(img, 0, 0);    // 设置中心点

15、色环部件（lv_colorwheel）

    lv_obj_t * cw = lv_colorwheel_create(lv_scr_act(), true);   // 旋钮重新着色功能 

    lv_obj_set_style_arc_width(cw, 20, LV_PART_MAIN);
    lv_obj_center(cw);

    lv_colorwheel_set_rgb(cw,lv_color_hex(0xff0000));       // 设置当前选中颜色
    lv_colorwheel_get_rgb(cw);                              // 获取当前选中颜色

    lv_colorwheel_set_mode(cw, LV_COLORWHEEL_MODE_HUE /* LV_COLORWHEEL_MODE_SATURATION  LV_COLORWHEEL_MODE_VALUE*/); // 色相、饱和度、明度 
    lv_colorwheel_set_mode_fixed(cw, true);             // 固定色环模式

16、按钮矩阵部件（lv_btnmatrix）

    lv_obj_t * btnm = lv_btnmatrix_create(lv_scr_act());

    static const char *map[] ={"btn1", "\n", "btn2", "btn3", ""};/*定义按钮数组，最后一个元素必须为空*/
    lv_btnmatrix_set_map(btnm, map);    // 设置按钮
    lv_btnmatrix_set_btn_width(btnm,id, width);     // 索引（id）从0开始  设置按钮相对宽度，1-7

    lv_btnmatrix_get_selected_btn(btnm);        // 获取索引
    lv_btnmatrix_get_btn_text(btnm, id);        // 获取文本

    Iv_btnmatrix_set_btn_ctrl(btnm, id, LV_BTNMATRIX_CTRL_..);      // 设置单个按钮属性
    Iv_btnmatrix_clear_btn_ctrl(btnm, id, LV_BTNMATRIX_CTRL_...);   // 清除单个按钮属性
    lv_btnmatrix_set_btn_ctrl_all(btnm, LV_BTNMATRIX_CTRL_...);     // 设置所有按钮属性

    Iv_btnmatrix_set_one_checked(btnm, true);   // 设置单次选中属性 /*注意:需要先设置允许状态切换属性*/

17、文本区域部件（lv_textarea）

    lv_obj_t * ta = lv_textarea_create(lv_scr_act());

    lv_textarea_add_char(ta, 'A');                  /*添加一个字符到当前光标处*/
    lv_textarea_add_text(ta, "BCDEF");              /*添加字符串到当前光标处*/
    
    lv_obj_t *keyboard = lv_keyboard_create(lv_scr_act());/*创建键盘部件*/
    lv_keyboard_set_textarea(keyboard, ta);             /*关联键盘和文本区域部件*/

    // lv_textarea_set_cursor_pos(ta, 0);               /*O:最左侧，LV_TEXTAREA_CURSOR_LAST:最右侧*/

    lv_textarea_del_char(ta);                           /*删除光标左侧的一个字符*/
    lv_textarea_del_char_forward(ta);                   /*删除光标右侧的一个字符*/

    lv_textarea_set_one_line(ta, true);                 /*单行模式*/
    lv_textarea_set_password_mode(ta, true);            /*密码模式（隐藏输入的内容）*/
    lv_textarea_set_password_show_time(ta, 100);        /*密码显示时间*/

    lv_textarea_set_accepted_chars(ta,"0123456789");    /*限制接收的字符*/
    lv_textarea_set_max_length(ta,6);                   /*限制字符长度*/

    lv_textarea_set_placeholder_text(ta, "password");   /*设置占位符*/ /*提示输入密码*/ 

    const char *txt = lv_textarea_get_text(ta);         /*获取文本框文本*/

18、键盘部件（lv_keyboard）

    lv_obj_t *kb = lv_keyboard_create(lv_scr_act());

    lv_obj_t *ta = lv_textarea_create(lv_scr_act());        /*创建文本区域部件*/
    lv_keyboard_set_textarea(kb, ta);                       /*关联键盘和文本区域部件*/

    lv_keyboard_set_popovers(kb, true);                     /*允许按键弹窗提示*/
    // lv_keyboard_set_mode(kb, LV_KEYBOARD_MODE_NUMBER);   /*数字键盘模式*/

19、图片按钮部件（lv_imgbtn）

    lv_obj_t *imgbtn = lv_imgbtn_create(lv_scr_act());

    // lv_imgbtn_set_src(imgbtn, LV_IMGBTN_STATE_PRESSED,src_left, src_mid, src_right);     /*设置某个状态的图片源*/
    lv_obj_set_size(imgbtn,64 * 3,64);                                              /*设置图片按钮大小*/

    lv_imgbtn_set_state(imgbtn, LV_IMGBTN_STATE_PRESSED);                           /*设置按下状态*/

20、选项卡部件（lv_tabview）

    lv_obj_t *tabview = lv_tabview_create(lv_scr_act(), LV_DIR_TOP, 50);    // 参数：父对象 选项卡位置 按钮高度

    lv_obj_t *tab1 = lv_tabview_add_tab(tabview, "Tab 1");      // 添加选项卡
    lv_obj_t *tab2 = lv_tabview_add_tab(tabview, "Tab 2");

    // lv_obj_t *label = lv_label_create(tab1);    // 选项卡内插入部件

    lv_tabview_set_act(tabview, 1, LV_ANIM_OFF);    // 设置当前选项卡， 索引从0开始

    // 获取单独配件数据，修改样式
    lv_obj_t *btn = lv_tabview_get_tab_btns(tabview);   // 获取选项卡按钮信息   
    lv_bj_t * obj = lv_tabview_get_content(tabview);    // 获取选项卡主体信息

21、平铺视图部件（lv_tileview）

    lv_obj_t *tileview = lv_tileview_create(lv_scr_act());

    // 添加页面
    lv_obj_t *tile1 = lv_tileview_add_tile(tileview,0,0, LV_DIR_RIGHT); // 参数： 父对象 列 行 允许切换的方向
    lv_obj_t *tile2 = lv_tileview_add_tile(tileview,0,0, LV_DIR_LEFT);

    // 设置当前显示页面
    lv_obj_update_layout(tileview);     // 更新参数
    lv_obj_set_tile(tileview, tile2, LV_ANIM_OFF);  // 根据页面对象设置
    lv_obj_set_tile_id(tileview, 1, 0, LV_ANIM_OFF);    // 根据页面行列设置

22、窗口部件（lv_win）

    lv_obj_t *win = lv_win_create(lv_scr_act(), 30);    // 参数： 父对象  标题高度
    lv_obj_set_size(win, 300, 200);
    lv_obj_center(win);
    lv_obj_set_style_border_width(win, 1, LV_STATE_DEFAULT);


    lv_obj_t *title = lv_win_add_title(win, "Setting");     // 添加标题
    lv_obj_t *btn = lv_win_add_btn(win, LV_SYMBOL_CLOSE, 20);   // 添加按钮

    lv_obj_t *content = lv_win_get_content(win);    // 获取主体
    lv_obj_t *label = lv_label_create(content);     // 添加内容

23、消息框部件（lv_msgbox）

    static const char *btns[] = {"Continue","Close",""};
    lv_obj_t *msgbox = lv_msgbox_create(lv_scr_act(), "Notice"/*标题*/, "Do you want to continue?"/*主体文本*/, btns/*按钮矩阵*/, true/*关闭按钮*/);

    lv_obj_t *title = lv_msgbox_get_title(msgbox);  // 获取标题部分
    lv_obj_t *obj = lv_msgbox_get_content(msgbox);  // 获取主体部分
    lv_obj_t *btn = lv_msgbox_get_btns(msgbox);     // 获取按钮矩阵部分 

    // lv_msgbox_close(msgbox);    // 关闭消息框
    // lv_obj_t *target = lv_event_get_current_target(e);  // 获取当前触发源
    // lv_msgbox_get_active_btn(target);                   // 获取按钮索引
    // lv_msgbox_get_active_btn_text(target);              // 获取按钮文本

24、微调器部件（lv_spinbox）

    lv_obj_t *spinbox = lv_spinbox_create(lv_scr_act());

    lv_spinbox_increment(spinbox);      /*数值递增*/
    lv_spinbox_decrement(spinbox);      /*数值递减*/

    Iv_spinbox_set_step(spinbox, 200);              /*设置步进值，默认为1*/
    lv_spinbox_set_range(spinbox, -1000, 1000);     /*设置范围值，默认±99999*/

    lv_spinbox_set_value(spinbox, 400);             /*设置当前值*/
    lv_spinbox_set_digit_format(spinbox,4, 2);      /* 设置数字位数、小数点位置*/
    lv_spinbox_set_pos(spinbox, 3);                 /*设置光标位置*/
    lv_spinbox_get_value(spinbox);                  /*返回值为整数， 而非小数*/

25、表格部件（lv_table）

    lv_obj_t *table = lv_table_create(lv_scr_act());
    
    lv_table_set_row_cnt(table,2);                  /*设置行数*/
    lv_table_set_col_cnt(table,2);                  /*设置列数*/
    lv_table_set_col_width(table,1,200);            /*设置列的宽度*/

    lv_table_set_cell_value(table, 0, 0, "123");            /*设置单元格内容*/
    lv_table_set_cell_value_fmt(table, 1, 0, "%d", 100);    /*格式化输入，类似printf*/

26、菜单部件（lv_menu）

$\rightarrow$

    lv_obj_t *menu = lv_menu_create(lv_scr_act());
    lv_obj_set_size(menu, 300, 200);
    lv_obj_center(menu);

    /*Create a main page*/
    lv_obj_t * main_page = lv_menu_page_create(menu, NULL); // 创建空菜单页

    lv_obj_t * cont;
    lv_obj_t * label;

    /*Create a sub page*/
    lv_obj_t * sub_page = lv_menu_page_create(menu, NULL);

    cont = lv_menu_cont_create(sub_page);
    label = lv_label_create(cont);
    lv_label_set_text(label, "Hello, I am hiding here");

    /*Create a main page*/
    cont = lv_menu_cont_create(main_page);  // 创建新容器
    label = lv_label_create(cont);
    lv_label_set_text(label, "Item 1 (Click me!)");
    lv_menu_set_load_page_event(menu, cont, sub_page);  // 主页面与跳转页面绑定

    lv_menu_set_page(menu, main_page);  // 设置主区域

27、日历部件（lv_calendar）

28、图表部件（lv_chart）

29、画布部件（lv_canvas）

30、仪表部件（lv_meter）

31、跨度部件（lv_span）

32、动画图像（lv_animimg）

普通动画：

static void set_cont_main_value(void* cont, int32_t v)
{
    lv_obj_set_x(cont, v);
}    

lv_obj_t *label = lv_label_create(lv_scr_act());
lv_obj_center(label);

lv_anim_t anim;                     // 创建动画部件
lv_anim_init(&anim);                // 初始化
lv_anim_set_var(&anim, label);      // 绑定需要控制的部件
lv_anim_set_exec_cb(&anim, set_cont_main_value);   // 绑定回调函数
lv_anim_set_values(&anim, 0, 60);   // 设置修改值的范围
lv_anim_set_path_cb(&anim, lv_anim_path_ease_out);     // 设置动画效果

lv_anim_set_delay(&anim, 5000);    // 延迟多久执行动画
lv_anim_set_time(&anim, 3000);        // 动画持续多长时间
lv_anim_set_repeat_count(&anim, 0);   // 动画执行次数 LV_ANIM_REPEAT_INFINITE ：无限制重复，0：不重复

// lv_anim_set_ready_cb(&anim, anim_ready_cb); // 动画在执行完成后做的回调处理

lv_anim_start(&anim); // 执行动画

动画效果，参考【LVGL】ANIM（动画）学习_lvgl 动画-优快云博客：

/**
*将初始值与终止值之间按照频次平均分割，每次赋值均匀增加，斜率k=1
*/
lv_anim_value_t lv_anim_path_linear(const lv_anim_path_t * path, const lv_anim_t * a);

/**
*在开始阶段每次赋值逐渐增加，直到到达除开始阶段外的平均速度，开始阶段斜率k=0->1，其他阶段k=1
*/
lv_anim_value_t lv_anim_path_ease_in(const lv_anim_path_t * path, const lv_anim_t * a);

/**
*在结束阶段每次赋值逐渐减小，直到减为0速，结束阶段斜率k=1->0，其他阶段k=1
*/
lv_anim_value_t lv_anim_path_ease_out(const lv_anim_path_t * path, const lv_anim_t * a);

/**
*开始阶段逐渐加速，结束阶段逐渐减速，中间阶段匀速。可理解为汽车从静止加速到刹车减速
*/
lv_anim_value_t lv_anim_path_ease_in_out(const lv_anim_path_t * path, const lv_anim_t * a);

/**
*在结束阶段会小幅超越终止值，类似于惯性缓冲
*/
lv_anim_value_t lv_anim_path_overshoot(const lv_anim_path_t * path, const lv_anim_t * a);

/**
*整个阶段为减速阶段，正向减小为0时进行反向小部分增加，反复三次。可理解为小球落地反弹运动
*/
lv_anim_value_t lv_anim_path_bounce(const lv_anim_path_t * path, const lv_anim_t * a);

/**
*规定在整个阶段共分为几段，每次都取段端点值赋值
*/
lv_anim_value_t lv_anim_path_step(const lv_anim_path_t * path, const lv_anim_t * a);

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(): 从结束值弹回一点（比如撞到墙壁）

时间轴动画：

有时候需要同时播放较多动画，此时如果逐个播放的话，需要逐个为动画设计延时，不方便安排。此时，可以使用 LVGL 提供的时间线(timeline)统一安排各个动画。

static void set_cont_main_value(void* cont, int32_t v)
{
    lv_obj_set_x(cont, v);
}

static void set_cont_main_value2(void* cont, int32_t v)
{
    lv_obj_set_x(cont, v);
}


lv_obj_t *label = lv_label_create(lv_scr_act());
lv_obj_center(label);
lv_obj_t *label2 = lv_label_create(lv_scr_act());
lv_obj_set_align(label2, LV_ALIGN_LEFT_MID);

lv_anim_t anim;                     // 创建动画部件
lv_anim_init(&anim);                // 初始化
lv_anim_set_var(&anim, label);      // 绑定需要控制的部件
lv_anim_set_exec_cb(&anim, set_cont_main_value);   // 绑定回调函数
lv_anim_set_values(&anim, 0, 60);   // 设置修改值的范围
lv_anim_set_path_cb(&anim, lv_anim_path_ease_out);     // 设置动画效果
lv_anim_set_repeat_count(&anim, 0);   // 动画执行次数 LV_ANIM_REPEAT_INFINITE ：无限制重复，0：不重复
lv_anim_set_time(&anim, 1000);

lv_anim_t anim2;                     // 创建动画部件
lv_anim_init(&anim2);                // 初始化
lv_anim_set_var(&anim2, label2);      // 绑定需要控制的部件
lv_anim_set_exec_cb(&anim2, set_cont_main_value2);   // 绑定回调函数
lv_anim_set_values(&anim2, 0, 60);   // 设置修改值的范围
lv_anim_set_path_cb(&anim2, lv_anim_path_ease_out);     // 设置动画效果
lv_anim_set_repeat_count(&anim2, 0);   // 动画执行次数 LV_ANIM_REPEAT_INFINITE ：无限制重复，0：不重复
lv_anim_set_time(&anim2, 1000);

lv_anim_timeline_t* anim_timeline = lv_anim_timeline_create();  // 创建时间线动画
lv_anim_timeline_add(anim_timeline, 500, &anim);                // 加入动画 参数：时间线  启动时间 动画对象
lv_anim_timeline_add(anim_timeline, 1000, &anim2);
lv_anim_timeline_start(anim_timeline);                          // 执行时间动画

lv_anim_timeline_stop(at);                   //  来停止动画时间轴播放。
lv_anim_timeline_set_progress(at, progress); //  函数来设置与时间轴进度对应的对象的状态。
lv_anim_timeline_get_playtime(at);           //  函数来获取整个动画时间轴的总持续时间。
lv_anim_timeline_get_reverse(at);            //  函数来获取是否倒播动画时间轴。
lv_anim_timeline_delete(at);                 //  函数来删除动画时间轴

三、分布

1、FLEX分布

    lv_obj_t *obj = lv_obj_create(lv_scr_act());
    lv_obj_set_size(obj, 300, 50);
    lv_obj_center(obj);
    lv_obj_set_flex_flow(obj, LV_FLEX_FLOW_ROW);    // 设置排版方式 LV_FLEX_···
    lv_obj_set_style_pad_all(obj, 0, LV_STATE_DEFAULT);
    uint8_t i = 10;
    for(i=0; i< 10; i++)
    {
        lv_obj_t * btn, *label;
        btn = lv_btn_create(obj);
        label = lv_label_create(btn);
        lv_obj_center(label);
    }

2、Grid分布

    static lv_coord_t col_dsc[] = { 70, 70, 70, LV_GRID_TEMPLATE_LAST };
    static lv_coord_t row_dsc[] = { 50, 50, 50, LV_GRID_TEMPLATE_LAST };

    lv_obj_t* cont = lv_obj_create(lv_scr_act());

    /* 设置网格的列数量 */
    lv_obj_set_style_grid_column_dsc_array(cont, col_dsc, 0);

    /* 设置网格的行数量 */
    lv_obj_set_style_grid_row_dsc_array(cont, row_dsc, 0);

    /* 设置容器大小 */
    lv_obj_set_size(cont, 300, 220);
    lv_obj_center(cont);

    /* 开启 GRID 网格 */
    lv_obj_set_layout(cont, LV_LAYOUT_GRID);


    lv_obj_t* obj;
    /* 创建一个 btn 子类 */
    obj = lv_btn_create(cont);

    /* 把 btn 对象添加到网格(0,0)位置 */
    lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, 0, 1, LV_GRID_ALIGN_STRETCH, 0, 1);
    
    /* 创建一个 switch 子类 */
    obj = lv_switch_create(cont);

    /* 把 btn 对象添加到网格(0,1)位置 */
    lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, 0, 1, LV_GRID_ALIGN_STRETCH, 1, 1);

四、拓展

1、多界面的跳转

/* 1、父对象为空， 可创建空的屏幕界面 */
srceen1 = lv_obj_create(NULL);
srceen2 = lv_obj_create(NULL);

/* 2、使用 lv_scr_load 指定要显示的界面*/
lv_scr_load(srceen1);

2、加载GIF图片

工具网址：Image Converter — LVGL

根据下图步骤选择GIF文件，并生成对应的.c文件

将生成的.c文件放入自己的工程，在lv_conf.h文件中打开宏定义 "LV_USE_GIF" ，并调用下方代码显示

LV_IMG_DECLARE(heart);        // 声明图片来源

lv_obj_t *gif = lv_gif_create(lv_scr_act());
lv_gif_set_src(gif, &heart);

如果显示空白，可能是内存设置过小，加大LVGL的内存，在lv_conf.h中设置宏定义 "LV_MEM_SIZE"