Flutter多语言虚拟键盘插件virtual_keyboard_multi_language的使用

简介

virtual_keyboard_multi_language 是一个用于在Flutter应用程序中显示虚拟键盘的简单包。它适用于类似自助终端和ATM的设备，完全用Dart编写，不依赖原生代码。该插件是从virtual_keyboard项目fork而来，旨在支持多语言输入并处理事件。

特性与待办事项

• 已完成特性
  • 支持多语言（如英语、阿拉伯语、库尔德语）
  • 自定义布局
• 待办事项
  • 实现弹出式浮动键盘/键数选项
  • 添加输入结果显示并处理事件

使用方法

VirtualKeyboard Widget

属性

• type: 键盘类型，可以是数字或字母数字组合。
• preKeyPress: 按下按键前的回调函数，会在添加到控制器之前触发。
• postKeyPress: 按下按键后的回调函数，会在添加到控制器之后触发。
• height: 虚拟键盘的高度，默认为300。
• width: 虚拟键盘的宽度，默认为屏幕宽度。
• textColor: 键文本颜色。
• fontSize: 键文本大小。
• alwaysCaps: 是否只允许大写字母。
• customLayoutKeys: 自定义多语言或单语言布局。
• defaultLayouts: 默认使用的布局列表，默认仅支持英语。
• reverseLayout: 是否反转布局以适应从右到左的语言，默认为false。

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

Container(
  color: Colors.deepPurple,
  child: VirtualKeyboard(
    height: 350,
    width: 600,
    textColor: Colors.white,
    fontSize: 20,
    defaultLayouts: [VirtualKeyboardDefaultLayouts.English],
    type: VirtualKeyboardType.Alphanumeric,
    postKeyPress: _onKeyPress,
  ),
)

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

Container(
  color: Colors.red,
  child: VirtualKeyboard(
    type: VirtualKeyboardType.Numeric,
    postKeyPress: (key) => print(key.text),
  ),
)

示例：自定义键的字母数字键盘

Container(
  color: Colors.deepPurple,
  child: VirtualKeyboard(
    height: keyboardHeight,
    textColor: Colors.white,
    fontSize: 20,
    builder: _builder,
    type: VirtualKeyboardType.Numeric,
    postKeyPress: _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事件基本用法示例

String text = '';
bool shiftEnabled = false;

_onKeyPress(VirtualKeyboardKey key) {
  if (key.keyType == VirtualKeyboardKeyType.String) {
    text += shiftEnabled ? key.capsText : key.text;
  } else if (key.keyType == VirtualKeyboardKeyType.Action) {
    switch (key.action) {
      case VirtualKeyboardKeyAction.Backspace:
        if (text.isNotEmpty) {
          text = text.substring(0, text.length - 1);
        }
        break;
      case VirtualKeyboardKeyAction.Return:
        text += '\n';
        break;
      case VirtualKeyboardKeyAction.Space:
        text += key.text;
        break;
      case VirtualKeyboardKeyAction.Shift:
        shiftEnabled = !shiftEnabled;
        break;
      default:
        break;
    }
  }
  setState(() {});
}

完整示例Demo

下面是一个完整的示例，展示了如何在Flutter应用中使用virtual_keyboard_multi_language来创建一个多语言虚拟键盘：

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

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

class MyApp extends StatelessWidget {
  @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 {
  final String title;
  MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // Holds the text that user typed.
  String text = '';
  bool shiftEnabled = false;
  bool isNumericMode = false;
  late TextEditingController _controllerText;

  @override
  void initState() {
    _controllerText = TextEditingController();
    super.initState();
  }

  @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.bodyMedium,
            ),
            Text(
              _controllerText.text,
              style: TextStyle(color: Colors.red),
            ),
            SwitchListTile(
              title: Text(
                'Keyboard Type = ' +
                    (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,
                textController: _controllerText,
                defaultLayouts: [
                  VirtualKeyboardDefaultLayouts.Arabic,
                  VirtualKeyboardDefaultLayouts.English
                ],
                type: isNumericMode
                    ? VirtualKeyboardType.Numeric
                    : VirtualKeyboardType.Alphanumeric,
                postKeyPress: _onKeyPress,
              ),
            )
          ],
        ),
      ),
    );
  }

  /// Fired when the virtual keyboard key is pressed.
  _onKeyPress(VirtualKeyboardKey key) {
    if (key.keyType == VirtualKeyboardKeyType.String) {
      text += shiftEnabled ? key.capsText : key.text;
    } else if (key.keyType == VirtualKeyboardKeyType.Action) {
      switch (key.action) {
        case VirtualKeyboardKeyAction.Backspace:
          if (text.isNotEmpty) {
            text = text.substring(0, text.length - 1);
          }
          break;
        case VirtualKeyboardKeyAction.Return:
          text += '\n';
          break;
        case VirtualKeyboardKeyAction.Space:
          text += key.text;
          break;
        case VirtualKeyboardKeyAction.Shift:
          shiftEnabled = !shiftEnabled;
          break;
        default:
          break;
      }
    }
    setState(() {});
  }
}

这个例子展示了如何创建一个包含多语言虚拟键盘的应用程序，并允许用户切换键盘模式（数字或字母数字）。通过设置不同的defaultLayouts属性，你可以轻松地支持多种语言。