LVGL部件篇: 开关部件(lv_switch)
目录
简介
开关部件的组成
开关部件的相关知识
获取开关部件状态
设置开关部件的状态
开关部件的 API 函数
开关部件的实验
简介
在 GUI 界面中,我们经常用到开关部件,它就相当于一个当前值只有 0 和 1 的滑块部件。开关控件虽然简单,但是在我们设计GUI界面的时候,非常的常用,如果我们用上几个开关,那么我们的GUI界面就会看起来非常之高大上。
开关部件的组成
各组成部分的相关枚举如下所示:
① 主体背景 LV_PART_MAIN;
② 指示器 LV_PART_INDICATOR;
③ 旋钮 LV_PART_KNOB;
关于部件样式设置的内容,可以看LVGL基础知识。
开关部件的相关知识
获取开关部件状态
用户可调用 lv_obj_has_state 函数获取开关的当前状态,示例如下:
lv_obj_has_state(switch1, LV_STATE_CHECKED); /* 返回 true :开启状态 */
设置开关部件的状态
在默认情况下,开关创建出来之后,其是关闭的状态,如果用户需要添加开关的状态,可调用以下函数(用于打开开关):
lv_obj_add_state ( switch1 , LV_STATE_CHECKED );
在上述函数中,我们将开关设置为开启的状态。
如果用户想清除开关的状态,可调用以下函数(用于关闭开关):
lv_obj_clear_state(switch1, LV_STATE_CHECKED);
注意:当开关状态发生变化时,其触发的事件类型是 LV_EVENT_VALUE_CHANGED。
开关部件的 API 函数
lv_obj_t * lv_switch_create ( lv_obj_t * parent );
示例:
lv_obj_t * switch1=lv_switch_create(lv_scr_act());
lv_obj_center(switch1);
// 设置开关大小 (宽度 x 高度)
lv_obj_set_size(switch1, 80, 40); // 例如设置为宽度80像素,高度40像素
开关部件的实验
这里的例程我们参照正点原子官方给的例程。
屏幕上显示三个不同功能的开关和一个主标题(Control Center),三个开关(从左到右顺序)控制的模式分别是制冷(cool)、制暖(heat)和干燥(dry),制冷和制暖模式互斥,不可同时开启。
程序设计:
/* 获取当前活动屏幕的宽高 */
#define scr_act_width() lv_obj_get_width(lv_scr_act())
#define scr_act_height() lv_obj_get_height(lv_scr_act())
static lv_obj_t *switch_cool; /* 制冷模式开关 */
static lv_obj_t *switch_heat; /* 制暖模式开关 */
static lv_obj_t *switch_dry; /* 干燥模式开关 */
static const lv_font_t *font; /* 定义字体 */
/**
* @brief 回调事件
* @param *e :事件相关参数的集合,它包含了该事件的所有数据
* @return 无
*/
static void switch_event_cb(lv_event_t *e)
{
lv_obj_t *target = lv_event_get_target(e); /* 获取触发源 */
if(target == switch_cool) /* 制冷开关触发 */
{
if(lv_obj_has_state(switch_cool, LV_STATE_CHECKED)) /* 判断开关状态 */
{
lv_obj_clear_state(switch_heat, LV_STATE_CHECKED); /* 制冷模式已打开,关闭制暖模式 */
}
}
else if(target == switch_heat) /* 制暖开关触发 */
{
if(lv_obj_has_state(switch_heat, LV_STATE_CHECKED)) /* 判断开关状态 */
{
lv_obj_clear_state(switch_cool, LV_STATE_CHECKED); /* 制暖模式已打开,关闭制冷模式 */
}
}
}
/**
* @brief 功能文本标签
* @param 无
* @return 无
*/
static void lv_example_label(void)
{
/* 根据活动屏幕宽度选择字体 */
if (scr_act_width() <= 320)
{
font = &lv_font_montserrat_10;
}
else if (scr_act_width() <= 480)
{
font = &lv_font_montserrat_14;
}
else
{
font = &lv_font_montserrat_20;
}
lv_obj_t *label = lv_label_create(lv_scr_act()); /* 创建标签 */
lv_label_set_text(label, "Control Center"); /* 设置文本内容 */
lv_obj_set_style_text_font(label, font, LV_STATE_DEFAULT); /* 设置字体 */
lv_obj_align(label, LV_ALIGN_CENTER, 0, -scr_act_height() / 3 ); /* 设置位置 */
}
/**
* @brief 制冷功能开关
* @param 无
* @return 无
*/
static void lv_example_switch1(void)
{
/* 制冷模式基础对象(矩形背景) */
lv_obj_t *obj_cool = lv_obj_create(lv_scr_act()); /* 创建基础对象 */
lv_obj_set_size(obj_cool,scr_act_height() / 3, scr_act_height() / 3 ); /* 设置大小 */
lv_obj_align(obj_cool, LV_ALIGN_CENTER, -scr_act_width() / 4, 0 ); /* 设置位置 */
/* 制冷模式开关标签 */
lv_obj_t *label_cool = lv_label_create(obj_cool); /* 创建标签 */
lv_label_set_text(label_cool, "Cool"); /* 设置文本内容 */
lv_obj_set_style_text_font(label_cool, font, LV_STATE_DEFAULT); /* 设置字体 */
lv_obj_align(label_cool, LV_ALIGN_CENTER, 0, -scr_act_height() / 16 ); /* 设置位置 */
/* 制冷模式开关 */
switch_cool = lv_switch_create(obj_cool); /* 创建开关 */
lv_obj_set_size(switch_cool,scr_act_height() / 6, scr_act_height() / 12 ); /* 设置大小 */
lv_obj_align(switch_cool, LV_ALIGN_CENTER, 0, scr_act_height() / 16 ); /* 设置位置 */
lv_obj_add_event_cb(switch_cool, switch_event_cb, LV_EVENT_VALUE_CHANGED, NULL);/* 添加事件 */
}
/**
* @brief 制暖功能开关
* @param 无
* @return 无
*/
static void lv_example_switch2(void)
{
/* 制暖模式基础对象(矩形背景) */
lv_obj_t *obj_heat = lv_obj_create(lv_scr_act());
lv_obj_set_size(obj_heat,scr_act_height() / 3, scr_act_height() / 3 );
lv_obj_align(obj_heat, LV_ALIGN_CENTER, 0, 0 );
/* 制暖模式开关标签 */
lv_obj_t *label_heat = lv_label_create(obj_heat);
lv_label_set_text(label_heat, "Heat");
lv_obj_set_style_text_font(label_heat, font, LV_STATE_DEFAULT);
lv_obj_align(label_heat, LV_ALIGN_CENTER, 0, -scr_act_height() / 16 );
/* 制暖模式开关 */
switch_heat = lv_switch_create(obj_heat);
lv_obj_set_size(switch_heat,scr_act_height() / 6, scr_act_height() / 12 );
lv_obj_align(switch_heat, LV_ALIGN_CENTER, 0, scr_act_height() / 16 );
lv_obj_add_event_cb(switch_heat, switch_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
}
/**
* @brief 干燥功能开关
* @param 无
* @return 无
*/
static void lv_example_switch3(void)
{
/* 干燥模式基础对象(矩形背景) */
lv_obj_t *obj_dry = lv_obj_create(lv_scr_act());
lv_obj_set_size(obj_dry,scr_act_height() / 3, scr_act_height() / 3 );
lv_obj_align(obj_dry, LV_ALIGN_CENTER, scr_act_width() / 4, 0 );
/* 干燥模式开关标签 */
lv_obj_t *label_dry = lv_label_create(obj_dry);
lv_label_set_text(label_dry, "Dry");
lv_obj_set_style_text_font(label_dry, font, LV_STATE_DEFAULT);
lv_obj_align(label_dry, LV_ALIGN_CENTER, 0, -scr_act_height() / 16 );
/* 干燥模式开关 */
switch_dry = lv_switch_create(obj_dry);
lv_obj_set_size(switch_dry,scr_act_height() / 6, scr_act_height() / 12 );
lv_obj_align(switch_dry, LV_ALIGN_CENTER, 0, scr_act_height() / 16 );
lv_obj_add_state(switch_dry, LV_STATE_CHECKED|LV_STATE_DISABLED);
}
/**
* @brief LVGL演示
* @param 无
* @return 无
*/
void lv_mainstart(void)
{
lv_example_label(); /* 功能标题 */
lv_example_switch1(); /* 制冷模式开关 */
lv_example_switch2(); /* 制暖模式开关 */
lv_example_switch3(); /* 干燥模式开关 */
}
上述源码可分为以下两个部分:
① lv_mainstart 接口函数。在该函数中,我们调用了标签部件和开关部件相关的示例函数;
② 开关功能的实现。我们先根据活动屏幕的宽度来选择字体大小,然后分别创建标题标签、制冷、制暖和干燥开关,并为制冷、制暖开关添加事件回调。当制冷、制暖开关的状态发生变化时,将会触发事件回调,在回调函数中,我们获取触发源,如果是制冷开关打开,则将制暖开关关闭;如果是制暖开关打开,则将制冷开关关闭。注意:干燥开关默认开启且状态不可修改。
CodeBlocks 中进行运行查看: