LVGL官方+100ASK合力打造的中文输入(拼音输入法)组件,让LVGL支持中文输入!

前言

LVGL V8.3 版本支持中文输入(拼音输入法)啦!
LVGL中的中文输入组件称为:lv_ime_pinyin,完全由我们百问网团队编写而成,合入到LVGL主仓库前代码托管在gitee和github平台中:

效果演示

之前版本的演示视频:

LVGL中的中文输入采用拼音输入法,支持26键和9键(九宫格)的布局模式,其中九宫格模式下可以切换到对小屏幕非常友好的数字键盘,使用起来非常顺手!

在这里插入图片描述

上手体验

想亲自体验 lv_ime_pinyin 的同学,可以前往百问网的LVGL中文站点(加载速度快),lv_ime_pinyin 在线demo体验地址:

百问网的LVGL中文站点和LVGL官方站点保持一致并实时更新!
直接访问: lvgl.100ask.net 会跳转到 lvgl v8.2 版本的文档,
这个版本还有中文翻译,v7.11也有中文翻译。该站点的所有版本:

深入了解 lv_ime_pinyin

关于 lv_ime_pinyin 的更多信息:

lv_ime_pinyin 在v8.3发布前一天匆忙完成,留下了4个问题,所以直接使用 8.3 版本的 ime_pinyin 会有问题(keil上甚至会报错) 。虽然当时已经尽快修复并提交,但已经只能提交到 9.0 版本。

解决办法是直接将 9.0 版本的ime_pinyin 部分的代码覆盖过来,这样就不会有问题

lv_ime_pinyin 的 v8.x版本有一个bug,在lvgl 9.x已经修复,bug描述:

关闭中文输入法以后曾经被输入法覆盖的控件无法使用了,好像输入法还在那个地方只是不显示了

修复:

你也可以自己解决这个bug,在 lv_ime_pinyin_constructor 函数中如下修改:

//lv_obj_set_size(obj, LV_PCT(100), LV_PCT(55));  将这行改为下面这行
lv_obj_align(obj, LV_ALIGN_BOTTOM_MID, 0, 0);

您好,我移植了v8.3.9版本的拼音输入法,按照文档给的例程,可以正常使用

但是在我尝试将kb放到lv_layer_top()时,输入法无法正常使用,请问这个问题该如何解决。

static void ta_event_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * ta        = lv_event_get_target(e);
    lv_obj_t * kb        = lv_event_get_user_data(e);

    if(code == LV_EVENT_FOCUSED) {
        if(lv_indev_get_type(lv_indev_get_act()) != LV_INDEV_TYPE_KEYPAD) {
            lv_keyboard_set_textarea(kb, ta);
            lv_obj_clear_flag(kb, LV_OBJ_FLAG_HIDDEN);
        }
    } else if(code == LV_EVENT_CANCEL) {
        lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);
        lv_obj_clear_state(ta, LV_STATE_FOCUSED);
        lv_indev_reset(NULL, ta); /*To forget the last clicked object to make it focusable again*/
    }
}

void main()
{
    lv_obj_t * pinyin_ime = lv_ime_pinyin_create(lv_scr_act());
    lv_obj_set_style_text_font(pinyin_ime, &lv_font_simsun_16_cjk, 0);
    // lv_ime_pinyin_set_dict(pinyin_ime, your_dict); // Use a custom dictionary. If it is not set, the built-in
    // dictionary will be used.

    /* ta1 */
    lv_obj_t * ta1 = lv_textarea_create(lv_scr_act());
    lv_textarea_set_one_line(ta1, true);
    lv_obj_set_style_text_font(ta1, &lv_font_simsun_16_cjk, 0);
    lv_obj_align(ta1, LV_ALIGN_TOP_LEFT, 0, 0);

    /*Create a keyboard and add it to ime_pinyin*/
    lv_obj_t * kb = lv_keyboard_create(lv_layer_top()); // 将该键盘的父对象设置为lv_layer_top()
    lv_ime_pinyin_set_keyboard(pinyin_ime, kb);
    lv_keyboard_set_textarea(kb, ta1);

    lv_obj_add_event_cb(ta1, ta_event_cb, LV_EVENT_ALL, kb);

    /*Get the cand_panel, and adjust its size and position*/
    lv_obj_t * cand_panel = lv_ime_pinyin_get_cand_panel(pinyin_ime);
    lv_obj_set_size(cand_panel, LV_PCT(100), LV_PCT(10));
    lv_obj_align_to(cand_panel, kb, LV_ALIGN_OUT_TOP_MID, 0, 0);
    lv_obj_set_parent(cand_panel, lv_layer_top());
}

顺便一提,我在使用拼音输入法的时候,如果点击空格,再点击文字的话,输入的内容将会多出一个字母。

例如:输入“好”,在我输入hao后,点击空格,再选择“好”,文本输入框将会显示为“h好”,输入两个空格的情况是“ha好”