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

One 、btn brief introduction

1.1 summary Overview

   By default , The button is connected with Base Objects of different ：
• Can't roll
• Add to default group
• Its default height and width are LV_SIZE_CONTENT

1.2 Part and style Parts and Styles

  LV_PART_MAIN Button background . It uses typical background style properties .

1.3 Use Usage

   And Base object Compared with no new features

1.4 event Events

  LV_EVENT_VALUE_CHAN . GED When LV_OBJ_FLAG_CHECKABLE When the flag is enabled and the object is clicked （ The switch to / From the selected state ）

1.5 Key Keys

   If LV_OBJ_FLAG_CHECKABLE Enable LV_KEY_RIGHT and LV_KEY_UP Make the object check ,LV_KEY_LEFT and LV_KEY_DOWN Make it select . Please note that , state LV_KEY_ENTER Converted to LV_EVENT_PRESSED/PRESSING/RELEASED etc. .

Two 、Label API

2.1 Btn API

   among btn There are fewer functions , Callback events are used in the example , We analyze the whole process from callback events .

lv_obj_t * lv_btn_create(lv_obj_t * parent);	// Create a key object 

2.2 LVGL Processing of the status flag bit API and Flags

   There are some flags that can be used on objects , To influence their behavior and layout ,Flags The types are as follows

LV_OBJ_FLAG_HIDDEN 			/**< Make objects hidden .( Like it doesn't exist at all )*/
LV_OBJ_FLAG_CLICKABLE 		/**< An input device that makes an object clickable */
LV_OBJ_FLAG_CLICK_FOCUSABLE /**< Click... When adding a focus state to the object */
LV_OBJ_FLAG_CHECKABLE 		/**< Toggles the check state when an object is clicked */
LV_OBJ_FLAG_SCROLLABLE 		/**< Make objects scrollable */
LV_OBJ_FLAG_SCROLL_ELASTIC 	/**< Allow internal scrolling , But slower */
LV_OBJ_FLAG_SCROLL_MOMENTUM /**< Make the object in “ Throw out ” Scroll further when */
LV_OBJ_FLAG_SCROLL_ONE 		/**< Only one scrollable is allowed snap Subelement */
LV_OBJ_FLAG_SCROLL_CHAIN 	/**< Allow propagation to scroll to the parent */
LV_OBJ_FLAG_SCROLL_ON_FOCUS	/**< Automatically scroll objects , Make it visible when focused */
LV_OBJ_FLAG_SNAPPABLE 		/**< If roll snap is enabled on the parent object , It can capture this object */
LV_OBJ_FLAG_PRESS_LOCK 		/**< Keep the object pressed , Even if you slide out of an object */
LV_OBJ_FLAG_EVENT_BUBBLE 	/**< Propagate the event to the parent */
LV_OBJ_FLAG_GESTURE_BUBBLE 	/**< Spread the gesture to the parent */
LV_OBJ_FLAG_ADV_HITTEST 	/**< Allow for more accurate hits ( Click on ) test . for example , Consider rounded corners */
LV_OBJ_FLAG_IGNORE_LAYOUT 	/**< Enables objects to be laid out */
LV_OBJ_FLAG_FLOATING 		/**< When the parent object scrolls and ignores the layout , Don't scroll objects */
LV_OBJ_FLAG_LAYOUT_1 		/**< Custom logo , Free use layout */
LV_OBJ_FLAG_LAYOUT_2 		/**< Custom logo , Free use layout */
LV_OBJ_FLAG_WIDGET_1 		/**< Custom logo , Free use by widgets */
LV_OBJ_FLAG_WIDGET_2 		/**< Custom logo , Free use by widgets */
LV_OBJ_FLAG_USER_1 			/**< Custom logo , It can be used by the user */
LV_OBJ_FLAG_USER_2 			/**< Custom logo , It can be used by the user */
LV_OBJ_FLAG_USER_3 			/**< Custom logo , It can be used by the user */
LV_OBJ_FLAG_USER_4 			/**< Custom logo , It can be used by the user */

   object API as follows

