一、概述
1.1 Checkbox 简介
Checkbox 对象是由一个“勾选框”和一个标签创建的。单击复选框时,复选框将进行切换。
二、 Checkbox 基础知识
2.1 Checkbox 样式
图 1. Checkbox 样式
如上图,Checkbox 样式分为两个部分,LV_CHECKBOX_PART_BG 是一“复选框”和旁边的文本的容器,使用了所有典型的背景样式属性,pad_inner 可以调整复选框和文本之间的间距;LV_CHECKBOX_PART_BULLET 是复选框的部分,它自动继承背景的状态,即背景被按下复选框也会进入按下状态,这部分使用了所有典型的背景样式属性。
2.2 Checkbox 状态
可以使用返回当前状态的 lv_checkbox_get_state() 函数来获取 Checkbox 的当前状态,使用 lv_checkbox_set_state() 设置复选框的当前状态。Checkbox 的状态划分与按键一致,具体如下:
- LV_BTN_STATE_RELEASED
- LV_BTN_STATE_PRESSED
- LV_BTN_STATE_DISABLED
- LV_BTN_STATE_CHECKED_RELEASED
- LV_BTN_STATE_CHECKED_PRESSED
- LV_BTN_STATE_CHECKED_DISABLED
2.3 设置 Checkbox 文本
可以通过 lv_checkbox_set_text(obj, "New text") 函数修改文本,它将动态地分配文本;若要设置静态文本,使用函数 lv_checkbox_set_static_text(cb, txt),这样,只有 txt 的指针将被存储,当复选框存在时,文本不应该被释放。
三、 Checkbox 应用
#define MY_COLOR_SeaGreen LV_COLOR_MAKE(0x4E, 0xEE, 0x94)
static void checkbox1_event_handler(lv_obj_t* obj, lv_event_t event)
{
if (event == LV_EVENT_VALUE_CHANGED)
{
printf("State: %s\n", lv_checkbox_is_checked(obj) ? "Checked" : "Unchecked");
}
}
void checkbox_example(void)
{
lv_obj_t* checkbox1 = lv_checkbox_create(lv_scr_act(), NULL);
lv_checkbox_set_text(checkbox1, "I agree to terms and conditions.");
lv_obj_align(checkbox1, NULL, LV_ALIGN_CENTER, 0, -50);
lv_obj_add_protect(checkbox1, LV_PROTECT_CLICK_FOCUS); //点击时 禁止聚焦
lv_obj_set_event_cb(checkbox1, checkbox1_event_handler);
lv_obj_t* checkbox2 = lv_checkbox_create(lv_scr_act(), NULL);
// - - - - - - - - - - - - - - - checkbox bg_style - - - - - - - - - - - - - - -
lv_obj_set_style_local_border_width(checkbox2, LV_CHECKBOX_PART_BG, LV_STATE_DEFAULT, 1); //边框宽度
lv_obj_set_style_local_border_color(checkbox2, LV_CHECKBOX_PART_BG, LV_STATE_DEFAULT, LV_COLOR_BLACK); //边框颜色
lv_obj_set_style_local_pad_top(checkbox2, LV_CHECKBOX_PART_BG, LV_STATE_DEFAULT, 10);
lv_obj_set_style_local_pad_bottom(checkbox2, LV_CHECKBOX_PART_BG, LV_STATE_DEFAULT, 10);
lv_obj_set_style_local_pad_left(checkbox2, LV_CHECKBOX_PART_BG, LV_STATE_DEFAULT, 10);
lv_obj_set_style_local_pad_right(checkbox2, LV_CHECKBOX_PART_BG, LV_STATE_DEFAULT, 10);
lv_obj_set_style_local_pad_inner(checkbox2, LV_CHECKBOX_PART_BG, LV_STATE_DEFAULT, 20); //复选框和文本的间距
// - - - - - - - - - - - - - - - checkbox bullet_style - - - - - - - - - - - - -
lv_obj_set_style_local_border_width(checkbox2, LV_CHECKBOX_PART_BULLET, LV_STATE_DEFAULT, 0); //项目符号边框宽度
lv_obj_set_style_local_bg_color(checkbox2, LV_CHECKBOX_PART_BULLET, LV_STATE_DEFAULT, LV_COLOR_SILVER); //项目符号背景色
lv_obj_set_style_local_bg_color(checkbox2, LV_CHECKBOX_PART_BULLET, LV_STATE_CHECKED, MY_COLOR_SeaGreen); //项目符号背景色
lv_checkbox_set_text(checkbox2, "set style");
lv_obj_align(checkbox2, checkbox1, LV_ALIGN_OUT_BOTTOM_LEFT, 0, 50);
lv_obj_add_protect(checkbox2, LV_PROTECT_CLICK_FOCUS); //点击时 禁止聚焦
}
Checkbox 的简单应用如上,运行效果如下图所示,也可以去 LVGL 官网看看: https://lvgl.io/
图 2. Checkbox 应用
四、参考资料
(1)LVGL 官方文档 :https://docs.lvgl.io/7.11/overview/object.html