Flutter键盘管理插件keybord_library的使用

介绍

keybord_library 是一个用于在 Flutter 应用中管理键盘输入的插件。它提供了两种键盘组件：数字键盘和全键盘。通过这些组件，开发者可以轻松地实现输入框的键盘管理功能。

使用步骤

1. 添加依赖

首先，在项目的 pubspec.yaml 文件中添加 keybord_library 依赖：

dependencies:
  keybord_library: ^版本号

然后运行以下命令安装依赖：

flutter pub get

数字键盘使用

数字键盘支持绑定多个输入框，并且可以对输入的长度和大小进行控制。

示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: KeyboardExample(),
    );
  }
}

class KeyboardExample extends StatefulWidget {
  [@override](/user/override)
  _KeyboardExampleState createState() => _KeyboardExampleState();
}

class _KeyboardExampleState extends State<KeyboardExample> {
  final TextEditingController _controller1 = TextEditingController();
  final TextEditingController _controller2 = TextEditingController();

  // 定义输入限制列表
  List<InputLimitMode> limits = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    // 第一个输入框的限制
    limits.add(InputLimitMode(_controller1, FocusNode(), enableInputPoint: true, inputType: 0, maxLength: 10));
    // 第二个输入框的限制
    limits.add(InputLimitMode(_controller2, FocusNode(), enableInputPoint: true, inputType: 0, maxLength: 15));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('数字键盘示例')),
      body: Column(
        children: [
          TextField(
            controller: _controller1,
            decoration: InputDecoration(hintText: '输入框1'),
          ),
          TextField(
            controller: _controller2,
            decoration: InputDecoration(hintText: '输入框2'),
          ),
          SizedBox(height: 20),
          // 显示数字键盘
          NumKeyBoard(
            limits,
            KeyStyleMode(),
            240, // 键盘宽度
            294, // 键盘高度
            bgColor: Colors.blue, // 背景颜色
          ),
        ],
      ),
    );
  }
}

效果图

全键盘使用

全键盘目前只支持绑定一个 TextField，并且可以通过监听流来捕获输入事件。快速输入会过滤掉中间点击回调，默认间隔时间为 500ms。

示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: KeyboardExample(),
    );
  }
}

class KeyboardExample extends StatefulWidget {
  [@override](/user/override)
  _KeyboardExampleState createState() => _KeyboardExampleState();
}

class _KeyboardExampleState extends State<KeyboardExample> {
  final TextEditingController _controller = TextEditingController();
  final StreamController _streamController = StreamController.broadcast();

  bool showBigKeyBoard = true;

  [@override](/user/override)
  void dispose() {
    _streamController.close();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('全键盘示例')),
      body: Column(
        children: [
          TextField(
            controller: _controller,
            decoration: InputDecoration(hintText: '请输入内容'),
          ),
          SizedBox(height: 20),
          // 显示全键盘
          Visibility(
            visible: showBigKeyBoard,
            child: BigKeyBoard(
              KeyStyleMode(textSize: 10),
              _controller,
              400, // 键盘宽度
              160, // 键盘高度
              streamController: _streamController,
              closeCallBack: () {
                setState(() {
                  showBigKeyBoard = false;
                });
              },
            ),
          ),
        ],
      ),
    );
  }
}