[English]

Keyboard（键盘） (lv_keyboard)

Overview（概述）

显示原文

The Keyboard object is a special Button matrix with predefined keymaps and other features to realize a virtual keyboard to write texts into a Text area.


键盘(lv_keyboard)对象是一个特殊的 按钮矩阵 ，自身实现了按键(map)映射和其他功能，目的是用于实现一个虚拟键盘将文本写入 文本框 。

Parts and Styles（零件与样式）

显示原文

Similarly to Button matrices Keyboards consist of 2 part:

  • LV_PART_MAIN The main part. Uses all the typical background properties

  • LV_PART_ITEMS The buttons. Also uses all typical background properties as well as the text properties.


与按钮矩阵类似，键盘由 2 部分组成：

  • LV_PART_MAIN 主要部分(自身背景部分)，使用所有组件默认都有的典型的背景样式属性。

  • LV_PART_ITEMS 键盘中的按钮。使用所有典型的背景属性以及 text 属性。

Usage（用法）

Modes（模式）

显示原文

The Keyboards have the following modes:

The TEXT modes' layout contains buttons to change mode.

To set the mode manually, use lv_keyboard_set_mode(kb, mode). The default mode is LV_KEYBOARD_MODE_TEXT_UPPER.


键盘可以切换下面这几种输入模式：

更改模式会更改键盘的按钮的文字甚至布局。

您可以通过 lv_keyboard_set_mode(kb, mode) 函数手动设置模式。默认的模式是 LV_KEYBOARD_MODE_TEXT_UPPER。

Assign Text area（指定文本框）

显示原文

You can assign a Text area to the Keyboard to automatically put the clicked characters there. To assign the text area, use lv_keyboard_set_textarea(kb, ta).


你可以将 Text area 分配给键盘绑定，之后点击键盘上的按钮就能更改文本框中的内容。可以通过 lv_keyboard_set_textarea(kb, ta) 函数将文本框分配给键盘绑定。

Key Popovers（按键弹出提示）

显示原文

To enable key popovers on press, like on common Android and iOS keyboards, use lv_keyboard_set_popovers(kb, true). The default control maps are preconfigured to only show the popovers on keys that produce a symbol and not on e.g. space. If you use a custom keymap, set the LV_BUTTONMATRIX_CTRL_POPOVER flag for all keys that you want to show a popover.

Note that popovers for keys in the top row will draw outside the widget boundaries. To account for this, reserve extra free space on top of the keyboard or ensure that the keyboard is added after any widgets adjacent to its top boundary so that the popovers can draw over those.

The popovers currently are merely a visual effect and don't allow selecting additional characters such as accents yet.


这个效果就像常见的安卓和iOS键盘上的效果：按下按键时会有在相应的按键之上弹出该按键提示当前按下的按钮。调用函数 lv_keyboard_set_popovers(kb, true) 即可得到这样得效果。默认控制map默认的配置是只在有text的按键上显示弹出提示框，而不会在空格键(space)上显示。如果使用自定义的按键map，请为所有要显示弹出框的按键设置 LV_BUTTONMATRIX_CTRL_POPOVER 标志。

请注意，顶行中的按键的弹出窗口将被绘制在超过键盘的边界之外。因此，建议在键盘顶部保留额外的可用空间，或确保在其顶部边界附近的任何其他控件(对象)之后再添加或者创建键盘，来确保弹出窗口不被这些控件遮挡。

目前，弹出窗口仅仅是一种视觉效果，还不支持使用其他字符，例如重音符号等。

New Keymap（自定义键盘布局）

显示原文

You can specify a new map (layout) for the keyboard with lv_keyboard_set_map(kb, LV_KEYBOARD_MODE_..., kb_map, kb_ctrl). See the Button matrix for more information about creating new maps and ctrls.

Keep in mind that using following keywords will have the same effect as with the original map:


您可以使用 lv_keyboard_set_map(kb, LV_KEYBOARD_MODE_..., kb_map, kb_ctrl) 函数为键盘指定新的map（布局）。

看 按钮矩阵 ，了解详细信息创建新的map（布局）和Ctrl。

请记住，使用以下关键字可以得到与内置map(布局)相同的效果：

Events（事件）

显示原文

The keyboard has a default event handler callback called lv_keyboard_def_event_cb(), which handles the button pressing, map changing, the assigned text area, etc. You can remove it and replace it with a custom event handler if you wish.

note:

In 8.0 and newer, adding an event handler to the keyboard does not remove the default event handler. This behavior differs from v7, where adding an event handler would always replace the previous one.

Learn more about Events（事件）.


键盘有一个名为 默认事件处理程序回调 调用 lv_keyboard_def_event_cb()，用于处理按钮按下，映射更改、指定的文本区域等。您可以删除并替换它如果您愿意，可以使用自定义事件处理程序。

注意:

