Question

我要删除在文本下方看到的黑色下划线。每当我输入任何字符并为每个字符添加附件时，它就会出现。我该如何实现？这是我的TextFieldForm代码：

TextFormField(
          controller: _controller,
          showCursor: false,
          toolbarOptions: ToolbarOptions(
            cut: true,
            copy: false,
            selectAll: true,
            paste: true,
          ),
          decoration: InputDecoration(
            border: InputBorder.none,
            filled: true,
            fillColor: Colors.white,
            hintStyle: TextStyle(fontSize: 20),
            hintText: "Search the word",
            contentPadding: EdgeInsets.only(left: 20),
            enabledBorder: OutlineInputBorder(borderSide: BorderSide.none),
            suffixIcon:
                Icon(Icons.search, color: Colors.black.withOpacity(0.6)),
            focusedBorder: OutlineInputBorder(
              borderSide: BorderSide.none,
            ),
          ),
        ),

我尝试了“ border：InputBorder.none”，但是失败了...。

Answer 1

使用此功能：

focusedBorder: InputBorder.none,

Answer 2

我认为您必须像这样在装饰下添加focusBorder：

 decoration: InputDecoration(
                  border: InputBorder.none,
                  focusedBorder: InputBorder.none,
                ),

Answer 3

我猜这是针对您设备的操作系统的。这是一个自动完成选项。如您所见，当您按空格键时，它删除了下划线（表示单词已结束）。您已在电话设置中将其禁用，并且与您的代码无关。为此，请尝试以下操作：

打开手机或平板电脑上的“设置”菜单，然后选择“语言和输入法”。
在“键盘”和“输入法”下点击虚拟键盘。
选择Android键盘。

关闭自动更正并显示更正建议以及下一个单词建议。

Answer 4

您可以覆盖 TextField 小部件中的 inputFormatters，并将自定义格式化程序类放置在数组中，如下面的片段所示。

我的自定义格式化程序类：

    class CaseFormatting extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    return TextEditingValue(
      text: newValue.text,
      selection: newValue.selection
    );
  }
}

并在 TextField 中添加 inputFormatters 中的类。

    TextField(
  //...
                inputFormatters: [
                  CaseFormatting(),
                  // FilteringTextInputFormatter.allow(RegExp(r"[A-Z0-9]+")),
                ],
  //...
              )

如何删除TextFormField中输入文本的下划线？

4 个答案: