lvgl 使用demo

实现效果

 

 代码

    #define OBJ_PARENT_WIDTH 970#define OBJ_PARENT_HEIGH 446#define OBJ_BTN_WIDTH 150#define OBJ_BTN_HEIGH 50#define OBJ_BTN_POS_X 120#define OBJ_BTN_POS_Y 40#define OBJ_ITEM_WIDTH 420#define OBJ_ITEM_HEIGH 50 #define OBJ_TABLE_HEIGH 60 #define OBJ_ITEM_STEP 60 #define OBJ_COLOR_BG_MAIN 0xfff2f2f2#define OBJ_COLOR_FONT_DEFAULT 0xFF2E2E2E#define OBJ_COLOR_FONT_BLUE 0xFF3B90F4#define OBJ_COLOR_FONT_GRAY 0xFFB3B3B3lv_obj_t* obj_p = lv_obj_create(appObjUiParent);lv_obj_center(obj_p);lv_obj_set_size(obj_p,OBJ_PARENT_WIDTH,OBJ_PARENT_HEIGH);lv_obj_set_style_border_width(obj_p,0,LV_STATE_DEFAULT);lv_obj_set_style_bg_color(obj_p,lv_color_hex(OBJ_COLOR_BG_MAIN),LV_STATE_DEFAULT);lv_obj_set_style_pad_all(obj_p,0,LV_STATE_DEFAULT);lv_obj_set_style_text_font(obj_p, &lv_font_montserrat_24, LV_STATE_DEFAULT); //设置字体大小
    lv_obj_set_style_text_color(obj_p,lv_color_hex(OBJ_COLOR_FONT_DEFAULT),LV_STATE_DEFAULT);// 创建两个obj 左右各一个,使用btn按钮作为基座,上面label左右对齐lv_obj_t * obj_left_face = lv_obj_create(obj_p);lv_obj_align(obj_left_face,LV_ALIGN_LEFT_MID,0,0);lv_obj_set_size(obj_left_face, OBJ_PARENT_WIDTH/2, OBJ_PARENT_HEIGH);// lv_obj_set_style_bg_color(obj_left_face,lv_color_hex(0xfff2f200),LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(obj_left_face,LV_OPA_TRANSP,LV_STATE_DEFAULT);lv_obj_set_style_border_width(obj_left_face,0,LV_STATE_DEFAULT);lv_obj_set_style_pad_all(obj_left_face,0,LV_STATE_DEFAULT);lv_obj_set_style_outline_width(obj_left_face,0,LV_STATE_DEFAULT);// 摄像头if(1){// canvas#define CAMERA_SHOW_WIDTH 240#define CAMERA_SHOW_HEIGH 240static unsigned char bufCameraBigCanvas[CAMERA_SHOW_WIDTH*CAMERA_SHOW_HEIGH*4];lv_obj_t* appObj_canvas_p=lv_obj_create(obj_left_face);lv_obj_set_size(appObj_canvas_p,CAMERA_SHOW_WIDTH+50, CAMERA_SHOW_HEIGH+50);lv_obj_set_style_bg_opa(appObj_canvas_p,LV_OPA_0,LV_STATE_DEFAULT);lv_obj_set_style_border_width(appObj_canvas_p,0,LV_STATE_DEFAULT);lv_obj_set_style_radius(appObj_canvas_p,0,LV_STATE_DEFAULT);lv_obj_set_style_outline_width(appObj_canvas_p,0,LV_STATE_DEFAULT);lv_obj_align(appObj_canvas_p, LV_ALIGN_TOP_MID, 0, 0);// CANVASlv_obj_t* appObjCamera = lv_canvas_create(appObj_canvas_p);//lv_scr_act()lv_obj_align(appObjCamera, LV_ALIGN_CENTER, 0, 0);lv_obj_set_size(appObjCamera,CAMERA_SHOW_WIDTH, CAMERA_SHOW_HEIGH);lv_obj_set_style_radius(appObjCamera,CAMERA_SHOW_WIDTH/2,LV_STATE_DEFAULT);lv_obj_set_style_border_color(appObjCamera,lv_color_hex(0xffffffff),LV_STATE_DEFAULT);lv_obj_set_style_border_width(appObjCamera,0,LV_STATE_DEFAULT);lv_canvas_set_buffer(appObjCamera, bufCameraBigCanvas, CAMERA_SHOW_WIDTH, CAMERA_SHOW_HEIGH, LV_IMG_CF_TRUE_COLOR_ALPHA);mydebug;// lv_canvas_copy_buf(appObjCamera,bufCameraBigCanvas,0,0,CAMERA_SHOW_WIDTH, CAMERA_SHOW_HEIGH);mydebug;// lv_obj_invalidate(appObjCamera);// 主动触发重绘指令