在 8.0 及更高版本中，向键盘添加事件处理程序不会删除默认事件处理程序。 此行为与 v7 不同，在 v7 中，添加事件处理程序将始终替换前一个事件处理程序。

详细了解更多 Events（事件）。

Keys（按键）

显示原文

  • LV_KEY_RIGHT/UP/LEFT/RIGHT To navigate among the buttons and select one.

  • LV_KEY_ENTER To press/release the selected button.

Learn more about Keys（按键）.


  • LV_KEY_RIGHT/UP/LEFT/RIGHT 在按钮和导航之间选择一个。

  • LV_KEY_ENTER 按下/松开所选按钮。

了解有关 Keys（按键） 的更多信息。

Example

[English]

Keyboard with text area

C code  

 View on GitHub
#include "../../lv_examples.h"
#if LV_USE_KEYBOARD && LV_BUILD_EXAMPLES

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) {
        lv_keyboard_set_textarea(kb, ta);
        lv_obj_remove_flag(kb, LV_OBJ_FLAG_HIDDEN);
    }

    if(code == LV_EVENT_DEFOCUSED) {
        lv_keyboard_set_textarea(kb, NULL);
        lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);
    }
}

void lv_example_keyboard_1(void)
{
    /*Create a keyboard to use it with an of the text areas*/
    lv_obj_t * kb = lv_keyboard_create(lv_screen_active());

    /*Create a text area. The keyboard will write here*/
    lv_obj_t * ta1;
    ta1 = lv_textarea_create(lv_screen_active());
    lv_obj_align(ta1, LV_ALIGN_TOP_LEFT, 10, 10);
    lv_obj_add_event_cb(ta1, ta_event_cb, LV_EVENT_ALL, kb);
    lv_textarea_set_placeholder_text(ta1, "Hello");
    lv_obj_set_size(ta1, 140, 80);

    lv_obj_t * ta2;
    ta2 = lv_textarea_create(lv_screen_active());
    lv_obj_align(ta2, LV_ALIGN_TOP_RIGHT, -10, 10);
    lv_obj_add_event_cb(ta2, ta_event_cb, LV_EVENT_ALL, kb);
    lv_obj_set_size(ta2, 140, 80);

    lv_keyboard_set_textarea(kb, ta1);

    /*The keyboard will show Arabic characters if they are enabled */
#if LV_USE_ARABIC_PERSIAN_CHARS && LV_FONT_DEJAVU_16_PERSIAN_HEBREW
    lv_obj_set_style_text_font(kb, &lv_font_dejavu_16_persian_hebrew, 0);
    lv_obj_set_style_text_font(ta1, &lv_font_dejavu_16_persian_hebrew, 0);
    lv_obj_set_style_text_font(ta2, &lv_font_dejavu_16_persian_hebrew, 0);
#endif
}
#endif

Keyboard with custom map

C code  

 View on GitHub
#include "../../lv_examples.h"
#if LV_USE_KEYBOARD && LV_BUILD_EXAMPLES

void lv_example_keyboard_2(void)
{
    /*Create an AZERTY keyboard map*/
    static const char * kb_map[] = {"A", "Z", "E", "R", "T", "Y", "U", "I", "O", "P", LV_SYMBOL_BACKSPACE, "\n",
                                    "Q", "S", "D", "F", "G", "J", "K", "L", "M",  LV_SYMBOL_NEW_LINE, "\n",
                                    "W", "X", "C", "V", "B", "N", ",", ".", ":", "!", "?", "\n",
                                    LV_SYMBOL_CLOSE, " ",  " ", " ", LV_SYMBOL_OK, NULL
                                   };

    /*Set the relative width of the buttons and other controls*/
    static const lv_buttonmatrix_ctrl_t kb_ctrl[] = {4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 6,
                                                     4, 4, 4, 4, 4, 4, 4, 4, 4, 6,
                                                     4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
                                                     2, LV_BUTTONMATRIX_CTRL_HIDDEN | 2, 6, LV_BUTTONMATRIX_CTRL_HIDDEN | 2, 2
                                                    };

    /*Create a keyboard and add the new map as USER_1 mode*/
    lv_obj_t * kb = lv_keyboard_create(lv_screen_active());

    lv_keyboard_set_map(kb, LV_KEYBOARD_MODE_USER_1, kb_map, kb_ctrl);
    lv_keyboard_set_mode(kb, LV_KEYBOARD_MODE_USER_1);

    /*Create a text area. The keyboard will write here*/
    lv_obj_t * ta;
    ta = lv_textarea_create(lv_screen_active());
    lv_obj_align(ta, LV_ALIGN_TOP_MID, 0, 10);
    lv_obj_set_size(ta, lv_pct(90), 80);
    lv_obj_add_state(ta, LV_STATE_FOCUSED);

    lv_keyboard_set_textarea(kb, ta);
}
#endif

API

lv_keyboard.h