LVGL笔记(6)-电子相册使用手势切换图片(windows仿真)

📅 2026/7/15 14:03:55
LVGL笔记(6)-电子相册使用手势切换图片(windows仿真)
文章目录1.LV_EVENT_GESTURE事件的回调函数2.较为完整的代码3.工程源码今天看了一下lvgl的EVENT枚举有一个事件LV_EVENT_GESTURE是响应手势滑屏的就把电子相册的按键改为手势操作。参考文章1.作者weixin_46964996文章 LVGL 的 LV_EVENT_GESTURE2.我自己的文章 LVGL笔记(2)-电子相册windows模拟和ESP32-S3先看看效果手势滑动相册1.LV_EVENT_GESTURE事件的回调函数这个lvgl的事件好像没什么可说的直接上源码staticvoidalbumpage_gesture_cb(lv_event_t*e){lv_event_code_teventlv_event_get_code(e);if(eventLV_EVENT_GESTURE){// 等待触屏释放lv_indev_wait_release(lv_indev_get_act());// 获取方向lv_dir_tdirlv_indev_get_gesture_dir(lv_indev_get_act());switch(dir){caseLV_DIR_LEFT:imganmitoleft();printf(to left\n);break;caseLV_DIR_RIGHT:imganmitoright();printf(to right\n);break;}}}方向的定义在头文件《lvgl/src/misc/lv_area.h》中enum{LV_DIR_NONE0x00,LV_DIR_LEFT(10),LV_DIR_RIGHT(11),LV_DIR_TOP(12),LV_DIR_BOTTOM(13),LV_DIR_HORLV_DIR_LEFT|LV_DIR_RIGHT,LV_DIR_VERLV_DIR_TOP|LV_DIR_BOTTOM,LV_DIR_ALLLV_DIR_HOR|LV_DIR_VER,};typedefuint8_tlv_dir_t;在相册的界面中设置回调函数voidui_albumpage_screen_init(lv_obj_t*parent){......lv_obj_add_event_cb(lv_scr_act(),albumpage_gesture_cb,LV_EVENT_GESTURE,NULL);......}2.较为完整的代码voidimganmitoright(){// 如果不是最后一个指向下一个指针if(g_curImg_p-index(imgs_total_nums)){g_curImg_p_lv_ll_get_next(ll_test,g_curImg_p);sprintf(g_fullPath,%s/%s,g_curPath,g_curImg_p-name);printf(g_fullPath);lv_img_set_src(ui_Image1,g_fullPath);// 显示图片的总数和索引sprintf(g_fullPath,%d/%d,exit,g_curImg_p-index,imgs_total_nums);lv_label_set_text(ui_Labbtnswitch,g_fullPath);}}voidimganmitoleft(){// 如果不是第一个指向上一个指针if(g_curImg_p-index1){g_curImg_p_lv_ll_get_prev(ll_test,g_curImg_p);sprintf(g_fullPath,%s/%s,g_curPath,g_curImg_p-name);printf(g_fullPath);lv_img_set_src(ui_Image1,g_fullPath);// 显示图片的总数和索引sprintf(g_fullPath,%d/%d,exit,g_curImg_p-index,imgs_total_nums);lv_label_set_text(ui_Labbtnswitch,g_fullPath);}}staticvoidalbumpage_gesture_cb(lv_event_t*e){lv_event_code_teventlv_event_get_code(e);if(eventLV_EVENT_GESTURE){lv_indev_wait_release(lv_indev_get_act());lv_dir_tdirlv_indev_get_gesture_dir(lv_indev_get_act());switch(dir){caseLV_DIR_LEFT:imganmitoleft();printf(to left\n);break;caseLV_DIR_RIGHT:imganmitoright();printf(to right\n);break;}}}staticvoidui_event_btnswitch(lv_event_t*e){lv_event_code_teventlv_event_get_code(e);lv_obj_t*talv_event_get_target(e);if(eventLV_EVENT_CLICKED){externlv_obj_t*file_explorer;// 隐藏图片浏览界面lv_obj_add_flag(ui_albumpage,LV_OBJ_FLAG_HIDDEN);// 显示文件浏览界面lv_obj_clear_flag(file_explorer,LV_OBJ_FLAG_HIDDEN);}}///////////////////// SCREENS ////////////////////voidui_albumpage_screen_init(lv_obj_t*parent){// 0.ui_albumpageui_albumpagelv_obj_create(parent);lv_obj_clear_flag(ui_albumpage,LV_OBJ_FLAG_SCROLLABLE);lv_obj_set_size(ui_albumpage,LV_HOR_RES,LV_VER_RES);// 设置屏幕大小lv_obj_set_style_bg_color(ui_albumpage,lv_color_hex(0x000000),LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_opa(ui_albumpage,255,LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_border_width(ui_albumpage,0,LV_STATE_DEFAULT);lv_obj_center(ui_albumpage);// 1.ui_Image1ui_Image1lv_img_create(ui_albumpage);lv_obj_set_style_border_width(ui_Image1,0,LV_STATE_DEFAULT);lv_obj_set_width(ui_Image1,800);lv_obj_set_height(ui_Image1,480);lv_obj_set_x(ui_Image1,0);lv_obj_set_y(ui_Image1,0);lv_obj_set_align(ui_Image1,LV_ALIGN_CENTER);lv_obj_add_flag(ui_Image1,LV_OBJ_FLAG_ADV_HITTEST);lv_obj_clear_flag(ui_Image1,LV_OBJ_FLAG_SCROLLABLE);lv_obj_add_event_cb(lv_scr_act(),albumpage_gesture_cb,LV_EVENT_GESTURE,NULL);// 2.ui_btnswitchui_btnswitchlv_btn_create(ui_albumpage);lv_obj_set_width(ui_btnswitch,80);lv_obj_set_height(ui_btnswitch,40);lv_obj_align(ui_btnswitch,LV_ALIGN_BOTTOM_MID,0,0);lv_obj_add_flag(ui_btnswitch,LV_OBJ_FLAG_SCROLL_ON_FOCUS);lv_obj_clear_flag(ui_btnswitch,LV_OBJ_FLAG_SCROLLABLE);lv_obj_add_event_cb(ui_btnswitch,ui_event_btnswitch,LV_EVENT_ALL,NULL);lv_obj_set_style_radius(ui_btnswitch,40,LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_color(ui_btnswitch,lv_color_hex(0xFFFFFF),LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_bg_opa(ui_btnswitch,0,LV_PART_MAIN|LV_STATE_DEFAULT);lv_obj_set_style_radius(ui_btnswitch,40,LV_PART_MAIN|LV_STATE_PRESSED);lv_obj_set_style_bg_color(ui_btnswitch,lv_color_hex(0xFFFFFF),LV_PART_MAIN|LV_STATE_PRESSED);lv_obj_set_style_bg_opa(ui_btnswitch,50,LV_PART_MAIN|LV_STATE_PRESSED);lv_obj_set_style_shadow_width(ui_btnswitch,0,LV_PART_MAIN|LV_STATE_DEFAULT);// 3.ui_Labbtnswitchui_Labbtnswitchlv_label_create(ui_btnswitch);lv_obj_set_width(ui_Labbtnswitch,LV_SIZE_CONTENT);lv_obj_set_height(ui_Labbtnswitch,LV_SIZE_CONTENT);lv_obj_set_x(ui_Labbtnswitch,0);lv_obj_set_y(ui_Labbtnswitch,0);lv_obj_set_align(ui_Labbtnswitch,LV_ALIGN_CENTER);lv_label_set_text(ui_Labbtnswitch,exit);}3.工程源码【测试代码完整工程】是在韦东山老师的开源工程上改动的。