How to clear focus highlight

How-to
1

Description

I try to develop a custom widget, and i didn’t apply theme yet, and i have a button left is highlighted, i didn’t add anything to make it highlighted and i can’t get rid of it, i don’t think it’s related to focus state,

What MCU/Processor/Board and compiler are you using?

VSCode simulator

What LVGL version are you using?

LVGL 8.3.10

What do you want to achieve?

What have you tried so far?

i tried to clear the state focused by : lv_obj_clear_state(btn_left,LV_STATE_FOCUSED);
i tried to clear the flag click focusable : lv_obj_clear_flag(btn_left, LV_OBJ_FLAG_CLICK_FOCUSABLE);

Screenshot and/or video

image

the left button is highlighted

2

By reading the lv_theme_default.c source code:

static void theme_apply(lv_theme_t * th, lv_obj_t * obj)
{
    ...
#if LV_USE_BTN
    else if(lv_obj_check_type(obj, &lv_btn_class)) {
        lv_obj_add_style(obj, &styles->btn, 0);
        lv_obj_add_style(obj, &styles->bg_color_primary, 0);
        lv_obj_add_style(obj, &styles->transition_delayed, 0);
        lv_obj_add_style(obj, &styles->pressed, LV_STATE_PRESSED);
        lv_obj_add_style(obj, &styles->transition_normal, LV_STATE_PRESSED);
        lv_obj_add_style(obj, &styles->outline_primary, LV_STATE_FOCUS_KEY);
#if LV_THEME_DEFAULT_GROW
        lv_obj_add_style(obj, &styles->grow, LV_STATE_PRESSED);
#endif
    ...
}

It can be found that the highlighting effect is achieved using outline. You only need to set the outline width to 0 in the LV_STATE_FOCUS_KEY state:

void btn_test(void)
{
    lv_obj_t* btn = lv_btn_create(lv_scr_act());
    lv_obj_set_style_outline_width(btn, 0, LV_STATE_FOCUS_KEY);
}
1 Like
3

Thank you @FASTSHIFT, it worked with lv_obj_set_style_outline_width(btn, 0, LV_STATE_FOCUS_KEY);