当前位置:   article > 正文

LittleVGL_lvgl 设计器

lvgl 设计器

目录

1、视频快速入门 

2、普中开发板移植LVGL

3、lvgl移植正点原子视频

4、各个控件的学习

5、GUI-GURDER

5.1简单计算机的实现逻辑

6、多屏幕切换、动画

6.1多屏幕切换

6.2动画

6.3事件冒泡

6.4GUI-Guider编写事件回调

​编辑6.5GUI-Guider生成的代码移植CodeBlocks

7、页面逻辑实现

8、mune菜单控件

8.1 content容器铺满问题

8.2 menu相关

8.3编码器

9、主题模式

10、conf文件

11、布局

 12、滚动条

 13、动画

 14、常用函数

14.1 获取控件长宽高

 15、参考博文


1、视频快速入门 

快速入门LVGL(基于STM32,LVGL 8.2.0)_mucherry的博客-CSDN博客_lvgl

十几分钟学会如何使用lvgl设计器gui guider和模拟器编写一个简单计算器应用_哔哩哔哩_bilibili

SquareLine Studio

STM32移植LVGL8.0.2超详细的保姆级教程附移植好的工程文件_保哥在江湖的博客-CSDN博客_stm32移植lvgl

图表 (Chart) - 5寸金牛座开发板

Tips:按住Ctrl快速一起重命名

2、普中开发板移植LVGL

移植过程按1中的视频移植,但未能成功显示数Demo,怀疑是disp_flush需要调用底层lcd操作接口不对与视频中调用的函数不一样,再度查找分析果然是,要替换成另外一个函数。

  1. typedef union {
  2. struct {
  3. uint16_t blue : 5;
  4. uint16_t green : 6;
  5. uint16_t red : 5;
  6. } ch;
  7. uint16_t full;
  8. } lv_color16_t;
  9. typedef lv_color16_t lv_color_t;

参考文章:https://www.eefocus.com/article/484678.html

 EmbedSummary: 嵌入式大杂烩资源汇总

Data:22.12.25

LVGL学习笔记:恩智浦gui guider+Platformio+ESP32 示例 - 哔哩哔哩

LVGL学习笔记_William_Zhang_csdn的博客-CSDN博客_lvgl

3、lvgl移植正点原子视频

Codeblocks快捷键 | Ctrl

第7讲 基础篇-LVGL移植(无操作系统4)_哔哩哔哩_bilibili

LVGL 8.2 菜单-pudn.com

Free Icons, Clipart Illustrations, Photos, and Music

LVGL+SMT32的项目练习(多图) - 个人小站

4、各个控件的学习

事件回调函数的 lv_event_t * e参数 

获取触发的事件代码:lv_event_code_t code = lv_event_get_code(e);

获取触发事件的对象:lv_obj_t * target = lv_event_get_target(e);

设置背景颜色:lv_obj_set_style_bg_color( label, lv_color_hex(0xffe1d4), 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(0xf7b37b),LV_STATE_DEFAULT );

开启重新着色功能 :lv_label_set_recolor( label, true );

 单独设置颜色:lv_label_set_text( label, "hallo #ff0000 lvgl# " );

设置长文本模式:lv_label_set_long_mode(label, LV_LABEL_LONG_...);

 开启状态切换 :lv_obj_add_flag( btn, LV_OBJ_FLAG_CHECKABLE ); 

添加状态:默认打开且不可修改: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) /* 返回值:1,选中; 0,非选中 */

设置文本和勾选框的间距:lv_obj_set_style_pad_column( checkbox, 20, LV_STATE_DEFAULT );

checkbox和btn 用的是 LV_EVENT_VALUE_CHANGED

可以设置的有应用的状态、应用的部分

------------------------------------------------------label--------------------------------------------------------- 

直接设置文本:lv_label_set_text( label, "hallo \n lvgl");
文本不存储在动态内存,而是在指定的缓冲区中(慎用):lv_label_set_text_static( label,"hallo" );
格式化显示文本,类似printf :lv_label_set_text_fmt( label, “Value: %d”, 50 ) ;
背景颜色:lv_obj_set_style_bg_color( label, lv_color_hex(0xffe1d4), 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(0xf7b37b), LV_STATE_DEFAULT );
开启重新着色功能 :lv_label_set_recolor( label, true ); 
单独设置颜色 :lv_label_set_text( label, "hallo #ff0000 lvgl# " );
长文本模式:lv_label_set_long_mode(label, LV_LABEL_LONG_...);


enum {
    LV_LABEL_LONG_WRAP,                     /* 默认模式, 如果部件大小已固定,超出的文本将被剪切 */
    LV_LABEL_LONG_DOT,                      /* 将 label 右下角的最后 3 个字符替换为点… */
    LV_LABEL_LONG_SCROLL,                   /* 来回滚动 */
    LV_LABEL_LONG_SCROLL_CIRCULAR,      /* 循环滚动 */
    LV_LABEL_LONG_CLIP,                     /* 直接剪切掉部件外面的文本部分 */
}

------------------------------------------------------btn---------------------------------------------------------  

 开启状态切换 :lv_obj_add_flag( btn, LV_OBJ_FLAG_CHECKABLE );

------------------------------------------------------switch--------------------------------------------------------- 

添加状态:默认打开且不可修改 :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 */

 ------------------------------------------------------checkbox--------------------------------------------------------- 

设置文本内容 :lv_checkbox_set_text( checkbox, "remember the password" );
设置文本和勾选框的间距 :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,非选中 */

------------------------------------------------------bar---------------------------------------------------------

设置当前值:lv_bar_set_value( bar, 50, LV_ANIM_ON );   /*LV_ANIM_ON : 动画开*/
设置范围值: lv_bar_set_range( bar, -100, 100 );
设置动画时间:lv_obj_set_style_anim_time( bar, 500, LV_STATE_DEFAULT ); /* 动画设置必须放在当前值设置之前 */
设置模式 :lv_bar_set_mode( bar, LV_BAR_MODE_RANGE );
设置起始值 :lv_bar_set_start_value( bar, -50, LV_ANIM_OFF );                                                设置定时器lv_timer_create(progress_bar_cb,100,NULL);


enum {
    LV_BAR_MODE_NORMAL,            /* 默认模式 */
    LV_BAR_MODE_SYMMETRICAL,        /* 从零值绘制到当前值(当前值可以小于0) */
    LV_BAR_MODE_RANGE            /* 允许设置起始值,但起始值必须小于当前值 */
};
注意:在V8.2版本的LVGL中,默认模式也允许设置起始值,但是后续的版本可能会修改。                动画时间指的是旧值刷新到新值的绘图时间,并不是现实中当前值变化所需的时间

------------------------------------------------------spinner---------------------------------------------------------

主体:LV_PART_MAIN
指示器:LV_PART_INDICATOR
手柄:LV_PART_KNOB
创建加载器部件:lv_obj_t   *spinner  = lv_spinner_create( parent, spin_time, arc_length );
设置圆弧颜色:lv_obj_set_style_arc_color( spinner, lv_color_hex(0x4a9f00), LV_PART_MAIN ); 
设置圆弧宽度:lv_obj_set_style_arc_width( spinner, 30, LV_PART_MAIN );    
------------------------------------------------------LED---------------------------------------------------------  

