Flutter虚拟键盘插件drago_virtual_keyboard的使用

介绍

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

虚拟键盘提供了基本的功能以显示屏幕上的虚拟键盘。事件管理应在项目级别进行。

参考

DragoVirtualKeyboard

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

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

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

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

Container(
  color: Colors.deepPurple,
  child: DragoVirtualKeyboard(
    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(() {});
}

完整示例

以下是一个完整的示例，展示了如何使用 drago_virtual_keyboard 插件：

import 'package:flutter/material.dart';
import 'package:drago_virtual_keyboard/drago_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, required 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;

  bool isOnchange = false;
  bool isTransparent = false;
  bool IsCaps = false;

  late TextEditingController _controllerText;
  var keyboardType = VirtualKeyboardType.Alphanumeric;

  [@override](/user/override)
  void initState() {
    _controllerText = TextEditingController();
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Row(
          children: <Widget>[
            SizedBox(
              width: 500,
              child: Column(
                children: [
                  Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
                      child: TextField(
                        controller: _controllerText,
                        decoration: const InputDecoration(
                          border: OutlineInputBorder(),
                          labelText: 'Your text',
                        ),
                      )),
                  SwitchListTile(
                      title: Text('Is Onchange'),
                      value: isOnchange,
                      onChanged: (val) {
                        setState(() {
                          isOnchange = !isOnchange;
                        });
                      }),
                  SwitchListTile(
                      title: Text('Is Transparent'),
                      value: isTransparent,
                      onChanged: (val) {
                        isTransparent = !isTransparent;
                        setState(() {});
                      }),
                  SwitchListTile(
                      title: Text('Is Caps'),
                      value: IsCaps,
                      onChanged: (val) {
                        IsCaps = !IsCaps;
                        setState(() {});
                      }),
                  SizedBox(height: 10),
                  TextButton(
                      onPressed: () {
                        setState(() {
                          keyboardType = VirtualKeyboardType.Numeric;
                        });
                      },
                      child: Text('Numeric Keyboard')),
                  SizedBox(height: 10),
                  TextButton(
                      onPressed: () {
                        setState(() {
                          keyboardType = VirtualKeyboardType.Alphanumeric;
                        });
                      },
                      child: Text('AlphaNumeric Keyboard')),
                  SizedBox(height: 10),
                  TextButton(
                      onPressed: () {
                        setState(() {
                          keyboardType = VirtualKeyboardType.OnScreenAlphaNumeric;
                        });
                      },
                      child: Text('Onscreen AlphaNumeric Keyboard'))
                ],
              ),
            ),
            Expanded(
              child: Center(
                child: Container(
                  width: keyboardType == VirtualKeyboardType.Numeric ? 300 : null,
                  color: isTransparent ? Colors.transparent : Colors.deepPurple,
                  child: DragoVirtualKeyboard(
                    key: UniqueKey(),
                    textColor: isTransparent ? Colors.deepPurple : Colors.white,
                    fontSize: isTransparent ? 19 : 17,
                    type: keyboardType,
                    isOnChange: isOnchange,
                    alwaysCaps: IsCaps,
                    onReturn: (val) {
                      _controllerText.text = val;
                    },
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}