【问题标题】:Flutter TextField input only decimal numbersFlutter TextField 只输入十进制数字
【发布时间】:2019-09-02 00:20:50
【问题描述】:

我只想在TextField 中输入十进制数Flutter。我尝试了下面的代码,但这不起作用。它允许使用 alpha (a-z) 和特殊字符。

TextField(
  controller:
      new TextEditingController(text: listDisplay[position].getBlockQty(),
  ),       
  textAlign: TextAlign.center,
  maxLines: 1,       
  keyboardType: TextInputType.numberWithOptions(
      decimal: true,
      signed: false),       
),

【问题讨论】:

  • 对我来说这是可行的。你所说的 alpha 作品是什么意思。
  • Alpha (A-Z) 并且还允许使用特殊字符,例如 +,-
  • it allows alpha words 是什么意思?它正在显示它们,但它们不可点击。
  • @CopsOnRoad,在我的例子中,它输入 alpha (a-z) 和特殊字符。
  • @CopsOnRoad,我正在从硬件键盘输入数据。所以这是问题??

标签: flutter textfield


【解决方案1】:

在这种情况下,您可以使用TextInputFormatter

这是一个相同的例子,

子类TextInputFormatter

import 'package:flutter/services.dart';

class RegExInputFormatter implements TextInputFormatter {
  final RegExp _regExp;

  RegExInputFormatter._(this._regExp);

  factory RegExInputFormatter.withRegex(String regexString) {
    try {
      final regex = RegExp(regexString);
      return RegExInputFormatter._(regex);
    } catch (e) {
      // Something not right with regex string.
      assert(false, e.toString());
      return null;
    }
  }

  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    final oldValueValid = _isValid(oldValue.text);
    final newValueValid = _isValid(newValue.text);
    if (oldValueValid && !newValueValid) {
      return oldValue;
    }
    return newValue;
  }

  bool _isValid(String value) {
    try {
      final matches = _regExp.allMatches(value);
      for (Match match in matches) {
        if (match.start == 0 && match.end == value.length) {
          return true;
        }
      }
      return false;
    } catch (e) {
      // Invalid regex
      assert(false, e.toString());
      return true;
    }
  }
}

在你的文本字段中使用它

final _amountValidator = RegExInputFormatter.withRegex('^\$|^(0|([1-9][0-9]{0,}))(\\.[0-9]{0,})?\$');
...
TextField(
  inputFormatters: [_amountValidator],
  keyboardType: TextInputType.numberWithOptions(
    decimal: true,
     signed: false,
   ),
 )

【讨论】:

  • 用于限制:RegExInputFormatter.withRegex('^[0-9]{0,6}(\\.[0-9]{0,2})?\$')
  • 这是否适用于带有逗号而不是小数点字符的区域设置?
  • 我没试过。但我相信你需要为此更新正则表达式。
  • @Johnykutty 有了以上所有要求,我也想允许负数。正则表达式需要进行哪些更改?
  • @DhavalKansara 您可以将([-]{0,1}) 添加到正则表达式的开头。像 '^\$|^(0|([1-9][0-9]{0,}))(\\.[0-9]{0,})?\$' PS:我没有'没有在代码中尝试过,在regexpal.com中尝试过
【解决方案2】:

试试这个:

inputFormatters: [
        FilteringTextInputFormatter.allow(RegExp(r"[0-9.]")),
        TextInputFormatter.withFunction((oldValue, newValue) {
          try {
            final text = newValue.text;
            if (text.isNotEmpty) double.parse(text);
            return newValue;
          } catch (e) {}
          return oldValue;
        }),
      ],

演示:

TextFormField(
      keyboardType:
          TextInputType.numberWithOptions(decimal: true, signed: false),
      onChanged: _yourOnChange,
      inputFormatters: [
        FilteringTextInputFormatter.allow(RegExp(r"[0-9.]")),
        TextInputFormatter.withFunction((oldValue, newValue) {
          try {
            final text = newValue.text;
            if (text.isNotEmpty) double.parse(text);
            return newValue;
          } catch (e) {}
          return oldValue;
        }),
      ],
    )

【讨论】:

    【解决方案3】:

    我正在使用此代码,它给出了不同的结果,在某些手机上它只显示数字,而在其他手机上它显示破折号和其他字符,所以它取决于启动器或类似的东西,我猜在 iPhone 中它会显示正确的键盘(我在 iPhone 7s plus 上试过)。

    inputFormatters 将只允许数字,所以你会得到你想要的。

       TextField(
         textAlign: TextAlign.start,
         keyboardType: TextInputType.numberWithOptions(decimal: true),
         inputFormatters: <TextInputFormatter>[
                              FilteringTextInputFormatter.digitsOnly
                           ],
       ),
    

    【讨论】:

    • FilteringTextInputFormatter.digitsOnly 只允许输入数字,不能输入逗号或句点
    【解决方案4】:

    我在我的一个项目中使用了此代码,并且工作正常。希望对你有帮助。

    TextField(
             decoration: InputDecoration(
             border: InputBorder.none,
             hintText: "Amount",
             hintStyle:
             TextStyle(color: Colors.grey, fontSize: 12.0),
             ),
             style: TextStyle(color: Colors.black, fontSize: 12.0),
             controller: _amountController[index],
             textInputAction: TextInputAction.done,
             keyboardType: TextInputType.numberWithOptions(decimal: true),)
    

    【讨论】:

    • TextInputType.numberWithOptions 不起作用。我已经提到过。
    • @SagarZala 我已经添加了屏幕。你可以看到它的工作原理。
    • 在完全不工作的华为上,Mate 20 pro,我也可以看到带有数字的字符
    • 简单地使用 TextInputType.numberWithOptions(decimal: true) 不起作用。它将允许 12.123.121 类型的输入
    猜你喜欢
    • 2021-10-06
    • 2017-09-25
    • 2022-12-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-04-01
    • 2012-11-13
    相关资源
    最近更新 更多