Flutter虚拟键盘插件virtual_keyboard_2的使用

发布于 1周前 作者 h691938207 来自 Flutter

Flutter虚拟键盘插件virtual_keyboard_2的使用

介绍

virtual_keyboard_2 是一个简单的Flutter包,用于在类似自助服务终端和ATM等设备上显示虚拟键盘。该库完全用Dart编写,不依赖任何原生代码。它提供了核心功能来显示屏幕上的虚拟键盘,而事件管理则需要在项目级别进行处理。

主要组件说明

VirtualKeyboard

这是用于展示虚拟键盘的Flutter小部件。

  • type: 键盘类型,可以是数字或字母数字。
  • onKeyPress: 按键事件回调函数,调用时会传递被按下的Key对象。
  • height: 虚拟键盘的高度,默认为300。
  • textColor: 键文本和图标颜色。
  • fontSize: 键盘按键字体大小。
  • alwaysCaps: 是否仅启用大写字母。

VirtualKeyboardType

定义了可用的虚拟键盘类型枚举:

  • VirtualKeyboardType.Numeric: 仅数字。
  • VirtualKeyboardType.Alphanumeric: 字母(A-Z)+ 数字(0-9)+ 特殊字符如@.

VirtualKeyboardKey

表示虚拟键盘的一个按键。

  • text: 按键文本。
  • capsText: 大写形式的按键文本。
  • keyType: 按键类型,可以是动作或字符串。
  • action: 动作按键的具体行为,例如退格、回车等。

VirtualKeyboardKeyType

定义了虚拟键盘按键的类型:

  • Action: 表示动作按键,如返回、删除等。
  • String: 表示具有文本值的按键,如字母、数字、逗号等。

VirtualKeyboardKeyAction

定义了虚拟键盘的动作枚举:

enum VirtualKeyboardKeyAction { Backspace, Return, Shift, Space }

使用示例

以下是完整的示例代码,展示了如何使用virtual_keyboard_2插件创建一个包含文本框和可切换类型(数字/字母数字)的虚拟键盘的应用程序:

import 'package:flutter/material.dart';
import 'package:virtual_keyboard_2/virtual_keyboard_2.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 {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  // Holds the text that user typed.
  String text = '';

  // True if shift enabled.
  bool shiftEnabled = false;

  // is true will show the numeric keyboard.
  bool isNumericMode = true;

  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>[
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
              child: TextField(
                controller: _controllerText,
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Your text',
                ),
              ),
            ),
            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,
                type: isNumericMode
                    ? VirtualKeyboardType.Numeric
                    : VirtualKeyboardType.Alphanumeric,
                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 += ' ';
                        break;
                      case VirtualKeyboardKeyAction.Shift:
                        shiftEnabled = !shiftEnabled;
                        break;
                      default:
                    }
                  }
                  _controllerText.text = text;
                  setState(() {});
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

这段代码实现了一个简单的Flutter应用,用户可以在界面上看到一个文本框和一个开关用来切换虚拟键盘模式(数字或字母数字)。当用户点击虚拟键盘上的按键时,相应的字符会被添加到文本框中,并且支持基本的编辑操作,如退格和换行。


更多关于Flutter虚拟键盘插件virtual_keyboard_2的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter虚拟键盘插件virtual_keyboard_2的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter应用中使用virtual_keyboard_2插件的示例代码。这个插件允许你创建一个自定义的虚拟键盘,用于替代系统默认的键盘。

首先,确保你已经在pubspec.yaml文件中添加了virtual_keyboard_2依赖:

dependencies:
  flutter:
    sdk: flutter
  virtual_keyboard_2: ^最新版本号  # 请替换为当前最新版本号

然后,运行flutter pub get来安装依赖。

接下来,你可以在你的Flutter应用中导入并使用这个插件。以下是一个简单的示例,展示了如何创建一个自定义键盘并在TextField中使用它。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Virtual Keyboard Example'),
        ),
        body: Center(
          child: CustomKeyboardPage(),
        ),
      ),
    );
  }
}

class CustomKeyboardPage extends StatefulWidget {
  @override
  _CustomKeyboardPageState createState() => _CustomKeyboardPageState();
}

class _CustomKeyboardPageState extends State<CustomKeyboardPage> {
  final TextEditingController _controller = TextEditingController();
  bool _isKeyboardVisible = false;

  void _showKeyboard() {
    setState(() {
      _isKeyboardVisible = true;
    });
  }

  void _hideKeyboard() {
    setState(() {
      _isKeyboardVisible = false;
    });
  }

  void _onKeyPressed(String key) {
    setState(() {
      _controller.value = _controller.value.copyWith(
        text: _controller.text + key,
        selection: TextSelection.fromPosition(
          TextPosition(
            affinity: TextAffinity.downstream,
            offset: _controller.text.length,
          ),
        ),
        composing: TextRange.empty,
      );
    });
  }

  void _onBackspacePressed() {
    setState(() {
      if (_controller.text.isNotEmpty) {
        _controller.value = _controller.value.copyWith(
          text: _controller.text.substring(0, _controller.text.length - 1),
          selection: TextSelection.fromPosition(
            TextPosition(
              affinity: TextAffinity.downstream,
              offset: _controller.text.length,
            ),
          ),
          composing: TextRange.empty,
        );
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        TextField(
          controller: _controller,
          decoration: InputDecoration(
            border: OutlineInputBorder(),
            labelText: 'Type something',
          ),
          focusNode: FocusNode()..addListener(() {
            if (!_focusNode.hasFocus) {
              _hideKeyboard();
            }
          }),
          onEditingComplete: () {
            _hideKeyboard();
          },
        ),
        SizedBox(height: 20),
        if (_isKeyboardVisible)
          Container(
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey),
              borderRadius: BorderRadius.circular(10),
            ),
            padding: EdgeInsets.all(10),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                // Row of numbers
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: List.generate(10, (index) {
                    final key = index.toString();
                    return GestureDetector(
                      onTap: () => _onKeyPressed(key),
                      child: Text(key),
                    );
                  }),
                ),
                // Row with backspace and enter
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    GestureDetector(
                      onTap: _onBackspacePressed,
                      child: Icon(Icons.backspace),
                    ),
                    GestureDetector(
                      onTap: () {
                        // Handle enter key press
                        print('Enter pressed');
                        _hideKeyboard();
                      },
                      child: Icon(Icons.keyboard_return),
                    ),
                  ],
                ),
              ],
            ),
          ),
        GestureDetector(
          onTap: _showKeyboard,
          child: Text(
            _isKeyboardVisible ? 'Hide Keyboard' : 'Show Keyboard',
            style: TextStyle(fontSize: 20),
          ),
        ),
      ],
    );
  }
}

在这个示例中,我们创建了一个简单的自定义键盘,它包括数字0-9,一个退格键和一个回车键。你可以根据需求进一步扩展这个键盘,例如添加更多字符、符号,或者更改布局。

请注意,这个示例中的键盘显示和隐藏是通过点击文本字段和按钮来控制的。在实际应用中,你可能需要更复杂的逻辑来处理键盘的显示和隐藏,特别是在多字段表单中。此外,virtual_keyboard_2插件本身提供了更多的功能和配置选项,你可以参考其官方文档以获取更多信息。

回到顶部