Flutter：TextField 在输入多个空格时自动添加一个点

Question

我只是实现了一个简单的 TextField，但是当我输入多个空格时，它会自动在前面添加一个点。

my-custom-flutter-textfield

这是我的自定义 TextField 小部件

@override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.all(5),
        child: Column(children: [
          Align(
              alignment: Alignment.topLeft,
              child: Padding(
                padding: const EdgeInsets.only(bottom: 5),
                child: Text(
                  title,
                ),
              )),
          TextField(
              controller: _controller,
              autocorrect: false,
              decoration: InputDecoration(
                isDense: true,
                contentPadding: const EdgeInsets.all(10),
                enabledBorder: OutlineInputBorder(
                  borderSide: const BorderSide(
                    color: Colors.black,
                    width: 2,
                  ),
                  borderRadius: BorderRadius.circular(5),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: const BorderSide(
                    color: Colors.orange,
                    width: 2,
                  ),
                  borderRadius: BorderRadius.circular(5),
                ),
              ))
        ]));
  }

Answer 1

这是 iOS 键盘和大多数 Android 键盘的标准功能。我认为您无法通过 Flutter 控制它。

Answer 2

我认为这与应用程序本身没有任何关系，但 phone。您需要从 phone 的设置中禁用它。

尽管如此，如果您确实需要能够键入双空格，我将按以下方式实现。

final TextEditingController controller = TextEditingController();
  TextSelection? cursor;
  int length = 0;
  String lastChar = '';
  String currentChar = '';

  String replaceCharAt(String oldString, int index, String newChar) {
  // function from 
    return oldString.substring(0, index) +
        newChar +
        oldString.substring(index + 1);
  }

  void removeDotOnSpace(String input) {
    //save the position of the cursor
    cursor = controller.selection;

    lastChar = currentChar;
    // if the input isn't empty and if you're not removing text
    if (input.isNotEmpty && input.length > length) {
      currentChar = input[input.length - 1];
      // if it has at least two characters, the second to last being a dot and the "lastChar" variable not being a dot
      if (input.length >= 2 &&
          input[input.length - 2] == '.' &&
          lastChar != '.') {
        // replace the dot and set state. Because setstate resests cursor position we need to save it and give it back.
        setState(() {
          controller.text = replaceCharAt(input, input.length - 2, ' ');
          controller.selection = cursor!;
        });
      }
    } else {
      currentChar = '';
      lastChar = '';
    }
    length = input.length;
  }

将其放入有状态小部件中并在 onchanged 函数中使用它

 TextFormField(
              controller: controller,
              onChanged: (value) {
                removeDotOnSpace(value);
              },
            ),

PS: 除非你的文本字段必须有双空格，否则你应该顺其自然。

Answer 3

尝试textCapitalization: TextCapitalization.words,

Answer 4

在表单输入中将此函数放在模糊上：

const handleTrimDataAndRemoveDot = () => {
    const trimmedData = formData.trim();
    let validatedData;
    if (trimmedData.charAt(trimmedData.length - 1) === ".") {
      validatedData = trimmedData.replace(
        trimmedData.charAt(trimmedData.length - 1),
        ""
      );
    } else {
      validatedData = trimmedData;
    }
    setFormData(validatedData);
  };

Flutter：TextField 在输入多个空格时自动添加一个点

Flutter: TextField auto add a dot when input multiple spaces

flutter

dart

textfield

spaces