LVGL V8之buttons styles

style的创建

• 定义三个lv_style_t变量

static lv_style_t style_btn;
static lv_style_t style_btn_pressed;
static lv_style_t style_btn_red;

• 定义颜色过滤器回调函数

static lv_color_t darken(const lv_color_filter_dsc_t* dsc, lv_color_t color, lv_opa_t opa)
{
    LV_UNUSED(dsc);
    return lv_color_darken(color, opa);
}

style_btn的创建

• style_btn style初时化

 lv_style_init(&style_btn);

• 设置radius倒角为10

 lv_style_set_radius(&style_btn, 10);

• 设置背景透明度为LV_OPA_COVER

lv_style_set_bg_opa(&style_btn, LV_OPA_COVER);

• 设置背影颜色为淡灰色

lv_style_set_bg_color(&style_btn, lv_palette_lighten(LV_PALETTE_GREY, 3));

• 设置渐变色到灰色

 lv_style_set_bg_grad_color(&style_btn, lv_palette_main(LV_PALETTE_GREY));

• 设置渐变色方向为LV_GRAD_DIR_VER

lv_style_set_bg_grad_dir(&style_btn, LV_GRAD_DIR_VER);

• 设置边框颜色为黑色

lv_style_set_border_color(&style_btn, lv_color_black());

• 设置边框颜色的透明度为百分之20

 lv_style_set_border_opa(&style_btn, LV_OPA_20);

• 设置边框宽度为2

lv_style_set_border_width(&style_btn, 2);

• 设置文本颜色为黑色

 lv_style_set_text_color(&style_btn, lv_color_black());

• 初时化一个简单的颜色过滤器

    static lv_color_filter_dsc_t color_filter;
    lv_color_filter_dsc_init(&color_filter, darken);

• 初时化按键按下时的style

  lv_style_init(&style_btn_pressed);

• 设置颜色过滤

 lv_style_set_color_filter_dsc(&style_btn_pressed, &color_filter);

• 过滤颜色的透明度为百分之20

 lv_style_set_color_filter_opa(&style_btn_pressed, LV_OPA_20);

• 创建红色的style

    lv_style_init(&style_btn_red);
    lv_style_set_bg_color(&style_btn_red, lv_palette_main(LV_PALETTE_RED));
    lv_style_set_bg_grad_color(&style_btn_red, lv_palette_lighten(LV_PALETTE_RED, 3));

创建Button

• 在当前活动界面创建一个Button对象

  lv_obj_t* btn = lv_btn_create(lv_scr_act());

• 重置Button中的style

lv_obj_remove_style_all(btn);

• 设置Button位置在当前界面的x=10,y=10处

  lv_obj_set_pos(btn, 10, 10);

• lv_obj_set_size设置Button的大小，宽为120，高为50，也可以使用lv_obj_set_width设置宽度，lv_obj_set_height设置高度

   lv_obj_set_size(btn, 120, 50);

• 添加Button默认状态下的 style

lv_obj_add_style(btn, &style_btn, 0);

• 添加Button按下状态的 style

 lv_obj_add_style(btn, &style_btn_pressed, LV_STATE_PRESSED);

• 在Button上创建Label，并居中显示Button

    lv_obj_t* label = lv_label_create(btn);
    lv_label_set_text(label, "Button");
    lv_obj_center(label);

创建Button 2

    lv_obj_t* btn2 = lv_btn_create(lv_scr_act());
    lv_obj_remove_style_all(btn2); 
    lv_obj_set_pos(btn2, 10, 80);
    lv_obj_set_size(btn2, 120, 50);

• 加入三个style,默认状态下加入了2个style

    lv_obj_add_style(btn2, &style_btn, LV_STATE_DEFAULT);
    lv_obj_add_style(btn2, &style_btn_red, LV_STATE_DEFAULT);
    lv_obj_add_style(btn2, &style_btn_pressed, LV_STATE_PRESSED);