创建LED部件 :lv_obj_t   *led = lv_led_create( parent );
设置LED颜色 :lv_led_set_color( led, lv_color_hex(0xff0000) );
设置LED亮度,范围0~255:lv_led_set_brightness( led, 0 );    
打开LED(设置亮度为255):lv_led_on( led );
关闭LED :lv_led_off( led );
翻转LED状态 :lv_led_toggle( led );
快速居中:lv_obj_center();

------------------------------------------------------list---------------------------------------------------------  

创建列表部件 :lv_obj_t   *list = lv_list_create( parent );
添加列表文本:lv_list_add_text( list, “Settings" );
添加列表按钮:lv_obj_t  *btn= lv_list_add_btn( list, LV_SYMBOL_WIFI, “WLAN"); 
获取列表按钮文本:lv_list_get_btn_text( list, list_btn );
手动更新物体的参数:lv_obj_update_layout(obj_1);
添加按下的选中聚焦状态:lv_obj_add_state(btn,LV_STATE_FOCUS_KEY);

------------------------------------------------------dropdown---------------------------------------------------  

设置选项:lv_dropdown_set_options( dd, "a\nb\nc\nd");
设置选项 (静态):lv_dropdown_set_options_static( dd, "a\nb\nc\nd ");
添加选项,索引从0开始 :lv_dropdown_add_option( dd, "e", 4);    /*不能使用lv_dropdown_set_options_static设置的*/
设置当前所选项:lv_dropdown_set_selected( dd, 1);
获取索引:lv_dropdown_get_selected( dd);
获取选项文本:lv_dropdown_get_selected_str( dd, buf, sizeof(buf));     char buf[10];
设置列表展开方向 :lv_dropdown_set_dir(dd, LV_DIR_RIGHT);
设置图标 :lv_dropdown_set_symbol(dd, LV_SYMBOL_RIGHT);

------------------------------------------------------roller---------------------------------------------------

设置选项间隔: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);    
获取选项文本 :lv_roller_get_selected_str(roller, buf, sizeof(buf));   char buf[10];

------------------------------------------------------slider--------------------------------------------------- 

 设置当前值 :lv_slider_set_value(slider, 50, LV_ANIM_OFF);
设置范围值 :lv_slider_set_range(slider, -100, 100);  
获取当前值:lv_slider_get_value(slider);
模式设置:lv_slider_set_mode(slider, LV_SLIDER_MODE_...);   NORMAL、SYMMETRICAL、RANGE
设置左值:lv_slider_set_left_value(slider, 20, LV_ANIM_OFF);
获取左值:lv_slider_get_left_value(slider); 

------------------------------------------------------arc--------------------------------------------------- 

设置当前值(需要在范围值之内):lv_arc_set_value(arc, 80);    
设置范围值 :lv_arc_set_range(arc, 0, 200);  
设置前景弧角度 :lv_arc_set_angles(arc, 135, 270);   //在此之前应该先设置背景弧 、且不要与设置当前值混用,他并不会改变数值,这是改变样式
设置背景弧角度 :lv_arc_set_bg_angles(arc, 135, 45);  
设置旋转角度:lv_arc_set_rotation(arc, 180);
获取当前值:lv_arc_get_value(arc);
设置模式:lv_arc_set_mode(arc, LV_ARC_MODE_REVERSE);
绘制速率,90°/秒 :lv_arc_set_change_rate(arc, 90);
设置背景弧宽度:lv_obj_set_style_arc_width(arc_1,20,LV_PART_MAIN);
设置前景弧宽度:lv_obj_set_style_arc_width(arc_1,20,LV_PART_INDICATOR);
去掉旋钮:lv_obj_remove_style(arc_2,NULL,LV_PART_KNOB);
去掉可点击属性:lv_obj_clear_flag(arc_2,LV_OBJ_FLAG_CLICKABLE);

------------------------------------------------------line--------------------------------------------------- 

设置线条坐标点: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);
设置y轴反转:lv_line_set_y_invert(line, true);

------------------------------------------------------img--------------------------------------------------- 

声明图片 :LV_IMG_DECLARE(img_bird);
设置图片源 :lv_img_set_src(img, &img_bird);   // 在此前要先声明图片
设置图片偏移:lv_img_set_offset_x(img, 100);
           lv_img_set_offset_y(img, 20); 
图片重新着色:lv_obj_set_style_img_recolor(img, lv_color_hex(0xffe1d2), LV_PART_MAIN); 
           lv_obj_set_style_img_recolor_opa(img, 150, LV_PART_MAIN);
设置图片缩放:lv_img_set_zoom(img, 512);    /* 放大2倍 */
设置图片旋转:lv_img_set_angle(img, 900);    /* 顺时针方向旋转90° */
设置中心点:
    lv_obj_update_layout(img);        /* 更新图片布局信息 */
    lv_img_set_pivot(img, 0, 0);        /* 设置中心点 */
设置滑块主体颜色、透明度:lv_obj_set_style_bg_color(slider,lv_color_darken(color, 100),LV_PART_MAIN);   
更新图片参数:lv_obj_update_layout(img);   

------------------------------------------------------colorwheel--------------------------------------------------- 

设置当前选中颜色:lv_colorwheel_set_rgb(cw, lv_color_hex(0xff0000));
获取当前选中颜色:lv_colorwheel_get_rgb(cw);
设置色环模式:
    色相、饱和度、明度: lv_colorwheel_set_mode(cw, LV_COLORWHEEL_MODE_HUE/SATURATION/VALUE);
    固定色环模式 :lv_colorwheel_set_mode_fixed(cw, true);
 ------------------------------------------------------btnmatrix--------------------------------------------------- 

定义按钮数组,最后一个元素必须为空 :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 ( 默认为1 ) */
获取索引 :lv_btnmatrix_get_selected_btn(btnm);    
获取文本 :lv_btnmatrix_get_btn_text(btnm, id);
设置单个按钮属性 :lv_btnmatrix_set_btn_ctrl(btnm, id, LV_BTNMATRIX_CTRL_...);
清除单个按钮属性 :lv_btnmatrix_clear_btn_ctrl(btnm, id, LV_BTNMATRIX_CTRL_...);    
设置所有按钮属性 :lv_btnmatrix_set_btn_ctrl_all(btnm, LV_BTNMATRIX_CTRL_...);

enum {
    LV_BTNMATRIX_CTRL_HIDDEN,                     /* 隐藏 */
    LV_BTNMATRIX_CTRL_DISABLED,                    /* 失能 */
    LV_BTNMATRIX_CTRL_CHECKABLE,                     /* 允许状态切换 */
    LV_BTNMATRIX_CTRL_RECOLOR,                     /* 允许文本重新着色 */
};
设置单次选中属性:lv_btnmatrix_set_one_checked(btnm, true);         /* 注意:需要先设置允许状态切换属性 */

