Flutter iOS端为数字键盘添加Done按钮的解决方案

问题原因 #

iOS原生数字键盘默认不提供Done按钮，即使设置textInputAction: TextInputAction.done也不会显示——这个属性仅对非数字类键盘生效。以下是几种可行的解决方法：

方案一：针对iOS使用CupertinoTextField #

利用Flutter的平台区分组件，iOS端使用CupertinoTextField（原生iOS风格输入框，自带数字键盘Done按钮），Android端保留原TextFormField：

import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

// ... 你的组件代码
Platform.isIOS
    ? CupertinoTextField(
        controller: inputminsto1,
        style: TextStyle(color: Color(0xFF070A28).withOpacity(0.50), fontFamily: 'OpenSans', fontSize: 14),
        decoration: BoxDecoration(color: Color(0xFFF6F6F6)),
        placeholder: 'Mins',
        placeholderStyle: TextStyle(color: Color(0xFF070A28).withOpacity(0.50), fontFamily: 'OpenSans', fontSize: 14),
        keyboardType: TextInputType.number,
        textInputAction: TextInputAction.done,
        inputFormatters: <TextInputFormatter>[
          LengthLimitingTextInputFormatter(3),
          FilteringTextInputFormatter.digitsOnly,
          FilteringTextInputFormatter.deny(RegExp(r'\s'))
        ],
      )
    : TextFormField(
        controller: inputminsto1,
        style: TextStyle(color: Color(0xFF070A28).withOpacity(0.50), fontFamily: 'OpenSans', fontSize: 14),
        decoration: InputDecoration(
          filled: true,
          fillColor: Color(0xFFF6F6F6),
          border: InputBorder.none,
          hintText: 'Mins',
          hintStyle: TextStyle(color: Color(0xFF070A28).withOpacity(0.50), fontFamily: 'OpenSans', fontSize: 14),
        ),
        validator: (value) {
          if (value!.isEmpty) {
            return 'Required *';
          }
          return null;
        },
        textInputAction: TextInputAction.done,
        inputFormatters: <TextInputFormatter>[
          LengthLimitingTextInputFormatter(3),
          FilteringTextInputFormatter.digitsOnly,
          FilteringTextInputFormatter.deny(RegExp(r'\s'))
        ],
      )

方案二：自定义键盘工具栏 #

通过监听键盘状态，在键盘上方添加一个包含Done按钮的自定义工具栏：

1. 先添加依赖：

dependencies:
  flutter_keyboard_visibility: ^6.0.0

2. 实现代码：

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

// ... 你的组件代码
final FocusNode _focusNode = FocusNode();

KeyboardVisibilityBuilder(
  builder: (context, isKeyboardVisible) {
    return Stack(
      children: [
        TextFormField(
          focusNode: _focusNode,
          controller: inputminsto1,
          style: TextStyle(color: Color(0xFF070A28).withOpacity(0.50), fontFamily: 'OpenSans', fontSize: 14),
          decoration: InputDecoration(
            filled: true,
            fillColor: Color(0xFFF6F6F6),
            border: InputBorder.none,
            hintText: 'Mins',
            hintStyle: TextStyle(color: Color(0xFF070A28).withOpacity(0.50), fontFamily: 'OpenSans', fontSize: 14),
          ),
          validator: (value) {
            if (value!.isEmpty) {
              return 'Required *';
            }
            return null;
          },
          textInputAction: TextInputAction.done,
          inputFormatters: <TextInputFormatter>[
            LengthLimitingTextInputFormatter(3),
            FilteringTextInputFormatter.digitsOnly,
            FilteringTextInputFormatter.deny(RegExp(r'\s'))
          ],
          keyboardType: TextInputType.number,
        ),
        // 键盘显示时才显示工具栏
        if (isKeyboardVisible)
          Positioned(
            bottom: MediaQuery.of(context).viewInsets.bottom,
            left: 0,
            right: 0,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              color: Colors.grey.shade200,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  TextButton(
                    onPressed: () => _focusNode.unfocus(),
                    child: const Text('Done', style: TextStyle(color: Colors.blue)),
                  ),
                ],
              ),
            ),
          ),
      ],
    );
  },
)

方案三：使用第三方包快速实现 #

使用flutter_keyboard_actions包，专门用于自定义键盘操作按钮：

1. 添加依赖：

dependencies:
  flutter_keyboard_actions: ^4.1.0

2. 实现代码：

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

// ... 你的组件代码
final FocusNode _focusNode = FocusNode();

// 配置键盘工具栏
KeyboardActionsConfig _buildKeyboardConfig(BuildContext context) {
  return KeyboardActionsConfig(
    keyboardBarColor: Colors.grey.shade200,
    actions: [
      KeyboardAction(
        focusNode: _focusNode,
        onTapAction: () => _focusNode.unfocus(),
        closeWidget: const Icon(Icons.check, color: Colors.blue),
      ),
    ],
  );
}

// 包裹输入框
KeyboardActions(
  config: _buildKeyboardConfig(context),
  child: TextFormField(
    focusNode: _focusNode,
    controller: inputminsto1,
    style: TextStyle(color: Color(0xFF070A28).withOpacity(0.50), fontFamily: 'OpenSans', fontSize: 14),
    decoration: InputDecoration(
      filled: true,
      fillColor: Color(0xFFF6F6F6),
      border: InputBorder.none,
      hintText: 'Mins',
      hintStyle: TextStyle(color: Color(0xFF070A28).withOpacity(0.50), fontFamily: 'OpenSans', fontSize: 14),
    ),
    validator: (value) {
      if (value!.isEmpty) {
        return 'Required *';
      }
      return null;
    },
    textInputAction: TextInputAction.done,
    inputFormatters: <TextInputFormatter>[
      LengthLimitingTextInputFormatter(3),
      FilteringTextInputFormatter.digitsOnly,
      FilteringTextInputFormatter.deny(RegExp(r'\s'))
    ],
    keyboardType: TextInputType.number,
  ),
)

内容的提问来源于stack exchange，提问作者Himani Upadhyay