void lv_init(void)															// initialization lvgl
void lv_deinit(void)														// Uninitialize lvgl
bool lv_is_initialized(void)												// return “lv” Whether the library is currently initialized 
lv_obj_t * lv_obj_create(lv_obj_t * parent)									// Create a base object ( A rectangle )· 
void lv_obj_add_flag(lv_obj_t * obj, lv_obj_flag_t f)						// Set one or more flags 
void lv_obj_clear_flag(lv_obj_t * obj, lv_obj_flag_t f)						// Clear one or more flag bits 
void lv_obj_add_state(lv_obj_t * obj, lv_state_t state)						// Add one or more states to the object . Other status bits remain unchanged if specified in the style , The transition animation will start from the previous state to the current state .
void lv_obj_clear_state(lv_obj_t * obj, lv_state_t state)					// Remove one or more states of an object . Other status bits remain unchanged . If... Is specified in the style , The transition animation will start from the previous state to the current state .
static inline void lv_obj_set_user_data(lv_obj_t * obj, void * user_data)	// Set the user_data Field 
bool lv_obj_has_flag(const lv_obj_t * obj, lv_obj_flag_t f)					// Check whether one or all of the given flags are set on an object .
bool lv_obj_has_flag_any(const lv_obj_t * obj, lv_obj_flag_t f)				// Check whether a given flag or any flag is set on an object .
lv_state_t lv_obj_get_state(const lv_obj_t * obj)							// Get the state of an object 
bool lv_obj_has_state(const lv_obj_t * obj, lv_state_t state)				// Check whether the object is in the given state .
void * lv_obj_get_group(const lv_obj_t * obj);								// Get the group of the object 
static inline void * lv_obj_get_user_data(lv_obj_t * obj)					// Get the object's user_data Field 
void lv_obj_allocate_spec_attr(lv_obj_t * obj)								// Get the object's user_data Field 
bool lv_obj_check_type(const lv_obj_t * obj, const lv_obj_class_t * class_p)// Check the type of object .
bool lv_obj_has_class(const lv_obj_t * obj, const lv_obj_class_t * class_p)	// Check whether any object has a given class ( type ).
const lv_obj_class_t * lv_obj_get_class(const lv_obj_t * obj)				// Get the class of the object ( type )
bool lv_obj_is_valid(const lv_obj_t * obj)									// Check if there are any objects “ Alive ”.
static inline lv_coord_t lv_obj_dpx(const lv_obj_t * obj, lv_coord_t n)		// Scale a given number of pixels ( Distance or size ) be relative to 160 DPI Displays the of the object under consideration DPI.

2.3 LVGL Event callback function for

／**
* Add an event handler to the object .
* Used by the user to respond to events that occur with the object .
* An object can have multiple event handlers . They are called in the same order as they are added .
* @param obj Object pointer 
* @param Filters and event codes ( for example .' LV_EVENT_CLICKED '), This event should be called .' LV_EVENT_ALL ' Can be sued to receive all events .
* @param event_cb New event function 
* @param user_data Custom data will be in ' event_cb ' Available in the 
* @ Returns a pointer to the event descriptor . Can be in ::lv_obj_remove_event_dsc
*／
Struct _lv_event_dsc_t * lv_obj_add_event_cb(Struct _lv_obj_t * obj, lv_event_cb_t event_cb, lv_event_code_t filter,void * user_data);

   The above is for LVGL Introduction to the parameters of the event callback function , among event_cb As an event callback , You can customize its functions , Next, a description of this callback function ,static void event_btn_handler(lv_event_t *e) As a custom callback function, the parameters of the callback function are lv_event_t Type of structure , This structure contains several member variables .

typedef struct _lv_event_t {
    
    struct _lv_obj_t * target;			// Gets the object that the event was originally aimed at . Even if the event is bubbling , It's the same .
    struct _lv_obj_t * current_target;	// Get the current target of the event . It is the object to which the event handler is called .
    lv_event_code_t code;				// Get the event code of the event 
    void * user_data;					// Gets the value passed when registering an event on an object user_data
    void * param;						// When an event is sent , Get parameter passing 
    struct _lv_event_t * prev;			
    uint8_t deleted : 1;				
} lv_event_t;

  Lv_event_t Is the only parameter passed to the event callback , It contains all the data about the event . The following values can be obtained from it :

