Tips ： This blog serves as a learning note , If there are mistakes, I hope to correct them

One 、checkbox brief introduction

1.1 summary Overview

  Checkbox The object is “ Tick box ” And label creation . When you click the check box , The check box is switched .

1.2 Part and style Parts and Styles

• LV_PART_MAIN yes Checkbox The background of , It uses text and all typical background style attributes .Pad_column Adjust the spacing between the check box and the label
• LV_PART_INDICATOR “ Check the box ” Is a square that uses all the typical background style attributes . Through deafness , Its size is equal to the height of the font in the main part . Fill attributes make the check boxes larger in their respective directions .
  Checkbox Be added to deafult In the group ( If it's set ).

1.3 Use Usage

1.3.1 written words Text

   The text can be through lv_checkbox_set_text(cb, “New text”) Function to modify . It dynamically allocates text .
   To set static text , Please use lv_checkbox_set_static_text(cb, txt). such , only one txt The pointer will be stored , It should not be released , When the check box exists .

1.3.2 Check , Uncheck the , Ban Check, uncheck, disable

   You can use common states to add / The clear function is manually selected 、 Uncheck and disable “ Check box ”:

lv_obj_add_state(cb, LV_STATE_CHECKED); 					// Select the check box 
lv_obj_clear_state(cb, LV_STATE_CHECKED); 					// Select the check box 
lv_obj_add_state(cb, LV_STATE_CHECKED | LV_STATE_DISABLED);	// Select the check box and disable 

1.4 event Events

• LV_EVENT_VALUE_CHANGED Send when the check box is switched .
• LV_EVENT_DRAW_PART_BEGIN and LV_EVENT_DRAW_PART_END Send main and indicating components , To allow hooking drawings . More details about the main part , see also Base Object's document . The indicator uses the following fields :clip_area,draw_area, rect_dsc,. part.

1.5 Key Keys

   The following keys are by ’Buttons’ Handle :
• LV_KEY_RIGHT/UP If toggle is enabled , Please go to the switching state
• LV_KEY_LEFT/DOWN If toggle is enabled , Please go to the non switching state
• LV_KEY_ENTER Click the check box and toggle it
   Please note that , Usually ,LV_KEY_ENTER The state of is converted to LV_EVENT_PRESSED/ pressed /RELEASED etc. .

Two 、checkbox API

lv_obj_t * lv_checkbox_create(lv_obj_t * parent);					// Create a check box object 
void lv_checkbox_set_text(lv_obj_t * obj, const char * txt);		// Set the text of the check box .' txt ' Will be copied and may be released 
void lv_checkbox_set_text_static(lv_obj_t * obj, const char * txt);	// Set the text of the check box .' txt ' Cannot be released in the life cycle 
const char * lv_checkbox_get_text(const lv_obj_t * obj);			// Get the text of a check box 

3、 ... and 、 Example

3.1 Example implementation checkbox Selective disability and its callback

/************************************************* *  The name of the function  : checkbox_event_hander *  ginseng   Count  ：  nothing  *  The functionality  ：  The check box callback displays  *************************************************/
static void checkbox_event_hander(lv_event_t * e)
{
    
   lv_event_code_t code = lv_event_get_code(e);
   lv_obj_t * obj = lv_event_get_target(e);
   if(code == LV_EVENT_VALUE_CHANGED){
    
      const char * txt = lv_checkbox_get_text(obj);
      const char * state = lv_obj_get_state(obj) & LV_STATE_CHECKED ? "Ckecked" : "Unckeck";
      LV_LOG_USER("%s: %s",txt,state);
   }
}
/************************************************* *  The name of the function  : checkbox_show_1 *  ginseng   Count  ：  nothing  *  The functionality  ：  The check box shows  *************************************************/
void checkbox_show_1()
{
    
   lv_obj_set_flex_flow(lv_scr_act(),LV_FLEX_FLOW_COLUMN);     // Put subclasses in a row without wrapping 
   lv_obj_set_flex_align(lv_scr_act(),LV_FLEX_ALIGN_CENTER,LV_FLEX_ALIGN_START,LV_FLEX_ALIGN_CENTER);
   lv_obj_t * cb;                                              // Create objects 
   cb = lv_checkbox_create(lv_scr_act());                      // Initialize object 
   lv_checkbox_set_text(cb,"Apple");                           // Set up checkbox  Font content 
   lv_obj_add_event_cb(cb,checkbox_event_hander,LV_EVENT_ALL,NULL);  // Display callback settings 

   cb = lv_checkbox_create(lv_scr_act());                      // Initialize object 
   lv_checkbox_set_text(cb,"Banana");                          // Set up checkbox  Font content 
   lv_obj_add_state(cb,LV_STATE_CHECKED);                      // Add object state 
   lv_obj_add_event_cb(cb,checkbox_event_hander,LV_EVENT_ALL,NULL);  // Display callback settings 

   cb = lv_checkbox_create(lv_scr_act());                      // Initialize object 
   lv_checkbox_set_text(cb,"Lemon");                           // Set up checkbox  Font content 
   lv_obj_add_state(cb,LV_STATE_DISABLED);                     // Add object state 
   lv_obj_add_event_cb(cb,checkbox_event_hander,LV_EVENT_ALL,NULL);  // Display callback settings 

   cb = lv_checkbox_create(lv_scr_act());                      // Initialize object 
   lv_checkbox_set_text(cb,"Melon\nand a new line");           // Set up checkbox  Font content 
   lv_obj_add_state(cb,LV_STATE_CHECKED | LV_STATE_DISABLED);  // Add object state 
   lv_obj_add_event_cb(cb,checkbox_event_hander,LV_EVENT_ALL,NULL);  // Display callback settings 

   lv_obj_update_layout(cb);                                   // Update layout 
}

3.2 Use checkbox Realization radiobutton Display effect of

   It is worth noting that I transplanted esp32 lvgl The version is 8.0 The process here uses 8.1 Some of API8.0 Not here lv_obj_get_index(act_cb); I base 8.1 The direct copy of is in the function header file .

uint32_t lv_obj_get_index(const lv_obj_t * obj)
{
    
    LV_ASSERT_OBJ(obj, MY_CLASS);
    lv_obj_t * parent = lv_obj_get_parent(obj);
    if(parent == NULL) return 0;
    uint32_t i = 0;
    for(i = 0; i < lv_obj_get_child_cnt(parent); i++) {
    
        if(lv_obj_get_child(parent, i) == obj) return i;
    }
    return 0xFFFFFFFF; /*Shouldn't happen*/
}

   course Code

static lv_style_t style_radio;
static lv_style_t style_radio_chk;
static uint32_t active_index_1 = 0;
static uint32_t active_index_2 = 0;

static void radio_event_handler(lv_event_t * e)
{
    
   uint32_t * active_id = lv_event_get_user_data(e);  // get data 
   lv_obj_t * cont = lv_event_get_current_target(e);  // Get current event 
   lv_obj_t * act_cb = lv_event_get_target(e);        // Get the current object 
   lv_obj_t * old_cb = lv_obj_get_child(cont, * active_id); // Get sub objects 

   if(act_cb == cont) return;                         // Click the object to return to 
   lv_obj_clear_state(old_cb,LV_STATE_CHECKED);       // Clear the old state 
   lv_obj_add_state(act_cb,LV_STATE_CHECKED);         // Add new status 
   * active_id = lv_obj_get_index(act_cb);            // Gets the name of the child object id
   LV_LOG_USER("Selected radio buttons: %d, %d",(int)active_index_1,(int)active_index_2);
}
static void radiobutton_create(lv_obj_t * parent,const char * txt)
{
    
   lv_obj_t * obj = lv_checkbox_create(parent);       // Create objects 
   lv_checkbox_set_text(obj,txt);                     // Set text 
   lv_obj_add_flag(obj,LV_OBJ_FLAG_EVENT_BUBBLE);     // Add flag bit 
   lv_obj_add_style(obj,&style_radio,LV_PART_INDICATOR); // Add the style 
   lv_obj_add_style(obj,&style_radio_chk,LV_PART_INDICATOR | LV_STATE_CHECKED);  // Add the style 
}
/************************************************* *  The name of the function  : checkbox_show_2 *  ginseng   Count  ：  nothing  *  The functionality  ：  The check box shows  *************************************************/
void checkbox_show_2()
{
    
   lv_style_init(&style_radio);                       // Initialize style 
   lv_style_set_radius(&style_radio,LV_RADIUS_CIRCLE);// Set style fillet 

   lv_style_init(&style_radio_chk);                   // Initialize style 
   lv_style_set_bg_img_src(&style_radio_chk,NULL);    // Set the background color 

   uint32_t i;                                        // Set a variable 
   char buf[32];                                      // Set a variable 

   lv_obj_t * cont1 = lv_obj_create(lv_scr_act());    // Create objects 
   lv_obj_set_flex_flow(cont1,LV_FLEX_FLOW_COLUMN);   // Setting up layout 
   lv_obj_set_size(cont1,lv_pct(40),lv_pct(80));      // Set dimensions 
   lv_obj_add_event_cb(cont1,radio_event_handler,LV_EVENT_CLICKED,&active_index_1);// Set the callback function 

   for(i = 0; i < 5;i++){
                                 // establish radiobutton
      lv_snprintf(buf,sizeof(buf),"A %d",(int) i + 1);
      radiobutton_create(cont1,buf);
   }
   lv_obj_add_state(lv_obj_get_child(cont1,0),LV_STATE_CHECKED);  // Add state 

   lv_obj_t * cont2 = lv_obj_create(lv_scr_act());    // Create objects 
   lv_obj_set_flex_flow(cont2,LV_FLEX_FLOW_COLUMN);   // Setting up layout 
   lv_obj_set_size(cont2,lv_pct(40),lv_pct(80));      // Set dimensions  lv_pct  Percentage of objects 
   lv_obj_set_x(cont2,lv_pct(50));                    // Set dimensions 
   lv_obj_add_event_cb(cont2,radio_event_handler,LV_EVENT_CLICKED,&active_index_2); // Set callback 
   for(i = 0; i< 3;i ++){
    
      lv_snprintf(buf,sizeof(buf),"B %d",(int)i + 1); // Print data 
      radiobutton_create(cont2,buf);                  // Create objects 
   }
   lv_obj_add_state(lv_obj_get_child(cont2,0),LV_STATE_CHECKED);  // Add state 
}