* 按钮矩阵(优化界面) */
    lv_obj_set_style_border_width(btnm, 0, LV_PART_MAIN);                                       /* 去除主体边框 */
    lv_obj_set_style_bg_opa(btnm, 0, LV_PART_MAIN);                                             /* 设置主体背景透明度 */
    lv_obj_set_style_bg_opa(btnm, 0, LV_PART_ITEMS);                                            /* 设置按钮背景透明度 */
    lv_obj_set_style_shadow_width(btnm, 0, LV_PART_ITEMS);                                      /* 去除按钮阴影 */
    lv_obj_add_event_cb(btnm, b

 ------------------------------------------------------textarea--------------------------------------------------- 

 添加一个字符到当前光标处 :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);          /* 0:最左侧, 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);        /* 获取文本框文本 */ 
比对文本内容:strcmp(const char *s1,const char *s2);        /* 当s1=s2时,返回0 */
创建键盘:keyboard = lv_keyboard_create(lv_scr_act());
关联用户名文本框和键盘:lv_keyboard_set_textarea(keyboard, target);

 ------------------------------------------------------keyboard---------------------------------------------------  

创建文本区域部件 :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);
获取模式:lv_keyboard_get_mode(target); 

 ------------------------------------------------------imgbtn--------------------------------------------------- 

设置某个状态的图片源 :lv_imgbtn_set_src(imgbtn, LV_IMGBTN_STATE_..., src_left, src_mid, src_right);  //可以同时设置三张
设置图片按钮大小 :lv_obj_set_size(imgbtn, 64 * 3, 64);    
设置按下状态 :lv_imgbtn_set_state(imgbtn, LV_IMGBTN_STATE_PRESSED);
如何显示带有透明度通道的图片:准备一张带有透明度通道的图片,然后重新着色并设置透明度为255。
设置图片重新着色透明度: lv_obj_set_style_img_recolor_opa(target, 255, 0); 
设置图片重新着色 :lv_obj_set_style_img_recolor(target, lv_color_hex(0x00a9ff), 0); 

 ------------------------------------------------------tabview--------------------------------------------------- 

创建选项卡部件 :lv_obj_t  *tabview =  lv_tabview_create(parent, LV_DIR_..., tab_size);
添加选项卡:lv_obj_t *tab1 = lv_tabview_add_tab(tabview, "Tab 1"); 
设置当前选中的选项卡:lv_tabview_set_act(tabview, 1, LV_ANIM_OFF);      /* 索引从0开始 */
未选中部分:LV_STATE_DEFAULT例如将一个字体应用到全部的部分
选中部分:LV_STATE_CHECKED
设置按钮边框宽度为0:lv_obj_set_style_border_width(btn, 0, LV_PART_ITEMS| LV_STATE_CHECKED);
获取按钮部分:lv_obj_t *btn = lv_tabview_get_tab_btns(tabview); 
获取主体部分:lv_obj_t *obj = lv_tabview_get_content(tabview); 
清除滑动:lv_obj_clear_flag(lv_tabview_get_content(tabview), LV_OBJ_FLAG_SCROLLABLE);
LV_PART_ITEMS:按键 

------------------------------------------------------tileview--------------------------------------------------- 

创建平铺视图部件 :lv_obj_t  *tileview = lv_tileview_create( parent );
添加页面:lv_obj_t *tile1 = lv_tileview_add_tile( tileview, 0, 0, LV_DIR_RIGHT );
更新参数 :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 );
同时设置多少文字:lv_label_set_text(label_left,LV_SYMBOL_WIFI "  80%" LV_SYMBOL_BATTERY_3); 

------------------------------------------------------win---------------------------------------------------  

创建窗口部件 :lv_obj_t *win = lv_win_create(parent, header_height);
添加标题: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);    
隐藏窗口:lv_obj_add_flag(win, LV_OBJ_FLAG_HIDDEN);
清除显示:lv_obj_clear_flag(win,LV_OBJ_FLAG_HIDDEN);
设置按键符号的颜色要用设置文本:lv_obj_set_style_text_color(btn_setting, lv_color_hex(0x000000), LV_STATE_DEFAULT);         /* 设置文本颜色 */ 

------------------------------------------------------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_msgbox_close(msgbox);
获取按钮索引、文本:
    lv_obj_t *target = lv_event_get_current_target(e);    /* 获取当前触发源  用的是current_target 用_target会错误*/
    lv_msgbox_get_active_btn(target);/* 获取按钮索引 */
    lv_msgbox_get_active_btn_text(target);    /* 获取按钮文本 */
获取两个之中最小的:LV_MIN(lv_obj_get_width(obj);
记得更新,否则加载不出:lv_obj_update_layout(msgbox_obj); 
       lv_style_set_radius(&style_bullet, LV_RADIUS_CIRCLE);        //设置半径,传入'LV_RADIUS_CIRCLE'智能判断绘制为圆形
或者回调函数传入的用户数据:lv_obj_ * obj_color = (lv_obj_t *)e->user_data;
消息部件隐藏不用的按键:
      lv_obj_set_style_bg_opa(btn,0,LV_PART_ITEMS);
      lv_obj_set_style_shadow_width(btn,0,LV_PART_ITEMS);

------------------------------------------------------spinbox---------------------------------------------------  

 

创建微调器部件 :lv_obj_t *spinbox = lv_spinbox_create(parent);
数值递增:lv_spinbox_increment(spinbox);    
数值递减:lv_spinbox_decrement(spinbox);
设置步进值:lv_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);/* 返回值为整数,而非小数 */    
在按键上添加图片:lv_obj_set_style_bg_img_src(spinbox_btn1,LV_SYMBOL_PLUS,LV_PART_MAIN);
整数化成小数形式: lv_label_set_text_fmt(parameter,"%s%d.%d",
                          spinbox_value < 0 ? "-":"+",
                          spinbox_value / 10 < 0 ? -spinbox_value /10 : spinbox_value/10,
                          spinbox_value % 10 < 0 ? -spinbox_value % 10 : spinbox_value % 10);

------------------------------------------------------table---------------------------------------------------   

创建表格部件 :lv_obj_t *table = lv_table_create(parent);
设置行数: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");
格式化输入,类似printf :lv_table_set_cell_value_fmt(table, 1, 0, "%d", 100 );

#if 的用法:
#if (1 != LV_FONT_MONTSERRAT_38 || 1 != LV_FONT_MONTSERRAT_18 || 1 != LV_FONT_MONTSERRAT_20)
#error Please Make Sure Enable LV_FONT_MONTSERRAT_14 & LV_FONT_MONTSERRAT_18 & LV_FONT_MONTSERRAT_20
#endif

第一次见的算法:
 for (uint8_t i = 1; i < (10 >> 1) + 1; i++)
        lv_table_set_cell_value_fmt(table, 2 * i, 1, "Value %d", i - 1);
 for (uint8_t i = 1; i < (10 >> 1) + 2; i++)
        lv_table_set_cell_value_fmt(table, 2 * i - 1, 1, "Hide %d", i - 1);

Data:23.1.10

5、GUI-GURDER

 GUI GUIDER 应用笔记_MR_普罗米修斯的博客-CSDN博客_gui guider

LVGL-GUI Guider初始体验_云海无语的博客-CSDN博客_gui-guider

LVGL | GUI-Guider的使用分享_嵌入式大杂烩的博客-CSDN博客_gui-guider

十几分钟学会如何使用lvgl设计器gui guider和模拟器编写一个简单计算器应用_哔哩哔哩_bilibili

