本篇文章目录导航
♠♠ 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控件-开关、复选框、进度条——古月居可查看全文