博客

2、程序

//定义三个lv_style_t变量
static lv_style_t style_btn;            //按钮1按下前的样式变量
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)
{
 /****************************************************按键1和按钮2的样式***********************************************************/
    /* 创建一个简单的按钮样式 */
    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());                      //设置文本的颜色

    /* 为按下的状态创建一个样式。* 使用颜色过滤器简单地修改此状态下的所有颜色 */
    static lv_color_filter_dsc_t color_filter;
    lv_color_filter_dsc_init(&color_filter, darken);                            //定义颜色过滤器回调函数
    lv_style_init(&style_btn_pressed);                                          //初始化按下时的style
    lv_style_set_color_filter_dsc(&style_btn_pressed, &color_filter);           //设置颜色过滤
    lv_style_set_color_filter_opa(&style_btn_pressed, LV_OPA_20);               //设置过滤颜色的透明百分比

 /****************************************************修改按钮2的部分样式***********************************************************/
    /* 创建一个红色样式。 只改变一些颜色。*/
    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));
}

/**
* 从头开始为按钮创建样式。
*/
void lv_demo_my_mark(void)
{
    /*初始化样式*/
    style_init();

    /****************************************************按键1***********************************************************/
    /*创建一个按钮并使用新样式*/
    lv_obj_t* btn = lv_btn_create(lv_scr_act());
    /* 删除来自主题的样式
    * 请注意，大小和位置也存储为样式属性
    * 所以 lv_obj_remove_style_all 也会删除设置的大小和位置 */
    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);    //被按下时的样式
    /*给按钮添加标签*/
    lv_obj_t* label = lv_label_create(btn);
    lv_label_set_text(label, "Button");
    lv_obj_center(label);


    /****************************************************按键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);
    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);
    label = lv_label_create(btn2);
    lv_label_set_text(label, "Button 2");
    lv_obj_center(label);
}