Flutter-如何在Flutter中的数字键盘中添加完成按钮

Question

我试图在数字类型输入中为flutter中的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

这是在键盘打开时添加“完成”按钮的方法：TextFormField

\n

textInputAction: TextInputAction.done,\n

\n

请记住，iOS 不\xe2\x80\x99t 支持键盘上的“完成”NUMERIC。

\n

Answer 3

add this to your TextField

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

Answer 4

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

你可以看看这里：

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 5

你不需要一个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 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}'))],