Flutter TextField 值总是大写和去抖动

Posted 2023-02-23

【中文标题】Flutter TextField 值总是大写和去抖动

【英文标题】：Flutter TextField value always uppercase & debounce

【发布时间】：2018-08-20 16:33:59

【问题描述】：

我是 Flutter 的新手。我正在寻找始终为大写的 TextField 值，但我没有找到任何资源。

另一个问题是 TextField onChanged 事件去抖动实现。当我在 TextField 上键入时，它会立即触发不适合我的目标的 onChanged 事件。 onChange 事件将在每个文本更改 500 毫秒后触发。

 new TextField(
         controller: _controller,
         decoration: new InputDecoration(
              hintText: 'Search here',
         ),
         onChanged: (str) 
            //need to implement debounce
         
)

【问题讨论】：

您想将第一个字符大写还是所有文本都大写？您可以使用来自github.com/ReactiveX/rxdart的 debounce

需要所有字符大写。 @GünterZöchbauer

您的问题涉及 TextField 的两个不同方面。下次请教两个问题。我拒绝对一个本来很好的问题投赞成票。

【参考方案1】：

适用于Android、iOS、Web、macOS、Windows 和 Linux

您可以实现自定义TextInputFormatter

class UpperCaseTextFormatter extends TextInputFormatter 
  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) 
    return TextEditingValue(
      text: newValue.text.toUpperCase(),
      selection: newValue.selection,
    );
  

---

用法：

TextField(
  inputFormatters: [
    UpperCaseTextFormatter(),
  ]
)

Full example

【讨论】：

我不知道为什么这个解决方案没有更多的赞成票。据我所知，这是实现自动大写格式（或任何类型的文本字段格式）的正确方法。

嘿，如果你只需要在一个特定的地方，你实际上并不需要实现 textinputformater，看看我的回答如何在不扩展 TextInputFormatter 的情况下使用它

这就是我所说的“质量”解决方案，与其他平台不同，适用于每个平台，谢谢 :)

此答案在键盘中启用自动更正时会导致错误（它将 OldValue 与 NewValue 附加）。例如：我想输入 KEYBOARD：第一个字母类型 K，第二个字母类型 E，现在它替换为 KKE，依此类推，逐个字母键入它是在 OldValue 后面加上 NewValue。

@rjkolli 我无法重现您的问题。这个解决方案似乎有效。

【参考方案2】：

也许使用 textCapitalization: TextField 中的 TextCapitalization.characters 可以帮助您？虽然这也会在输入内容时将字符大写。

TextField(
    textCapitalization: TextCapitalization.sentences,
)

【讨论】：

@praveenb textCapitalization.sentences 在输入文本字段时是否无法完全工作或值无法大写？ p.s.每个句子的第一个单词仅大写，并在每个句号 (.) 后激活。

是的，我的错误......我看看我是否在 Textfield 中输入文本，然后它会被大写。以前，我预先填充了大写不起作用的文本。我认为应该。感谢您的澄清:)

【参考方案3】：

您可以使用TextField 小部件的textCapitalization 属性。也请参考这里的详细 API 信息Text Capitalization Official API

如下图

示例 1

 TextField(
        initialValue: flutter code camp
        textCapitalization: TextCapitalization.characters,
    )// OUTPUT : FLUTTER CODE CAMP

示例 2

 TextField(
        initialValue: flutter code camp
        textCapitalization: TextCapitalization.words,
    )// OUTPUT : Flutter Code Camp

示例 3

 TextField(
        initialValue: flutter code camp
        textCapitalization: TextCapitalization.sentences,
    )// OUTPUT : Flutter code camp

示例 4

 TextField(
        initialValue: flutter code camp
        textCapitalization: TextCapitalization.none,
    )// OUTPUT : flutter code camp

【参考方案4】：

你需要做的就是：

在字符串之后放 .toUpperCase()

示例："Some text".toUpperCase()

这在我的情况下有效。我也是新手，希望能帮到你。

【讨论】：

这是关于文本输入字段的。没有可以更改的字符串。给定的文本是通过 TextEditingController 检索的，然后应该使用它在每次击键时修改字段中的文本。我不认为这是可能的。

【参考方案5】：

您可以使用TextCapitalization.characters 将所有键入的字符设为大写

