LVGL 之 Checkbox 控件

关键字 :NXPLVGL

一、概述

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

★博文内容均由个人提供,与平台无关,如有违法或侵权,请与网站管理员联系。

★博文作者未开放评论功能