Flutter & Textfield：如何通过自动删除文本字段中的空间来限制用户使用文本字段中的空间？

Question

如何通过在用户完成键入时自动删除文本字段中的空格来限制用户使用该空格？

例如，如果用户键入King of Light，则在他/她离开文本字段后，它将作为KingofLight应用。

TextFormField(
initialValue: nickname != null
? nickname
: current_user.nickname,
decoration: InputDecoration(
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.grey),
borderRadius: BorderRadius.circular(6),
),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey, width: 1.0),
borderRadius: BorderRadius.circular(6),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey, width: 1.0),
borderRadius: BorderRadius.circular(6),
),
hintText: 'Empty',
hintStyle: TextStyle(
color: Colors.grey[400],
fontSize: 20,
//fontWeight: FontWeight.bold,
),
),
style: TextStyle(
fontSize: 20,
// fontWeight: FontWeight.bold,
),
validator: (val) => val.length < 2
? 'Enter a nickname 2+char long'
: null,
onChanged: (val) {
val = val.replaceAll(' ', '');
setState(() => nickname = val);
},
),

请帮帮我！非常感谢。

Answer 1

不允许使用空格的文本字段，使用RegExp。如下-

TextFormField(
inputFormatters: [
if (denySpaces)
FilteringTextInputFormatter.deny(
RegExp(r's')),
])

上面的解决方案对我来说很有效，阻止了键盘的空间。

Answer 2

这样做的一种方法是使用TextEditingController，并可以根据您的用例调用formatNickname()。

class _MyWidgetState extends State<MyWidget>{

FocusNode node = new FocusNode();
TextEditingController tc = TextEditingController();

@override
void initState(){
node.addListener((){
if(!node.hasFocus){
formatNickname();
}
});
super.initState();
}

void formatNickname(){
tc.text = tc.text.replaceAll(" ", "");
}

@override
Widget build(BuildContext context) {
return Column(
children: [
TextFormField(
focusNode: node,
controller: tc,
),
TextFormField(),
RaisedButton(
child: Text('Format'),
onPressed: (){
formatNickname();
},
),
],
);
}
}

Answer 3

另一个禁用在TextField中写入空格的选项，您可以使用输入格式化程序来限制允许的字符。

import 'package:flutter/services.dart';
class NoSpaceFormatter extends TextInputFormatter {
@override
TextEditingValue formatEditUpdate(
TextEditingValue oldValue, TextEditingValue newValue) {
// Check if the new value contains any spaces
if (newValue.text.contains(' ')) {
// If it does, return the old value
return oldValue;
}
// Otherwise, return the new value
return newValue;
}
}

我们创建了一个名为NoSpaceFormatter的新类，它扩展了TextInputFormatter。每当用户在TextField中键入或删除字符时，就会调用formatEditUpdate()方法。

在formatEditUpdate()方法中，我们通过对newValue参数的text属性调用contains()方法来检查新值是否包含任何空格。如果它确实包含空格，我们将返回oldValue，这将阻止用户键入空格字符。否则，我们返回newValue，它允许用户键入字符。

要在TextField中使用NoSpaceFormatter类，可以将inputFormatters属性设置为包含格式化程序实例的列表：

TextField(
inputFormatters: [NoSpaceFormatter()],
// Other properties...
)

Answer 4

TextFormField(
style: const TextStyle(fontSize: 30),
inputFormatters: [
FilteringTextInputFormatter.deny(
RegExp(r's')),
],
)