zl程序教程

您现在的位置是:首页 >  其它

当前栏目

LVGL V8之 multiple styles

multiple V8 LVGL styles
2023-09-14 09:06:41 时间

创建style

  • 初时化base style
    static lv_style_t style_base;
    lv_style_init(&style_base);
  • 设置背景色为淡蓝色
 lv_style_set_bg_color(&style_base, lv_palette_main(LV_PALETTE_LIGHT_BLUE));
  • 设置边框背景色为LV_PALETTE_LIGHT_BLUE
lv_style_set_border_color(&style_base, lv_palette_darken(LV_PALETTE_LIGHT_BLUE,3));
  • 设置边框线宽为2
lv_style_set_border_width(&style_base, 2);
  • 设置倒角为10
  lv_style_set_radius(&style_base, 10);
  • 设置阴影宽度为10
  lv_style_set_shadow_width(&style_base, 10);
  • 设置阴影在bottom下方出现
 lv_style_set_shadow_ofs_y(&style_base, 5);
  • 设置阴影透明度为50%
  lv_style_set_shadow_opa(&style_base, LV_OPA_50);
  • 设置文本颜色为白色
 lv_style_set_text_color(&style_base, lv_color_white());
  • 设置style宽度为100
  lv_style_set_width(&style_base, 100);
  • 设置style高度为LV_SIZE_CONTENT
lv_style_set_height(&style_base, LV_SIZE_CONTENT);
  • 初时化另一个warning style
    static lv_style_t style_warning;
    lv_style_init(&style_warning);
  • 设置背景色,边框背景色和文本颜色为黄色
 lv_style_set_bg_color(&style_warning, lv_palette_main(LV_PALETTE_YELLOW));
 lv_style_set_border_color(&style_warning, lv_palette_darken(LV_PALETTE_YELLOW,3));
 lv_style_set_text_color(&style_warning, lv_palette_darken(LV_PALETTE_YELLOW, 4));
  • 创建obj对象,添加style,居中显示
    lv_obj_t* obj_base = lv_obj_create(lv_scr_act());
    lv_obj_add_style(obj_base, &style_base, 0);
    lv_obj_align(obj_base, LV_ALIGN_LEFT_MID, 20, 0);
    lv_obj_t* label = lv_label_create(obj_base);
    lv_label_set_text(label, "Base");
    lv_obj_center(label);
    
    lv_obj_t* obj_warning = lv_obj_create(lv_scr_act());
    lv_obj_add_style(obj_warning, &style_base, 0);
    lv_obj_add_style(obj_warning, &style_warning, 0);
    lv_obj_align(obj_warning, LV_ALIGN_RIGHT_MID, -20, 0);
    label = lv_label_create(obj_warning);
    lv_label_set_text(label, "Warning");
    lv_obj_center(label);

完整代码,仅供参考

static void lv_example_style_11(void)
{
    /*A base style*/
    static lv_style_t style_base;
    lv_style_init(&style_base);
    lv_style_set_bg_color(&style_base, lv_palette_main(LV_PALETTE_LIGHT_BLUE));
    lv_style_set_border_color(&style_base, lv_palette_darken(LV_PALETTE_LIGHT_BLUE,3));
    lv_style_set_border_width(&style_base, 2);
    lv_style_set_radius(&style_base, 10);
    lv_style_set_shadow_width(&style_base, 10);
    lv_style_set_shadow_ofs_y(&style_base, 5);
    lv_style_set_shadow_opa(&style_base, LV_OPA_50);
    lv_style_set_text_color(&style_base, lv_color_white());
    lv_style_set_width(&style_base, 100);
    lv_style_set_height(&style_base, LV_SIZE_CONTENT);
    /*Set only the properties that should be different*/
    static lv_style_t style_warning;
    lv_style_init(&style_warning);
    lv_style_set_bg_color(&style_warning, lv_palette_main(LV_PALETTE_YELLOW));
    lv_style_set_border_color(&style_warning, lv_palette_darken(LV_PALETTE_YELLOW,3));
    lv_style_set_text_color(&style_warning, lv_palette_darken(LV_PALETTE_YELLOW, 4));
    /*Create an object with the base style only*/
    lv_obj_t* obj_base = lv_obj_create(lv_scr_act());
    lv_obj_add_style(obj_base, &style_base, 0);
    lv_obj_align(obj_base, LV_ALIGN_LEFT_MID, 20, 0);
    lv_obj_t* label = lv_label_create(obj_base);
    lv_label_set_text(label, "Base");
    lv_obj_center(label);
    /*Create an other object with the base style and earnings style too*/
    lv_obj_t* obj_warning = lv_obj_create(lv_scr_act());
    lv_obj_add_style(obj_warning, &style_base, 0);
    lv_obj_add_style(obj_warning, &style_warning, 0);
    lv_obj_align(obj_warning, LV_ALIGN_RIGHT_MID, -20, 0);
    label = lv_label_create(obj_warning);
    lv_label_set_text(label, "Warning");
    lv_obj_center(label);
}

调用lv_example_style_11运行效果

在这里插入图片描述