快速入门入LVGL第四期--Gui-Guuder使用_哔哩哔哩_bilibili

南山府嵌入式的博客_CSDN博客-玩转STM32基础篇,FreeRTOS基础知识篇,分享领域博主

TIP:使用VScode编译并运行时因为系统环境变量有mingw 的编译器导致编译失败

 

 去掉之前即可,但用VScode编译运行速度不如GUI-guider,故此后面不要VScode编译运行。

5.1简单计算机的实现逻辑

  1. /**
  2. * @file custom.c
  3. *
  4. */
  5. /*********************
  6. * INCLUDES
  7. *********************/
  8. #include <stdio.h>
  9. #include "lvgl.h"
  10. #include "custom.h"
  11. /*********************
  12. * DEFINES
  13. *********************/
  14. /**********************
  15. * TYPEDEFS
  16. **********************/
  17. /**********************
  18. * STATIC PROTOTYPES
  19. **********************/
  20. /**********************
  21. * STATIC VARIABLES
  22. **********************/
  23. /**
  24. * Create a demo application
  25. */
  26. static int get_result(int old,int oper,int value)
  27. {
  28. int result = 0;
  29. switch (oper)
  30. {
  31. case 0:
  32. result = value;
  33. break;
  34. case 3:
  35. result = old + value;
  36. break;
  37. case 7:
  38. result = old - value;
  39. break;
  40. case 11:
  41. result = old*value;
  42. break;
  43. case 15:
  44. result = old/value;
  45. break;
  46. default:
  47. break;
  48. }
  49. return result;
  50. }
  51. void text_cb(lv_event_t* e)
  52. {
  53. lv_ui * ui = lv_event_get_user_data(e);
  54. uint8_t id = lv_btnmatrix_get_selected_btn(ui->screen_btnm_1);
  55. const char * txt = lv_btnmatrix_get_btn_text(ui->screen_btnm_1,id);
  56. static int old = 0;
  57. static int oper = 0;
  58. int value = 0;
  59. static char num[10] = {0};
  60. switch (id)
  61. {
  62. case 3:
  63. printf("+\n");
  64. case 7:
  65. printf("-\n");
  66. case 11:
  67. printf("x\n");
  68. case 15:
  69. printf("/\n");
  70. sscanf(num,"%d",&value); //将现在显示的数字提取出来
  71. old = get_result(old,oper,value); //之前的内容运算出结果并保存
  72. lv_label_set_text_fmt(ui->screen_label_1,"%d",old); //把之前的运算结果显示出
  73. oper = id ; //保存当前的运算符
  74. memset(num,0,sizeof(num)); //清空之前记录的显示缓存
  75. break;
  76. case 14:
  77. printf("=\n");
  78. sscanf(num,"%d",&value); //将现在显示的数字提取出来
  79. old = get_result(old,oper,value); //之前的内容运算出结果并保存
  80. lv_label_set_text_fmt(ui->screen_label_1,"%d",old); //把之前的运算结果显示出
  81. oper = 0 ; //清空运算符
  82. old = 0; //清空历史记录
  83. memset(num,0,sizeof(num)); //清空之前记录的显示缓存
  84. break;
  85. case 12:
  86. printf("clean\n");
  87. lv_label_set_text(ui->screen_label_1,""); //清除显示
  88. oper = 0 ; //清空运算符
  89. old = 0; //清空历史记录
  90. memset(num,0,sizeof(num)); //清空之前记录的显示缓存
  91. break;
  92. default:
  93. printf("%s\n",txt);
  94. if (strlen(num)<sizeof(num)-1)
  95. {
  96. strcat(num,txt);
  97. lv_label_set_text(ui->screen_label_1,num);
  98. }
  99. break;
  100. }
  101. }
  102. void custom_init(lv_ui *ui)
  103. {
  104. /* Add your codes here */
  105. lv_obj_add_event_cb(ui->screen_btnm_1,text_cb,LV_EVENT_PRESSED,ui);
  106. }

23.1.5

6、多屏幕切换、动画

lvgl-多页面

6.1多屏幕切换

  1. /********tow_scr*************/
  2. lv_obj_t * Scr_mainMenu;
  3. lv_obj_t * Scr_wifi;
  4. void Scr_1_cb(lv_event_t * e)
  5. {
  6. lv_event_code_t code = lv_event_get_code(e);
  7. if(code == LV_EVENT_CLICKED)
  8. {
  9. /*设置页面加载动画*/
  10. lv_scr_load_anim(Scr_wifi, LV_SCR_LOAD_ANIM_NONE, 100, 0, false);
  11. lv_scr_load(Scr_wifi);
  12. }
  13. }
  14. void my_gui()
  15. {
  16. #if 1
  17. /********tow_scr*************/
  18. /*创建页面*/
  19. Scr_mainMenu = lv_obj_create(NULL);
  20. lv_obj_clean(Scr_mainMenu);
  21. lv_obj_remove_style_all(Scr_mainMenu);
  22. lv_obj_set_style_bg_opa(Scr_mainMenu, LV_OPA_COVER, 0);//0不透明
  23. lv_obj_set_style_bg_color(Scr_mainMenu, lv_color_hex(0xDaDaDa), 0);
  24. lv_obj_set_size(Scr_mainMenu, LV_HOR_RES, LV_VER_RES);
  25. lv_obj_t * Scr_1_btn = lv_btn_create(Scr_mainMenu);
  26. lv_obj_t * Scr_1_labl = lv_label_create(Scr_1_btn);
  27. lv_label_set_text(Scr_1_labl,"next page");
  28. lv_obj_add_event_cb(Scr_1_btn,Scr_1_cb,LV_EVENT_CLICKED,NULL);
  29. Scr_wifi = lv_obj_create(NULL);
  30. lv_obj_clean(Scr_wifi);
  31. lv_obj_remove_style_all(Scr_wifi);
  32. lv_obj_set_style_bg_opa(Scr_wifi, LV_OPA_COVER, 0);//0不透明
  33. lv_obj_set_style_bg_color(Scr_wifi, lv_color_hex(0x8a8a8a), 0);
  34. lv_obj_set_size(Scr_wifi, LV_HOR_RES, LV_VER_RES);
  35. lv_obj_t * Scr_2_btn = lv_btn_create(Scr_wifi);
  36. lv_obj_t * Scr_2_labl = lv_label_create(Scr_2_btn);
  37. lv_label_set_text(Scr_2_labl,"before page");
  38. lv_obj_add_event_cb(Scr_2_btn,Scr_2_cb,LV_EVENT_CLICKED,NULL);
  39. /*加载一个页面*/
  40. lv_scr_load(Scr_wifi);
  41. #endif
  42. }