• 设置Button 2的倒角为圆形

 lv_obj_set_style_radius(btn2, LV_RADIUS_CIRCLE, 0); 

• 创建Label并居中显示Button 2

    label = lv_label_create(btn2);
    lv_label_set_text(label, "Button 2");
    lv_obj_center(label);

完整代码，仅供参考

static lv_style_t style_btn;
static lv_style_t style_btn_pressed;
static lv_style_t style_btn_red;

static lv_color_t darken(const lv_color_filter_dsc_t* dsc, lv_color_t color, lv_opa_t opa)
{
    LV_UNUSED(dsc);
    return lv_color_darken(color, opa);
}

static void style_init(void)
{
    /*Create a simple button style*/
    lv_style_init(&style_btn);
    lv_style_set_radius(&style_btn, 10);
    lv_style_set_bg_opa(&style_btn, LV_OPA_COVER);
    lv_style_set_bg_color(&style_btn, lv_palette_lighten(LV_PALETTE_GREY, 3));
    lv_style_set_bg_grad_color(&style_btn, lv_palette_main(LV_PALETTE_GREY));
    lv_style_set_bg_grad_dir(&style_btn, LV_GRAD_DIR_VER);
    lv_style_set_border_color(&style_btn, lv_color_black());
    lv_style_set_border_opa(&style_btn, LV_OPA_20);
    lv_style_set_border_width(&style_btn, 2);
    lv_style_set_text_color(&style_btn, lv_color_black());
    /*Create a style for the pressed state.
    *Use a color filter to simply modify all colors in this state*/
    static lv_color_filter_dsc_t color_filter;
    lv_color_filter_dsc_init(&color_filter, darken);
    lv_style_init(&style_btn_pressed);
    lv_style_set_color_filter_dsc(&style_btn_pressed, &color_filter);
    lv_style_set_color_filter_opa(&style_btn_pressed, LV_OPA_20);
    /*Create a red style. Change only some colors.*/
    lv_style_init(&style_btn_red);
    lv_style_set_bg_color(&style_btn_red, lv_palette_main(LV_PALETTE_RED));
    lv_style_set_bg_grad_color(&style_btn_red, lv_palette_lighten(LV_PALETTE_RED, 3));
}


/**
* Create styles from scratch for buttons.
*/
static void lv_example_get_started_2(void)
{
    /*Initialize the style*/
    style_init();
    /*Create a button and use the new styles*/
    lv_obj_t* btn = lv_btn_create(lv_scr_act());
    /* Remove the styles coming from the theme
    * Note that size and position are also stored as style properties
    * so lv_obj_remove_style_all will remove the set size and position too */
    lv_obj_remove_style_all(btn);
    lv_obj_set_pos(btn, 10, 10);
    lv_obj_set_size(btn, 120, 50);
    
    lv_obj_add_style(btn, &style_btn, LV_STATE_DEFAULT);
    lv_obj_add_style(btn, &style_btn_pressed, LV_STATE_PRESSED);
    /*Add a label to the button*/
    lv_obj_t* label = lv_label_create(btn);
    lv_label_set_text(label, "Button");
    lv_obj_center(label);
    /*Create an other button and use the red style too*/
    lv_obj_t* btn2 = lv_btn_create(lv_scr_act());
    lv_obj_remove_style_all(btn2); /*Remove the styles coming from the theme*/
    lv_obj_set_pos(btn2, 10, 80);
    lv_obj_set_size(btn2, 120, 50);
    lv_obj_add_style(btn2, &style_btn, LV_STATE_DEFAULT);
    lv_obj_add_style(btn2, &style_btn_red, LV_STATE_DEFAULT);
    lv_obj_add_style(btn2, &style_btn_pressed, LV_STATE_PRESSED);
    lv_obj_set_style_radius(btn2, LV_RADIUS_CIRCLE, 0); /*Add a local style too*/
    label = lv_label_create(btn2);
    lv_label_set_text(label, "Button 2");
    lv_obj_center(label);
}

调用lv_example_get_started_2，运行操作效果