在实际的LVGL项目工程中按钮部件的使用频率是非常高的它常用于控制设备的启停。在LVGL中当按钮部件被创建出来之后其默认是一个圆角矩形较为遗憾的是按钮部件并不能直接设置文本。本章节将分为以下几个小节12.1按钮部件的组成12.2按钮部件的相关知识12.3按钮部件的API函数12.4按钮部件的实验12.1按钮部件的组成按钮部件(lv_btn)仅有一个组成部分主体背景示意图如下12.2按钮部件的相关知识按钮部件和基础对象非常类似它们的绝大部分知识都是通用的这里我们只介绍它们之间的区别① 默认情况下按钮部件不可滚动。② 默认情况下按钮部件已经添加到默认组中。③ 按钮部件的默认宽高为LV_SIZE_CONTENT自适应。12.3按钮部件的API函数lv_btn_create函数创建按钮对象其函数原型如下所示lv_obj_t*lv_btn_create(lv_obj_t*parent);parent 部件的父类返回值返回对象控制块。设置按钮大小我们可以通过屏幕的大小来进行按钮大小的设计获取当前屏幕大小/* 获取当前活动屏幕的宽高 */#define scr_act_width() lv_obj_get_width(lv_scr_act())#define scr_act_height() lv_obj_get_height(lv_scr_act())创建一个按钮btn_next lv_btn_create(lv_scr_act()); /* 创建加速按钮 */lv_obj_set_size(btn_next, scr_act_width() / 4, scr_act_height() / 6); /* 设置按钮大小 */lv_obj_align(btn_next, LV_ALIGN_CENTER, -scr_act_width() / 3, 0); /* 设置按钮位置 */lv_obj_add_event_cb(btn_next, btn_event_cb, LV_EVENT_CLICKED, NULL); /* 设置按钮事件 */设置按钮背景颜色/* 设置按钮背景颜色默认 */lv_obj_set_style_bg_color(btn_stop_run, lv_color_hex(0xef5f60),LV_STATE_DEFAULT);/* 设置按钮背景颜色按下 */lv_obj_set_style_bg_color(btn_stop_run, lv_color_hex(0xff0000),LV_STATE_PRESSED);设置按钮事件lv_obj_add_event_cb(btn_stop_run,btn_event_cb, LV_EVENT_CLICKED, NULL);设置按钮标签设置标签需要开启LVGL字库并且进行设置具体实现看总代码。lv_obj_t* label lv_label_create(btn_stop_run); /* 创建急停按钮标签 */lv_obj_set_style_text_font(label, font, LV_PART_MAIN); /* 设置字体 */lv_label_set_text(label, Stop); /* 设置标签文本 */lv_obj_set_align(label,LV_ALIGN_CENTER); /* 设置标签位置 */总代码/** * brief LVGL 演示 * param 无 * return 无 */ void lv_mainstart(void) { lv_example_label(); /* 速度提示标签 */ lv_example_btn_up(); /* 加速按钮 */ lv_example_btn_down(); /* 减速按钮 */ lv_example_btn_stop(); /* 急停按钮 */ } /**************************** 第一部分 结束 ****************************/ /**************************** 第二部分 开始 ****************************/ /** * brief 速度值提示标签 * param 无 * return 无 */ static void lv_example_label(void) { /* 根据活动屏幕宽度选择字体 */ if (scr_act_width() 320) { font lv_font_montserrat_10; } else if (scr_act_width() 480) { font lv_font_montserrat_14; } else { font lv_font_montserrat_20; } label_speed lv_label_create(lv_scr_act()); /* 创建速度显示标签 */ lv_obj_set_style_text_font(label_speed, font, LV_PART_MAIN); /* 设置字体 */ lv_label_set_text(label_speed, Speed : 0 RPM); /* 设置文本 */ /* 设置标签位置 */ lv_obj_align(label_speed, LV_ALIGN_CENTER, 0, -scr_act_height() / 3); } /**************************** 第二部分 结束 ****************************/ /**************************** 第三部分 开始 ****************************/ /** * brief 按钮回调 * param *e 事件相关参数的集合它包含了该事件的所有数据 * return 无 */ static void btn_event_cb(lv_event_t * e) { lv_obj_t *target lv_event_get_target(e); /* 获取触发源 */ if(target btn_speed_up) /* 加速按钮 */ { speed_val 30; } else if(target btn_speed_down) /* 减速按钮 */ { speed_val - 30; } else if(target btn_stop) /* 急停按钮 */ { speed_val 0; } /* 更新速度值 */ lv_label_set_text_fmt(label_speed, Speed : %d RPM, speed_val); } /** * brief 加速按钮 * param 无 * return 无 */ static void lv_example_btn_up(void) { /* 创建加速按钮 */ btn_speed_up lv_btn_create(lv_scr_act()); /* 设置按钮大小 */ lv_obj_set_size(btn_speed_up, scr_act_width() / 4, scr_act_height() / 6); /* 设置按钮位置 */ lv_obj_align(btn_speed_up, LV_ALIGN_CENTER, -scr_act_width() / 3, 0); /* 设置按钮事件 */ lv_obj_add_event_cb(btn_speed_up, btn_event_cb, LV_EVENT_CLICKED, NULL); lv_obj_t* label lv_label_create(btn_speed_up); /* 创建加速按钮标签 */ lv_obj_set_style_text_font(label, font, LV_PART_MAIN); /* 设置字体 */ lv_label_set_text(label, Speed ); /* 设置标签文本 */ lv_obj_set_align(label,LV_ALIGN_CENTER); /* 设置标签位置 */ } /** * brief 减速按钮 * param 无 * return 无 */ static void lv_example_btn_down(void) { /* 创建加速按钮 */ btn_speed_down lv_btn_create(lv_scr_act()); /* 设置按钮大小 */ lv_obj_set_size(btn_speed_down, scr_act_width() / 4, scr_act_height() / 6); /* 设置按钮位置 */ lv_obj_align(btn_speed_down, LV_ALIGN_CENTER, 0, 0); /* 设置按钮事件 */ lv_obj_add_event_cb(btn_speed_down, btn_event_cb, LV_EVENT_CLICKED, NULL); lv_obj_t* label lv_label_create(btn_speed_down); /* 创建减速按钮标签 */ lv_obj_set_style_text_font(label, font, LV_PART_MAIN); /* 设置字体 */ lv_label_set_text(label, Speed -); /* 设置标签文本 */ lv_obj_set_align(label,LV_ALIGN_CENTER); /* 设置标签位置 */ } /** * brief 急停按钮 * param 无 * return 无 */ static void lv_example_btn_stop(void) { /* 创建急停按钮 */ btn_stop lv_btn_create(lv_scr_act()); /* 设置按钮大小 */ lv_obj_set_size(btn_stop, scr_act_width() / 4, scr_act_height() / 6); /* 设置按钮位置 */ lv_obj_align(btn_stop, LV_ALIGN_CENTER, scr_act_width() / 3, 0); /* 设置按钮背景颜色默认 */ lv_obj_set_style_bg_color(btn_stop, lv_color_hex(0xef5f60), LV_STATE_DEFAULT); /* 设置按钮背景颜色按下 */ lv_obj_set_style_bg_color(btn_stop, lv_color_hex(0xff0000), LV_STATE_PRESSED); /* 设置按钮事件 */ lv_obj_add_event_cb(btn_stop, btn_event_cb, LV_EVENT_CLICKED, NULL); lv_obj_t* label lv_label_create(btn_stop); /* 创建急停按钮标签 */ lv_obj_set_style_text_font(label, font, LV_PART_MAIN); /* 设置字体 */ lv_label_set_text(label, Stop); /* 设置标签文本 */ lv_obj_set_align(label,LV_ALIGN_CENTER); /* 设置标签位置 */ } /**************************** 第三部分 结束 ****************************/
LVGL_按钮部件(LV_btn)
发布时间:2026/5/24 2:40:30
在实际的LVGL项目工程中按钮部件的使用频率是非常高的它常用于控制设备的启停。在LVGL中当按钮部件被创建出来之后其默认是一个圆角矩形较为遗憾的是按钮部件并不能直接设置文本。本章节将分为以下几个小节12.1按钮部件的组成12.2按钮部件的相关知识12.3按钮部件的API函数12.4按钮部件的实验12.1按钮部件的组成按钮部件(lv_btn)仅有一个组成部分主体背景示意图如下12.2按钮部件的相关知识按钮部件和基础对象非常类似它们的绝大部分知识都是通用的这里我们只介绍它们之间的区别① 默认情况下按钮部件不可滚动。② 默认情况下按钮部件已经添加到默认组中。③ 按钮部件的默认宽高为LV_SIZE_CONTENT自适应。12.3按钮部件的API函数lv_btn_create函数创建按钮对象其函数原型如下所示lv_obj_t*lv_btn_create(lv_obj_t*parent);parent 部件的父类返回值返回对象控制块。设置按钮大小我们可以通过屏幕的大小来进行按钮大小的设计获取当前屏幕大小/* 获取当前活动屏幕的宽高 */#define scr_act_width() lv_obj_get_width(lv_scr_act())#define scr_act_height() lv_obj_get_height(lv_scr_act())创建一个按钮btn_next lv_btn_create(lv_scr_act()); /* 创建加速按钮 */lv_obj_set_size(btn_next, scr_act_width() / 4, scr_act_height() / 6); /* 设置按钮大小 */lv_obj_align(btn_next, LV_ALIGN_CENTER, -scr_act_width() / 3, 0); /* 设置按钮位置 */lv_obj_add_event_cb(btn_next, btn_event_cb, LV_EVENT_CLICKED, NULL); /* 设置按钮事件 */设置按钮背景颜色/* 设置按钮背景颜色默认 */lv_obj_set_style_bg_color(btn_stop_run, lv_color_hex(0xef5f60),LV_STATE_DEFAULT);/* 设置按钮背景颜色按下 */lv_obj_set_style_bg_color(btn_stop_run, lv_color_hex(0xff0000),LV_STATE_PRESSED);设置按钮事件lv_obj_add_event_cb(btn_stop_run,btn_event_cb, LV_EVENT_CLICKED, NULL);设置按钮标签设置标签需要开启LVGL字库并且进行设置具体实现看总代码。lv_obj_t* label lv_label_create(btn_stop_run); /* 创建急停按钮标签 */lv_obj_set_style_text_font(label, font, LV_PART_MAIN); /* 设置字体 */lv_label_set_text(label, Stop); /* 设置标签文本 */lv_obj_set_align(label,LV_ALIGN_CENTER); /* 设置标签位置 */总代码/** * brief LVGL 演示 * param 无 * return 无 */ void lv_mainstart(void) { lv_example_label(); /* 速度提示标签 */ lv_example_btn_up(); /* 加速按钮 */ lv_example_btn_down(); /* 减速按钮 */ lv_example_btn_stop(); /* 急停按钮 */ } /**************************** 第一部分 结束 ****************************/ /**************************** 第二部分 开始 ****************************/ /** * brief 速度值提示标签 * param 无 * return 无 */ static void lv_example_label(void) { /* 根据活动屏幕宽度选择字体 */ if (scr_act_width() 320) { font lv_font_montserrat_10; } else if (scr_act_width() 480) { font lv_font_montserrat_14; } else { font lv_font_montserrat_20; } label_speed lv_label_create(lv_scr_act()); /* 创建速度显示标签 */ lv_obj_set_style_text_font(label_speed, font, LV_PART_MAIN); /* 设置字体 */ lv_label_set_text(label_speed, Speed : 0 RPM); /* 设置文本 */ /* 设置标签位置 */ lv_obj_align(label_speed, LV_ALIGN_CENTER, 0, -scr_act_height() / 3); } /**************************** 第二部分 结束 ****************************/ /**************************** 第三部分 开始 ****************************/ /** * brief 按钮回调 * param *e 事件相关参数的集合它包含了该事件的所有数据 * return 无 */ static void btn_event_cb(lv_event_t * e) { lv_obj_t *target lv_event_get_target(e); /* 获取触发源 */ if(target btn_speed_up) /* 加速按钮 */ { speed_val 30; } else if(target btn_speed_down) /* 减速按钮 */ { speed_val - 30; } else if(target btn_stop) /* 急停按钮 */ { speed_val 0; } /* 更新速度值 */ lv_label_set_text_fmt(label_speed, Speed : %d RPM, speed_val); } /** * brief 加速按钮 * param 无 * return 无 */ static void lv_example_btn_up(void) { /* 创建加速按钮 */ btn_speed_up lv_btn_create(lv_scr_act()); /* 设置按钮大小 */ lv_obj_set_size(btn_speed_up, scr_act_width() / 4, scr_act_height() / 6); /* 设置按钮位置 */ lv_obj_align(btn_speed_up, LV_ALIGN_CENTER, -scr_act_width() / 3, 0); /* 设置按钮事件 */ lv_obj_add_event_cb(btn_speed_up, btn_event_cb, LV_EVENT_CLICKED, NULL); lv_obj_t* label lv_label_create(btn_speed_up); /* 创建加速按钮标签 */ lv_obj_set_style_text_font(label, font, LV_PART_MAIN); /* 设置字体 */ lv_label_set_text(label, Speed ); /* 设置标签文本 */ lv_obj_set_align(label,LV_ALIGN_CENTER); /* 设置标签位置 */ } /** * brief 减速按钮 * param 无 * return 无 */ static void lv_example_btn_down(void) { /* 创建加速按钮 */ btn_speed_down lv_btn_create(lv_scr_act()); /* 设置按钮大小 */ lv_obj_set_size(btn_speed_down, scr_act_width() / 4, scr_act_height() / 6); /* 设置按钮位置 */ lv_obj_align(btn_speed_down, LV_ALIGN_CENTER, 0, 0); /* 设置按钮事件 */ lv_obj_add_event_cb(btn_speed_down, btn_event_cb, LV_EVENT_CLICKED, NULL); lv_obj_t* label lv_label_create(btn_speed_down); /* 创建减速按钮标签 */ lv_obj_set_style_text_font(label, font, LV_PART_MAIN); /* 设置字体 */ lv_label_set_text(label, Speed -); /* 设置标签文本 */ lv_obj_set_align(label,LV_ALIGN_CENTER); /* 设置标签位置 */ } /** * brief 急停按钮 * param 无 * return 无 */ static void lv_example_btn_stop(void) { /* 创建急停按钮 */ btn_stop lv_btn_create(lv_scr_act()); /* 设置按钮大小 */ lv_obj_set_size(btn_stop, scr_act_width() / 4, scr_act_height() / 6); /* 设置按钮位置 */ lv_obj_align(btn_stop, LV_ALIGN_CENTER, scr_act_width() / 3, 0); /* 设置按钮背景颜色默认 */ lv_obj_set_style_bg_color(btn_stop, lv_color_hex(0xef5f60), LV_STATE_DEFAULT); /* 设置按钮背景颜色按下 */ lv_obj_set_style_bg_color(btn_stop, lv_color_hex(0xff0000), LV_STATE_PRESSED); /* 设置按钮事件 */ lv_obj_add_event_cb(btn_stop, btn_event_cb, LV_EVENT_CLICKED, NULL); lv_obj_t* label lv_label_create(btn_stop); /* 创建急停按钮标签 */ lv_obj_set_style_text_font(label, font, LV_PART_MAIN); /* 设置字体 */ lv_label_set_text(label, Stop); /* 设置标签文本 */ lv_obj_set_align(label,LV_ALIGN_CENTER); /* 设置标签位置 */ } /**************************** 第三部分 结束 ****************************/