如何在Flutter中创建数字输入字段？

Question

我无法找到一种方法在Flutter中创建一个可以打开数字键盘的输入字段.这可能与Flutter材料小部件有关吗？一些github讨论似乎表明这是一个受支持的功能,但我无法找到任何有关它的文档.

Answer 1

您可以使用以下命令将数字指定为TextField的keyboardType:

keyboardType: TextInputType.number

检查我的main.dart文件

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      home: new HomePage(),
      theme: new ThemeData(primarySwatch: Colors.blue),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new HomePageState();
  }
}

class HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.white,
      body: new Container(
          padding: const EdgeInsets.all(40.0),
          child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new TextField(
            decoration: new InputDecoration(labelText: "Enter your number"),
            keyboardType: TextInputType.number,
            inputFormatters: <TextInputFormatter>[
    WhitelistingTextInputFormatter.digitsOnly
], // Only numbers can be entered
          ),
        ],
      )),
    );
  }
}

Answer 2

为了避免粘贴非数字值，请在后面添加

keyboardType: TextInputType.number

这段代码：

inputFormatters: [FilteringTextInputFormatter.digitsOnly] 

来自https://api.flutter.dev/flutter/services/FilteringTextInputFormatter-class.html

Answer 3

对于那些谁正在寻找制作TextField或TextFormField只接受数字输入，试试这个代码块：

TextFormField(
    controller: _controller,
    keyboardType: TextInputType.number,
    inputFormatters: <TextInputFormatter>[
        WhitelistingTextInputFormatter.digitsOnly
    ],
    decoration: InputDecoration(
        labelText:"whatever you want", 
        hintText: "whatever you want",
        icon: Icon(Icons.phone_iphone)
    )
)

Answer 4

如果您需要使用双数：

keyboardType: TextInputType.numberWithOptions(decimal: true),
inputFormatters: [FilteringTextInputFormatter.allow(RegExp('[0-9.,]')),],
onChanged: (value) => doubleVar = double.parse(value),

RegExp('[0-9.,]')允许使用 0 到 9 之间的数字，以及逗号和点。

RegExp('[0-9.,-]')允许使用 0 到 9 之间的数字，以及逗号、点和减号（用于负数）。

double.parse()从字符串转换为双精度。

不要忘记您需要： import 'package:flutter/services.dart';

您可以在此 dartpad上检查和测试完整的演示

如果您只想在字符串开头允许减号：

final RegExp _myPattern = RegExp(r'^-?[\d,.]*$');
(...)
TextInputFormatter.withFunction(
  (TextEditingValue oldValue, TextEditingValue newValue) {
    return _myPattern.hasMatch(newValue.text)
        ? newValue
         : oldValue;
   },
 ),

您可以在另一个 dartpad上检查和测试完整的demo2

Answer 5

设置键盘和验证器

String numberValidator(String value) {
  if(value == null) {
    return null;
  }
  final n = num.tryParse(value);
  if(n == null) {
    return '"$value" is not a valid number';
  }
  return null;
}

new TextFormField(
    keyboardType: TextInputType.number, 
    validator: numberValidator, 
    textAlign: TextAlign.right
    ...

• https://docs.flutter.io/flutter/material/TextFormField/TextFormField.html
• https://docs.flutter.io/flutter/services/TextInputType-class.html

Answer 6

您可以将这两个属性与 TextFormField 一起使用

 TextFormField(
         keyboardType: TextInputType.number
         inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],

只允许输入数字，不允许输入其他内容..

https://api.flutter.dev/flutter/services/TextInputFormatter-class.html

Answer 7

该TextField控件需要设置keyboardType: TextInputType.number, 并inputFormatters: <TextInputFormatter>[FilteringTextInputFormatter.digitsOnly]接受数字只能作为输入。

     TextField(
            keyboardType: TextInputType.number,
            inputFormatters: <TextInputFormatter>[
              FilteringTextInputFormatter.digitsOnly
            ], // Only numbers can be entered
          ),

DartPad 中的示例

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

    void main() => runApp(new MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: HomePage(),
          theme: ThemeData(primarySwatch: Colors.blue),
        );
      }
    }
    
    class HomePage extends StatefulWidget {
      @override
      State<StatefulWidget> createState() {
        return HomePageState();
      }
    }
    
    class HomePageState extends State<HomePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Colors.white,
          body: Container(
              padding: const EdgeInsets.all(40.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text("This Input accepts Numbers only"),
                  SizedBox(height: 20),
                  TextField(
                    decoration: InputDecoration(
                      focusedBorder: OutlineInputBorder(
                        borderSide:
                            BorderSide(color: Colors.greenAccent, width: 5.0),
                      ),
                      enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.red, width: 5.0),
                      ),
                      hintText: 'Mobile Number',
                    ),
                    keyboardType: TextInputType.number,
                    inputFormatters: <TextInputFormatter>[
                      FilteringTextInputFormatter.digitsOnly
                    ], // Only numbers can be entered
                  ),
                  SizedBox(height: 20),
                  Text("You can test be Typing"),
                ],
              )),
        );
      }
    }

