本篇文章目录导航

♠♠ LVGL控件-平铺视图、窗口、消息框、微调器部件
♣♣♣♣ 一、LVGL 平铺视图部件
♦♦♦♦♦♦♦♦ 1.1 平铺视图部件组成部分
♦♦♦♦♦♦♦♦ 1.2 平铺视图部件基本API
♦♦♦♦♦♦♦♦ 1.3 实验小演示
♣♣♣♣ 二、LVGL 窗口部件
♦♦♦♦♦♦♦♦ 2.1 窗口部件组成部分
♦♦♦♦♦♦♦♦ 2.2 窗口部件基本API
♦♦♦♦♦♦♦♦ 2.3 实验小演示
♣♣♣♣ 三、LVGL 消息框部件
♦♦♦♦♦♦♦♦ 3.1 消息框部件组成部分
♦♦♦♦♦♦♦♦ 3.2 消息框部件基本API
♦♦♦♦♦♦♦♦ 3.3 实验小演示
♣♣♣♣ 四、LVGL 微调器部件
♦♦♦♦♦♦♦♦ 4.1 微调器部件组成部分
♦♦♦♦♦♦♦♦ 4.2 微调器部件基本API
♦♦♦♦♦♦♦♦ 4.3 实验小演示

LVGL控件-平铺视图、窗口、消息框、微调器部件

一、LVGL 平铺视图部件

平铺视图部件可以实现不同方向的页面切换,用户可以页面中添加内容。

1.1 平铺视图部件组成部分

主体LV_PART_MAIN
滚动条LV_PART_SCROLLBAR

1.2 平铺视图部件基本API

创建平铺视图部件:

lv_obj_t *tileview = lv_tileview_create(parent);

添加页面:

参数2:col_id—列。
参数3:row_id—行。
参数4:LV_DIR_LEFT/ RIGHT / TOP / BOTTOM / HOR / VER / ALL。可“或”组合。

lv_obj_t *tile1 = lv_tileview_add_tile(tileview, 0, 0, LV_DIR_RIGHT);
lv_obj_t *tile2 = lv_tileview_add_tile(tileview, 1, 0, LV_DIR_LEFT);

设置当前显示页面:

lv_tileview_set_tile(tileview, tile2, LV_ANIM_OFF);        /* 根据页面对象设置 */
lv_tileview_set_tile_index(tileview, 1, 0, LV_ANIM_OFF);   /* 根据页面行列设置 */

移除滚动条:

lv_tileview_remove_style(tileview, NULL, LV_PART_SCROLLBAR);    /* 移除滚动条 */

获取当前图块:

lv_tileview_get_tile_active(tileview);

事件:

lv_obj_add_event_cb(tileview, event_cb, LV_EVENT_VALUE_CHANGED, NULL);

1.3 实验小演示

设计一个平铺视图,类似于智能手表的页面滑动。
模型图大概为:

void my_gui(void)
{
    lv_obj_t *tileview = lv_tileview_create(lv_scr_act());

    lv_obj_t *tile1 = lv_tileview_add_tile(tileview, 0, 0, LV_DIR_RIGHT | LV_DIR_BOTTOM);   // 0列0行,可向右、向下滑动
    lv_obj_t *tile2 = lv_tileview_add_tile(tileview, 1, 0, LV_DIR_LEFT | LV_DIR_BOTTOM);    // 1列0行,可向左、向下滑动
    lv_obj_t *tile3 = lv_tileview_add_tile(tileview, 0, 1, LV_DIR_RIGHT | LV_DIR_TOP);      // 0列1行,可向右、向上滑动
    lv_obj_t *tile4 = lv_tileview_add_tile(tileview, 1, 1, LV_DIR_LEFT | LV_DIR_TOP);       // 1列1行,可向左、向上滑动

    lv_obj_t *label1 = lv_label_create(tile1);
    lv_label_set_text(label1, "Please Right Or Down");
    lv_obj_center(label1);

    lv_obj_t *label2 = lv_label_create(tile2);
    lv_label_set_text(label2, "Please Left Or Down");
    lv_obj_center(label2);

    lv_obj_t *label3 = lv_label_create(tile3);
    lv_label_set_text(label3, "Please Right Or Up");
    lv_obj_center(label3);

    lv_obj_t *label4 = lv_label_create(tile4);
    lv_label_set_text(label4, "Please Left Or Up");
    lv_obj_center(label4);
}

演示图片:演示视频:LVGL平铺视图

二、LVGL 窗口部件

窗口部件可以作为一个容器,展现不同功能的页面。

效果图:

2.1 窗口部件组成部分

头部Header
主体Content

2.2 窗口部件基本API

创建窗口部件:

