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

今天看了一下lvgl的EVENT枚举，有一个事件 LV_EVENT_GESTURE 是响应手势滑屏的，就把电子相册的按键改为手势操作。
参考文章：
1.作者：weixin_46964996，文章： LVGL 的 LV_EVENT_GESTURE
2.我自己的文章： LVGL笔记(2)-电子相册（windows模拟和ESP32-S3）
先看看效果：

1.LV_EVENT_GESTURE事件的回调函数

这个lvgl的事件好像没什么可说的，直接上源码：

static void albumpage_gesture_cb(lv_event_t * e)
{
    lv_event_code_t event = lv_event_get_code(e);
    if(event == LV_EVENT_GESTURE) {
    	//	等待触屏释放
        lv_indev_wait_release(lv_indev_get_act());
        //	获取方向
        lv_dir_t dir = lv_indev_get_gesture_dir(lv_indev_get_act());
        switch(dir){
        case LV_DIR_LEFT:
            imganmitoleft();        printf("to left\n");
            break;
        case LV_DIR_RIGHT:
            imganmitoright();        printf("to right\n");
            break;
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

方向的定义在头文件 《lvgl/src/misc/lv_area.h》 中：

enum {
    LV_DIR_NONE     = 0x00,
    LV_DIR_LEFT     = (1 << 0),
    LV_DIR_RIGHT    = (1 << 1),
    LV_DIR_TOP      = (1 << 2),
    LV_DIR_BOTTOM   = (1 << 3),
    LV_DIR_HOR      = LV_DIR_LEFT | LV_DIR_RIGHT,
    LV_DIR_VER      = LV_DIR_TOP | LV_DIR_BOTTOM,
    LV_DIR_ALL      = LV_DIR_HOR | LV_DIR_VER,
};

typedef uint8_t lv_dir_t;
1
2
3
4
5
6
7
8
9
10
11
12

在相册的界面中设置回调函数：

void ui_albumpage_screen_init(lv_obj_t *parent)
{
......
    lv_obj_add_event_cb(lv_scr_act(), albumpage_gesture_cb, LV_EVENT_GESTURE, NULL);
......
}    
1
2
3
4
5
6
7

2.较为完整的代码

void imganmitoright()
{
    //  如果不是最后一个，指向下一个指针
    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);
    }
}
void imganmitoleft()
{
    //  如果不是第一个，指向上一个指针
    if(g_curImg_p->index > 1 ){
        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);
    }
}
static void albumpage_gesture_cb(lv_event_t * e)
{
    lv_event_code_t event = lv_event_get_code(e);
    if(event == LV_EVENT_GESTURE) {
        lv_indev_wait_release(lv_indev_get_act());
        lv_dir_t dir = lv_indev_get_gesture_dir(lv_indev_get_act());
        switch(dir){
        case LV_DIR_LEFT:
            imganmitoleft();
        printf("to left\n");
            break;
        case LV_DIR_RIGHT:
            imganmitoright();
        printf("to right\n");
            break;
        }
    }
}
static void ui_event_btnswitch(lv_event_t *e)
{
    lv_event_code_t event = lv_event_get_code(e);
    lv_obj_t * ta = lv_event_get_target(e);
    if(event == LV_EVENT_CLICKED) {
		extern      lv_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 
void ui_albumpage_screen_init(lv_obj_t *parent)
{
    // 0.ui_albumpage
    ui_albumpage = lv_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_Image1
    ui_Image1 = lv_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_btnswitch
    ui_btnswitch = lv_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_Labbtnswitch
    ui_Labbtnswitch = lv_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");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

3.工程源码

【测试代码完整工程】是在韦东山老师的开源工程上改动的。