LVGL7.0按键创建_lvgl7图片按钮-优快云博客

按键创建

1、创建多图片按键

创建一个多图片按键，用于自定义开关状态的切换

LV_EVENT_CB_DECLARE(event_handler)//声明按键回调

{

    switch (e)

    {

    case LV_EVENT_CLICKED://轻点



        break;

    case LV_EVENT_RELEASED://按压



        break;

    case LV_EVENT_PRESSED://松开



        break;

    case LV_EVENT_LONG_PRESSED://长按



        break;

    default:break;

    }

}



void Sw_Ctrl_Page_Create(void)

{

    //声明图片

    LV_IMG_DECLARE(S_PIC_1);

    LV_IMG_DECLARE(S_PIC_2);



    lv_obj_t* imgbtna = lv_imgbtn_create(lv_scr_act(), NULL);//基于屏幕创建图标

    lv_imgbtn_set_src(imgbtna, LV_BTN_STATE_PRESSED, &S_PIC_1);//按下状态图片

    lv_imgbtn_set_src(imgbtna, LV_BTN_STATE_RELEASED, &S_PIC_2);//抬起状态图片

    lv_imgbtn_set_src(imgbtna, LV_BTN_STATE_CHECKED_RELEASED, &S_PIC_1);//检测到按松开状态图片

    lv_imgbtn_set_src(imgbtna, LV_BTN_STATE_CHECKED_PRESSED, &S_PIC_2);//检测到按下状态图片    

    lv_imgbtn_set_checkable(imgbtna, true);//使能按键图片翻转

    lv_imgbtn_toggle(imgbtna);//设置翻转

    lv_obj_align_origo(imgbtna, NULL, LV_ALIGN_IN_TOP_LEFT, 85, 30);//左上角对齐

    lv_obj_set_event_cb(imgbtna, event_handler);//设置按钮回调

}

2、创建单图片按键

类似于app图标，单图标模拟按压效果

//按键控制

LV_EVENT_CB_DECLARE(event_handler)

{

    switch (e)

    {

    case LV_EVENT_CLICKED://轻点

        break;

    case LV_EVENT_RELEASED://按压

        break;

    case LV_EVENT_PRESSED://松开

        break;

    case LV_EVENT_LONG_PRESSED://长按

        break;

    default:break;

    }

}



void Home_Page_Create(void)

{

    //声明图片

    LV_IMG_DECLARE(H_PIC_0);



    static lv_style_t style;

    lv_style_init(&style);//对象风格初始化

    lv_style_set_image_recolor_opa(&style, LV_STATE_PRESSED, LV_OPA_30);//设置按下时的背景色深

    lv_style_set_image_recolor(&style, LV_STATE_PRESSED, LV_COLOR_GRAY);//设置按下时的背景色



    lv_obj_t* img1 = lv_imgbtn_create(lv_scr_act(), NULL);//创建图片按键

    lv_imgbtn_set_src(img1, LV_BTN_STATE_PRESSED, &H_PIC_0);//按下

    lv_imgbtn_set_src(img1, LV_BTN_STATE_RELEASED, &H_PIC_0);//抬起

    lv_obj_align(img1, NULL, LV_ALIGN_IN_TOP_LEFT, 30, 25);//左上角对齐

    lv_obj_set_event_cb(img1, event_handler);//设置按钮回调

    lv_obj_add_style(img1, LV_IMGBTN_PART_MAIN, &style);//对象添加风格

}

3、创建系统按键

使用GUI自己的原味按键

LV_EVENT_CB_DECLARE(event_handler)

{

    switch (e)

    {

    case LV_EVENT_CLICKED://轻点

        break;

    case LV_EVENT_RELEASED://按压

   

        break;

    case LV_EVENT_PRESSED://松开

        break;

    case LV_EVENT_LONG_PRESSED://长按

       

        break;

    default:break;

    }

}

void Home_Page_Create(void)

{

    lv_obj_t* label;



    lv_obj_t* btn1 = lv_btn_create(lv_scr_act(), NULL);

    lv_obj_set_event_cb(btn1, event_handler);

    lv_obj_align(btn1, NULL, LV_ALIGN_IN_TOP_LEFT, 30, 40);



    label = lv_label_create(btn1, NULL);//基于按键创建文本

    lv_label_set_text(label, "Button");



    lv_obj_t* btn2 = lv_btn_create(lv_scr_act(), NULL);

    lv_obj_set_event_cb(btn2, event_handler);

    lv_obj_align(btn2, NULL, LV_ALIGN_IN_TOP_LEFT, 30,160);

    lv_btn_set_checkable(btn2, true);

    lv_btn_toggle(btn2);

    lv_btn_set_fit2(btn2, LV_FIT_NONE, LV_FIT_TIGHT);



    label = lv_label_create(btn2, NULL);

    lv_label_set_text(label, "Toggled");

}

4、SW按键

SW也算一个按键，用于显示状态

LV_EVENT_CB_DECLARE(event_handler)

{

    switch (e)

    {

    case LV_EVENT_CLICKED://轻点



        break;

    case LV_EVENT_RELEASED://按压



        break;

    case LV_EVENT_PRESSED://松开

        break;

    case LV_EVENT_LONG_PRESSED://长按



        break;

    case LV_EVENT_VALUE_CHANGED://目标值改变

        printf("State: %s\n", lv_switch_get_state(obj) ? "On" : "Off");

        break;

    default:break;

    }

}

void Home_Page_Create(void)

{

    lv_obj_t* sw1 = lv_switch_create(lv_scr_act(), NULL);//创建一个sw1

    lv_obj_align(sw1, NULL, LV_ALIGN_IN_TOP_LEFT, 200, 50);//对齐

    lv_obj_set_event_cb(sw1, event_handler);//设置回调

    lv_switch_set_anim_time(sw1,500);//设置动画时间 单位ms



    lv_obj_t* sw2 = lv_switch_create(lv_scr_act(), sw1);//拷贝sw1的所有属性，并创建sw2

    lv_switch_on(sw2, LV_ANIM_ON);//设置初始态为ON

    lv_obj_align(sw2, NULL, LV_ALIGN_IN_TOP_LEFT, 200, 150);//对齐

}