3、LVGL控件-开关、复选框、进度条

本篇文章目录导航

♠♠ LVGL控件-开关、复选框、进度条
♣♣♣♣ 一、LVGL开关部件
♦♦♦♦♦♦♦♦ 1.1 开关部件组成部分
♦♦♦♦♦♦♦♦ 1.2 开关部件基本API
♦♦♦♦♦♦♦♦ 1.3 实验小演示
♣♣♣♣ 二、LVGL复选框部件
♦♦♦♦♦♦♦♦ 2.1 复选框部件组成部分
♦♦♦♦♦♦♦♦ 2.2 复选框部件基本API
♦♦♦♦♦♦♦♦ 2.3 实验小演示
♣♣♣♣ 三、LVGL进度条部件
♦♦♦♦♦♦♦♦ 3.1 进度条部件组成部分
♦♦♦♦♦♦♦♦ 3.2 进度条部件基本API
♦♦♦♦♦♦♦♦ 3.3 实验小演示（固件更新进度条）
♦♦♦♦♦♦♦♦ 3.4 实验小演示（温度计）
 

#LVGL控件-开关、复选框
##一、LVGL开关部件
>开关部件常用于控制某个功能的开启和关闭，它可以直接显示被控对象的状态。

效果图:

 

###1.1 开关部件组成部分
主体（LV_PART_MAIN）
手柄（LV_PART_KNOB）
指示器（LV_PART_INDICATOR）
 

###1.2 开关部件基本API
创建开关部件：

lv_obj_t *switch1 = lv_switch_create(parent);

修改开关部件背景颜色：

/* 修改主体背景颜色 */
lv_obj_set_style_bg_color(switch1, lv_color_hex(0xffffff), LV_PART_MAIN);  
 
/* 修改手柄背景颜色 */
lv_obj_set_style_bg_color(switch1, lv_color_hex(0xfc1944), LV_PART_KNOB);
 
/* 修改指示器背景颜色，LV_STATE_CHECHED为打开状态 */
lv_obj_set_style_bg_color(switch1, lv_color_hex(0x23a1e7), LV_STATE_CHECKED | LV_PART_INDICATOR);

添加、清除开关状态

lv_obj_add_state(switch1, LV_STATE_CHECKED);      /* 默认开关打开状态 */
lv_obj_clear_state(switch1, LV_STATE_CHECKED);    /* 默认开关关闭状态 */
 
lv_obj_add_state(switch1, LV_STATE_CHECKED | LV_STATE_DISABLED);      /* 默认开关打开且不可修改状态 */
lv_obj_clear_state(switch1, LV_STATE_DISABLED);                       /* 清除开关状态 */

获取（判断）开关状态：

lv_obj_has_state(switch1, LV_STATE_CHECKED);    /* bool类型返回值：开1、关0 */

为开关部件添加事件：

static void event_cb(lv_event_t *e)
{
    lv_event_code_t code = lv_event_get_code(e);
    if(code == LV_EVENT_VALUE_CHANGED)
    {
        if(lv_obj_has_state(switch1, LV_STATE_CHECKED))
        {
            printf("LED ON \n");
        }else
        {
            printf("LED OFF \n");
        }
    }
}

lv_obj_add_event_cb(switch1, event_cb, LV_EVENT_VALUE_CHANGED, NULL);      /* 状态改变时触发 */

###1.3 实验小演示
配置4个开关，状态分别为：默认关闭、默认打开、默认关闭且不可修改、默认打开且不可修改。

lv_obj_t *switch1;

static void event_cb(lv_event_t *e)
{
    lv_event_code_t code = lv_event_get_code(e);
    if(code == LV_EVENT_VALUE_CHANGED)
    {
        if(lv_obj_has_state(switch1, LV_STATE_CHECKED))
        {
            printf("LED ON \n");
        }else
        {
            printf("LED OFF \n");
        }
    }
}

void my_gui(void)
{
    /*******************************第一个开关***********************************/
    switch1 = lv_switch_create(lv_scr_act()); /* 创建开关部件 */
    lv_obj_align(switch1, LV_ALIGN_CENTER, 0, -90);

    /* 修改主体背景颜色 */
    lv_obj_set_style_bg_color(switch1, lv_color_hex(0x00ff00), LV_PART_MAIN);
    /* 修改手柄背景颜色 */
    lv_obj_set_style_bg_color(switch1, lv_color_hex(0xfc1944), LV_PART_KNOB);
    /* 修改指示器背景颜色，LV_STATE_CHECHED为打开状态 */
    lv_obj_set_style_bg_color(switch1, lv_color_hex(0x23a1e7), LV_STATE_CHECKED | LV_PART_INDICATOR);

    lv_obj_add_state(switch1, LV_STATE_CHECKED);                            /* 默认开关打开状态 */
    lv_obj_add_event_cb(switch1, event_cb, LV_EVENT_VALUE_CHANGED, NULL);   /* 状态改变时触发 */

    /*******************************第二个开关***********************************/
    lv_obj_t *switch2 = lv_switch_create(lv_scr_act()); /* 创建开关部件 */
    lv_obj_align(switch2, LV_ALIGN_CENTER, 0, -30);

    /* 修改主体背景颜色 */
    lv_obj_set_style_bg_color(switch2, lv_color_hex(0x00ff00), LV_PART_MAIN);
    /* 修改手柄背景颜色 */
    lv_obj_set_style_bg_color(switch2, lv_color_hex(0xfc1944), LV_PART_KNOB);
    /* 修改指示器背景颜色，LV_STATE_CHECHED为打开状态 */
    lv_obj_set_style_bg_color(switch2, lv_color_hex(0x23a1e7), LV_STATE_CHECKED | LV_PART_INDICATOR);

    lv_obj_clear_state(switch2, LV_STATE_CHECKED);                          /* 默认开关关闭状态 */

    /*******************************第三个开关***********************************/
    lv_obj_t *switch3 = lv_switch_create(lv_scr_act()); /* 创建开关部件 */
    lv_obj_align(switch3, LV_ALIGN_CENTER, 0, 30);

    lv_obj_add_state(switch3, LV_STATE_CHECKED | LV_STATE_DISABLED);        /* 默认开关打开且不可修改状态 */

    /*******************************第四个开关***********************************/
    lv_obj_t *switch4 = lv_switch_create(lv_scr_act()); /* 创建开关部件 */
    lv_obj_align(switch4, LV_ALIGN_CENTER, 0, 90);

    lv_obj_clear_state(switch4, LV_STATE_CHECKED);      /* 默认开关关闭状态 */
    lv_obj_add_state(switch4, LV_STATE_DISABLED);       /* 默认开关打开且不可修改状态 */
}

点击3、LVGL控件-开关、复选框、进度条 ——古月居可查看全文