我无法找到一种方法来创建一个输入字段颤振,将打开一个数字键盘,应该采取数字输入。这是可能的颤振材料部件?一些GitHub讨论似乎表明这是一个受支持的功能,但我无法找到任何关于它的文档。
当前回答
对于那些需要在文本字段中使用货币格式的人:
只使用:,(逗号)和。(期)
并阻止符号:-(连字符,减号或破折号)
以及:⌴(空格)
在你的TextField,只需设置以下代码:
keyboardType: TextInputType.numberWithOptions(decimal: true),
inputFormatters: [BlacklistingTextInputFormatter(new RegExp('[\\-|\\ ]'))],
符号连字符和空格仍然会出现在键盘上,但会被阻塞。
其他回答
为避免粘贴的不是数字值,添加后
keyboardType: TextInputType.number
这段代码:
inputFormatters: [FilteringTextInputFormatter.digitsOnly]
从https://api.flutter.dev/flutter/services/FilteringTextInputFormatter-class.html
TextField小部件需要设置keyboardType: 和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"),
],
)),
);
}
}
下面是数字键盘的代码: keyboardType: TextInputType。当你在文本框中添加这个代码时,它将打开数字键盘。
final _mobileFocus = new FocusNode();
final _mobile = TextEditingController();
TextFormField(
controller: _mobile,
focusNode: _mobileFocus,
maxLength: 10,
keyboardType: TextInputType.phone,
decoration: new InputDecoration(
counterText: "",
counterStyle: TextStyle(fontSize: 0),
hintText: "Mobile",
border: InputBorder.none,
hintStyle: TextStyle(
color: Colors.black,
fontSize: 15.0.
),
),
style: new TextStyle(
color: Colors.black,
fontSize: 15.0,
),
);
仅限号码类型
keyboardType: TextInputType.number
和更多的选择与数字垫
keyboardType: TextInputType.numberWithOptions(decimal: true,signed: false)
正如接受的答案所述,指定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。
推荐文章
- 检测输入是否有文本在它使用CSS -在一个页面上,我正在访问和不控制?
- 如何用jQuery清空输入字段
- 在Flutter中向有状态小部件传递数据
- 未处理异常:ServicesBinding.defaultBinaryMessenger在绑定初始化之前被访问
- 出现键盘时,Flutter小部件将调整大小。如何预防这种情况?
- 使用Javascript函数设置输入值
- <input type='button' />和<input type='submit' />之间的差异
- 颤振-换行文本
- CSS输入宽度:100%超出父边界
- 如何在Dart中四舍五入到小数点后的给定精度程度?
- 添加一个启动屏幕颤振应用程序
- 如何将输入读取为数字?
- 在flutter中等同于wrap_content和match_parent ?
- 多行文本字段在扑动
- 如何在颤振文本下划线