lv_obj_t* appObj_p2=lv_obj_create(appObj_canvas_p);lv_obj_set_size(appObj_p2,CAMERA_SHOW_WIDTH+4, CAMERA_SHOW_HEIGH+4);lv_obj_set_style_border_width(appObj_p2,4,LV_STATE_DEFAULT);lv_obj_set_style_radius(appObj_p2,CAMERA_SHOW_WIDTH/2+2,LV_STATE_DEFAULT);lv_obj_set_style_border_color(appObj_p2,lv_color_hex(0xffffffff),LV_STATE_DEFAULT);lv_obj_set_style_bg_opa(appObj_p2,LV_OPA_0,LV_STATE_DEFAULT);lv_obj_align(appObj_p2, LV_ALIGN_CENTER, 0, 0);}// 弹窗,按钮if(1){// 中间弹窗 // xxx:录入中,录入成功,录入超时,录入失败  ---:--lv_obj_t* obj_left_face_state=lv_label_create(obj_left_face);lv_obj_align(obj_left_face_state, LV_ALIGN_TOP_MID, 0, 290);lv_label_set_text(obj_left_face_state,"---:--");lv_obj_set_style_text_color(obj_left_face_state,lv_color_hex(OBJ_COLOR_FONT_GRAY),LV_STATE_DEFAULT);// 左侧按钮lv_obj_t* obj_left_face_btn_l=lv_btn_create(obj_left_face);lv_obj_set_size(obj_left_face_btn_l,OBJ_BTN_WIDTH,OBJ_BTN_HEIGH);lv_obj_t* obj_left_face_btn_l_text=lv_label_create(obj_left_face_btn_l);lv_obj_center(obj_left_face_btn_l_text);lv_label_set_text(obj_left_face_btn_l_text,"btn1");lv_obj_align(obj_left_face_btn_l, LV_ALIGN_BOTTOM_MID, -OBJ_BTN_POS_X, -OBJ_BTN_POS_Y);// 右侧按钮lv_obj_t* obj_left_face_btn_r=lv_btn_create(obj_left_face);lv_obj_set_size(obj_left_face_btn_r,OBJ_BTN_WIDTH,OBJ_BTN_HEIGH);lv_obj_t* obj_left_face_btn_r_text=lv_label_create(obj_left_face_btn_r);lv_obj_center(obj_left_face_btn_r_text);lv_label_set_text(obj_left_face_btn_r_text,"btn2");lv_obj_align(obj_left_face_btn_r, LV_ALIGN_BOTTOM_MID, OBJ_BTN_POS_X, -OBJ_BTN_POS_Y);// 下划线 新增记录if(1){lv_obj_t* obj_left=lv_label_create(obj_left_face);lv_obj_align(obj_left,LV_ALIGN_BOTTOM_MID,0,-5);lv_label_set_text(obj_left,"new record");// lv_obj_set_style_text_decor(obj_left,LV_TEXT_DECOR_UNDERLINE,LV_STATE_DEFAULT);// 文字下划线lv_obj_set_style_text_font(obj_left, &lv_font_montserrat_20, LV_STATE_DEFAULT); //设置字体大小
            lv_obj_set_style_text_color(obj_left,lv_color_hex(OBJ_COLOR_FONT_DEFAULT),LV_STATE_DEFAULT);lv_obj_t * obj_left_1 = lv_btn_create(obj_left_face);lv_obj_set_size(obj_left_1, OBJ_BTN_WIDTH, 30);lv_obj_align(obj_left_1,LV_ALIGN_BOTTOM_MID,0,-5);lv_obj_set_style_bg_opa(obj_left_1,LV_OPA_TRANSP,LV_STATE_DEFAULT);lv_obj_set_style_border_width(obj_left_1,2,LV_STATE_DEFAULT);lv_obj_set_style_border_color(obj_left_1,lv_color_hex(0xFFD9D9D9),LV_STATE_DEFAULT);lv_obj_set_style_border_side(obj_left_1,LV_BORDER_SIDE_BOTTOM,LV_STATE_DEFAULT);//边框lv_obj_set_style_pad_all(obj_left_1,0,LV_STATE_DEFAULT);lv_obj_set_style_outline_width(obj_left_1,0,LV_STATE_DEFAULT);lv_obj_set_style_radius(obj_left_1,0,LV_STATE_DEFAULT);lv_obj_set_style_shadow_ofs_x(obj_left_1,0,LV_STATE_DEFAULT);lv_obj_set_style_shadow_ofs_y(obj_left_1,0,LV_STATE_DEFAULT);lv_obj_set_style_shadow_width(obj_left_1,0,LV_STATE_DEFAULT);}}//lv_obj_add_flag(obj_left_face,LV_OBJ_FLAG_HIDDEN);
lv_obj_t * obj_left_info = lv_obj_create(obj_p);lv_obj_align(obj_left_info,LV_ALIGN_LEFT_MID,0,0);lv_obj_set_size(obj_left_info, OBJ_PARENT_WIDTH/2, OBJ_PARENT_HEIGH);lv_obj_set_style_bg_opa(obj_left_info,LV_OPA_TRANSP,LV_STATE_DEFAULT);lv_obj_set_style_border_width(obj_left_info,0,LV_STATE_DEFAULT);lv_obj_set_style_pad_all(obj_left_info,0,LV_STATE_DEFAULT);lv_obj_set_style_outline_width(obj_left_info,0,LV_STATE_DEFAULT);if(1){// 姓名lv_obj_t* obj_left_0=lv_label_create(obj_left_info);lv_obj_align(obj_left_0, LV_ALIGN_TOP_MID, 0, 12);lv_obj_set_style_text_font(obj_left_0, &lv_font_montserrat_28, LV_STATE_DEFAULT); //设置字体大小lv_label_set_text(obj_left_0,"namexxx");lv_obj_set_style_text_color(obj_left_0,lv_color_hex(OBJ_COLOR_FONT_BLUE),LV_STATE_DEFAULT);char* info[]={"tel","18531231298","id","411325199505050578","driver date","2050-05-05","auth date","2050-05-05"};// telfor(int i=0;i<4;i++){lv_obj_t * obj_left_1 = lv_obj_create(obj_left_info);lv_obj_set_size(obj_left_1, OBJ_ITEM_WIDTH, OBJ_ITEM_HEIGH);lv_obj_align(obj_left_1,LV_ALIGN_TOP_MID,0,OBJ_ITEM_STEP*(i+1));lv_obj_set_style_bg_color(obj_left_1,lv_color_hex(0xFFD9D9D9),LV_STATE_DEFAULT);lv_obj_set_style_border_width(obj_left_1,0,LV_STATE_DEFAULT);lv_obj_set_style_pad_all(obj_left_1,0,LV_STATE_DEFAULT);lv_obj_set_style_outline_width(obj_left_1,0,LV_STATE_DEFAULT);lv_obj_t* obj_left=lv_label_create(obj_left_1);lv_obj_align(obj_left, LV_ALIGN_LEFT_MID, 10, 0);lv_label_set_text(obj_left,info[2*i+0]);lv_obj_t* obj_right=lv_label_create(obj_left_1);lv_obj_align(obj_right, LV_ALIGN_RIGHT_MID, -10, 0);lv_obj_set_style_text_font(obj_right, &lv_font_montserrat_20, LV_STATE_DEFAULT); //设置字体大小
            lv_obj_set_style_text_color(obj_right,lv_color_hex(OBJ_COLOR_FONT_GRAY),LV_STATE_DEFAULT);lv_label_set_text(obj_right,info[2*i+1]);}// 左侧按钮lv_obj_t* obj_left_face_btn_l=lv_btn_create(obj_left_info);lv_obj_set_size(obj_left_face_btn_l,OBJ_BTN_WIDTH,OBJ_BTN_HEIGH);lv_obj_t* obj_left_face_btn_l_text=lv_label_create(obj_left_face_btn_l);lv_obj_center(obj_left_face_btn_l_text);lv_label_set_text(obj_left_face_btn_l_text,"btn3");lv_obj_align(obj_left_face_btn_l, LV_ALIGN_BOTTOM_MID, -OBJ_BTN_POS_X, -OBJ_BTN_POS_Y);// 右侧按钮lv_obj_t* obj_left_face_btn_r=lv_btn_create(obj_left_info);lv_obj_set_size(obj_left_face_btn_r,OBJ_BTN_WIDTH,OBJ_BTN_HEIGH);lv_obj_t* obj_left_face_btn_r_text=lv_label_create(obj_left_face_btn_r);lv_obj_center(obj_left_face_btn_r_text);lv_label_set_text(obj_left_face_btn_r_text,"btn4");lv_obj_align(obj_left_face_btn_r, LV_ALIGN_BOTTOM_MID, OBJ_BTN_POS_X, -OBJ_BTN_POS_Y);lv_obj_add_event_cb(obj_left_face_btn_r, my_cb_text_handle, LV_EVENT_CLICKED,obj_left_info);}lv_obj_t * obj_right = lv_obj_create(obj_p);lv_obj_set_size(obj_right, OBJ_PARENT_WIDTH/2, OBJ_PARENT_HEIGH);// lv_obj_set_style_bg_color(obj_right,lv_color_hex(0xff00f2f2),LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(obj_right,LV_OPA_TRANSP,LV_STATE_DEFAULT);lv_obj_align(obj_right,LV_ALIGN_RIGHT_MID,0,0);lv_obj_set_style_border_width(obj_right,0,LV_STATE_DEFAULT);lv_obj_set_style_pad_all(obj_right,0,LV_STATE_DEFAULT);lv_obj_set_style_outline_width(obj_right,0,LV_STATE_DEFAULT);if(1){lv_obj_t * obj_left_1 = lv_obj_create(obj_right);lv_obj_set_size(obj_left_1, OBJ_PARENT_WIDTH/2-10, OBJ_TABLE_HEIGH);lv_obj_align(obj_left_1,LV_ALIGN_TOP_LEFT,0,0);lv_obj_set_style_bg_opa(obj_left_1,LV_OPA_TRANSP,LV_STATE_DEFAULT);lv_obj_set_style_border_width(obj_left_1,1,LV_STATE_DEFAULT);lv_obj_set_style_border_color(obj_left_1,lv_color_hex(0xFFD9D9D9),LV_STATE_DEFAULT);lv_obj_set_style_border_side(obj_left_1,LV_BORDER_SIDE_LEFT|LV_BORDER_SIDE_BOTTOM,LV_STATE_DEFAULT);lv_obj_set_style_pad_all(obj_left_1,0,LV_STATE_DEFAULT);lv_obj_set_style_outline_width(obj_left_1,0,LV_STATE_DEFAULT);lv_obj_set_style_radius(obj_left_1,1,LV_STATE_DEFAULT);lv_obj_t* obj_left_0=lv_label_create(obj_left_1);lv_obj_align(obj_left_0, LV_ALIGN_CENTER, 0, 0);lv_obj_set_style_text_font(obj_left_0, &lv_font_montserrat_28, LV_STATE_DEFAULT); //设置字体大小lv_label_set_text(obj_left_0,"record");lv_obj_set_style_text_color(obj_left_0,lv_color_hex(OBJ_COLOR_FONT_BLUE),LV_STATE_DEFAULT);lv_obj_t * obj_list = lv_obj_create(obj_right);lv_obj_set_size(obj_list, OBJ_PARENT_WIDTH/2, OBJ_PARENT_HEIGH-OBJ_TABLE_HEIGH);lv_obj_set_style_bg_opa(obj_list,LV_OPA_TRANSP,LV_STATE_DEFAULT);lv_obj_align(obj_list,LV_ALIGN_TOP_LEFT,0,OBJ_ITEM_STEP);lv_obj_set_style_border_width(obj_list,0,LV_STATE_DEFAULT);lv_obj_set_style_pad_all(obj_list,0,LV_STATE_DEFAULT);lv_obj_set_style_outline_width(obj_list,0,LV_STATE_DEFAULT);// 渐变色static lv_style_t style;lv_style_init(&style);lv_style_set_radius(&style, 0);lv_style_set_bg_opa(&style, LV_OPA_80);lv_style_set_bg_color(&style, lv_color_hex(0xFFD9D9D9));lv_style_set_bg_grad_color(&style, lv_color_hex(OBJ_COLOR_BG_MAIN));lv_style_set_bg_grad_dir(&style, LV_GRAD_DIR_HOR);lv_style_set_bg_main_stop(&style, 0);//样式起点lv_style_set_bg_grad_stop(&style, 150);//样式结束位置static lv_style_t style_scroll;//滚动条颜色设置lv_style_init(&style_scroll);lv_style_set_bg_color(&style_scroll, lv_color_hex(OBJ_COLOR_FONT_BLUE));lv_style_set_width(&style_scroll,6);lv_obj_scroll_to_y(obj_list,OBJ_ITEM_STEP*20,LV_ANIM_OFF); //滑动到底部lv_obj_add_style(obj_list, &style_scroll, LV_PART_SCROLLBAR);//设置滚动条样式char* info[]={"namexx","18531231298"};lv_group_t * group=lv_group_create();for(int i=0;i<20;i++){lv_obj_t * obj_left_1 = lv_btn_create(obj_list);lv_group_add_obj(group,obj_left_1);lv_group_focus_obj(obj_left_1);lv_obj_set_size(obj_left_1, OBJ_PARENT_WIDTH/2-10, OBJ_TABLE_HEIGH);lv_obj_align(obj_left_1,LV_ALIGN_TOP_LEFT,0,OBJ_ITEM_STEP*(i));lv_obj_set_style_bg_opa(obj_left_1,LV_OPA_TRANSP,LV_STATE_DEFAULT);lv_obj_set_style_border_width(obj_left_1,1,LV_STATE_DEFAULT);lv_obj_set_style_border_color(obj_left_1,lv_color_hex(0xFFD9D9D9),LV_STATE_DEFAULT);lv_obj_set_style_border_side(obj_left_1,LV_BORDER_SIDE_LEFT|LV_BORDER_SIDE_BOTTOM,LV_STATE_DEFAULT);lv_obj_set_style_pad_all(obj_left_1,0,LV_STATE_DEFAULT);lv_obj_set_style_outline_width(obj_left_1,0,LV_STATE_DEFAULT);lv_obj_set_style_radius(obj_left_1,0,LV_STATE_DEFAULT);lv_obj_set_style_shadow_ofs_x(obj_left_1,0,LV_STATE_DEFAULT);lv_obj_set_style_shadow_ofs_y(obj_left_1,0,LV_STATE_DEFAULT);lv_obj_set_style_shadow_width(obj_left_1,0,LV_STATE_DEFAULT);lv_obj_set_style_border_color(obj_left_1,lv_color_hex(OBJ_COLOR_FONT_BLUE),LV_STATE_FOCUSED);lv_obj_set_style_border_width(obj_left_1,3,LV_STATE_FOCUSED);lv_obj_set_style_border_side(obj_left_1,LV_BORDER_SIDE_LEFT,LV_STATE_FOCUSED);lv_obj_set_style_shadow_ofs_x(obj_left_1,-1,LV_STATE_FOCUSED);lv_obj_set_style_shadow_ofs_y(obj_left_1,1,LV_STATE_FOCUSED);lv_obj_set_style_shadow_width(obj_left_1,1,LV_STATE_FOCUSED);lv_obj_add_style(obj_left_1, &style, LV_STATE_FOCUSED); //为对象增加 样式
