我无法找到一种方法来创建一个输入字段颤振,将打开一个数字键盘,应该采取数字输入。这是可能的颤振材料部件?一些GitHub讨论似乎表明这是一个受支持的功能,但我无法找到任何关于它的文档。


当前回答

您可以使用keyboardType参数轻松更改输入类型 你有很多可能性检查文档TextInputType 所以你可以使用号码或电话值

 new TextField(keyboardType: TextInputType.number)

其他回答

下面是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;
    },
  ),

正如接受的答案所述,指定keyboardType会触发一个数字键盘:

keyboardType: TextInputType.number

其他好的回答指出,一个简单的基于正则表达式的格式化器可以用来只允许输入整数:

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

这样做的问题是正则表达式一次只匹配一个符号,因此限制小数点的数量(例如)不能通过这种方式实现。

另外,其他人也表明,如果一个人想验证一个十进制数,它可以通过使用TextFormField和它的验证器参数来实现:

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

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


我希望只允许输入十进制数字,而不是稍后验证。我的解决方案是编写一个自定义格式化器利用int.tryParse:

/// Allows only decimal numbers to be input.
class DecimalNumberFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    // Allow empty input and delegate formatting decision to `num.tryParse`.
    return newValue.text != '' && num.tryParse(newValue.text) == null
        ? oldValue
        : newValue;
  }
}

另外,也可以为自定义格式化器使用regex,这将应用于整个输入,而不仅仅是单个符号:

/// Allows only decimal numbers to be input. Limits decimal plates to 3.
class DecimalNumberFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    // Allow empty input.
    if (newValue.text == '') return newValue;

    // Regex: can start with zero or more digits, maybe followed by a decimal
    // point, followed by zero, one, two, or three digits.
    return RegExp('^\\d*\\.?\\d?\\d?\\d?\$').hasMatch(newValue.text)
        ? newValue
        : oldValue;
  }
}

这样,我还可以将小数板的数量限制为3。

您可以使用keyboardType参数轻松更改输入类型 你有很多可能性检查文档TextInputType 所以你可以使用号码或电话值

 new TextField(keyboardType: TextInputType.number)

你可以指定数字为keyboardType的TextField使用:

keyboardType: TextInputType.number

检查一下我的总管。飞镖文件

import 'package:flutter/material.dart';
import 'package:flutter/services.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>[
    FilteringTextInputFormatter.digitsOnly
], // Only numbers can be entered
          ),
        ],
      )),
    );
  }
}

TextField(
  controller: _controller,
  keyboardType: TextInputType.number,
  inputFormatters: <TextInputFormatter>[
  FilteringTextInputFormatter.allow(RegExp(r'[0.0-9.9]')),
 ])