Flutter 和文本字段：如何通过自动删除该空格来限制我的用户在文本字段中使用该空格？

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

不允许空格的文本字段，使用正则表达式。如下-

            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

。

formatEditUpdate()

方法在用户键入或删除

TextField

中的字符时被调用。

在

formatEditUpdate()

方法中，我们通过在

contains()

参数的文本属性上调用

newValue

方法来检查新值是否包含任何空格。如果它确实包含空格，我们返回

oldValue

，这会阻止用户输入空格字符。否则，我们返回

newValue

，它允许用户键入字符。

要在

NoSpaceFormatter

中使用

TextField

类，您可以将

inputFormatters

属性设置为包含格式化程序实例的列表：

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