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显示
}
- 运行效果图
/**
* 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);
}
- 运行效果图
/**
* 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
}
- 运行效果