TextField(
    textCapitalization: TextCapitalization.characters,
)

【讨论】：

不行，因为它只是将用户的键盘切换为大写，但用户可以切换回小写。格式化程序解决方案要好得多

【参考方案6】：

最简单的方法是添加 TextField 的 onChanged 事件，并使用 TextField 的控制器将其转换为大写，就像上面一样：

TextField(
          controller: controllerReservation,
          onChanged: (value)                
            controllerReservation.value = 
               TextEditingValue(
                                text: value.toUpperCase(), 
                                selection: controllerReservation.selection);
          ,
        )

【讨论】：

这会将光标位置移动到开始

@Wahyu 我很确定我在发布这个答案时已经测试过了，但它没有。但如果需要，我会再次测试并发布改进版本。

@DiegoGarcia，我刚刚使用了您的代码示例，它确实将光标设置为字符串的开头并反转字符串

@PaulStoner 很抱歉很久才回答，我已经编辑了修复程序！

这是命令式思维。颤振完全相反。

【参考方案7】：

TextField 有一个 textCapitalization 属性，您可以使用它来将单词、句子或字符大写

如果您想将文本输入的全部值大写，请使用

TextField(
  textCapitalization: TextCapitalization.characters,
 )

【讨论】：

我无法在 cmets 中发布完整代码，但如果您有一个简单的 Flutter 应用程序并输入一个文本字段，您可以在 Flutter 桌面上轻松验证这一点

【参考方案8】：

要做大写

你必须使用textCapitalization: TextCapitalization.characters 输入总是大写

textCapitalization：TextField 提供了将用户输入的文本大写的选项。

使用TextCapitalization.characters：将句子中的所有字符大写。

TextField(
 textCapitalization: TextCapitalization.characters,
),

去抖动

我们可以轻松地对输入流进行去抖动处理。使用 Timer 创建 Debouncer 类

import 'package:flutter/foundation.dart';
import 'dart:async';

class Debouncer 
  final int milliseconds;
  VoidCallback action;
  Timer _timer;

  Debouncer( this.milliseconds );

  run(VoidCallback action) 
    if (_timer != null) 
      _timer.cancel();
    

    _timer = Timer(Duration(milliseconds: milliseconds), action);
  

声明和触发

final _debouncer = Debouncer(milliseconds: 500);

onTextChange(String text) 
  _debouncer.run(() => print(text));

Debounce 通过将所有输入事件“暂停”一段时间来减轻服务器的压力。

我们可以根据自己的喜好控制去抖动持续时间（500ms 是一个很好的默认值）。

【参考方案9】：

以下是您如何在输入文本上实现去抖动（或延迟）效果：

1) 导入包

rxdart: ^0.18.1 (or whatever the version will be)

2) 在你的 Stateful Widget 中声明如下

final subject = new PublishSubject<String>();

3) 在同一个Stateful Widget中，在initState方法下声明如下

subject.stream
    .debounce(new Duration(milliseconds: 500))
    .listen(_loadNewData);

4) 在同一个 Stateful Widget 中，创建以下方法（将在 500 毫秒后触发）

  void _loadNewData(String newData) 
    //do update here
  

4) 将以下行添加到您的 Textfield Widget（您现在可以摆脱 Controller）

onChanged: (string) => (subject.add(string)),

【参考方案10】：

@Günter-Zöchbauer 的解决方案有效，但是当您在 android 上切换到数字键盘时，如果您键入一个，它会再次切换到字母键盘。

这是因为您每次都在设置一个新的 TextEditingValue。

相反，如果您复制最新的并更改文本，它会起作用：

import 'package:flutter/services.dart';

class UpperCaseTextFormatter extends TextInputFormatter 
  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) 
    return newValue.copyWith(text: newValue.text.toUpperCase());
  

【参考方案11】：

 textCapitalization: TextCapitalization.characters,

简单！

【讨论】：

这应该是公认的答案。谢谢Apoorv

不起作用，兄弟。

@RahulKushwaha 哎呀！也许有些地方发生了变化，你能分享代码让我看看吗？

【参考方案12】：

TextField(
  controller: textController,
    onChanged: (value) 
      if (textController.text != value.toUpperCase())
        textController.value = textController.value.copyWith(text: value.toUpperCase());
  ,
)