Flutter虚拟键盘插件new_virtual_keyboard的使用

Flutter虚拟键盘插件new_virtual_keyboard的使用

简介

new_virtual_keyboard 是一个简单的用于在设备上显示虚拟键盘的包，例如自动柜员机（ATM）或自助服务终端。该库是用Dart编写的，并且没有任何本地代码依赖。

虚拟键盘提供了一组核心功能以在屏幕上显示虚拟键盘。事件管理应该在项目级别完成。

参考

VirtualKeyboard

VirtualKeyboard 是一个Flutter小部件，用于显示虚拟键盘。

// 键盘类型：可以是数字或字母数字。
VirtualKeyboardType type

// 按键事件回调。按键时调用`Key`对象。
Function onKeyPress;

// 虚拟键盘的高度。默认为300。
double height;

// 键文字和图标的颜色。
Color textColor;

// 键文字的字体大小。
double fontSize;

// 仅启用大写字母。
bool alwaysCaps;

VirtualKeyboardType

VirtualKeyboardType 是可用虚拟键盘类型的枚举。

// 仅数字。
VirtualKeyboardType.Numeric

// 字母数字：`[A-Z]` + `[0-9]` + `@` + `.`。
VirtualKeyboardType.Alphanumeric

VirtualKeyboardKey

VirtualKeyboardKey 是虚拟键盘键。

// 键的文字。
String text

// 键的大写文字。
String capsText;

// 动作或字符串。
VirtualKeyboardKeyType keyType;

// 键的动作。
VirtualKeyboardKeyAction action;

VirtualKeyboardKeyType

VirtualKeyboardKeyType 是虚拟键盘键的类型。

// 可以是动作键 - 返回、退格等。
VirtualKeyboardKeyType.Action

// 具有文本值的键 - 字母、数字、逗号等。
VirtualKeyboardKeyType.String

VirtualKeyboardKeyAction

/// 虚拟键盘动作。
enum VirtualKeyboardKeyAction { Backspace, Return, Shift, Space }

使用

显示字母数字键盘（默认视图）

// 将键盘包裹在Container中以设置背景颜色。
Container(
    // 键盘是透明的
    color: Colors.deepPurple,
    child: VirtualKeyboard(
        // 默认高度为300
        height: 350,
        // 默认为黑色
        textColor: Colors.white,
        // 默认14
        fontSize: 20,
        // [A-Z, 0-9]
        type: VirtualKeyboardType.Alphanumeric,
        // 按键事件回调
        onKeyPress: _onKeyPress),
)

显示数字键盘（默认视图）

Container(
    // 键盘是透明的
    color: Colors.red,
    child: VirtualKeyboard(
        // [0-9] + .
        type: VirtualKeyboardType.Numeric,
        // 按键事件回调
        onKeyPress: (key) => print(key.text)),
)

显示字母数字键盘（自定义按键）

Container(
    color: Colors.deepPurple,
    child: VirtualKeyboard(
        height: keyboardHeight,
        textColor: Colors.white,
        fontSize: 20,
        builder: _builder,
        type: VirtualKeyboardType.Numeric,
        onKeyPress: _onKeyPress),
)

/// 键盘键构建器。
Widget _builder(BuildContext context, VirtualKeyboardKey key) {
    Widget keyWidget;

    switch (key.keyType) {
        case VirtualKeyboardKeyType.String:
            // 绘制字符串键。
            keyWidget = _keyboardDefaultKey(key);
            break;
        case VirtualKeyboardKeyType.Action:
            // 绘制动作键。
            keyWidget = _keyboardDefaultActionKey(key);
            break;
    }

    return keyWidget;
}

onKeyPressed 事件基本用法示例

// 仅局部变量。使用Text小部件或其他类似方式在UI中显示。
String text;

/// 当虚拟键盘键被按下时触发。
_onKeyPress(VirtualKeyboardKey key) {
    if (key.keyType == VirtualKeyboardKeyType.String) {
        text = text + (shiftEnabled ? key.capsText : key.text);
    } else if (key.keyType == VirtualKeyboardKeyType.Action) {
        switch (key.action) {
            case VirtualKeyboardKeyAction.Backspace:
                if (text.length == 0) return;
                text = text.substring(0, text.length - 1);
                break;
            case VirtualKeyboardKeyAction.Return:
                text = text + '\n';
                break;
            case VirtualKeyboardKeyAction.Space:
                text = text + key.text;
                break;
            case VirtualKeyboardKeyAction.Shift:
                shiftEnabled = !shiftEnabled;
                break;
            default:
        }
    }
    // 更新屏幕
    setState(() {});
}