本篇文章目录导航

♠♠ 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 扩展知识点:如何显示带有透明度通道的图片?
♦♦♦♦♦♦♦♦ 3.4 实验小演示
♣♣♣♣ 四、LVGL 选项卡部件
♦♦♦♦♦♦♦♦ 4.1 选项卡部件组成部分
♦♦♦♦♦♦♦♦ 4.2 选项卡部件基本API
♦♦♦♦♦♦♦♦ 4.3 实验小演示

LVGL控件-文本区域、键盘、图片按钮、选项卡部件

一、LVGL 文本区域部件

文本区域部件即文本输入框,用户可以在其中输入文本内容。

效果图:

1.1 文本区域部件组成部分

主体LV_PART_MAIN
滚动条LV_PART_SCROLLBAR
所选文本LV_PART_SELECTED
光标LV_PART_CURSOR
占位符TEXTAREA_PLACEHOLDER

1.2 文本区域部件基本API

创建文本区域部件:

lv_obj_t *ta = lv_textarea_create(parent);

添加文本:

lv_textarea_add_char(ta, 'A');        /* 添加一个字符到当前光标处 */
lv_textarea_add_text(ta, "BCDEF");    /* 添加字符串到当前光标处 */

lv_obj_t *keyboard = lv_keyboard_create(lv_scr_act());    /* 创建键盘部件 */
lv_keyboard_set_textarea(keyboard, ta);                   /* 关联键盘和文本区域部件 */

设置光标位置:

lv_textarea_set_cursor_pos(ta, 0);    /* 0:最左侧,LV_TEXTAREA_CURSOR_LAST:最右侧 */

删除文本:

lv_textarea_delete_char(ta);            /* 删除光标左侧的一个字符 */
lv_textarea_delete_char_forward(ta);    /* 删除光标右侧的一个字符 */

设置模式:

lv_textarea_set_one_line(ta, true);            /* 单行模式 */
lv_textarea_set_password_mode(ta, true);       /* 密码模式(隐藏输入的内容)*/
lv_textarea_set_password_show_time(ta, 100);   /* 密码显示时间 */

限制字符输入:

lv_textarea_set_accepted_chars(ta, "0123456789");    /* 限制接收的字符 */
lv_textarea_set_max_length(ta, 6);                   /* 限制字符长度 */

设置占位符:

lv_textarea_set_placeholder_text(ta, "password");    /* 提示输入密码 "/

获取文本:

const char *txt = lv_textarea_get_text(ta);    /* 获取文本框文本 */
static void event_cb(lv_event_t *e)
{
    lv_obj_t *target = lv_event_get_target(e);
    const char *txt = lv_textarea_get_text(target);
    if(strcmp(txt, "123456") == 0)
    {
        printf("pass \n");
    }
    printf("%s \n", txt);
}

lv_obj_add_event_cb(ta, event_cb, LV_EVENT_VALUE_CHANGED, NULL);

对比文本内容:

strcmp(const char *s1, const char *s2);    /* 当s1=s2时,返回0 */

1.3 实验小演示

设计密码输入界面,密码输入1s后隐藏,只能输入6位数字(0~9),正确密码为123456。

static void event_cb(lv_event_t *e)
{
    lv_obj_t *target = lv_event_get_target(e);
    const char *txt = lv_textarea_get_text(target);

    printf("%s \n", txt);

    if(strcmp(txt, "123456") == 0)
    {
        printf("pass \n");
    }
}

