STM32移植LVGL链表·

LVGL双向链表实现页面切换

Hugh

Hugh

881 0

1.概述

通过LVGL双向链表实现页面切换功能,使用星允派Nebula piSTM32F103开发板平台,板子2.8TFT液晶触摸显示器。实现功能:创建四个颜色不同的页面,通过手势上/下/左/右滑动依次切换界面。

2.主函数

依次创建4个页面,初始化链表,并显示页面1

void lv_example_anim_1(void)
{
    create_page1();
    create_page2();
    create_page3();
    create_page4(); 
    
    ry_list_init();//初始化链表
    
    lv_scr_load(one);//显示page1
    
    LV_LOG_USER("begin");
}

3.链表初始化

初始化链表,并添加4个页面。

static lv_obj_t *one_btn,*two_btn,*three_btn,*four_btn;
static lv_obj_t *label,*label2,*label3,*label4;

static lv_obj_t *one,*two,*three,*four;

typedef struct my_page
{
    uint32_t obj_addr;
} my_page_t; //结构体存储页面地址

lv_ll_t ll_test;

my_page_t *page_temp;
/*----------------------------------------------------------------------------------------------
*初始化链表,将页面依次添加到链表,并指向头节点
*
-------------------------------------------------------------------------------------------------*/
void ry_list_init(void)
{   
    _lv_ll_init(&ll_test, sizeof(my_page_t));

    page_temp = _lv_ll_ins_head(&ll_test);
    page_temp->obj_addr = (uint32_t)four;
    page_temp = _lv_ll_ins_head(&ll_test);
    page_temp->obj_addr = (uint32_t)three;
    page_temp = _lv_ll_ins_head(&ll_test);
    page_temp->obj_addr = (uint32_t)two;
    page_temp = _lv_ll_ins_head(&ll_test);
    page_temp->obj_addr = (uint32_t)one;
    
    page_temp = _lv_ll_get_head(&ll_test);
}

4.创建页面并关联手势事件

/*--------------------------------------------------------------------------------------------------
*创建4个不同颜色页面,并关联手势事件
*
---------------------------------------------------------------------------------------------------*/
void create_page1(void)
{
    one = lv_obj_create(NULL); //在默认屏上创建obj对象
    lv_obj_set_style_bg_color(one,lv_color_hex(0xeeffcc), LV_STATE_DEFAULT); // obj背景色设成黄色
    lv_obj_set_size(one, LV_HOR_RES, LV_VER_RES); // 设置到屏幕大小
    
    one_btn = lv_btn_create(one);
    lv_obj_align(one_btn, LV_ALIGN_TOP_MID, 0, 20);

    label = lv_label_create(one_btn);             // 创建label
    lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);         // label居屏幕中心对齐
    lv_label_set_text(label, "ONE");                    // label显示ONE
    lv_obj_add_event_cb(one,ry_gesture_event,LV_EVENT_GESTURE,NULL);
}
void create_page2(void)
{
    two = lv_obj_create(NULL); // 创建新屏幕但未加载到显示
    lv_obj_set_style_bg_color(two,lv_color_hex(0x00d8db), LV_STATE_DEFAULT); // 背影色设成蓝色
    lv_obj_set_size(two, LV_HOR_RES, LV_VER_RES); //设置到屏幕大小

    two_btn = lv_btn_create(two);
    lv_obj_align(two_btn, LV_ALIGN_TOP_MID, 0, 20);

    label2 = lv_label_create(two_btn);                       // 创建label
    lv_obj_align(label2, LV_ALIGN_CENTER, 0, 0);         // 居中对齐
    lv_label_set_text(label2, "TWO");                    // label上显示TWO
    lv_obj_add_event_cb(two,ry_gesture_event,LV_EVENT_GESTURE,NULL);
}
void create_page3(void)
{
    three = lv_obj_create(NULL); // 创建新屏幕但未加载到显示
    lv_obj_set_style_bg_color(three,lv_color_hex(0x00FF00), LV_STATE_DEFAULT); // 背影色设成蓝色
    lv_obj_set_size(three, LV_HOR_RES, LV_VER_RES); //设置到屏幕大小

    three_btn = lv_btn_create(three);
    lv_obj_align(three_btn, LV_ALIGN_TOP_MID, 0, 20);

    label3 = lv_label_create(three_btn);                       // 创建label
    lv_obj_align(label3, LV_ALIGN_CENTER, 0, 0);         // 居中对齐
    lv_label_set_text(label3, "THREE");                    // label上显示THREE

    lv_obj_add_event_cb(three,ry_gesture_event,LV_EVENT_GESTURE,NULL);
}
void create_page4(void)
{
    four = lv_obj_create(NULL); // 创建新屏幕但未加载到显示
    lv_obj_set_style_bg_color(four,lv_color_hex(0x0000FF), LV_STATE_DEFAULT); // 背影色设成蓝色
    lv_obj_set_size(four, LV_HOR_RES, LV_VER_RES); //设置到屏幕大小

    four_btn = lv_btn_create(four);
    lv_obj_align(four_btn, LV_ALIGN_TOP_MID, 0, 20);

    label4 = lv_label_create(four_btn);                       // 创建label
    lv_obj_align(label4, LV_ALIGN_CENTER, 0, 0);         // 居中对齐
    lv_label_set_text(label4, "FOUR");                    // label上显示FOUR

    lv_obj_add_event_cb(four,ry_gesture_event,LV_EVENT_GESTURE,NULL);
}

