问答中心分类: FLUTTER如何在 Flutter 中创建数字输入字段?
0
匿名用户 提问 19分钟 前

我无法找到一种方法来在 Flutter 中创建一个可以打开数字键盘并且只接受数字输入的输入字段。 Flutter 材质小部件可以做到这一点吗?一些 GitHub 讨论似乎表明这是一个受支持的功能,但我找不到任何关于它的文档。

Ishan Fernando 回复 19分钟 前

添加键盘类型keyboardType:TextInputType.number,

18 Answers
0
Bilal Şimşek 回答 19分钟 前

对于那些正在寻找制作TextField或者TextFormField只接受数字作为输入,试试这个代码块:
适用于颤振 1.20 或更新版本

TextFormField(
  controller: _controller,
  keyboardType: TextInputType.number,
  inputFormatters: <TextInputFormatter>[
   // for below version 2 use this
 FilteringTextInputFormatter.allow(RegExp(r'[0-9]')), 
// for version 2 and greater youcan also use this
 FilteringTextInputFormatter.digitsOnly

  ],
  decoration: InputDecoration(
    labelText: "whatever you want",
    hintText: "whatever you want",
    icon: Icon(Icons.phone_iphone)
  )
)

对于 1.20 的早期版本

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)
    )
)
Mariano Argañaraz 回复 19分钟 前

这是为了避免用户粘贴非数字字符串(inputFormatters),谢谢。

Abhilash Chandran 回复 19分钟 前

这在 Flutter_web 中也很有效。在 flutter_web 中我们不能强制使用数字键盘的原因是限制是自然的选择。谢谢@BilalŞimşek

Abed Putra 回复 19分钟 前

它现在已弃用。

Bensal 回复 19分钟 前

但是当非数字字符串存储在变量中时,它们不仅仅是在文本字段中更新。当我们按下退格键时,我们可以理解它。如何以仅在 controller.text 中存储数字的方式对其进行编码?

Bilal Şimşek 回复 19分钟 前

@Bensal,您也可以将 RegExp(r'[0-9]’) 用于 controller.text 。

Bensal 回复 19分钟 前

@BilalŞimşek 谢谢你的回复,但我想办法通过控制器添加它,你能告诉我代码吗?

SilkeNL 回复 19分钟 前

我使用颤振 2.1.0,这仍然有效。inputFormatters: <TextInputFormatter>[ WhitelistingTextInputFormatter.digitsOnly ],

M. A. 回复 19分钟 前

在 Flutter 2.2.2 中不推荐使用 WhitelistingTextInputFormatter.digitsOnly,而是使用 inputFormatters:[FilteringTextInputFormatter.digitsOnly] 仅允许数字(不允许使用逗号、空格或 #)

joshpetit 回复 19分钟 前

为了防止人们输入多个小数,正则表达式r'^\d+\.?\d*'效果很好。

Dananjaya 回复 19分钟 前

对于颤振 2/3inputFormatters: [ FilteringTextInputFormatter.digitsOnly ]

0
Hardik Kumbhani 回答 19分钟 前

通过此选项,您可以严格限制另一个没有数字的字符。

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

要使用上述选项,您必须导入它

import 'package:flutter/services.dart';

使用这种选项用户不能在文本字段中粘贴字符

shababhsiddique 回复 19分钟 前

这是实际的综合答案。没有格式化程序只是设置键盘是不够的。

shababhsiddique 回复 19分钟 前

如果我只想要小数和数字。如何添加“。”进入格式化程序的白名单?

anoop4real 回复 19分钟 前

@shababhsiddique 你找到答案了吗?

shababhsiddique 回复 19分钟 前

@anoop4real 是的,我只使用 TextFormField(keyboardType: TextInputType.number, inputFormatters: [ FilteringTextInputFormatter.allow((RegExp(“[.0-9]”))) ], ) 有一个“。”在正则表达式中

Umesh Chakradhar 回复 19分钟 前

@shababhsiddique 它允许多个 “.”s 。我想接受双数。知道怎么做吗?

Nicolas 回复 19分钟 前

FilteringTextInputFormatter.allow(RegExp(r’^\d*\.?\d*$’))

Sabrina 回复 19分钟 前

WhitelistingTextInputFormatter 已弃用。

Didier 回复 19分钟 前

WhitelistingTextInputFormatter 是对 FilteringTextInputFormatter 的弃用更改stackoverflow.com/a/70335837/9576680

0
Günter Zöchbauer 回答 19分钟 前

设置键盘和验证器

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
    ...
kashlo 回复 19分钟 前

出现错误:局部变量 num 在声明之前不能被引用

Günter Zöchbauer 回复 19分钟 前

好的,名字num因为变量不起作用。名称需要更改

kashlo 回复 19分钟 前

来自文档: onError 参数已弃用并将被删除。而不是 num.parse(string, (string) { … }),你应该使用 num.tryParse(string) ?? (…)。

0
Matteo Toma 回答 19分钟 前

为避免粘贴非数字值,请在之后添加

keyboardType: TextInputType.number,

这段代码:

inputFormatters: [FilteringTextInputFormatter.digitsOnly]

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

0
Fellipe Sanches 回答 19分钟 前

对于需要合作的人货币格式在文本字段中:
仅使用: ,(逗号)和 。(时期)
并阻止符号:-(连字符、减号或破折号)
以及:⌴(空格处)
在您的 TextField 中,只需设置以下代码:

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

符号连字符和空格仍会出现在键盘中,但会被阻止。

HFranco 回复 19分钟 前

你知道如何只允许一个逗号或句号吗?

Fellipe Sanches 回复 19分钟 前

@HeddieFranco 了解正则表达式developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/…