lv_obj_t *win = lv_win_create(parent);

添加标题、按钮:

lv_obj_t *title = lv_win_add_title(win, "Setting");
lv_obj_t *btn = lv_win_add_button(win, LV_SYMBOL_CLOSE, 20);

添加主体内容:

lv_obj_t *content = lv_win_get_content(win);    /* 获取主体 */
lv_obj_t *label = lv_label_create(content);     /* 添加内容 */

设置边框大小和圆角:

lv_obj_set_style_border_width(win, 1, LV_STATE_DEFAULT);
lv_obj_set_style_radius(win, 10, LV_STATE_DEFAULT);

隐藏窗口:

lv_obj_add_flag(win, LV_OBJ_FLAG_HIDDEN);

2.3 实验小演示

设计一个消息弹窗。

lv_obj_t *win, *btn;

static void event_cb(lv_event_t *e)
{
    lv_event_code_t code = lv_event_get_code(e);    /* 获取触发事件类型 */
    lv_obj_t *obj = lv_event_get_target(e);         /* 获取对象 */

    if(code == LV_EVENT_CLICKED)
    {
        if(obj == btn)
        {
            lv_obj_add_flag(win, LV_OBJ_FLAG_HIDDEN);
        }
    }
}

void my_gui(void)
{
    win = lv_win_create(lv_scr_act());
    lv_obj_set_size(win, 400, 240);
    lv_obj_center(win);

    /* 添加标题、按钮 */
    lv_obj_t *title = lv_win_add_title(win, "Message");
    btn = lv_win_add_button(win, LV_SYMBOL_CLOSE, 20);

    /* 添加主体内容 */
    lv_obj_t *content = lv_win_get_content(win);    /* 获取主体 */
    lv_obj_t *label = lv_label_create(content);     /* 添加内容 */
    lv_label_set_text(label, "Hello Couvrir!");
    lv_obj_center(label);

    /* 设置边框大小和圆角 */
    lv_obj_set_style_border_width(win, 2, LV_STATE_DEFAULT);
    lv_obj_set_style_radius(win, 10, LV_STATE_DEFAULT);

    lv_obj_add_event_cb(btn, event_cb, LV_EVENT_CLICKED, NULL);
}

演示图片:演示视频:LVGL窗口-消息弹窗

三、LVGL 消息框部件

消息框部件可以实现弹窗提示,常用于消息通知、确定操作等。

效果图:

3.1 消息框部件组成部分

主体obj
标题title
关闭按钮close_btn
内容content
按钮矩阵btnmatrix

3.2 消息框部件基本API

创建消息框部件:

lv_obj_t *msgbox = lv_msgbox_create(lv_scr_act());

添加标题:

lv_msgbox_add_title(msgbox, "Notice");

添加主体文本:

lv_msgbox_add_text(msgbox, "Do you want to continue?");

添加下方主体按钮:

lv_msgbox_add_footer_button(msgbox, "Continue");

添加上方标题按钮:

lv_msgbox_add_header_button(msgbox, LV_SYMBOL_WIFI);

添加上方关闭按钮:

lv_msgbox_add_close_button(msgbox);

关闭消息框:

lv_msgbox_close(msgbox);

获取按钮索引、文本:

lv_obj_t *target = lv_event_get_current_target(e);    /* 获取当前触发源 */
lv_msgbox_get_active_botton(target);                  /* 获取按钮索引 */
lv_msgbox_get_active_botton_text(target);             /* 获取按钮文本 */

清除消息框隐藏属性,出现弹窗提示:

lv_obj_clear_flag(msgbox, LV_OBJ_FLAG_HIDDEN);

3.3 实验小演示

设计小弹窗,点击上方的关闭按钮,则关闭小弹窗。与2.3实验类似。

void my_gui(void)
{
    lv_obj_t *msgbox = lv_msgbox_create(lv_scr_act());      /* 创建消息框 */

    lv_msgbox_add_title(msgbox, "Notice");                  /* 添加标题 */
    lv_msgbox_add_text(msgbox, "Do you want to continue?"); /* 添加文本内容 */
    lv_msgbox_add_header_button(msgbox, LV_SYMBOL_WIFI);    /* 添加上方符号按钮 */
    lv_msgbox_add_footer_button(msgbox, "Continue");        /* 添加下方按钮 */
    lv_msgbox_add_footer_button(msgbox, "Close");           /* 添加下方按钮 */
    lv_msgbox_add_close_button(msgbox);                     /* 添加关闭按钮 */
}

演示图片:

四、LVGL 微调器部件

微调器部件本质上就是一个数字文本,常用于精确调节某个参数的值。

效果图:

4.1 微调器部件组成部分

主体LV_PART_MAIN
光标LV_PART_CURSOR