Answer 8

对于那些需要在文本字段中使用Money格式的人：

仅使用：，（逗号）和。（期）

并阻止符号：-（连字符，减号或破折号）

以及：（空格处）

在您的TextField中，只需设置以下代码：

keyboardType: TextInputType.numberWithOptions(decimal: true),
inputFormatters: [BlacklistingTextInputFormatter(new RegExp('[\\-|\\ ]'))],

simbol连字符和空格仍将出现在键盘中，但会被阻塞。

Answer 9

以下是 Android 上实际手机键盘的代码：

关键部分：keyboardType: TextInputType.phone,

  TextFormField(
    style: TextStyle(
      fontSize: 24
    ),
    controller: _phoneNumberController,
    keyboardType: TextInputType.phone,
    decoration: InputDecoration(
      prefixText: "+1 ",
      labelText: 'Phone number'),
    validator: (String value) {
      if (value.isEmpty) {
        return 'Phone number (+x xxx-xxx-xxxx)';
      }
      return null;
    },
  ),

Answer 10

通过此选项，您可以严格限制没有编号的其他字符。

 inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],
 keyboardType: TextInputType.number,

对于使用以上选项，您必须导入此

import 'package:flutter/services.dart';

使用这种选项的用户不能将char粘贴到文本字段中

Answer 11

仅限数字类型

keyboardType: TextInputType.number

以及带有数字键盘的更多选项

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

Answer 12

只需将其添加到您的TextFormField

  keyboardType: TextInputType.number,
  inputFormatters: <TextInputFormatter>[
  FilteringTextInputFormatter.allow(RegExp(r'[0-9]')), ],

例子，

TextFormField(
        controller: textController,
        onChanged: (value) {
         print(value);
        },
        keyboardType: TextInputType.number,
        inputFormatters: <TextInputFormatter>[
          FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
        ],
      ),

Answer 13

要创建数字输入字段，您只需在textfield或textformfield中提供以下属性。

TextField(
  keyboardType: TextInputType.number, // Set the keyboard type to number
  decoration: InputDecoration(
    hintText: 'Enter a number',
  ),
);

快乐飘飘！

Answer 14

正如接受的答案所述，指定keyboardType会触发数字键盘：

keyboardType: TextInputType.number

其他好的答案指出，一个简单的基于正则表达式的格式化程序可用于只允许输入整数：

inputFormatters: [
  FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
],

这样做的问题是正则表达式一次只匹配一个符号，因此无法通过这种方式限制小数点的数量（例如）。

此外，其他人也表明，如果想要验证十进制数，可以通过使用 aTextFormField及其validator参数来实现：

new TextFormField(
    keyboardType: TextInputType.number, 
    validator: (v) => num.tryParse(v) == null ? "invalid number" : null, 
    ...

这样做的问题是它不能以交互方式实现，而只能在表单提交时实现。

我想只允许输入十进制数字，而不是稍后验证。我的解决方案是编写一个自定义格式化程序，利用int.tryParse：

keyboardType: TextInputType.number

或者，可以为自定义格式化程序使用正则表达式，它适用于整个输入，而不仅仅是单个符号：

inputFormatters: [
  FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
],

这样，我也可以将小数位数限制为 3。