Flutter虚拟键盘插件another_virtual_keyboard的使用

简介

一个简单的用于在设备（如自助服务终端和ATM机）上显示虚拟键盘的包。该库用Dart编写，并且没有任何原生代码依赖。

虚拟键盘提供了一组核心功能来显示屏幕上的虚拟键盘。事件管理应该在项目级别进行处理。

参考

VirtualKeyboard

Flutter小部件，用于显示虚拟键盘。

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

// 按键事件回调。按键时会调用带有按下的`Key`对象的回调。
Function onKeyPress;

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

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

// 键字体大小。
double fontSize;

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

VirtualKeyboardType

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

// 仅数字。
VirtualKeyboardType.Numeric

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

VirtualKeyboardKey

虚拟键盘键。

// 键的文字。
String text

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

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

// 键的动作。
VirtualKeyboardKeyAction action;

VirtualKeyboardKeyType

虚拟键盘键的类型。

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

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

VirtualKeyboardKeyAction

虚拟键盘动作。

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

使用

显示字母数字键盘并使用默认视图

Container(
  // 背景颜色设置为紫色。
  color: Colors.deepPurple,
  child: VirtualKeyboard(
    // 默认高度为300。
    height: 350,
    // 默认文本颜色为白色。
    textColor: Colors.white,
    // 默认字体大小为20。
    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(() {});
}

完整示例

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:another_virtual_keyboard/another_virtual_keyboard.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Virtual Keyboard Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Virtual Keyboard Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 存储用户输入的文本。
  String text = '';

  // 是否启用大写。
  bool shiftEnabled = false;

  // 是否启用数字模式。
  bool isNumericMode = true;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Text(
              text,
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            SwitchListTile(
              title: Text(
                '键盘类型 = ' +
                    (isNumericMode
                        ? 'VirtualKeyboardType.Numeric'
                        : 'VirtualKeyboardType.Alphanumeric'),
              ),
              value: isNumericMode,
              onChanged: (val) {
                setState(() {
                  isNumericMode = val;
                });
              },
            ),
            Expanded(
              child: Container(),
            ),
            Container(
              color: Colors.deepPurple,
              child: VirtualKeyboard(
                height: 300,
                textColor: Colors.white,
                type: isNumericMode
                    ? VirtualKeyboardType.Numeric
                    : VirtualKeyboardType.Alphanumeric,
                onKeyPress: _onKeyPress,
              ),
            )
          ],
        ),
      ),
    );
  }

  /// 当虚拟键盘键被按下时触发。
  _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(() {});
  }
}