6.2动画

  1. /*******animation********/
  2. static void anim_x_cb(void* var, int32_t v)
  3. {
  4. lv_obj_set_x(var, v);
  5. }
  6. void my_gui()
  7. {
  8. #if 1
  9. /*******animation********/
  10. /* 第一步:创建标签 */
  11. lv_obj_t* lv_obj = lv_label_create(lv_scr_act());
  12. lv_label_set_text(lv_obj,"ALIENTEK");
  13. lv_obj_set_pos(lv_obj, 400, 10);
  14. lv_obj_update_layout(lv_obj);
  15. /* 第二步:动画初始化 */
  16. lv_anim_t a;
  17. lv_anim_init(&a);
  18. /* 第三步:设置动画目标为标签对象 */
  19. lv_anim_set_var(&a, lv_obj);
  20. /* 第四步:设置动画起点和终点 */
  21. lv_anim_set_values(&a, lv_obj_get_x(lv_obj), 0);
  22. /* 第五步:设置动画时间 */
  23. lv_anim_set_time(&a, 5000);
  24. /* 第六步:设置动画回调函数 */
  25. lv_anim_set_exec_cb(&a, anim_x_cb);
  26. /* 第七步:设置动画轨道 */
  27. lv_anim_set_path_cb(&a, lv_anim_path_bounce);
  28. /* 第八步:设置动画轨道 */
  29. lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
  30. /* 第九步:开启动画 */
  31. lv_anim_start(&a);
  32. }

LVGL库入门教程 - 动画 - 冰封残烛 - 博客园

6.3事件冒泡

https://blog.csdn.net/qq_41650023/article/details/125260000

6.4GUI-Guider编写事件回调

6.5GUI-Guider生成的代码移植CodeBlocks

1. 新建lvgl_app将GUI-Guider生成的custom、generated文件复制粘贴。

2.在CodeBlocks中递归添加lvgl_app文件

3.编译并修改新添加文件头文件问题

4.添加 guider_ui的相关代码到main

参考文章:LVGL-GUI Guider生成工程移植Keil_gui guider移植_云海无语的博客-CSDN博客

codeblocks添加头文件路径包含_codeblocks头文件路径_dzdesigned的博客-CSDN博客

ESP32+LVGL笔记(2):学习B站的计算器例程_lvgl设计计算器_hwd00001的博客-CSDN博客

GUI Guider与lvgl联合仿真(结合stm32实验进行演示,含触摸屏实验计数器与计算器)_古道小七的博客-CSDN博客_lv_obj_set_scrollbar_mode

23.1.31 

codeblock编译问题找了快一周的原因,GUI_Guider生成代码移植到codeblock,时不时出现编译最后 No such file or directory 有时不会出现有时会。网上找寻答案试过各种方法都无效。最后修改文件名解决了?????我怀疑是文件名与gui_guider.h冲突导致。

 

 

 

修改后正常运行 

头文件名可以不分大小写

 

23.2.28

上述问题是编译器找不到生成的图片源文件导致,吧image文件夹放到工作文件的外外层就不报错,在eclipse下就不存在上述问题(22.3.8)

23.4.19

上述问题为头文件路径问题

正确添加头文件设置

(85条消息) codeblocks添加头文件路径包含-CSDN博客

7、页面逻辑实现

7.1:设置页面的前端实现,页面要求,lvgl弹出对话框,只允许触摸对话框,其他地方不许触摸,例如电脑和手机弹出对话框,必须触摸关闭当前对话框,才能触摸其他地方。

方法一:

1:首先将设置页面创建并将页面隐藏: lv_obj_add_flag(win,LV_OBJ_FLAG_HIDDEN): 

2:通关点击设置按键在事件中将设置页面显示出lv_obj_clear_flag(win,LV_OBJ_FLAG_HIDDEN);

3:将设置页面置于前景:lv_obj_move_foreground(win);

4:关掉后面对象的点击事件:lv_obj_clear_flag(btn_win,LV_OBJ_FLAG_CLICKABLE);

  1. /********win*************/
  2. lv_obj_t * win;
  3. lv_obj_t * btn_win;
  4. void win_cb(lv_event_t * e)
  5. {
  6. lv_obj_t * target = lv_event_get_target(e);
  7. lv_event_code_t event = lv_event_get_code(e);
  8. if(event == LV_EVENT_CLICKED)
  9. {
  10. lv_obj_add_flag(btn_win,LV_OBJ_FLAG_CLICKABLE);
  11. lv_obj_add_flag(win,LV_OBJ_FLAG_HIDDEN);
  12. }
  13. }
  14. void btn_cb(lv_event_t * e)
  15. {
  16. lv_obj_t * target = lv_event_get_target(e);
  17. lv_event_code_t event = lv_event_get_code(e);
  18. if(event == LV_EVENT_CLICKED)
  19. {
  20. lv_obj_clear_flag(btn_win,LV_OBJ_FLAG_CLICKABLE);
  21. lv_obj_clear_flag(win,LV_OBJ_FLAG_HIDDEN);
  22. lv_obj_move_foreground(win);
  23. }
  24. }
  25. lv_obj_t * my_slider_creat(lv_obj_t * content,const char* symbol,lv_coord_t x_ofs,lv_coord_t y_ofs)
  26. {
  27. lv_obj_t * slider = lv_slider_create(content);
  28. lv_obj_set_size(slider,scr_width/3,scr_hight/30);
  29. lv_slider_set_value(slider,50,LV_ANIM_OFF);
  30. lv_obj_align(slider, LV_ALIGN_CENTER,x_ofs,y_ofs);
  31. lv_obj_set_style_bg_color(slider,lv_color_hex(0x787c78), LV_PART_MAIN);
  32. lv_obj_set_style_bg_color(slider,lv_color_hex(0xc3c3c3), LV_PART_INDICATOR);
  33. lv_obj_remove_style(slider,NULL,LV_PART_KNOB);
  34. lv_obj_t * label = lv_label_create(content);
  35. lv_label_set_text(label,symbol);
  36. lv_obj_align_to(label,slider,LV_ALIGN_OUT_LEFT_MID,-10,0);
  37. return slider;
  38. }
  39. /********win*************/
  40. void my_gui()
  41. {
  42. win = lv_win_create(lv_scr_act(),scr_hight/12);
  43. lv_obj_set_size(win,scr_width*5/8,scr_hight*4/7);
  44. lv_obj_set_style_border_width(win,1,LV_STATE_DEFAULT);
  45. lv_obj_set_style_border_color(win,lv_color_hex(0x8a8a8a),LV_STATE_DEFAULT);
  46. lv_obj_set_style_border_opa(win,100,LV_STATE_DEFAULT);
  47. lv_obj_set_style_radius(win,10,LV_STATE_DEFAULT);
  48. lv_obj_center(win);
  49. lv_obj_t * btn_left = lv_win_add_btn(win,LV_SYMBOL_SETTINGS,20);
  50. lv_obj_set_style_bg_opa(btn_left,0,LV_STATE_DEFAULT);
  51. lv_obj_set_style_shadow_width(btn_left,0,LV_STATE_DEFAULT);
  52. lv_obj_set_style_text_color(btn_left,lv_color_hex(0x000000),LV_STATE_DEFAULT);
  53. lv_obj_t * title = lv_win_add_title(win,"Setting");
  54. lv_obj_set_style_text_font(title,&lv_font_montserrat_18,LV_STATE_DEFAULT);
  55. lv_obj_add_flag(win,LV_OBJ_FLAG_HIDDEN);
  56. lv_obj_t * btn_right = lv_win_add_btn(win,LV_SYMBOL_CLOSE,20);
  57. lv_obj_set_style_bg_opa(btn_right,0,LV_STATE_DEFAULT);
  58. lv_obj_set_style_shadow_width(btn_right,0,LV_STATE_DEFAULT);
  59. lv_obj_set_style_text_color(btn_right,lv_color_hex(0x000000),LV_STATE_DEFAULT);
  60. lv_obj_set_style_text_color(btn_right,lv_color_hex(0xff0000),LV_STATE_PRESSED);
  61. lv_obj_add_event_cb(btn_right,win_cb,LV_EVENT_CLICKED,NULL);
  62. lv_obj_t * content = lv_win_get_content(win);
  63. lv_obj_t * slider_1 = my_slider_creat(content,LV_SYMBOL_AUDIO,15, -scr_hight/14);
  64. lv_obj_t * slider_2 = my_slider_creat(content,LV_SYMBOL_BELL,15, scr_hight/14);
  65. /*SET按键*/
  66. lv_obj_t * btn = lv_btn_create(lv_scr_act());
  67. lv_obj_align(btn,LV_ALIGN_BOTTOM_MID,0,0);
  68. lv_obj_t* label;
  69. label = lv_label_create(btn);
  70. lv_label_set_text(label, "Set");
  71. lv_obj_center(label);
  72. lv_obj_update_layout(label);
  73. lv_obj_add_event_cb(btn,btn_cb,LV_EVENT_CLICKED,NULL);
  74. lv_obj_t * obj_win = lv_obj_create(lv_scr_act());
  75. lv_obj_set_size(obj_win,400,300);
  76. btn_win = lv_btn_create(obj_win);
  77. lv_obj_align(btn_win,LV_ALIGN_OUT_LEFT_MID,0,0);
  78. }

