如何在数字键盘上添加“完成”按钮？

Question

我正在尝试在数字类型输入中添加

done

按钮，以在颤动中添加

TextFormField

，但我无法做到这一点。

TextFormField(
          key: Key(keyValue),
          initialValue: valueBuilder,
          onSaved: (text) {
            fieldsController.text = text.trim();
          },
          inputFormatters: [inputFormatters],
          keyboardType: TextInputType.phoneNumber,)

我想创建一个如下所示的键盘。用于输入文本表单字段。

Answer 1

改变

keyboardType: TextInputType.number

到

keyboardType: TextInputType.numberWithOptions(signed: true, decimal: true)

Answer 2

您不需要

done

按钮，只需用

MaterialApp

 包裹 

GestureDetector

GestureDetector(
  behavior: HitTestBehavior.opaque,
  onTap: () {
    FocusScopeNode currentFocus = FocusScope.of(context);

    if (!currentFocus.hasPrimaryFocus &&
        currentFocus.focusedChild != null) {
      FocusManager.instance.primaryFocus.unfocus();
    }
  },
  child: MaterialApp(
     title: "My title",
     home:MyHomeScreen(),
     ),
);

Answer 3

我刚刚创建了一个包，用于向当前键盘添加基本操作。

你可以看这里：

https://pub.dartlang.org/packages/keyboard_actions

用途：

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

     //...
      FocusNode _nodeText1 = FocusNode();
      FocusNode _nodeText2 = FocusNode();
      FocusNode _nodeText3 = FocusNode();
      FocusNode _nodeText4 = FocusNode();
      FocusNode _nodeText5 = FocusNode();

     @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("Keyboard Actions Sample"),
          ),
          body: FormKeyboardActions(
            keyboardActionsPlatform: KeyboardActionsPlatform.ALL, //optional
            keyboardBarColor: Colors.grey[200], //optional
            nextFocus: true, //optional
            actions: [
              KeyboardAction(
                focusNode: _nodeText1,
              ),
              KeyboardAction(
                focusNode: _nodeText2,
                closeWidget: IconButton(
                  icon: Icon(Icons.close),
                  onPressed: () {},
                ),
              ),
              KeyboardAction(
                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(),
                            )
                          ],
                        );
                      });
                },
              ),
              KeyboardAction(
                focusNode: _nodeText4,
                displayCloseWidget: false,
              ),
              KeyboardAction(
                focusNode: _nodeText5,
                closeWidget: Padding(
                  padding: EdgeInsets.all(5.0),
                  child: Text("CLOSE"),
                ),
              ),
            ],
            child: Padding(
              padding: const EdgeInsets.all(15.0),
              child: SingleChildScrollView(
                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 Close Widget",
                      ),
                    ),
                    TextField(
                      keyboardType: TextInputType.number,
                      focusNode: _nodeText3,
                      decoration: InputDecoration(
                        hintText: "Input Number with Custom Action",
                      ),
                    ),
                    TextField(
                      keyboardType: TextInputType.text,
                      focusNode: _nodeText4,
                      decoration: InputDecoration(
                        hintText: "Input Text without Close Widget",
                      ),
                    ),
                    TextField(
                      keyboardType: TextInputType.number,
                      focusNode: _nodeText5,
                      decoration: InputDecoration(
                        hintText: "Input Number with Custom Close Widget",
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      }

Answer 4

将其添加到您的文本字段

TextField(
...
keyboardType: TextInputType.numberWithOptions(signed: true),
inputFormatters: [
    FilteringTextInputFormatter.digitsOnly,
],
...
),

Answer 5

这是在键盘打开时将 Done 按钮添加到

TextFormField

的方法：

textInputAction: TextInputAction.done,

请记住，iOS 不支持 NUMERIC 键盘上的

Done

。

Answer 6

我在IOS中用这种方式处理完成按钮

      keyboardType: Platform.isIOS? 
                    TextInputType.numberWithOptions(signed: true, decimal: true)
                  : TextInputType.number,
// This regex for only amount (price). you can create your own regex based on your requirement
     inputFormatters: [FilteringTextInputFormatter.allow(RegExp(r'^\d+\.?\d{0,4}'))],

Answer 7

ios 键盘上没有完成按钮。解决方案是使用“keyboard_actions”插件，否则添加键盘顶部布局检查此

https://blog.usejournal.com/keyboard-done-button-ux-in-flutter-ios-app-3b29ad46bacc

Answer 8

您可以通过一些简单的代码来轻松实现。

1. 保留 TextField 的设置，键盘类型为 TextInputType.number
2. 定义变量来检测键盘状态并将其设置在状态构建中

isVisible = MediaQuery.of(context).viewInsets.bottom != 0;

3. 将您的小部件包装在 Stack 中，在底部添加此代码

Stack(
      children: [
        ... Your widget ...
        if (isVisible)
          Align(
            alignment: Alignment.bottomCenter,
            child: Padding(
              padding: EdgeInsets.zero,
              child: Container(
                color: Colors.white70,
                height: 40,
                child: GestureDetector(
                  onTap: () {
                    FocusScope.of(context).requestFocus(FocusNode());
                  },
                  child: const Padding(
                    padding: EdgeInsets.fromLTRB(10, 4, 10, 4),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        Text(
                          'Xong',
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 15,
                              color: Colors.blue
                          ),
                        )
                      ],
                    ),
                  ),
              ),
            )
          )
        )
      ],
    )

Answer 9

我使用签名选项来显示完成按钮。然后我使用带有正则表达式的 TextInputFormatter 来限制用户可以输入的内容。

new TextFormField(
              controller: myController,
              keyboardType: TextInputType.numberWithOptions(signed:true, decimal: true),
              textInputAction: TextInputAction.done,
              onFieldSubmitted: (term) {
                _showSnackBar(context, double.parse(myController.text));
              },
              onEditingComplete: () {
                _showSnackBar(context, double.parse(myController.text));
              },
              decoration: const InputDecoration(
                helperText: "Actual",
                hintText: "Units used",
                border: UnderlineInputBorder(),
                icon: Icon(Icons.keyboard),
              ),
              inputFormatters: <TextInputFormatter>[
                FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d*$')),
              ],
            ),

Answer 10

您必须在 TextField Widget 上添加此行。

keyboardType: TextInputType.numberWithOptions(
decimal: true,
signed: true,
),

Answer 11

您可以在 Scaffold 的底部工作表上添加完成按钮。

import 'package:flutter/material.dart';
class MyPage extends StatefulWidget {
  const MyPage({super.key});

  @override
  State<MyPage> createState() => _MyPageState();
 }

 class _MyPageState extends State<MyPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
  bottomSheet: MediaQuery.of(context).viewInsets.bottom == 0
      ? null
      : Row(
          children: [
            const Spacer(),
            TextButton(
                onPressed: () {
                  FocusManager.instance.primaryFocus?.unfocus();
                },
                child: const Text("Done"))
          ],
        ),
  appBar: AppBar(
    backgroundColor: Theme.of(context).colorScheme.inversePrimary,
    title: const Text("Keyboard done button"),
  ),
  body: ListView(
    padding: const EdgeInsets.all(8),
    keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
    children: [
      TextFormField(
        decoration: const InputDecoration(
          labelText: 'Some text',
        ),
      ),
    ],
  ),
);
}
}

Answer 12

done

中没有

iOS

按钮，但我们可以检查输入的长度并清除

focus

以隐藏数字键盘。 如下实现，（它将使用固定长度的数值）

onChanged: (val) {
        if (val.length == 10) { //10 is the length of the phone number you're allowing
          FocusScope.of(context).requestFocus(FocusNode());
        }
      }