如何在TextField()Flutter上设置范围数值

Question

这是我的代码：

Padding(
padding: const EdgeInsets.only(left: 8.0),
child: TextField(
inputFormatters: [
LengthLimitingTextInputFormatter(2),
WhitelistingTextInputFormatter.digitsOnly,
],
keyboardType: TextInputType.number,
decoration: new InputDecoration(
icon: Icon(Icons.assessment),
hintText: "Nilai",
border: InputBorder.none),
onChanged: (String str) {
nilai = str;
},
),
),

如何使输入数字仅在1-20范围内？

我正在尝试使用

WhitelistingTextInputFormatter(RegExp("[1-20]")),

但是，因为这个WhitelistingTextInputFormatter RegExp类型是字符串，所以我仍然可以键入22，因为那里允许2。

Answer 1

当您键入一个数字然后将其删除时(例如，如果您尝试键入一个新数字，它将停止工作(，投票最多的答案会显示出一些奇怪的行为。

我做了一个稍微修改过的TextInputFormatter，让您指定最小值和最大值，并修复了原始答案中的一些奇怪行为。

class NumericalRangeFormatter extends TextInputFormatter {
final double min;
final double max;
NumericalRangeFormatter({required this.min, required this.max});
@override
TextEditingValue formatEditUpdate(
TextEditingValue oldValue,
TextEditingValue newValue,
) {
if (newValue.text == '') {
return newValue;
} else if (int.parse(newValue.text) < min) {
return TextEditingValue().copyWith(text: min.toStringAsFixed(2));
} else {
return int.parse(newValue.text) > max ? oldValue : newValue;
}
}
}

Answer 2

您可以通过扩展TextInputFormatter类然后实现formatEditUpdate()方法来实现自己的TextInputFormatter。

这里有一个用例示例-

class CustomRangeTextInputFormatter extends TextInputFormatter {
@override
TextEditingValue formatEditUpdate(TextEditingValue oldValue,TextEditingValue newValue,) { 
if(newValue.text == '')
return TextEditingValue();
else if(int.parse(newValue.text) < 1)
return TextEditingValue().copyWith(text: '1');
return int.parse(newValue.text) > 20 ? TextEditingValue().copyWith(text: '20') : newValue;
}
}

您可以像这样将自定义格式化程序添加到TextField中-

TextField(
inputFormatters: [
WhitelistingTextInputFormatter.digitsOnly,
CustomRangeTextInputFormatter(),
],
// Rest of the TextField code
)

希望这能有所帮助！

Answer 3

keyboardType:
TextInputType.number,
inputFormatters:[                        //only numeric keyboard.
LengthLimitingTextInputFormatter(6),      //only 6 digit
WhitelistingTextInputFormatter.digitsOnly
],

希望这将帮助你

Answer 4

您可以将onChanged替换为：

onChanged: (String value) {
try {
if(int.parse(value) >= 1 && int.parse(value) <= 20) {
nilai = value;
}
} catch (e) {}

Answer 5

int.parse(value.toString()) < rangoMinimo ? 'El valor debe de ser mayor o igual a ${rangoMinimo}' : int.parse(value.toString()) > rangoMaximo ? 'El valor debe de ser menor o igual a ${rangoMaximo}' : null : null

Answer 6

当文本发生变化时，可以使用clamp：

TextField(
keyboardType: TextInputType.number,
inputFormatters: [
FilteringTextInputFormatter.digitsOnly,
],
onChanged: (value) {
final number = int.tryParse(value);
if (number != null) {
final text = number.clamp(min, max).toString();
final selection = TextSelection.collapsed(
offset: text.length,
);
textEditingController.value = TextEditingValue(
text: text,
selection: selection,
);
}
},
)

Answer 7

有一个属性可用于最大长度maxLength: 20，因此您可以使用此

Padding(
padding: const EdgeInsets.only(left: 8.0),
child: TextField(
inputFormatters: [
LengthLimitingTextInputFormatter(2),
WhitelistingTextInputFormatter.digitsOnly,
],
maxLength: 20,
keyboardType: TextInputType.number,
decoration: new InputDecoration(
icon: Icon(Icons.assessment),
hintText: "Nilai",
border: InputBorder.none),
onChanged: (String str) {
nilai = str;
},
),
)