LVGL V8之Button

Simple Buttons

/**
* @brieaf 按键事件回调函数
*/
static void event_handler(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e); //获取事件code
    if (code == LV_EVENT_CLICKED) {  //CLICKED事件
        LV_LOG_USER("Clicked");
    }
    else if (code == LV_EVENT_VALUE_CHANGED) { //状态值改变事件
        LV_LOG_USER("Toggled");
    }
}

static void lv_example_btn_1(void)
{
    lv_obj_t* label; 
    lv_obj_t* btn1 = lv_btn_create(lv_scr_act()); //创建按键1
    lv_obj_add_event_cb(btn1, event_handler, LV_EVENT_ALL, NULL); //增加所有事件LV_EVENT_ALL
    lv_obj_align(btn1, LV_ALIGN_CENTER, 0, -40); //屏幕居中向上偏移40对齐
    label = lv_label_create(btn1); //在按键1上创建label对象
    lv_label_set_text(label, "Button");//设置label显示内容为Button
    lv_obj_center(label);// 居中按键1显示
    lv_obj_t* btn2 = lv_btn_create(lv_scr_act());//创建按键2
    lv_obj_add_event_cb(btn2, event_handler, LV_EVENT_ALL, NULL);//增加所有事件LV_EVENT_ALL
    lv_obj_align(btn2, LV_ALIGN_CENTER, 0, 40);  //屏幕居中向下偏移40对齐
    lv_obj_add_flag(btn2, LV_OBJ_FLAG_CHECKABLE); //增加可选择特性
    lv_obj_set_height(btn2, LV_SIZE_CONTENT); //设置按键2的高度
    label = lv_label_create(btn2); //在按键2上创建label对象
    lv_label_set_text(label, "Toggle"); //设置显示内容为Toggle
    lv_obj_center(label); //居中按键2显示
}

• 运行效果图
  

Styling buttons

/**
* Style a button from scratch
*/
static void lv_example_btn_2(void)
{
    /*Init the style for the default state*/
    static lv_style_t style;
    lv_style_init(&style); //初时化样式变量style
    lv_style_set_radius(&style, 3); //设置倒角为3

    lv_style_set_bg_opa(&style, LV_OPA_100); //设置透明度LV_OPA_100
    lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_BLUE)); //设置背景色LV_PALETTE_BLUE
    lv_style_set_bg_grad_color(&style, lv_palette_darken(LV_PALETTE_BLUE, 2)); //设置渐变色到LV_PALETTE_BLUE
    lv_style_set_bg_grad_dir(&style, LV_GRAD_DIR_VER);//渐变方向为垂直
    lv_style_set_border_opa(&style, LV_OPA_40);//设置边框透明度为LV_OPA_40
    lv_style_set_border_width(&style, 2);//设置边框宽度为2
    lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_GREY));//设置边框颜色为LV_PALETTE_GREY
    lv_style_set_shadow_width(&style, 8); //设置阴影宽度
    lv_style_set_shadow_color(&style, lv_palette_main(LV_PALETTE_GREY)); //设置阴影颜色为LV_PALETTE_GREY
    lv_style_set_shadow_ofs_y(&style, 8); //阴影垂直向下偏移8
    lv_style_set_outline_opa(&style, LV_OPA_COVER); //设置轮廓线透明度为着色
    lv_style_set_outline_color(&style, lv_palette_main(LV_PALETTE_BLUE));//设置轮廓线颜色为LV_PALETTE_BLUE
    lv_style_set_text_color(&style, lv_color_white());//设置文本颜色为白色
    lv_style_set_pad_all(&style, 10);//设置padding all 10个像素点
    /*Init the pressed style*/
    static lv_style_t style_pr;
    lv_style_init(&style_pr);  //初时化按键按下的样式变量style_pr
    /*Ad a large outline when pressed*/
    lv_style_set_outline_width(&style_pr, 30); //设置轮廓宽度为30
    lv_style_set_outline_opa(&style_pr, LV_OPA_TRANSP);//设置轮廓透明度为透明
    lv_style_set_translate_y(&style_pr, 5); //translate y方向向下5个像素点
    lv_style_set_shadow_ofs_y(&style_pr, 3); //阴影偏移为3，这样按键按下时向下转移5个像素点+3个象素点的阴影，和按键没有按下时的阴影偏移8个像素点一致，这样阴影底部就没有移动，只是按键本体在按下时向下移了5个像素点
    lv_style_set_bg_color(&style_pr, lv_palette_darken(LV_PALETTE_BLUE, 2));//设置背景色为深蓝级别2
    lv_style_set_bg_grad_color(&style_pr, lv_palette_darken(LV_PALETTE_BLUE, 4));//设置渐变色为深蓝级别4
    /*Add a transition to the the outline*/
    static lv_style_transition_dsc_t trans;
    static lv_style_prop_t props[] = { LV_STYLE_OUTLINE_WIDTH, LV_STYLE_OUTLINE_OPA, 0 }; 
    lv_style_transition_dsc_init(&trans, props, lv_anim_path_linear, 300, 0, NULL); //初时化为线性动画过渡
    lv_style_set_transition(&style_pr, &trans); 
    lv_obj_t* btn1 = lv_btn_create(lv_scr_act());
    lv_obj_remove_style_all(btn1); /*Remove the style coming from the theme*/
    lv_obj_add_style(btn1, &style, 0);
    lv_obj_add_style(btn1, &style_pr, LV_STATE_PRESSED); 
    lv_obj_set_size(btn1, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_obj_center(btn1);
    lv_obj_t* label = lv_label_create(btn1);
    lv_label_set_text(label, "Button");
    lv_obj_center(label);
}

