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.
*/
void btn_filter_demo(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, 100, 100);
lv_obj_set_size(btn, 60, 40);
lv_obj_add_style(btn, &style_btn, 0);
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, "b1");
lv_obj_center(label);
/*Create another 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, 60, 100);
lv_obj_set_size(btn2, 60, 40);
lv_obj_add_style(btn2, &style_btn, 0);
lv_obj_add_style(btn2, &style_btn_red, 0);
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, "b2");
lv_obj_center(label);
}
lvgl-04 按键按下效果样式实现
于 2023-06-12 18:36:23 首次发布