方法二:

使用模态对话框,他设置按键回调事件中在layer_top层创建设置界面,并启用了click属性,layer_top将吸收所有用户点击并充当模态 。设置页面关闭后删除设置界面。

  1. /**********模态对话框***********/
  2. void close_btn_cb(lv_event_t * e)
  3. {
  4. lv_obj_t * target = lv_event_get_target(e);
  5. lv_event_code_t event = lv_event_get_code(e);
  6. if(event == LV_EVENT_CLICKED)
  7. {
  8. lv_obj_del(win); // 删除对象及其所有子对象
  9. win = NULL;
  10. lv_obj_clear_flag(lv_layer_top(), LV_OBJ_FLAG_CLICKABLE); // 清除标志
  11. lv_obj_set_style_bg_opa(lv_layer_top(), LV_OPA_TRANSP, 0); // 设置透明度
  12. }
  13. }
  14. static void ste_btn_cb(lv_event_t * e)
  15. {
  16. lv_event_code_t code = lv_event_get_code(e);
  17. lv_obj_t * ta = lv_event_get_target(e);
  18. if(code == LV_EVENT_CLICKED) {
  19. if(win == NULL) {
  20. //设置弹窗
  21. lv_obj_add_flag(lv_layer_top(), LV_OBJ_FLAG_CLICKABLE); // 使能 lv_layer_top 点击
  22. win = lv_win_create(lv_layer_top(),scr_hight/12); // 在 lv_layer_top 层上创建日历对象
  23. lv_obj_set_style_bg_opa(lv_layer_top(), LV_OPA_50, 0); // 设置对象透明度
  24. lv_obj_set_style_bg_color(lv_layer_top(), lv_palette_main(LV_PALETTE_GREY), 0); // 设置对象颜色
  25. lv_obj_set_size(win,scr_width*5/8,scr_hight*4/7);
  26. lv_obj_set_style_border_width(win,1,LV_STATE_DEFAULT);
  27. lv_obj_set_style_border_color(win,lv_color_hex(0x8a8a8a),LV_STATE_DEFAULT);
  28. lv_obj_set_style_border_opa(win,100,LV_STATE_DEFAULT);
  29. lv_obj_set_style_radius(win,10,LV_STATE_DEFAULT);
  30. lv_obj_center(win);
  31. //顶部左边设置logo
  32. lv_obj_t * btn_left = lv_win_add_btn(win,LV_SYMBOL_SETTINGS,20);
  33. lv_obj_set_style_bg_opa(btn_left,0,LV_STATE_DEFAULT);
  34. lv_obj_set_style_shadow_width(btn_left,0,LV_STATE_DEFAULT);
  35. lv_obj_set_style_text_color(btn_left,lv_color_hex(0x000000),LV_STATE_DEFAULT);
  36. lv_obj_t * title = lv_win_add_title(win,"Setting");
  37. lv_obj_set_style_text_font(title,&lv_font_montserrat_18,LV_STATE_DEFAULT);
  38. //顶部右边关闭logo
  39. lv_obj_t * btn_right = lv_win_add_btn(win,LV_SYMBOL_CLOSE,20);
  40. lv_obj_set_style_bg_opa(btn_right,0,LV_STATE_DEFAULT);
  41. lv_obj_set_style_shadow_width(btn_right,0,LV_STATE_DEFAULT);
  42. lv_obj_set_style_text_color(btn_right,lv_color_hex(0x000000),LV_STATE_DEFAULT);
  43. lv_obj_set_style_text_color(btn_right,lv_color_hex(0xff0000),LV_STATE_PRESSED);
  44. lv_obj_add_event_cb(btn_right,close_btn_cb,LV_EVENT_CLICKED,NULL);
  45. //滑块
  46. lv_obj_t * content = lv_win_get_content(win);
  47. lv_obj_t * slider_1 = my_slider_creat(content,LV_SYMBOL_AUDIO,15, -scr_hight/14);
  48. lv_obj_t * slider_2 = my_slider_creat(content,LV_SYMBOL_BELL,15, scr_hight/14);
  49. }
  50. }
  51. }
  52. /**********模态对话框***********/
  53. void my_gui()
  54. {
  55. lv_obj_t * btn = lv_btn_create(lv_scr_act());
  56. lv_obj_align(btn,LV_ALIGN_BOTTOM_MID,0,0);
  57. lv_obj_t* label;
  58. label = lv_label_create(btn);
  59. lv_label_set_text(label, "Set");
  60. lv_obj_center(label);
  61. lv_obj_update_layout(label);
  62. lv_obj_add_event_cb(btn,ste_btn_cb,LV_EVENT_CLICKED,NULL);
  63. lv_obj_t * bg_obj_win = lv_obj_create(lv_scr_act());
  64. lv_obj_set_size(bg_obj_win,400,300);
  65. btn_win = lv_btn_create(bg_obj_win);
  66. lv_obj_align(btn_win,LV_ALIGN_OUT_LEFT_MID,0,0);
  67. }

 23.2.2

参考文章:icore4tlvgl_9 []

LVGL|lvgl教程之巧用图层(layer)编写模态对话框_挨踢民工biubiu的博客-CSDN博客_lv_layer_sys

8、mune菜单控件

这个控件各个视频教程都没有提及到,偶然控看见有这个控件,在V8.2版本中,才发现正点原子的CodeBlock是8.0的版本,并无munu控件,改用百问网的8.2工程

LVGL 8.2 菜单_lvgl 菜单_仙剑情缘的博客-CSDN博客

8.1 content容器铺满问题

默认情况下在content下添加组件是不铺满有边距的

