lvgl键盘输入多个文本区域部件

Question

lvgl怎么实现修改新旧密码的功能：有两个textarea作为新旧密码框，其中自定义了一个键盘

static const char* const default_kb_map_num_confirm[] = {
    "1","2","3","\n",
    "4","5","6","\n",
    "7","8","9","\n",
    LV_SYMBOL_OK,"0",LV_SYMBOL_BACKSPACE,""
};

点击哪个textarea，那个textarea就能关联键盘输入东西，当点击键盘上的 LV_SYMBOL_OK键时，判断旧密码是否等于“123456”且新密码框有字符不为空，则打印OK

Answer 1

上午好☀️☀️☀️️
本答案参考ChatGPT-3.5

针对该问题，解决方案如下：

1. 给两个textarea添加事件回调函数，例如：

lv_obj_set_event_cb(old_pwd_ta, ta_event_cb);
lv_obj_set_event_cb(new_pwd_ta, ta_event_cb);

1. 在回调函数中，判断事件类型是否是LV_EVENT_CLICKED，如果是，设置键盘的目标textarea为当前的textarea，例如：

static void ta_event_cb(lv_obj_t * ta, lv_event_t event)
{
    if (event == LV_EVENT_CLICKED) {
        lv_keyboard_set_textarea(kb, ta);
    }
}

1. 在点击键盘的确认键后，判断旧密码是否等于“123456”且新密码框不为空，例如：

if (strcmp(lv_textarea_get_text(old_pwd_ta), "123456") == 0 &&
    strlen(lv_textarea_get_text(new_pwd_ta)) != 0) {
    lv_label_set_text(result_label, "OK");
} else {
    lv_label_set_text(result_label, "Fail");
}

完整代码示例：

void password_change_demo(void)
{
    lv_obj_t * cont = lv_cont_create(lv_scr_act());
    lv_obj_set_width(cont, 200);
    lv_obj_set_height(cont, 150);
    lv_cont_set_layout(cont, LV_LAYOUT_PRETTY_MID);

    lv_obj_t * old_pwd_ta = lv_textarea_create(cont);
    lv_textarea_set_placeholder_text(old_pwd_ta, "Old password");
    lv_obj_set_width(old_pwd_ta, 180);

    lv_obj_t * new_pwd_ta = lv_textarea_create(cont);
    lv_textarea_set_placeholder_text(new_pwd_ta, "New password");
    lv_obj_set_width(new_pwd_ta, 180);

    static const char* const kb_map[] = {
        "1","2","3","\n",
        "4","5","6","\n",
        "7","8","9","\n",
        LV_SYMBOL_OK,"0",LV_SYMBOL_BACKSPACE,""
    };

    lv_obj_t * kb = lv_keyboard_create(lv_scr_act(), NULL);
    lv_keyboard_set_map(kb, LV_KEYBOARD_MODE_NUM, kb_map);
    lv_keyboard_set_real_length(kb, 100);

    lv_obj_t * result_label = lv_label_create(cont);

    lv_obj_set_event_cb(old_pwd_ta, ta_event_cb);
    lv_obj_set_event_cb(new_pwd_ta, ta_event_cb);

    lv_obj_align(cont, NULL, LV_ALIGN_CENTER, 0, 0);

    lv_keyboard_set_textarea(kb, old_pwd_ta);

    static void ta_event_cb(lv_obj_t * ta, lv_event_t event)
    {
        if (event == LV_EVENT_CLICKED) {
            lv_keyboard_set_textarea(kb, ta);
        }
    }

    static void kb_event_cb(lv_obj_t * kb, lv_event_t event)
    {
        if (event == LV_EVENT_RELEASED) {
            const char * kb_text = lv_textarea_get_text(kb->cursor.textarea);
            if (strcmp(kb_text, LV_SYMBOL_OK) == 0) {
                if (strcmp(lv_textarea_get_text(old_pwd_ta), "123456") == 0 &&
                    strlen(lv_textarea_get_text(new_pwd_ta)) != 0) {
                    lv_label_set_text(result_label, "OK");
                } else {
                    lv_label_set_text(result_label, "Fail");
                }
            }
        }
    }

    lv_obj_set_event_cb(kb, kb_event_cb);
}

注意：本示例只适用于LVGL V8.0及以上版本。