这一期讲解lvgl中的开关控件，开关部件（Switch Widgets）看上去就像小型滑块，用于显示（并且可选择性地修改）一个可为 “开” 或 “关” 的数值。默认情况下，开关是水平放置的。如果你将其 width 设置得小于 height，那么它将会呈垂直放置状态。

开关主要分为以下三个部分：
LV_PART_MAIN:开关的背景部分。
LV_PART_INDICATOR:用于显示开关当前状态的指示器部分。
LV_PART_KNOB:在指示器左侧或右侧绘制的一个矩形。

关于开关的常用函数有：
Lv_obj_has_state(obj,lv_state_CHECKED);获取开关当前的状态。
Lv_obj_add_state(obj,lv_state_CHECKED);手动将其打开。
Lv_obj_remove_state(obj,lv_state_CHECKED);手动将其关闭。
Lv_switch_set_orientation(widget,orientation);控制开关的方向
Orientation的可能值为：
LV_SWITCH_ORIENTATION_AUTO
LV_SWITCH_ORIENTATION_HORIZONTAL
LV_SWITCH_ORIENTATION_VERTICAL

当开关被点击并且状态发生改变时，会触发 LV_EVENT_VALUE_CHANGED 事件类型。也就是说我们可以在 LV_EVENT_VALUE_CHANGED 事件类型中处理事件。

以下是该事件的触发回调函数：
static void screen_1_sw_1_event_handler (lv_event_t *e)
{
lv_event_code_t code = lv_event_get_code(e);
switch (code) {
case LV_EVENT_VALUE_CHANGED:
{
lv_obj_t * status_obj = lv_event_get_target(e);
int status = lv_obj_has_state(status_obj, LV_STATE_CHECKED) ? 1 : 0;

    break;
}
default:
    break;
}

}

回调函数的声明：
void events_init_screen_1 (lv_ui *ui)
{
lv_obj_add_event_cb(ui->screen_1_sw_1, screen_1_sw_1_event_handler, LV_EVENT_ALL, ui);
}

开关控件的初始化：
//Write codes screen_1_sw_1
//创建开关对象
ui->screen_1_sw_1 = lv_switch_create(ui->screen_1);
//设置尺寸大小以及位置
lv_obj_set_pos(ui->screen_1_sw_1, 192, 211);
lv_obj_set_size(ui->screen_1_sw_1, 76, 22);

//Write style for screen_1_sw_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
//设置开关背景不透明度
lv_obj_set_style_bg_opa(ui->screen_1_sw_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置开关背景颜色为浅灰色
lv_obj_set_style_bg_color(ui->screen_1_sw_1, lv_color_hex(0xe6e2e6), LV_PART_MAIN|LV_STATE_DEFAULT);
//设置开关背景不使用渐变
lv_obj_set_style_bg_grad_dir(ui->screen_1_sw_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置开关边框宽度为0
lv_obj_set_style_border_width(ui->screen_1_sw_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置开关圆角半径为10
lv_obj_set_style_radius(ui->screen_1_sw_1, 10, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置阴影宽度为0
lv_obj_set_style_shadow_width(ui->screen_1_sw_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

//Write style for screen_1_sw_1, Part: LV_PART_MAIN, State: LV_STATE_FOCUSED.

//获得焦点状态
lv_obj_set_style_bg_opa(ui->screen_1_sw_1, 255, LV_PART_MAIN|LV_STATE_FOCUSED);
lv_obj_set_style_bg_color(ui->screen_1_sw_1, lv_color_hex(0xe6e2e6), LV_PART_MAIN|LV_STATE_FOCUSED);
lv_obj_set_style_bg_grad_dir(ui->screen_1_sw_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_FOCUSED);
lv_obj_set_style_border_width(ui->screen_1_sw_1, 0, LV_PART_MAIN|LV_STATE_FOCUSED);
lv_obj_set_style_radius(ui->screen_1_sw_1, 10, LV_PART_MAIN|LV_STATE_FOCUSED);
lv_obj_set_style_shadow_width(ui->screen_1_sw_1, 0, LV_PART_MAIN|LV_STATE_FOCUSED);

//Write style for screen_1_sw_1, Part: LV_PART_MAIN, State: LV_STATE_DISABLED.
//设置开关状态：禁用状态
lv_obj_set_style_bg_opa(ui->screen_1_sw_1, 255, LV_PART_MAIN|LV_STATE_DISABLED);
lv_obj_set_style_bg_color(ui->screen_1_sw_1, lv_color_hex(0xe6e2e6), LV_PART_MAIN|LV_STATE_DISABLED);
lv_obj_set_style_bg_grad_dir(ui->screen_1_sw_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DISABLED);
lv_obj_set_style_border_width(ui->screen_1_sw_1, 0, LV_PART_MAIN|LV_STATE_DISABLED);
lv_obj_set_style_radius(ui->screen_1_sw_1, 10, LV_PART_MAIN|LV_STATE_DISABLED);
lv_obj_set_style_shadow_width(ui->screen_1_sw_1, 0, LV_PART_MAIN|LV_STATE_DISABLED);

//Write style for screen_1_sw_1, Part: LV_PART_INDICATOR, State: LV_STATE_CHECKED.
//设置开关状态：选中状态
lv_obj_set_style_bg_opa(ui->screen_1_sw_1, 255, LV_PART_INDICATOR|LV_STATE_CHECKED);
lv_obj_set_style_bg_color(ui->screen_1_sw_1, lv_color_hex(0x2195f6), LV_PART_INDICATOR|LV_STATE_CHECKED);
lv_obj_set_style_bg_grad_dir(ui->screen_1_sw_1, LV_GRAD_DIR_NONE, LV_PART_INDICATOR|LV_STATE_CHECKED);
lv_obj_set_style_border_width(ui->screen_1_sw_1, 0, LV_PART_INDICATOR|LV_STATE_CHECKED);

//Write style for screen_1_sw_1, Part: LV_PART_KNOB, State: LV_STATE_DEFAULT.
//设置开关样式：旋转部分
lv_obj_set_style_bg_opa(ui->screen_1_sw_1, 255, LV_PART_KNOB|LV_STATE_DEFAULT);
lv_obj_set_style_bg_color(ui->screen_1_sw_1, lv_color_hex(0xffffff), LV_PART_KNOB|LV_STATE_DEFAULT);
lv_obj_set_style_bg_grad_dir(ui->screen_1_sw_1, LV_GRAD_DIR_NONE, LV_PART_KNOB|LV_STATE_DEFAULT);
lv_obj_set_style_border_width(ui->screen_1_sw_1, 0, LV_PART_KNOB|LV_STATE_DEFAULT);
lv_obj_set_style_radius(ui->screen_1_sw_1, 10, LV_PART_KNOB|LV_STATE_DEFAULT);
下一期讲解其他控件的使用。
本文章由威三学社出品
对课程感兴趣可以私信联系