lv_obj_t* obj_left=lv_label_create(obj_left_1);lv_obj_align(obj_left, LV_ALIGN_LEFT_MID, 10, 0);lv_label_set_text(obj_left,info[0]);lv_obj_set_style_text_color(obj_left,lv_color_hex(OBJ_COLOR_FONT_DEFAULT),LV_STATE_DEFAULT);lv_obj_set_style_text_color(obj_left,lv_color_hex(OBJ_COLOR_FONT_BLUE),LV_STATE_FOCUSED);// 聚集焦点
            lv_obj_add_event_cb(obj_left_1, my_cb_text_handle, LV_EVENT_FOCUSED,obj_left);lv_obj_add_event_cb(obj_left_1, my_cb_text_handle, LV_EVENT_DEFOCUSED,obj_left);lv_obj_t* obj_right=lv_label_create(obj_left_1);lv_obj_align(obj_right, LV_ALIGN_RIGHT_MID, -10, 0);lv_obj_set_style_text_font(obj_right, &lv_font_montserrat_20, LV_STATE_DEFAULT); //设置字体大小
            lv_obj_set_style_text_color(obj_right,lv_color_hex(OBJ_COLOR_FONT_GRAY),LV_STATE_DEFAULT);lv_label_set_text(obj_right,info[1]);}}