4.2 微调器部件基本API

创建微调器部件:

lv_obj_t *spinbox = lv_spinbox_create(parent);

数值递增、递减:

lv_spinbox_increment(spinbox);    /* 递增 */
lv_spinbox_decrement(spinbox);    /* 递减 */

设置步进值、范围值:

lv_spinbox_set_step(spinbox, 200);             /* 设置步进值,默认为1 */
lv_spinbox_set_range(spinbox, -1000, 1000);    /* 设置范围值,默认±99999 */

设置当前值:

lv_spinbox_set_value(spinbox, 400);

设置数字格式、光标位置:

lv_spinbox_set_digit_format(spinbox, 4, 2);    /* 设置数字位数、小数点位置 */
lv_spinbox_set_cursor_pos(spinbox, 3);         /* 设置光标位置 */

获取当前值:

lv_spinbox_get_value(spinbox);    /* 返回值为整数,而非小数 */

4.3 实验小演示

设计一个微调框,可左右移动光标,可上下调节数值。范围是-1000~1000,步进值为1。

lv_obj_t *spinbox, *btn1, *btn2, *btn3, *btn4;
uint8_t pos = 0;

static void event_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);    /* 获取事件类型 */
    lv_obj_t *obj = lv_event_get_target(e);         /* 获取对象 */

    if(code == LV_EVENT_CLICKED)
    {
        if(obj == btn1)
        {
            pos = pos >= 4 ? 4 : pos + 1;
            lv_spinbox_set_cursor_pos(spinbox, pos);         /* 设置光标位置 */
        }else if(obj == btn2)
        {
            pos = pos <= 0 ? 0 : pos - 1;
            lv_spinbox_set_cursor_pos(spinbox, pos);         /* 设置光标位置 */
        }else if(obj == btn3)
        {
            lv_spinbox_increment(spinbox);                   /* 递增 */
            printf("%d\r\n", lv_spinbox_get_value(spinbox)); /* 返回值为整数,而非小数 */
        }else if(obj == btn4)
        {
            lv_spinbox_decrement(spinbox);                   /* 递减 */
            printf("%d\r\n", lv_spinbox_get_value(spinbox)); /* 返回值为整数,而非小数 */
        } 
    }
}

void my_gui(void)
{
    spinbox = lv_spinbox_create(lv_scr_act());
    lv_obj_center(spinbox);

    btn1 = lv_button_create(lv_scr_act());                    /* 创建按钮部件 */
    lv_obj_align(btn1, LV_ALIGN_CENTER, -100, 0);

    lv_obj_t *label1 = lv_label_create(btn1);
    lv_label_set_text(label1, LV_SYMBOL_LEFT);

    btn2 = lv_btn_create(lv_scr_act());
    lv_obj_align(btn2, LV_ALIGN_CENTER, 100, 0);

    lv_obj_t *label2 = lv_label_create(btn2);
    lv_label_set_text(label2, LV_SYMBOL_RIGHT);

    btn3 = lv_btn_create(lv_scr_act());
    lv_obj_align(btn3, LV_ALIGN_CENTER, 0, -50);

    lv_obj_t *label3 = lv_label_create(btn3);
    lv_label_set_text(label3, LV_SYMBOL_PLUS);

    btn4 = lv_btn_create(lv_scr_act());
    lv_obj_align(btn4, LV_ALIGN_CENTER, 0, 50);

    lv_obj_t *label4 = lv_label_create(btn4);
    lv_label_set_text(label4, LV_SYMBOL_MINUS);

    lv_obj_add_event_cb(btn1, event_cb, LV_EVENT_CLICKED, NULL);   /* 添加事件 */
    lv_obj_add_event_cb(btn2, event_cb, LV_EVENT_CLICKED, NULL);   /* 添加事件 */
    lv_obj_add_event_cb(btn3, event_cb, LV_EVENT_CLICKED, NULL);   /* 添加事件 */
    lv_obj_add_event_cb(btn4, event_cb, LV_EVENT_CLICKED, NULL);   /* 添加事件 */

    lv_spinbox_set_range(spinbox, -1000, 1000);    /* 设置范围值,默认±99999 */
    lv_spinbox_set_step(spinbox, 10);               /* 设置步进值,默认为1 */

    lv_spinbox_set_digit_format(spinbox, 4, 0);    /* 设置数字位数、小数点位置 */
    lv_spinbox_set_cursor_pos(spinbox, pos);       /* 设置光标位置 */
}

演示图片:演示视频:LVGL微调器

总结

通过本节内容,我们学习到了平铺视图、窗口、消息框、微调器部件,并配备了例程去锻炼动手能力,后面就可以通过举一反三,事事顺利。