解决办法:lv_style_set_pad_all 

  1. static lv_style_t cont_style; // 容器的样式
  2. lv_style_init(&cont_style);
  3. lv_style_set_pad_all(&cont_style, 0); // 铺满(新添加的一行代码)
  4. lv_obj_add_style(ui->screen_select_prescription_win_content, &cont_style, 0);
  5. lv_obj_set_size(ui->screen_select_prescription_list_1, 200,400*4/7);

参考文章:LVGL|lvgl教程之flex布局铺满整个容器(弹性布局铺满整个容器)_挨踢民工biubiu的博客-CSDN博客_flex布局高度铺满

23.2.9 

lvgl 增加自定义SYMBOL_徐满华的博客-CSDN博客_lvgl自定义图标仙剑情缘的博客_CSDN博客-C/C++,little VGL,NRF52832个人学习笔记领域博主

8.2 menu相关

8.3编码器

LVGL如何使用编码器 - 知乎 (zhihu.com)

(71条消息) lvgl使用旋转编码器做为外部输入设备_lvgl 编码器_我来过了.的博客-CSDN博客

(71条消息) STM32移植LVGL+旋转编码器接口对接_lvgl 编码器_IMSHYANNE的博客-CSDN博客

【开源】ESP32 Arduino LVGL8 编码器EC11输入 演示demo_哔哩哔哩_bilibili

(86条消息) LVGL V8应用——通过按键切换页面_lvgl 页面切换_临界msp的博客-CSDN博客

(86条消息) 【LVGL】学习笔记--(3)界面切换以及显示优化_lvgl界面切换_公子无缘的博客-CSDN博客

9、主题模式

 0:为明亮

 1:为暗色

设置主题:粉色

  1. static const lv_font_t * font_normal;
  2. lv_theme_default_init(NULL, lv_palette_main(LV_PALETTE_PINK), lv_palette_main(LV_PALETTE_BLUE), LV_THEME_DEFAULT_DARK, font_normal);

默认为蓝色:

 

 (85条消息) LVGL学习笔记4 - 主题Themes_lvgl主题-CSDN博客

  1. static lv_style_t gThemeRectStyle;
  2. static void new_theme_apply_cb(lv_theme_t* th, lv_obj_t* obj)
  3. {
  4. if (lv_obj_check_type(obj, &lv_obj_class))
  5. {
  6. lv_obj_add_style(obj, &gThemeRectStyle, LV_STATE_DEFAULT);
  7. }
  8. }
  9. void set(){
  10. lv_obj_t* rect = lv_obj_create(lv_scr_act());
  11. lv_obj_set_size(rect, LV_PCT(20), LV_PCT(20));
  12. lv_obj_align(rect, LV_ALIGN_TOP_LEFT, 20, 20);
  13. /*Set a background color and a radius*/
  14. lv_style_init(&gThemeRectStyle);
  15. lv_style_set_radius(&gThemeRectStyle, 10);
  16. lv_style_set_bg_opa(&gThemeRectStyle, LV_OPA_COVER);
  17. lv_style_set_bg_color(&gThemeRectStyle, lv_palette_lighten(LV_PALETTE_RED, 1));
  18. /*Add a shadow*/
  19. lv_style_set_shadow_width(&gThemeRectStyle, 55);
  20. lv_style_set_shadow_color(&gThemeRectStyle, lv_palette_main(LV_PALETTE_BLUE));
  21. lv_obj_add_style(rect, &gThemeRectStyle, LV_PART_MAIN|LV_STATE_DEFAULT);
  22. /*通过当前主题初始化新主题*/
  23. lv_theme_t* th_active = lv_theme_get_from_obj(NULL);
  24. static lv_theme_t th_new;
  25. th_new = *th_active;
  26. /*设置父主题和新主题的样式适播放回调函数*/
  27. lv_theme_set_parent(&th_new, th_active);
  28. lv_theme_set_apply_cb(&th_new, new_theme_apply_cb);
  29. /*设置新主题*/
  30. lv_disp_set_theme(NULL, &th_new);
  31. lv_obj_t* rect2 = lv_obj_create(lv_scr_act());
  32. lv_obj_set_size(rect2, LV_PCT(20), LV_PCT(20));
  33. lv_obj_align(rect2, LV_ALIGN_TOP_LEFT, 220, 20);
  34. lv_obj_t* rect3 = lv_obj_create(lv_scr_act());
  35. lv_obj_set_size(rect3, LV_PCT(20), LV_PCT(20));
  36. lv_obj_align(rect3, LV_ALIGN_TOP_LEFT, 420, 20);
  37. }

10、conf文件

①:创建屏幕

lv_obj_t * scr1 = lv_obj_create(NULL)

②:获取活动的屏幕lv_scr_act()

③:加载屏幕

lv_scr_load(scr1)

④:动画加载屏幕

lv_scr_load_anim(scr,transition_type,time,delay,aotu_del)

⑤:取消滚动条

 lv_obj_clear_flag(cont, LV_OBJ_FLAG_SCROLLABLE);

⑥:设置对象容器使用基于行的流失弹性布局flex,设置超出部分换行模式

lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP);

⑦:lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP);

 /**
   * 设置容器弹性模式
   * 1. 容器指针
   * 2. LV_FLEX_ALIGN_SPACE_EVENLY 均匀分部子元素之间的间距
   * 3. LV_FLEX_ALIGN_END 容器中所有的子元素底部对齐
   * 4. 默认0
*/

11、布局

弹性布局 

【LVGL】弹性布局(Flex)学习_lvgl flex_小石头有大内涵的博客-CSDN博客

网格布局

Grid布局        网格布局

 12、滚动条

  • lv_obj_clear_flag(obj, LV_OBJ_FLAG_SCROLLABLE); 禁用滚动条
  • lv_obj_set_scroll_dir(obj, LV_DIR_VER); 设置滚动方向,LV_DIR_HOR水平滚动LV_DIR_VER垂直滚动
  • lv_obj_set_style_bg_opa(obj, LV_OPA_0, LV_PART_SCROLLBAR | LV_STATE_DEFAULT),设置样式将obj滚动条的颜色默认为透明
  • lv_obj_set_style_bg_opa(obj, LV_OPA_0, LV_PART_SCROLLBAR | LV_STATE_SCROLLED),设置样式将obj滚动条滚动时的颜色也设置为透明
  • 滚动条以及禁用滚动条

 13、动画

需求:要完成多个容器的切换,没头绪,后面参考Futuristic_Ebike页面

查看源码后发现他是通创建多个count然后只留一个其他都隐藏起来,再通过动画的方式显示出来

