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

时间:2018-11-27 17:56:53

标签: dart flutter

我正在尝试在数字类型输入中为Fluke中的TextFormField添加完成按钮,但我无法做到这一点。请提供解决方案的帮助。

代码:

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

我想要创建一个this之类的键盘。对于输入文本表单字段。

8 个答案:

答案 0 :(得分:1)

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

enter image description here

您可以在这里看看:

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",
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      }

答案 1 :(得分:0)

更改

keyboardType: TextInputType.number

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

答案 2 :(得分:0)

您不需要select avg(replace(salary::text, '0', '')::int) as myavg from mytable 按钮,只需用done包裹MaterialApp

GestureDetector

答案 3 :(得分:0)

请尝试更改为

v_message := item.notification_msg || '<br>'

答案 4 :(得分:0)

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

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

答案 5 :(得分:0)

我使用了签名选项来显示完成按钮。然后我使用 TextInputFormatter 和 RegEx 来限制用户可以输入的内容。

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*$')),
              ],
            ),

答案 6 :(得分:0)

这是在键盘打开时将完成按钮添加到您的TextFormField的方法:

textInputAction: TextInputAction.done,

请记住,iOS 不支持在 NUMERIC 键盘上完成

答案 7 :(得分:-1)

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());
        }
      }