lv_event_get_code(e) 			// Get event code 
lv_event_get_target(e) 			// Gets the object that the event was originally aimed at . Even if the event is bubbling , It's the same .
lv_event_get_current_target(e) 	// Get the current target of the event . It is the object to which the event handler is called . If the event is not bubbling , It's the same “ normal ” The goal is .
lv_event_get_user_data(e)		// Get as lv_obj_add_event_cb The pointer passed by the last parameter of 
lv_event_get_param(e) 			// Get as lv_event_send The last parameter of the passed parameter 

2.4 LVGL event API And event classification

   Classification of events

 Event codes can be divided into the following categories :
•  Enter the event of the device 
•  Painting Events 
•  Other events 
•  Special events 
•  Custom events 

LV_EVENT_ALL = 0,				/**< Object all events */

/** Enter the device event */
LV_EVENT_PRESSED, 				/**< Object has been pressed */
LV_EVENT_PRESSING, 			/**< Object is being pressed ( Continuously call... When pressed )*/
LV_EVENT_PRESS_LOST, 			/**< The object is still being pressed , But the cursor / Slide your fingers away from the object */
LV_EVENT_SHORT_CLICKED, 		/**< The object is pressed for a short time , Then release . Do not call , If you scroll */
LV_EVENT_LONG_PRESSED, 		/**< The object is at least pressed ' long_press_time '. Do not call , If you scroll */
LV_EVENT_LONG_PRESSED_REPEAT, 	/**< At every `long_press_repeat_time` in `long_press_time` Then call ms. If you scroll, do not call .*/
LV_EVENT_CLICKED, 				/**< Called on release if there is no scrolling ( No matter long press )*/
LV_EVENT_RELEASED, 			/**< Called every time an object is released */
LV_EVENT_SCROLL_BEGIN, 		/**< Scroll start */
LV_EVENT_SCROLL_END, 			/**< Roll over */
LV_EVENT_SCROLL , 				/**<  rolling */
LV_EVENT_GESTURE, 				/**< Gesture detected . Use “lv_indev_get_gesture_dir(lv_indev_get_act())” Get gestures */
LV_EVENT_KEY, 					/**< One key Sent to object . use ' lv_indev_get_key(lv_indev_get_act())); ' Get key */
LV_EVENT_FOCUSED, 				/**< The object is focused */
lv_event_DEFOCUSED,			/**< Object defocus */
LV_EVENT_LEAVE, 				/**< The object is defocused but still selected */
LV_EVENT_HIT_TEST, 			/**< Perform advanced hit test */

* / / * * Draw the event */
LV_EVENT_COVER_CHECK, 			/**< Check whether the object completely covers an area . The event parameter is ' lv_cover_check_info_t '*/
lv_event_REFR_ext_draw_size, 	/**< Get the extra drawing area needed around the object ( For example, shadow ).event Parameter is ' lv_coord_t * ' To store size */
LV_EVENT_DRAW_MAIN_BEGIN, 		/**< Start the main drawing phase */
LV_EVENT_DRAW_MAIN, 			/**< Execute the main drawing */
LV_EVENT_DRAW_MAIN_END, 		/**< Complete the main drawing phase */
LV_EVENT_DRAW_POST_BEGIN, 		/**< Start post Drawing phase ( When all child elements are drawn )*/
LV_EVENT_DRAW_POST, 			/**< perform post Drawing phase ( When all child elements are drawn )*/
LV_EVENT_DRAW_POST_END, 		/**< complete post Drawing phase ( When all child elements are drawn )*/
LV_EVENT_DRAW_PART_BEGIN, 		/**< Start drawing parts . The event parameter is ' lv_obj_draw_dsc_t * '.*/
LV_EVENT_DRAW_PART_END, 		/**< Draw part end . The event parameter is ' lv_obj_draw_dsc_t * '.*/

* / / * * Special events */
LV_EVENT_VALUE_CHANGED, 		/**< The value of the object has changed ( That is, the slider moves )*/
LV_EVENT_INSERT, 				/**< Insert text into the object . The event data is ' char * ' Inserting */
LV_EVENT_REFRESH, 				/**< Notify the object to refresh something on it ( For the user )*/
LV_EVENT_READY, 				/**< The process is complete */
LV_EVENT_CANCEL, 				/**< The process has been canceled */

* / / * * Other events */
LV_EVENT_DELETE, 				/**< Object is being deleted */
LV_EVENT_CHILD_CHANGED, 		/**< Child was removed/added*/
LV_EVENT_SIZE_CHANGED, 		/**< Object coordinates / Size changed */
LV_EVENT_STYLE_CHANGED, 		/**< The style of the object has changed */
LV_EVENT_LAYOUT_CHANGED, 		/**< The position of child nodes changes due to layout recalculation */
LV_EVENT_GET_SELF_SIZE, 		/**< Get the internal size of the widget */
_LV_EVENT_LAST 					/** Default number of events */

   The event API

lv_res_t lv_event_send(lv_obj_t * obj, lv_event_code_t event_code, void * param)	// Send an event to the object 
lv_res_t lv_obj_event_base(const lv_obj_class_t * class_p, lv_event_t * e)			// Used internally by widgets , Call the event handler of the ancestor widget type 
lv_obj_t * lv_event_get_target(lv_event_t * e)										// Gets the object that the event was originally aimed at . Even if the event is bubbling , It's the same .
lv_obj_t * lv_event_get_current_target(lv_event_t * e)								// Get the current target of the event . It is the object to which the event handler is called .
lv_event_code_t lv_event_get_code(lv_event_t * e)									// Get the event code of the event 
void * lv_event_get_param(lv_event_t * e)											// When an event is sent , Get parameter passing 
void * lv_event_get_user_data(lv_event_t * e)										// Gets the value passed when registering an event on an object user_data
uint32_t lv_event_register_id(void)													// Register a new custom event ID.
void _lv_event_mark_deleted(lv_obj_t * obj)											// Nested events can be called , One of them may belong to the object being deleted .
struct _lv_event_dsc_t * lv_obj_add_event_cb(lv_obj_t * obj, lv_event_cb_t event_cb, lv_event_code_t filter, void * user_data)	// Add an event handler to the object .
bool lv_obj_remove_event_dsc(lv_obj_t * obj, struct _lv_event_dsc_t * event_dsc)	// Remove an object's event handler .
lv_indev_t * lv_event_get_indev(lv_event_t * e)										// Get passed as a parameter to indev Input device for related events .
lv_obj_draw_part_dsc_t * lv_event_get_draw_part_dsc(lv_event_t * e)					// Get the part drawing descriptor and pass it to as a parameter ' LV_EVENT_DRAW_PART_BEGIN/END '.
const lv_area_t * lv_event_get_clip_area(lv_event_t * e)							// Get the clip area as a parameter to draw the event .
const lv_area_t * lv_event_get_old_size(lv_event_t * e)								// Get the old area before the object changes size . Can be in ' LV_EVENT_SIZE_CHANGED ' Use in 
uint32_t lv_event_get_key(lv_event_t * e)											// Get the key passed to the event as a parameter . Can be in ' LV_EVENT_KEY ' Use in 
lv_anim_t * lv_event_get_scroll_anim(lv_event_t * e)								// Get the scrolling animation descriptor . Can be in ' LV_EVENT_SCROLL_BEGIN ' Use in 
void lv_event_set_ext_draw_size(lv_event_t * e, lv_coord_t size)					// Set new extra drawing dimensions . Can be in ' lv_event_ref_ext_draw_size ' Use in 
lv_point_t * lv_event_get_self_size_info(lv_event_t * e)							// Get a pointer to ' lv_point_t ' Pointer to variable , Among them, self size should be preserved ( The width is ' point->x ' And height ' point->y ').
lv_hit_test_info_t * lv_event_get_hit_test_info(lv_event_t * e)						// Get a pointer to ' lv_hit_test_info_t ' Pointer to variable , This variable will hold the hit test results . Can be in ' LV_EVENT_HIT_TEST ' Use in 
const lv_area_t * lv_event_get_cover_area(lv_event_t * e)							// Get a pointer to the region , This area should be checked to see if the object completely covers it .
void lv_event_set_cover_res(lv_event_t * e, lv_cover_res_t res)						// Set the result of cover page check . Can be in ' LV_EVENT_COVER_CHECK ' Use in 

3、 ... and 、 Example

3.1 The example realizes the key callback display

/************************************************* *  The name of the function  : event_btn1_handler *  ginseng   Count  ：  Callback Arguments  *  The functionality  ： btn Event callback function  *************************************************/
static void event_btn_handler(lv_event_t* e)
{
    
    lv_event_code_t code = lv_event_get_code(e);    // Get callback event 
    if (code == LV_EVENT_CLICKED) {
                     // Click event 
        printf("Clicked\n\r");
    }
    else if (code == LV_EVENT_VALUE_CHANGED){
     		// The value of the object has changed 
        printf("Toggled");
    }
}
/************************************************* *  The name of the function  : Btn_show_1 *  ginseng   Count  ：  nothing  *  The functionality  ：  Key display  *************************************************/
void Btn_show_1()
{
    
    lv_obj_t* label;                               // establish label
    lv_obj_t* btn1 = lv_btn_create(lv_scr_act());  // establish btn
    lv_obj_add_event_cb(btn1, event_btn_handler, LV_EVENT_ALL, NULL); // Create a key callback function  
    lv_obj_align(btn1, LV_ALIGN_CENTER, 0, -40);   // Center object 

    label = lv_label_create(btn1);                 // establish label
    lv_label_set_text(label, "Button1");           // Set up label Word content 

    lv_obj_t* btn2 = lv_btn_create(lv_scr_act());  // Create keys 
    lv_obj_add_event_cb(btn2, event_btn_handler, LV_EVENT_ALL, NULL); // Create a key callback function  
    lv_obj_align(btn2, LV_ALIGN_CENTER, 0, 40);    // Center object 
    lv_obj_add_flag(btn2, LV_OBJ_FLAG_CHECKABLE);  // Add flag bit  /**< Toggles the check state when an object is clicked */
    lv_obj_set_height(btn2, LV_SIZE_CONTENT);      // Set the height of the object 

    label = lv_label_create(btn2);                 // establish label
    lv_label_set_text(label, "Toggle");            // Set up label The content of the word 
    lv_obj_center(label);                          // Center object 
}

3.2 Example to achieve animation display

/************************************************* *  The name of the function  : Btn_show_2 *  ginseng   Count  ：  nothing  *  The functionality  ：  Key display  *************************************************/
void Btn_show_2()
{
    
   static lv_style_t style;                           // establish 
   lv_style_init(&style);                             // establish label
   lv_style_set_radius(&style,3);                     // Set style fillet 

   lv_style_set_bg_opa(&style,LV_OPA_100);            // Set style transparency 
   lv_style_set_bg_color(&style,lv_palette_main(LV_PALETTE_BLUE));         // Set the background color 
   lv_style_set_bg_grad_color(&style,lv_palette_darken(LV_PALETTE_BLUE,2));// Set the bottom half background color 
   lv_style_set_bg_grad_dir(&style,LV_GRAD_DIR_VER);  // Set the background color direction 

   lv_style_set_border_opa(&style,LV_OPA_40);         // Set border transparency 
   lv_style_set_border_width(&style,2);               // Set border width 
   lv_style_set_border_color(&style,lv_palette_main(LV_PALETTE_GREY));     // Set border color 

   lv_style_set_shadow_width(&style,8);               // Set shadow width 
   lv_style_set_shadow_color(&style,lv_palette_main(LV_PALETTE_GREY));     // Set the shadow color 
   lv_style_set_shadow_ofs_y(&style,8);               // Set the shadow offset 

   lv_style_set_outline_opa(&style,LV_OPA_COVER);     // Sets the transparency of the outer contour 
   lv_style_set_outline_color(&style,lv_palette_main(LV_PALETTE_BLUE));    // Set the width color 

   lv_style_set_text_color(&style, lv_color_white()); // The font color 
   lv_style_set_pad_all(&style,10);                   // Set margins 

   static lv_style_t style_pr;                        // Create a press style 
   lv_style_init(&style_pr);                          // Initialize style 
   lv_style_set_outline_width(&style_pr,30);          // Set the style contour initialization 
   lv_style_set_outline_opa(&style_pr,LV_OPA_TRANSP); // Sets the transparency of the outer contour of the style  

   lv_style_set_translate_y(&style_pr,5);             // Transformation y Axis 
   lv_style_set_shadow_ofs_y(&style_pr,3);            // Transformation x Axis 
   lv_style_set_bg_color(&style_pr,lv_palette_darken(LV_PALETTE_BLUE,4));  // Set the background color 

   static lv_style_transition_dsc_t trans;            // Create transform objects 
   static lv_style_prop_t props[] = {
    LV_STYLE_OUTLINE_WIDTH,LV_STYLE_OUTLINE_OPA,0};   // Change position 
   lv_style_transition_dsc_init(&trans,props,lv_anim_path_linear,300,0,NULL);          // Initialize transformation 

   lv_style_set_transition(&style_pr,&trans);         // Set transform 

   lv_obj_t * btn1 = lv_btn_create(lv_scr_act());     // Create key variables 
   lv_obj_remove_style_all(btn1);                     // Remove all styles 
   lv_obj_add_style(btn1,&style,0);                   // Add the style 
   lv_obj_add_style(btn1,&style_pr,LV_STATE_PRESSED); // Add the style 
   lv_obj_set_size(btn1,LV_SIZE_CONTENT,LV_SIZE_CONTENT);   // Set the size of the object 
   lv_obj_center(btn1);                               // Center object 

   lv_obj_t * label = lv_label_create(btn1);          // establish Label
   lv_label_set_text(label,"Button");                 // Set up Label Content 
   lv_obj_center(label);                              // centered 
}

3.3 The example realizes the key jelly display

/************************************************* *  The name of the function  : Btn_show_3 *  ginseng   Count  ：  nothing  *  The functionality  ：  Jelly case , Key style to achieve jelly like effect  *************************************************/
void Btn_show_3()
{
    
   static lv_style_transition_dsc_t transition_dsc_def;     // Create transform objects 
   // Change position 
   static lv_style_prop_t props[] = {
    LV_STYLE_TRANSFORM_WIDTH,LV_STYLE_TRANSFORM_HEIGHT,LV_STYLE_TEXT_LETTER_SPACE,0};
   // Initialize transformation 
   lv_style_transition_dsc_init(&transition_dsc_def,props,lv_anim_path_overshoot,250,100,NULL);

   static lv_style_transition_dsc_t transition_dsc_pr;      // Create transform objects 
   // Initialize transformation 
   lv_style_transition_dsc_init(&transition_dsc_pr,props,lv_anim_path_ease_in_out,250,0,NULL);

   static lv_style_t style_def;                             // Create styles 
   lv_style_init(&style_def);                               // Initialize style 
   lv_style_set_transition(&style_def,&transition_dsc_def); // Set style conversion 

   static lv_style_t style_pr;                              // Set the style 
   lv_style_init(&style_pr);                                // Initialize style 
   lv_style_set_transform_width(&style_pr,10);              // Style transformation 
   lv_style_set_transform_height(&style_pr,-10);            // Style transformation 
   lv_style_set_transition(&style_pr,&transition_dsc_pr);   // Set style conversion 

   lv_obj_t * btn1 = lv_btn_create(lv_scr_act());           // Create a key object 
   lv_obj_align(btn1,LV_ALIGN_CENTER,0,-80);                // Center the key object 
   lv_obj_add_style(btn1,&style_pr,LV_STATE_PRESSED);       // Add style 
   lv_obj_add_style(btn1,&style_def,0);                     // Add style 

   lv_obj_t * label = lv_label_create(btn1);                // establish Label
   lv_label_set_text(label,"Gum");                          // Set up Label Word content 
}