• 【LVGL事件(Events)】事件在不同组件上的应用（一）

    点击、滑动、输入、数字改变等等都可触发事件。事件就是针对不同的操作做出相对应的反应。

    最近看到组态屏，这玩意开发起来好像挺简单的！！哈哈哈！！研究完LVGL的事件就看看这个。

    【LVGL事件(Events)】事件代码_喜暖知寒的博客-CSDN博客LVGL的事件代码介绍https://blog.csdn.net/qq_41650023/article/details/125991887

    本篇文章，主要是想了解滑块、下拉列表、键盘等这些部件的事件。

    本篇文章主要是依托于官网给出的例子，分析其应用的 API 。

    如果有些介绍补全，后续会继续更新添加的！目前只是能用就可。

    例子

    看一个官网提供的例子：

    1. static void event_cb(lv_event_t * e)
    2. {
    3.     lv_event_code_t code = lv_event_get_code(e);    // 获取当前部件(对象)触发的事件代码
    4.     lv_obj_t * label = lv_event_get_user_data(e);    // 读取到标签对象
    5.  
    6.     switch(code) {
    7.     case LV_EVENT_PRESSED:    // 按下
    8.         lv_label_set_text(label, "The last button event:\nLV_EVENT_PRESSED");
    9.         break;
    10.     case LV_EVENT_CLICKED:    // 按下且松开
    11.         lv_label_set_text(label, "The last button event:\nLV_EVENT_CLICKED");
    12.         break;
    13.     case LV_EVENT_LONG_PRESSED:    // 按下指定多少时间
    14.         lv_label_set_text(label, "The last button event:\nLV_EVENT_LONG_PRESSED");
    15.         break;
    16.     case LV_EVENT_LONG_PRESSED_REPEAT:    // 类似上面但又不同
    17.         lv_label_set_text(label, "The last button event:\nLV_EVENT_LONG_PRESSED_REPEAT");
    18.         break;
    19.     default:
    20.         break;
    21.     }
    22. }
    23.  
    24.  
    25. void lv_example_event_2(void)
    26. {
    27.     lv_obj_t * btn = lv_btn_create(lv_scr_act());    // 创建按钮对象
    28.     lv_obj_set_size(btn, 100, 50);
    29.     lv_obj_center(btn);
    30.  
    31.     lv_obj_t * btn_label = lv_label_create(btn);     // 创建标签
    32.     lv_label_set_text(btn_label, "Click me!");
    33.     lv_obj_center(btn_label);
    34.  
    35.     lv_obj_t * info_label = lv_label_create(lv_scr_act());    //创建标签
    36.     lv_label_set_text(info_label, "The last button event:\nNone");
    37.  
    38.     lv_obj_add_event_cb(btn, event_cb, LV_EVENT_ALL, info_label);    // btn的事件，并传入标签对象
    39. }

    不同的显示状况：

    圆弧

    这个百分值问题，就用上了 事件

    1. static void value_changed_event_cb(lv_event_t * e);
    2.  
    3. void lv_example_arc_1(void)
    4. {
    5.     lv_obj_t * label = lv_label_create(lv_scr_act());
    6.  
    7.     /*Create an Arc*/
    8.     lv_obj_t * arc = lv_arc_create(lv_scr_act());
    9.     lv_obj_set_size(arc, 150, 150);
    10.     lv_arc_set_rotation(arc, 135);
    11.     lv_arc_set_bg_angles(arc, 0, 270);
    12.     lv_arc_set_value(arc, 10);
    13.     lv_obj_center(arc);
    14.     
    15.     /* 创建事件，值被更改时触发事件 */
    16.     lv_obj_add_event_cb(arc, value_changed_event_cb, LV_EVENT_VALUE_CHANGED, label);
    17.  
    18.     /*Manually update the label for the first time*/
    19.     lv_event_send(arc, LV_EVENT_VALUE_CHANGED, NULL);
    20. }
    21.  
    22. static void value_changed_event_cb(lv_event_t * e)
    23. {
    24.     lv_obj_t * arc = lv_event_get_target(e);    // 获取触发事件的部件(对象)
    25.     lv_obj_t * label = lv_event_get_user_data(e);    // 得到label标签对象
    26.  
    27.     lv_label_set_text_fmt(label, "%d%%", lv_arc_get_value(arc));    // 设置label的值
    28.  
    29.     /*Rotate the label to the current position of the arc*/
    30.     /* 将对象label固定在圆弧当前位置上 */
    31.     lv_arc_rotate_obj_to_angle(arc, label, 25);
    32. }

    这里的事件函数中用到了一个函数：通过此函数可设置音量、亮度等等值！！

    直接用个全局变量就能改其他的东西了！！！

    1. /* 获取圆弧的值
    2.  * @ obj:指向弧对象的指针
    3.  * return:圆弧的值
    4.  */
    5. int16_t lv_arc_get_value ( const lv_obj_t * obj )

    滑块 

     看一个两端都能控制的滑块，这样就单个划的话也能够学会！

    1. static void slider_event_cb(lv_event_t * e);
    2.  
    3. void lv_example_slider_3(void)
    4. {
    5.     /*Create a slider in the center of the display*/
    6.     lv_obj_t * slider;
    7.     slider = lv_slider_create(lv_scr_act());
    8.     lv_obj_center(slider);
    9.  
    10.     lv_slider_set_mode(slider, LV_SLIDER_MODE_RANGE);    // 模式设置
    11.     lv_slider_set_value(slider, 70, LV_ANIM_OFF);    // 右边界
    12.     lv_slider_set_left_value(slider, 20, LV_ANIM_OFF);    // 左边界
    13.  
    14.     /* 创建事件，任何动作可触发 */
    15.     lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_ALL, NULL);    
    16.     lv_obj_refresh_ext_draw_size(slider);    // 刷新绘图大小
    17. }
    18.  
    19. static void slider_event_cb(lv_event_t * e)
    20. {
    21.     lv_event_code_t code = lv_event_get_code(e);    // 获取当前部件(对象)触发的事件代码
    22.     lv_obj_t * obj = lv_event_get_target(e);    // 获取触发事件的部件(对象)
    23.  
    24.     /*Provide some extra space for the value*/
    25.     if(code == LV_EVENT_REFR_EXT_DRAW_SIZE) {    // 获取对象周围所需的额外绘制区域
    26.         lv_event_set_ext_draw_size(e, 50);
    27.     }
    28.     else if(code == LV_EVENT_DRAW_PART_END) {    // 完成绘制部分
    29.         lv_obj_draw_part_dsc_t * dsc = lv_event_get_draw_part_dsc(e);
    30.         if(dsc->part == LV_PART_INDICATOR) {    // 指标
    31.             char buf[16];
    32.             lv_snprintf(buf, sizeof(buf), "%d - %d", (int)lv_slider_get_left_value(obj), (int)lv_slider_get_value(obj));
    33.  
    34.             lv_point_t label_size;    // 尺寸结构体
    35.             lv_txt_get_size(&label_size, buf, LV_FONT_DEFAULT, 0, 0, LV_COORD_MAX, 0);
    36.             lv_area_t label_area;    // 位置结构体
    37.             label_area.x1 = dsc->draw_area->x1 + lv_area_get_width(dsc->draw_area) / 2 - label_size.x / 2;
    38.             label_area.x2 = label_area.x1 + label_size.x;
    39.             label_area.y2 = dsc->draw_area->y1 - 10;
    40.             label_area.y1 = label_area.y2 - label_size.y;
    41.  
    42.             lv_draw_label_dsc_t label_draw_dsc;
    43.             lv_draw_label_dsc_init(&label_draw_dsc);
    44.             label_draw_dsc.color = lv_color_hex3(0x888);
    45.             lv_draw_label(dsc->draw_ctx, &label_draw_dsc, &label_area, buf, NULL);
    46.         }
    47.     }
    48. }

    和圆弧类似的API

    1. /* 获取主旋钮的值
    2.  * @ obj:指向滑块的指针
    3.  * return:滑块主旋钮的值
    4.  */
    5. static inline int32_t lv_slider_get_value(const lv_obj_t *obj)

    复选框

    1.  
    2. static void event_handler(lv_event_t * e)
    3. {
    4.     lv_event_code_t code = lv_event_get_code(e);
    5.     lv_obj_t * obj = lv_event_get_target(e);
    6.     if(code == LV_EVENT_VALUE_CHANGED) {    // 当复选框备切换时
    7.         const char * txt = lv_checkbox_get_text(obj);    // 获取复选框的文本
    8.         const char * state = lv_obj_get_state(obj) & LV_STATE_CHECKED ? "Checked" : "Unchecked";
    9.         LV_LOG_USER("%s: %s", txt, state);
    10.     }
    11. }
    12.  
    13. void lv_example_checkbox_1(void)
    14. {
    15.     lv_obj_set_flex_flow(lv_scr_act(), LV_FLEX_FLOW_COLUMN);
    16.     lv_obj_set_flex_align(lv_scr_act(), LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER);
    17.  
    18.     lv_obj_t * cb;
    19.     cb = lv_checkbox_create(lv_scr_act());
    20.     lv_checkbox_set_text(cb, "Apple");
    21.     lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);
    22.  
    23.     cb = lv_checkbox_create(lv_scr_act());
    24.     lv_checkbox_set_text(cb, "Banana");
    25.     lv_obj_add_state(cb, LV_STATE_CHECKED);
    26.     lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);
    27.  
    28.     cb = lv_checkbox_create(lv_scr_act());
    29.     lv_checkbox_set_text(cb, "Lemon");
    30.     lv_obj_add_state(cb, LV_STATE_DISABLED);
    31.     lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);
    32.  
    33.     cb = lv_checkbox_create(lv_scr_act());
    34.     lv_obj_add_state(cb, LV_STATE_CHECKED | LV_STATE_DISABLED);
    35.     lv_checkbox_set_text(cb, "Melon\nand a new line");
    36.     lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);
    37.  
    38.     lv_obj_update_layout(cb);
    39. }

    用到的API

    1. /* 获取复选框的文本
    2.  * @ obj:指向复选框对象的指针
    3.  * return:指向复选框文本的指针
    4.  */
    5. const char * lv_checkbox_get_text ( const lv_obj_t * obj ) 
    6. /* 获取对象的状态
    7.  * @ obj:指向对象的指针
    8.  * return:状态(lv_state_t)
    9.  */
    10. lv_state_t lv_obj_get_state ( const lv_obj_t * obj )

    下拉列表

    1. static void event_handler(lv_event_t * e)
    2. {
    3.     lv_event_code_t code = lv_event_get_code(e);
    4.     lv_obj_t * obj = lv_event_get_target(e);
    5.     if(code == LV_EVENT_VALUE_CHANGED) {    // 对象的值被更改
    6.         char buf[32];
    7.         lv_dropdown_get_selected_str(obj, buf, sizeof(buf));
    8.         LV_LOG_USER("Option: %s", buf);
    9.     }
    10. }
    11.  
    12. void lv_example_dropdown_1(void)
    13. {
    14.  
    15.     /*Create a normal drop down list*/
    16.     lv_obj_t * dd = lv_dropdown_create(lv_scr_act());
    17.     lv_dropdown_set_options(dd, "Apple\n"
    18.                             "Banana\n"
    19.                             "Orange\n"
    20.                             "Cherry\n"
    21.                             "Grape\n"
    22.                             "Raspberry\n"
    23.                             "Melon\n"
    24.                             "Orange\n"
    25.                             "Lemon\n"
    26.                             "Nuts");
    27.  
    28.     lv_obj_align(dd, LV_ALIGN_TOP_MID, 0, 20);    // 对齐
    29.     lv_obj_add_event_cb(dd, event_handler, LV_EVENT_ALL, NULL);    // 事件
    30. }

    用到的 API

    1. /* 以字符串形式获取当前选定的选项
    2.  * @ obj:指向下拉对象的指针
    3.  * @ buf:指向存储字符串的数组的指针
    4.  * @ buf_size:buf大小以字节为单位
    5.  */
    6. void lv_dropdown_get_selected_str ( const lv_obj_t * obj , char * buf , uint32_t buf_size )

  • 相关阅读:
    Elasticsearch：Lucene 中引入标量量化
    计算机组成原理考试复习
    AWS SAP-C02考试题库
    智能车联网安全发展形势、挑战
    day03 Docker基本使用
    wsl2 ubuntu22.04安装docker
    限制容器中的进程
    mysql 5.7版本的 安装流程 和 官方文档说明
    Flink总结
    大数据Doris（十）：添加BE步骤
  • 原文地址：https://blog.csdn.net/qq_41650023/article/details/125981209