Flutter键盘操作优化插件ux_keyboard_actions的使用

概述

ux_keyboard_actions 是一个用于优化 Flutter 应用程序中键盘操作的插件。它通过为 Android 和 iOS 键盘添加功能来提升用户体验，例如自定义完成按钮、在文本框之间导航等。

特性

• 完成按钮：可以自定义键盘上的完成按钮。
• 文本框导航：可以在文本框之间移动（可以通过设置 nextFocus: false 来禁用）。
• 键盘栏自定义：支持自定义键盘栏。
• 底部自定义小部件：可以在键盘下方添加自定义小部件。
• 轻松创建自定义键盘：支持快速创建自定义键盘。
• 跨平台支持：适用于 Android、iOS 或两者。
• 对话框兼容性：支持在对话框中使用。

自定义底部小部件示例

使用自定义输入作为键盘示例

开始使用

添加依赖

在你的 Flutter 项目中添加以下依赖：

dependencies:
  ux_keyboard_actions: "^4.1.0"

然后运行以下命令以更新依赖项：

flutter packages upgrade

示例项目

你可以在项目的 example 文件夹中找到完整的示例项目。你可以克隆该项目并运行它以了解其功能。

基本用法

以下是一个简单的示例，展示如何使用 ux_keyboard_actions 插件。

示例代码

import 'package:flutter/material.dart';
import 'package:ux_keyboard_actions/keyboard_actions.dart';

class Content extends StatefulWidget {
  const Content({Key key}) : super(key: key);

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

class _ContentState extends State<Content> {
  final FocusNode _nodeText1 = FocusNode();
  final FocusNode _nodeText2 = FocusNode();
  final FocusNode _nodeText3 = FocusNode();

  /// 创建 KeyboardActionsConfig 配置
  KeyboardActionsConfig _buildConfig(BuildContext context) {
    return KeyboardActionsConfig(
      keyboardActionsPlatform: KeyboardActionsPlatform.ALL,
      keyboardBarColor: Colors.grey[200],
      nextFocus: true,
      actions: [
        KeyboardActionsItem(
          focusNode: _nodeText1,
        ),
        KeyboardActionsItem(
          focusNode: _nodeText2,
          toolbarButtons: [
            (node) {
              return GestureDetector(
                onTap: () => node.unfocus(),
                child: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Icon(Icons.close),
                ),
              );
            }
          ],
        ),
        KeyboardActionsItem(
          focusNode: _nodeText3,
          onTapAction: () {
            showDialog(
              context: context,
              builder: (context) {
                return AlertDialog(
                  content: Text("Custom Action"),
                  actions: <Widget>[
                    FlatButton(
                      child: Text("OK"),
                      onPressed: () => Navigator.of(context).pop(),
                    )
                  ],
                );
              },
            );
          },
        ),
      ],
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return KeyboardActions(
      config: _buildConfig(context),
      child: Center(
        child: Padding(
          padding: const EdgeInsets.all(15.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              TextField(
                keyboardType: TextInputType.number,
                focusNode: _nodeText1,
                decoration: InputDecoration(hintText: "Input Number"),
              ),
              TextField(
                keyboardType: TextInputType.text,
                focusNode: _nodeText2,
                decoration: InputDecoration(hintText: "Input Text with Custom Done Button"),
              ),
              TextField(
                keyboardType: TextInputType.text,
                focusNode: _nodeText3,
                decoration: InputDecoration(hintText: "Input Text with Custom Action"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

解释

1. KeyboardActionsConfig：配置键盘行为，包括键盘栏颜色、焦点节点等。
2. KeyboardActionsItem：每个 KeyboardActionsItem 对应一个文本框，可以设置自定义按钮或操作。
3. KeyboardActions：包裹整个表单，应用配置。

使用自定义键盘

示例代码

import 'package:flutter/material.dart';
import 'package:ux_keyboard_actions/keyboard_actions.dart';

class Content extends StatelessWidget {
  final FocusNode _nodeText7 = FocusNode();
  final FocusNode _nodeText8 = FocusNode();

  // 自定义通知器
  final custom1Notifier = ValueNotifier<String>("0");
  final custom2Notifier = ValueNotifier<Color>(Colors.blue);

  /// 创建 KeyboardActionsConfig 配置
  KeyboardActionsConfig _buildConfig(BuildContext context) {
    return KeyboardActionsConfig(
      keyboardActionsPlatform: KeyboardActionsPlatform.ALL,
      keyboardBarColor: Colors.grey[200],
      nextFocus: true,
      actions: [
        KeyboardActionsItem(
          focusNode: _nodeText7,
          footerBuilder: (_) => CounterKeyboard(notifier: custom1Notifier),
        ),
        KeyboardActionsItem(
          focusNode: _nodeText8,
          footerBuilder: (_) => ColorPickerKeyboard(notifier: custom2Notifier),
        ),
      ],
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return KeyboardActions(
      config: _buildConfig(context),
      child: Center(
        child: Container(
          padding: const EdgeInsets.all(15.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              KeyboardCustomInput<String>(
                focusNode: _nodeText7,
                height: 65,
                notifier: custom1Notifier,
                builder: (context, val, hasFocus) {
                  return Container(
                    alignment: Alignment.center,
                    color: hasFocus ? Colors.grey[300] : Colors.white,
                    child: Text(
                      val,
                      style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
                    ),
                  );
                },
              ),
              KeyboardCustomInput<Color>(
                focusNode: _nodeText8,
                height: 65,
                notifier: custom2Notifier,
                builder: (context, val, hasFocus) {
                  return Container(
                    width: double.maxFinite,
                    color: val ?? Colors.transparent,
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

/// 自定义颜色选择键盘
class ColorPickerKeyboard extends StatelessWidget
    with KeyboardCustomPanelMixin<Color>
    implements PreferredSizeWidget {
  final ValueNotifier<Color> notifier;

  static const double _kKeyboardHeight = 200;

  ColorPickerKeyboard({Key key, this.notifier}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    final double rows = 3;
    final double screenWidth = MediaQuery.of(context).size.width;
    final int colorsCount = Colors.primaries.length;
    final int colorsPerRow = (colorsCount / rows).ceil();
    final double itemWidth = screenWidth / colorsPerRow;
    final double itemHeight = _kKeyboardHeight / rows;

    return Container(
      height: _kKeyboardHeight,
      child: Wrap(
        children: <Widget>[
          for (final color in Colors.primaries)
            GestureDetector(
              onTap: () {
                updateValue(color);
              },
              child: Container(
                color: color,
                width: itemWidth,
                height: itemHeight,
              ),
            )
        ],
      ),
    );
  }

  [@override](/user/override)
  Size get preferredSize => Size.fromHeight(_kKeyboardHeight);
}

/// 自定义计数键盘
class CounterKeyboard extends StatelessWidget
    with KeyboardCustomPanelMixin<String>
    implements PreferredSizeWidget {
  final ValueNotifier<String> notifier;

  CounterKeyboard({Key key, this.notifier}) : super(key: key);

  [@override](/user/override)
  Size get preferredSize => Size.fromHeight(200);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      height: preferredSize.height,
      child: Row(
        children: [
          Expanded(
            child: InkWell(
              onTap: () {
                int value = int.tryParse(notifier.value) ?? 0;
                value--;
                updateValue(value.toString());
              },
              child: FittedBox(
                child: Text(
                  "-",
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ),
            ),
          ),
          Expanded(
            child: InkWell(
              onTap: () {
                int value = int.tryParse(notifier.value) ?? 0;
                value++;
                updateValue(value.toString());
              },
              child: FittedBox(
                child: Text(
                  "+",
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}