Question

我是Flutter的新人。我正在寻找TextField值总是大写，但我没有找到任何资源。

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

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

请帮我解决我的问题。提前谢谢。

Answer 1

您可以使用textCapitalization小部件的TextField属性。也请在Text Capitalization Official API

处获取有关详细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

Answer 2

也许使用textCapitalization：TextField中的TextCapitalization.characters可以帮助您吗？尽管这样也会在键入内容时将字符大写。

TextField(
    textCapitalization: TextCapitalization.sentences,
)

Answer 3

您可以使用TextCapitalization.characters来使所有键入的字符都大写

TextField(
    textCapitalization: TextCapitalization.characters,
)

Answer 4

您可以实施自定义TextInputFormatter

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

您可以传递给TextFormField.inputFormatters

另请参阅https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/material/text_form_field_demo.dart以获取完整示例

Answer 5

您需要做的就是：

字符串放入 .toUpperCase()

示例： "Some text".toUpperCase()

这适用于我的情况。我也是新人，所以我希望我帮助过。

Answer 6

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

如果要大写文本输入的整个值，请使用

TextField(
  textCapitalization: TextCapitalization.characters,
 )

Answer 7

以下是在输入文本上实现去抖动（或延迟）效果的方法：

1）导入软件包

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

2）在您的有状态小部件中声明以下内容

final subject = new PublishSubject<String>();

3）在同一个有状态小部件中，在initState方法下声明以下内容

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

4）在同一个有状态小部件中，创建以下方法（将在500毫秒后触发）

  void _loadNewData(String newData) {
    //do update here
  }

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

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

Answer 8

要做大写

您必须使用textCapitalization: TextCapitalization.characters输入大写字母

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

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

TextField(
 textCapitalization: TextCapitalization.characters,
),

要进行反跳

我们可以轻松地对输入流进行去抖动。使用计时器创建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));
}

通过将所有输入事件“保持”在给定的持续时间内，去抖动可以减轻服务器的压力。

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

Answer 9

 textCapitalization: TextCapitalization.characters,

简单！

Answer 10

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

TextField(
    controller: controllerReservation,
    onChanged: (value) {
       controllerDemo.text = value.toUpperCase();
    },
)

Answer 11

@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());
  }
}

Answer 12

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

Flutter TextField值始终为大写＆amp;去抖

12 个答案: