■ LVGL-按钮部件

■ 按钮部件： 点击三个按钮一个回调函数修改label值。

结果：

■ LVGL-按钮矩阵部件

■ 示例一：按钮换行，和宽度设置。

btn2,btn3在第二行自动平分了宽度

■ 示例二：设置按钮宽度为2倍

btn2==下标为2按钮， 设置按钮下标为2的按钮2倍大小

■ 示例三：获取点击的按钮下标，和文本。

■ 示例四：设置按钮为disabled

■ 示例五：设置按钮为允许状态属性

■ 示例六：设置按钮文本为重新着色

■ 示例七：按钮文本内容写了颜色，但是关闭了按钮文本着色功能。

■ 示例八：按钮文本内容着色，和允许状态属性。

■ 示例九：多按钮，单选中。

■ 示例十：数字输入功能：

/* 获取当前活动屏幕的宽高 */
#define scr_act_width()  lv_obj_get_width(lv_scr_act())
#define scr_act_height() lv_obj_get_height(lv_scr_act())/* 按钮矩阵数组 */
static const char *num_map[] = { "1", "2", "3", "\n","4", "5", "6", "\n","7", "8", "9", "\n","#", "0", "%", "" };static uint16_t zoom_val;                           /* 图片缩放系数 */
static lv_point_t points[] = {{0,0},{0,200}};       /* 线条坐标点数组 */static const lv_font_t *font;                       /* 定义字体 */
static lv_obj_t *label_input;                       /* 输入框标签 */
static lv_obj_t *obj_input;                         /* 输入框背景 */LV_IMG_DECLARE(img_user);                           /* 声明图片 *//*** @brief  按钮矩阵事件回调* @param  *e ：事件相关参数的集合，它包含了该事件的所有数据* @return 无*/
static void btnm_event_cb(lv_event_t* e)
{uint8_t id;lv_event_code_t code = lv_event_get_code(e);                                /* 获取事件类型 */lv_obj_t *target = lv_event_get_target(e);                                  /* 获取触发源 */if (code == LV_EVENT_VALUE_CHANGED){id = lv_btnmatrix_get_selected_btn(target);                             /* 获取按键索引 */lv_label_set_text(label_input, lv_btnmatrix_get_btn_text(target, id));  /* 更新输入框标签文本 */lv_obj_align_to(label_input, obj_input, LV_ALIGN_CENTER, 0, 0);         /* 设置标签位置 */}
}/*** @brief  密码输入界面* @param  无* @return 无*/
static void lv_example_btnmatrix(void)
{/* 根据屏幕宽度选择字体和图片缩放系数 */if (scr_act_width() <= 480){font = &lv_font_montserrat_14;zoom_val = 128;}else{font = &lv_font_montserrat_30;zoom_val = 256;}/* 图片显示 */lv_obj_t *img = lv_img_create(lv_scr_act());                                                /* 创建图片部件 */lv_img_set_src(img, &img_user);                                                             /* 设置图片源 */lv_img_set_zoom(img, zoom_val);                                                             /* 设置图片缩放 */lv_obj_align(img, LV_ALIGN_CENTER, -scr_act_width()/4, -scr_act_height()/7);                /* 设置位置 */lv_obj_set_style_img_recolor(img, lv_color_hex(0xf2f2f2),0);                                /* 设置重新着色 */lv_obj_set_style_img_recolor_opa(img,100,0);                                                /* 设置着色透明度 *//* 用户标签 */lv_obj_t *label_user = lv_label_create(lv_scr_act());                                       /* 创建标签 */lv_label_set_text(label_user, "USER");                                                      /* 设置文本 */lv_obj_set_style_text_font(label_user, font, LV_PART_MAIN);                                 /* 设置字体 */lv_obj_set_style_text_align(label_user, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN);                /* 设置文本居中 */lv_obj_align_to(label_user, img, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);                           /* 设置位置 *//* 输入框背景 */obj_input = lv_obj_create(lv_scr_act());                                                    /* 创建基础对象 */lv_obj_set_size(obj_input, scr_act_width()/4, scr_act_height()/12);                         /* 设置大小 */lv_obj_align_to(obj_input, label_user, LV_ALIGN_OUT_BOTTOM_MID, 0, scr_act_height()/20);    /* 设置位置 */lv_obj_set_style_bg_color(obj_input, lv_color_hex(0xcccccc),0);                             /* 设置背景颜色 */lv_obj_set_style_bg_opa(obj_input, 150,0);                                                  /* 设置透明度 */lv_obj_set_style_border_width(obj_input, 0 , 0);                                            /* 去除边框 */lv_obj_set_style_radius(obj_input, 20, 0);                                                  /* 设置圆角 */lv_obj_remove_style(obj_input, NULL, LV_PART_SCROLLBAR);                                    /* 移除滚动条 *//* 输入框文本标签 */label_input = lv_label_create(lv_scr_act());                                                /* 创建标签 */lv_label_set_text(label_input, "");                                                         /* 设置文本 */lv_obj_set_style_text_font(label_input, font, LV_PART_MAIN);                                /* 设置字体 */lv_obj_set_style_text_align(label_input, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN);               /* 设置文本居中 */lv_obj_align_to(label_input, obj_input, LV_ALIGN_CENTER, 0, 0);                             /* 设置位置 *//* 分隔线 */lv_obj_t *line = lv_line_create(lv_scr_act());                                              /* 创建线条 */lv_line_set_points(line, points, 2);                                                        /* 设置线条坐标点 */lv_obj_align(line, LV_ALIGN_CENTER, 0, 0);                                                  /* 设置位置 */lv_obj_set_style_line_color(line, lv_color_hex(0xcdcdcd),0);                                /* 设置线条颜色 *//* 按钮矩阵（创建） */lv_obj_t *btnm = lv_btnmatrix_create(lv_scr_act());                                         /* 创建按钮矩阵 */lv_obj_set_size(btnm, scr_act_width()* 2/5, scr_act_width()* 2/5);                          /* 设置大小 */lv_btnmatrix_set_map(btnm, num_map);                                                        /* 设置按钮 */lv_obj_align(btnm, LV_ALIGN_RIGHT_MID, -scr_act_width()/16, 0);                             /* 设置位置 */lv_obj_set_style_text_font(btnm, font, LV_PART_ITEMS);                                      /* 设置字体 *//* 按钮矩阵（优化界面） */lv_obj_set_style_border_width(btnm, 0, LV_PART_MAIN);                                       /* 去除主体边框 */lv_obj_set_style_bg_opa(btnm, 0, LV_PART_MAIN);                                             /* 设置主体背景透明度 */lv_obj_set_style_bg_opa(btnm, 0, LV_PART_ITEMS);                                            /* 设置按钮背景透明度 */lv_obj_set_style_shadow_width(btnm, 0, LV_PART_ITEMS);                                      /* 去除按钮阴影 */lv_obj_add_event_cb(btnm, btnm_event_cb, LV_EVENT_VALUE_CHANGED, NULL);                     /* 设置按钮矩阵回调 */
}