• 运行效果图
  

Gummy button

/**
* Create a style transition on a button to act like a gum when clicked
*/
static void lv_example_btn_3(void)
{
    /*Properties to transition*/
    static lv_style_prop_t props[] = {
    LV_STYLE_TRANSFORM_WIDTH, LV_STYLE_TRANSFORM_HEIGHT, LV_STYLE_TEXT_LETTER_SPACE, 0
    }; // 过渡属性定义
    /*Transition descriptor when going back to the default state.
    *Add some delay to be sure the press transition is visible even if the press was very short*/
    static lv_style_transition_dsc_t transition_dsc_def;
    lv_style_transition_dsc_init(&transition_dsc_def, props, lv_anim_path_overshoot,250, 100, NULL); //过渡动画方式为overshoot
    /*Transition descriptor when going to pressed state.
    *No delay, go to presses state immediately*/
    static lv_style_transition_dsc_t transition_dsc_pr;
    lv_style_transition_dsc_init(&transition_dsc_pr, props, lv_anim_path_ease_in_out,250, 0, NULL); //淡进淡出过渡
    /*Add only the new transition to he default state*/
    static lv_style_t style_def;
    lv_style_init(&style_def);
    lv_style_set_transition(&style_def, &transition_dsc_def); // style_def样式设置transition_dsc_def过渡特性
    /*Add the transition and some transformation to the presses state.*/
    static lv_style_t style_pr;
    lv_style_init(&style_pr);
    lv_style_set_transform_width(&style_pr, 10); //按键按下时宽度转变增加10
    lv_style_set_transform_height(&style_pr, -10);//高度转变减小10
    lv_style_set_text_letter_space(&style_pr, 10);//字母之间间隔转变增加10
    lv_style_set_transition(&style_pr, &transition_dsc_pr);// style_pr样式设置transition_dsc_pr过渡特性
    lv_obj_t* btn1 = lv_btn_create(lv_scr_act()); //创建按键
    lv_obj_align(btn1, LV_ALIGN_CENTER, 0, -80);//居中屏幕向下偏移80对齐
    lv_obj_add_style(btn1, &style_pr, LV_STATE_PRESSED);//按键加入按下style
    lv_obj_add_style(btn1, &style_def, 0); //按键加入默认style
    lv_obj_t* label = lv_label_create(btn1); //在按键上创建label
    lv_label_set_text(label, "Gum");//设置显示内容Gum
}

• 运行效果