测试代码

  1. /*******页面切换动画************/
  2. lv_obj_t* Page_switching_cont1;
  3. lv_obj_t* Page_switching_cont2;
  4. lv_obj_t* Page_switching_cont3;
  5. static void _ui_anim_callback_set_opacity(lv_anim_t * a, int32_t v)
  6. {
  7. lv_obj_set_style_opa((lv_obj_t *)a->user_data, v, 0);
  8. }
  9. static void _ui_anim_callback_set_x(lv_anim_t * a, int32_t v)
  10. {
  11. lv_obj_set_x((lv_obj_t *)a->user_data, v);
  12. }
  13. static int32_t _ui_anim_callback_get_x(lv_anim_t * a)
  14. {
  15. return lv_obj_get_x_aligned((lv_obj_t *)a->user_data);
  16. }
  17. static void On_Animation(lv_obj_t * TargetObject, int delay)
  18. {
  19. //渐变动画
  20. lv_anim_t PropertyAnimation_0; //定义一个动画数据结构
  21. lv_anim_init(&PropertyAnimation_0); //初始化
  22. lv_anim_set_time(&PropertyAnimation_0,1000); //设置动画执行时间
  23. lv_anim_set_user_data(&PropertyAnimation_0, TargetObject); //设置动画执行的对象
  24. lv_anim_set_custom_exec_cb(&PropertyAnimation_0, _ui_anim_callback_set_opacity); //执行动画回调函数,这里是设置透明度
  25. lv_anim_set_values(&PropertyAnimation_0, 0, 255); //设置动执行动画开始和结束的值,即透明到不透明
  26. lv_anim_set_path_cb(&PropertyAnimation_0, lv_anim_path_ease_out); //设置路径算法,这里是不透明度设置开头很快,后面变化速度逐渐减小
  27. lv_anim_set_delay(&PropertyAnimation_0, delay + 0); //设置动画开始的延时时间
  28. lv_anim_set_playback_time(&PropertyAnimation_0, 0); //设置动画正放与回放之间的时间间隔
  29. lv_anim_set_playback_delay(&PropertyAnimation_0, 0); //设置回放之间的延时
  30. lv_anim_set_repeat_count(&PropertyAnimation_0, 0); //动画重复的次数
  31. lv_anim_set_repeat_delay(&PropertyAnimation_0, 0); //动画重复的间隔时间
  32. lv_anim_set_early_apply(&PropertyAnimation_0, true); //动画是否马上执行
  33. lv_anim_start(&PropertyAnimation_0); //开始动画
  34. //平移动画
  35. lv_anim_t PropertyAnimation_1;
  36. lv_anim_init(&PropertyAnimation_1);
  37. lv_anim_set_time(&PropertyAnimation_1, 600);
  38. lv_anim_set_user_data(&PropertyAnimation_1, TargetObject);
  39. lv_anim_set_custom_exec_cb(&PropertyAnimation_1, _ui_anim_callback_set_x);
  40. lv_anim_set_values(&PropertyAnimation_1,-100,0); //执行动画回调函数,这里x轴的路径。-100是从左往右移要从又往左移改成100即可
  41. lv_anim_set_path_cb(&PropertyAnimation_1, lv_anim_path_ease_out);
  42. lv_anim_set_delay(&PropertyAnimation_1, delay + 0);
  43. lv_anim_set_playback_time(&PropertyAnimation_1, 0);
  44. lv_anim_set_playback_delay(&PropertyAnimation_1, 0);
  45. lv_anim_set_repeat_count(&PropertyAnimation_1, 0);
  46. lv_anim_set_repeat_delay(&PropertyAnimation_1, 0);
  47. lv_anim_set_early_apply(&PropertyAnimation_1, false);
  48. lv_anim_set_get_value_cb(&PropertyAnimation_1, &_ui_anim_callback_get_x);
  49. lv_anim_start(&PropertyAnimation_1);
  50. }
  51. static void btn_event_cb(lv_event_t *e)
  52. {
  53. lv_event_code_t code = lv_event_get_code(e);
  54. lv_obj_t * cont = lv_event_get_user_data(e);
  55. switch (code)
  56. {
  57. case LV_EVENT_CLICKED:
  58. {
  59. LV_LOG_USER("btn_event_cb");
  60. On_Animation(Page_switching_cont2, 0);
  61. lv_obj_clear_flag(Page_switching_cont2, LV_OBJ_FLAG_HIDDEN); /// Flags
  62. lv_obj_add_flag(Page_switching_cont1, LV_OBJ_FLAG_HIDDEN); /// Flags
  63. }
  64. break;
  65. default:
  66. break;
  67. }
  68. }
  69. static void btn1_event_cb(lv_event_t *e)
  70. {
  71. lv_event_code_t code = lv_event_get_code(e);
  72. lv_obj_t * cont = lv_event_get_user_data(e);
  73. switch (code)
  74. {
  75. case LV_EVENT_CLICKED:
  76. {
  77. LV_LOG_USER("btn_event_cb");
  78. On_Animation(Page_switching_cont1, 0);
  79. lv_obj_clear_flag(Page_switching_cont1, LV_OBJ_FLAG_HIDDEN); /// Flags
  80. lv_obj_add_flag(Page_switching_cont2, LV_OBJ_FLAG_HIDDEN); /// Flags
  81. }
  82. break;
  83. default:
  84. break;
  85. }
  86. }
  87. void test(void)
  88. {
  89. lv_obj_t* main = lv_obj_create(lv_scr_act()); // 创建一个对象容器 cont
  90. lv_obj_set_size(main,800,480);
  91. Page_switching_cont1 = lv_obj_create(main);
  92. lv_obj_set_size(Page_switching_cont1, 300, 420);
  93. lv_obj_set_style_bg_color(Page_switching_cont1, lv_color_hex(0x0E7CC5), 0);
  94. lv_obj_center(Page_switching_cont1);
  95. Page_switching_cont2 = lv_obj_create(main);
  96. lv_obj_set_size(Page_switching_cont2, 300, 420);
  97. lv_obj_set_style_bg_color(Page_switching_cont2, lv_color_hex(0xC72D1F), 0);
  98. lv_obj_center(Page_switching_cont2);
  99. lv_obj_add_flag(Page_switching_cont2, LV_OBJ_FLAG_HIDDEN); /// Flags
  100. lv_obj_t * btnm = lv_btn_create(lv_scr_act());
  101. lv_obj_align(btnm, LV_ALIGN_TOP_RIGHT, -20, 10);
  102. lv_obj_add_event_cb(btnm,btn_event_cb, LV_EVENT_CLICKED,NULL);
  103. lv_obj_t * btnm1 = lv_btn_create(lv_scr_act());
  104. lv_obj_add_event_cb(btnm1,btn1_event_cb, LV_EVENT_CLICKED,NULL);
  105. }

LVGL动画_动画的数据结构_直接写数据结构

LVGL动画_库函数

LVGL动画例程记录_lvgl 例程

 14、常用函数

14.1 获取控件长宽高

lv_obj_update_layout(ui->screen_ch1_control_cont);  //实现要更新布局信息
LV_LOG_USER("height:%d",lv_obj_get_height(ui->screen_ch1_control_cont));
LV_LOG_USER("width:%d",lv_obj_get_width(ui->screen_ch1_control_cont));

 15、参考博文

LVGL 8.2 Sorting a List using up and down buttons_风雨依依的博客-CSDN博客

little VGL_风雨依依的博客-CSDN博客

tilblackout的博客_CSDN博客-嵌入式,ARM,FOC领域博主

ESP32 开发笔记(四)LVGL控件学习 ObjectMask 对象蒙版控件_lvgl mask_路过人间本尊的博客-CSDN博客

【LVGL布局】网格布局_lv_obj_set_grid_cell_喜暖知寒的博客-CSDN博客

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/一键难忘520/article/detail/847384
推荐阅读
相关标签
  

闽ICP备14008679号