void my_gui(void)
{
    lv_obj_t *ta = lv_textarea_create(lv_scr_act());

    lv_obj_t *keyboard = lv_keyboard_create(lv_scr_act());      /* 创建键盘部件 */
    lv_keyboard_set_textarea(keyboard, ta);                     /* 关联键盘和文本区域部件 */

    lv_textarea_set_cursor_pos(ta, LV_TEXTAREA_CURSOR_LAST);    /* 0:最左侧,LV_TEXTAREA_CURSOR_LAST:最右侧 */

    lv_textarea_set_one_line(ta, true);                         /* 单行模式 */

    lv_textarea_set_password_mode(ta, true);                    /* 密码模式(隐藏输入的内容)*/
    lv_textarea_set_password_show_time(ta, 1000);               /* 密码显示时间 */

    lv_textarea_set_accepted_chars(ta, "0123456789");           /* 限制接收的字符 */
    lv_textarea_set_max_length(ta, 6);                          /* 限制字符长度 */

    lv_textarea_set_placeholder_text(ta, "password");           /* 提示输入密码 */

    lv_obj_add_event_cb(ta, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
}

演示图片:演示视频:LVGL文本区域+键盘。输入6位数密,正确密码123456

二、LVGL 键盘部件

键盘部件可用于输入文本内容,其本质上就是一个特殊的按钮矩阵。

2.1 键盘部件组成部分

主体LV_PART_MAIN
按钮LV_PART_ITEMS

2.2 键盘部件基本API

创建键盘部件:

lv_obj_t *kb = lv_keyboard_create(parent);

关联文本框:

lv_obj_t *ta = lv_textarea_create(lv_scr act());    /* 创建文本区域部件 */
lv_keyboard_set_textarea(kb, ta);                   /* 关联键盘和文本区域部件 */

设置按键弹窗:

lv_keyboard_set_popovers(kb, true);    /* 允许按键弹窗提示 */

设置键盘模式:

lv_keyboard_set_mode(kb, LV_KEYBOARD_MODE_NUMBER);    /* 数字键盘模式 */

2.3 实验小演示

设计密码输入界面,密码输入1s后隐藏,只能输入6位数字(0~9),正确密码为123456。

static void event_cb(lv_event_t *e)
{
    lv_obj_t *target = lv_event_get_target(e);
    const char *txt = lv_textarea_get_text(target);

    printf("%s \n", txt);

    if(strcmp(txt, "123456") == 0)
    {
        printf("pass \n");
    }
}

void my_gui(void)
{
    lv_obj_t *ta = lv_textarea_create(lv_scr_act());

    lv_obj_t *keyboard = lv_keyboard_create(lv_scr_act());      /* 创建键盘部件 */
    lv_keyboard_set_textarea(keyboard, ta);                     /* 关联键盘和文本区域部件 */

    lv_textarea_set_cursor_pos(ta, LV_TEXTAREA_CURSOR_LAST);    /* 0:最左侧,LV_TEXTAREA_CURSOR_LAST:最右侧 */

    lv_textarea_set_one_line(ta, true);                         /* 单行模式 */

    lv_textarea_set_password_mode(ta, true);                    /* 密码模式(隐藏输入的内容)*/
    lv_textarea_set_password_show_time(ta, 1000);               /* 密码显示时间 */

    lv_textarea_set_accepted_chars(ta, "0123456789");           /* 限制接收的字符 */
    lv_textarea_set_max_length(ta, 6);                          /* 限制字符长度 */

    lv_textarea_set_placeholder_text(ta, "password");           /* 提示输入密码 */

    lv_keyboard_set_popovers(keyboard, true);                   /* 允许按键弹窗提示 */

    lv_keyboard_set_mode(keyboard, LV_KEYBOARD_MODE_NUMBER);    /* 数字键盘模式 */

    lv_obj_add_event_cb(ta, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
}

演示图片:演示视频:LVGL数字键盘,输入6位数字密码,正确密码为123456

三、LVGL 图片按钮部件

图片按钮部件类似于按钮部件,不同的是,用户可以在其中设置图片。

3.1 图片按钮部件组成部分

主体LV_PART_MAIN

3.2 图片按钮部件基本API

创建图片按钮部件:

lv_obj_t *imgbtn = lv_imagebutton_create(parent);

设置图片源、按钮大小:

typedef enum {
    LV_IMAGEBUTTON_STATE_RELEASED,
    LV_IMAGEBUTTON_STATE_PRESSED,
    LV_IMAGEBUTTON_STATE_DISABLED,
    LV_IMAGEBUTTON_STATE_CHECKED_RELEASED,
    LV_IMAGEBUTTON_STATE_CHECKED_PRESSED,
    LV_IMAGEBUTTON_STATE_CHECKED_DISABLED,
    _LV_IMAGEBUTTON_STATE_NUM,
} lv_imagebutton_state_t;

lv_imagebutton_set_src(imgbtn, LV_IMAGEBUTTON_STATE_..., src_left, src_mid, src_right);    /* 设置某个状态的图片源 */
lv_obj_set_size(imgbtn, 64 * 3, 64);                                             /* 设置图片按钮大小 */

设置按钮状态:

lv_imgbtn_set_state(imgbtn, LV_IMGBTN_STATE_PRESSED);    /* 设置按下状态 */

3.3 扩展知识点:如何显示带有透明度通道的图片?

1、准备一张带有透明度通道的图片。
2、官方图片转换工具中,色彩格式选择:CF_TRUE_COLOR_ALPHA
3、声明图片并调用即可。

LV_IMG_DECLARE(img_cool);

static void event_cb(lv_event_t *e)
{
    lv_obj_set_style_img_recolor(imgbtn, lv_color_hex(0x007ffe), LV_STATE_DEFAULT);
    lv_obj_set_style_img_recolor_opa(imgbtn, 150, LV_STATE_DEFAULT);
}

lv_obj_t *imgbtn = lv_imgbtn_create(parent);
lv_imagebutton_set_src(imgbtn, LV_IMAGEBUTTON_STATE_RELEASEED, NULL, &img_cool, NULL);    /* 设置某个状态的图片源 */
lv_obj_set_size(imgbtn, 64, 64);                                                /* 设置图片按钮大小 */
lv_obj_add_event_cb(imgbtn, event_cb, LV_EVENT_PRESSED, NULL);

3.4 实验小演示

设计一个图片按钮。点击按钮后图片变亮。
步骤:
1、转换图片成数组。使用LVGL官方图片转换工具。LVGL官方/Tools/Image Converter。
2、选择对应LVGL版本,我此处是V9。放入图片,选择格式,点击Convert即可自动下载.c文件。我的是picture_demo.c。
3、把.c文件放入LVGL模拟工程中,即lv_port_win_codeblocks-master。
4、打开工程,添加.c文件到工程内。
5、填入APP代码。

lv_obj_t *imgbtn;
LV_IMG_DECLARE(picture_demo);

static void event_cb(lv_event_t *e)
{
    lv_obj_set_style_img_recolor(imgbtn, lv_color_hex(0xFFFFFF), LV_STATE_DEFAULT);
    lv_obj_set_style_img_recolor_opa(imgbtn, 150, LV_STATE_DEFAULT);
}

void my_gui(void)
{
    imgbtn = lv_imagebutton_create(lv_scr_act());

    lv_imagebutton_set_src(imgbtn, LV_IMAGEBUTTON_STATE_RELEASED, NULL, &picture_demo, NULL);  /* 设置某个状态的图片源 */
    lv_obj_set_size(imgbtn, 98, 86);                                                           /* 设置图片按钮大小 */

    lv_obj_add_event_cb(imgbtn, event_cb, LV_EVENT_PRESSED, NULL);
}

演示图片:演示视频:LVGL图片按钮

四、LVGL 选项卡部件

选项卡部件可以实现多页面切换,用户可以在不同的页面上添加内容。

效果图:

4.1 选项卡部件组成部分

主体lv_obj
按钮lv_btnmatrix

4.2 选项卡部件基本API

创建选项卡部件:

lv_obj_t *tabview = lv_tabview_create(parent);

添加选项卡:

lv_obj_t *tab1 = lv_tabview_add_tab(tabview, "Tab 1");
lv_obj_t *tab2 = lv_tabview_add_tab(tabview, "Tab 2");

设置当前选中的选项卡:

lv_tabview_set_act(tabview, 1, LV_ANIM_OFF);    /* 索引从0开始 */

设置选项卡栏位置:

lv_tabview_set_tab_bar_position(tabview, LV_DIR_LEFT / RIGHT / TOP / BOTTOM);

设置选项卡栏大小:

lv_tabview_set_tab_bar_size(tabview, size);

获取按钮部分:

lv_obj_t *btn = lv_tabview_get_tab_btns(tabview);    /* 获取按钮部分 */

/* 未选中的按钮 */
lv_obj_set_style_bg_color(btn, lv_color_hex(0xb7472a), LV_PART_ITEMS | LV_STATE_DEFAULT);
lv_obj_set_style_bg_opa(btn, 200, LV_PART_ITEMS | LV_STATE_DEFAULT);
lv_obj_set_style_text_color(btn, lv_color_hex(0xf33f3), LV_PART_ITEMS | LV_STATE_DEFAULT);

/* 选中的按钮 */
lv_obj_set_style_bg_color(btn, lv_color_hex(Oxelele1), LV_PART_ITEMS | LV_STATE_CHECKED);
lv_obj_set_style_bg_opa(btn, 200, LV_PART_ITEMS | LV_STATE_CHECKED);
lv_obj_set_style_text_color(btn, lv_color_hex(Oxb7472a), LV_PART_ITEMS | LV_STATE_CHECKED);
lv_obj_set_style_border_width(btn, O, LV_PART_ITEMS | LV_STATE_CHECKED);

获取主体部分:

lv_obj_t *obj = lv_tabview_get_content(tabview);    /* 获取主体部分 */
lv_obj_set_style_bg_color(obj, lv_color_hex(0xffffff), LV_STATE_DEFAULT);
lv_obj_set_style_bg_opa(obj, 255, LV_STATE_DEFAULT);

4.3 实验小演示

设计小说本,通过点击选项卡进行切章处理。

void my_gui(void)
{
    lv_obj_t *tabview = lv_tabview_create(lv_scr_act());    /* 创建选项卡部件 */
    lv_tabview_set_tab_bar_position(tabview, LV_DIR_LEFT);  /* 设置选项卡栏位置 */
    lv_tabview_set_tab_bar_size(tabview, 100);              /* 设置选项卡栏大小 */

    lv_obj_t *tab1 = lv_tabview_add_tab(tabview, "Chapter 1");  /* 添加选项卡 */
    lv_obj_t *tab2 = lv_tabview_add_tab(tabview, "Chapter 2");  /* 添加选项卡 */
    lv_obj_t *tab3 = lv_tabview_add_tab(tabview, "Chapter 3");  /* 添加选项卡 */
    lv_obj_t *tab4 = lv_tabview_add_tab(tabview, "Chapter 4");  /* 添加选项卡 */
    lv_obj_t *tab5 = lv_tabview_add_tab(tabview, "Chapter 5");  /* 添加选项卡 */

    lv_tabview_set_act(tabview, 4, LV_ANIM_OFF);            /* 设置当前选中的选项卡,索引从0开始 */

    /* 各个选项卡内容 */
    lv_obj_t * label = lv_label_create(tab1);
    lv_label_set_text(label, "The First Chapter");

    label = lv_label_create(tab2);
    lv_label_set_text(label, "The Second Chapter");

    label = lv_label_create(tab3);
    lv_label_set_text(label, "The Third Chapter");

    label = lv_label_create(tab4);
    lv_label_set_text(label, "The Forth Chapter");

    label = lv_label_create(tab5);
    lv_label_set_text(label, "The Fifth Chapter");
}

演示图片:演示视频:LVGL选项卡-小说

总结

在本文中,引入了文本区域、键盘、图片按钮、选项卡的部件,能够更全面的去了解LVGL部件的使用。实验小演示请一定要观看和动手哟。