LVGL实验验证[lv_theme_default_init][lv_style_set_text_color][lv_style_set_text_opa][lv_tabview_create]

最新推荐文章于 2024-08-14 16:26:16 发布

城东

最新推荐文章于 2024-08-14 16:26:16 发布

阅读量1.4k

点赞数 2

分类专栏：智能车/小项目文章标签： LVGL 实验验证

本文链接：https://blog.csdn.net/chengdong1314/article/details/128239359

版权

智能车/小项目专栏收录该内容

30 篇文章 7 订阅

订阅专栏

lv_theme_default_init
最原始的lv_theme_default_init函数配置以及显示效果如下:

lv_theme_default_init(NULL, lv_palette_main(LV_PALETTE_BLUE), lv_palette_main(LV_PALETTE_RED), LV_THEME_DEFAULT_DARK,font_normal);
参数定义:
lv_theme_t * lv_theme_default_init(lv_disp_t * disp, lv_color_t color_primary, lv_color_t color_secondary, bool dark,const lv_font_t * font)

在这里插入图片描述

函数定义参考网址:https://docs.lvgl.io/8/overview/style.html?highlight=lv_theme_default_init
这里调换color_primary和color_secondary(主次颜色),得到的结果为:

    lv_theme_default_init(NULL, lv_palette_main(LV_PALETTE_RED), lv_palette_main(LV_PALETTE_BLUE), LV_THEME_DEFAULT_DARK,
                          font_normal);

在这里插入图片描述

可以看到字体的前景色变了,所以color_primary和color_secondary控制的是字体的背景色和前景色(如果控件不控制字体颜色的话),相当于设置字体的默认字体!
接下来修改dark,这个参数是说屏幕是亮屏还是灰暗屏,原来定义为0,现在定义为1:
#define LV_THEME_DEFAULT_DARK 1
在这里插入图片描述

所以可以看到dark影响了背景色,这也复合灰度这个定义!

lv_style_init样式设置

这里修改图表的颜色,修改前和修改后路下图:

    lv_style_init(&style_icon);
    lv_style_set_text_color(&style_icon, lv_theme_get_color_primary(NULL));
    lv_style_set_text_font(&style_icon, font_large);
	改为:
	lv_style_set_text_color(&style_icon, lv_theme_get_color_secondary(NULL));

在这里插入图片描述

可以看到lv_style_set_text_color决定了对象的前景色!,这里用于图标!

lv_style_set_text_opa

这里在上面的基础上修改透明度

lv_style_init(&style_text_muted);
    lv_style_set_text_opa(&style_text_muted, LV_OPA_50);
    修改为:
    lv_style_set_text_opa(&style_text_muted, LV_OPA_100);

效果如下(左边为修改前,有变为修改后),可以看到lv_style_set_text_opa控制着字体的透明度:
在这里插入图片描述

lv_tabview_create

tabview就是一个顶层试图,这里是指"Profile",“Analytics”,"Shop"这三个选择卡,修改方向测试:

tv = lv_tabview_create(lv_scr_act(), LV_DIR_TOP, tab_h);
修改为:
tv = lv_tabview_create(lv_scr_act(), LV_DIR_BOTTOM, tab_h);

现象如下,选项栏跑到下面去了
在这里插入图片描述
修改选项顺序:

lv_obj_t * t1 = lv_tabview_add_tab(tv, "Profile");
    lv_obj_t * t2 = lv_tabview_add_tab(tv, "Analytics");
    lv_obj_t * t3 = lv_tabview_add_tab(tv, "Shop");
    profile_create(t1);
    analytics_create(t2);
    shop_create(t3);
    修改为:
    lv_obj_t * t1 = lv_tabview_add_tab(tv, "Profile");
    lv_obj_t * t3 = lv_tabview_add_tab(tv, "Shop");
	lv_obj_t * t2 = lv_tabview_add_tab(tv, "Analytics");

在这里插入图片描述
测试发现修改创建的顺序是不会修改选项的顺序的,比如做如下修改无用:

lv_obj_t * t1 = lv_tabview_add_tab(tv, "Profile");
    lv_obj_t * t2 = lv_tabview_add_tab(tv, "Analytics");
    lv_obj_t * t3 = lv_tabview_add_tab(tv, "Shop");
    profile_create(t1);
    shop_create(t3);
	analytics_create(t2);