5.手势事件函数中处理页面切换

核心内容为:根据手势前后移动节点实现页面切换显示。

/*--------------------------------------------------------------------------------------------------
*获取节点
*
-------------------------------------------------------------------------------------------------*/
void ry_get_prev(void)
{
    page_temp = _lv_ll_get_prev(&ll_test,page_temp);
    if(page_temp == NULL)
    {
        page_temp = _lv_ll_get_head(&ll_test);
        LV_LOG_USER("the begin page,no more!");
    }
}
void ry_get_next(void)
{
    page_temp = _lv_ll_get_next(&ll_test,page_temp);
    if(page_temp == NULL)
    {
        page_temp = _lv_ll_get_tail(&ll_test);
        LV_LOG_USER("the end page,no more!");
    }
}
/*------------------------------------------------------------------------------------------------
*手势事件函数
*
-------------------------------------------------------------------------------------------------*/
void ry_gesture_event(lv_event_t *e)
{
    lv_dir_t dir = lv_indev_get_gesture_dir(lv_indev_get_act());//获取手势方向
    lv_obj_t *target_obj = lv_event_get_target_obj(e);

    switch(dir)
    {
        case LV_DIR_TOP://从上往下
        {
            ry_get_prev();
            lv_scr_load_anim((lv_obj_t *)(page_temp->obj_addr), LV_SCR_LOAD_ANIM_OUT_TOP, 1000, 0, false);
            break;
        }
        case LV_DIR_BOTTOM://从下往上
        {
            ry_get_next();
            lv_scr_load_anim((lv_obj_t *)(page_temp->obj_addr), LV_SCR_LOAD_ANIM_OUT_BOTTOM, 1000, 0, false);
            break;
        }
        case LV_DIR_LEFT://从左往右
        {
            ry_get_next();
            lv_scr_load_anim((lv_obj_t *)(page_temp->obj_addr), LV_SCR_LOAD_ANIM_OUT_LEFT, 1000, 0, false);
            break;
        }
        case LV_DIR_RIGHT://从右往左
        {
            ry_get_prev();  
            lv_scr_load_anim((lv_obj_t *)(page_temp->obj_addr), LV_SCR_LOAD_ANIM_OUT_RIGHT, 1000, 0, false);
            break;
        }
        default:
            break;
    }

}

相关文章

优先推荐同专题、同标签和同作者内容,补足热门文章。

评论 0

登录 后参与评论

评论

成为第一个评论的人