检测 TextFormField 停止输入颤动答案

【问题标题】：Detect TextFormField stop typing in flutter检测 TextFormField 停止输入颤动
【发布时间】：2020-03-18 13:22:50
【问题描述】：

我有 TextFormField，并且希望在用户停止在文本字段中输入时执行相同的操作。现在我正在使用onchange 函数，但我想检测用户何时停止输入。

【问题讨论】：

你如何定义“停止打字”？如果 300 毫秒后没有输入任何键，是否意味着“停止输入”？还是用户停下来想输入更多内容？
是的，当然。
我可以在onchange 函数中使用计时器，如果用户在timer != 0 时不输入，那么我将执行我的操作..
您想执行一些“键入时搜索”功能吗？如果是这样，请使用rx-dart 包及其debounce 方法
我尝试使用stream_transform包，但没有找到debounce方法

标签： flutter

【解决方案1】：

如果您想在文本字段上实现去抖动以进行搜索，那么就可以了。

  final _searchQueryController = new TextEditingController();
  Timer _debounce;
  String query = "";
  int _debouncetime = 500;

  @override
  void initState() {
    _searchQueryController.addListener(_onSearchChanged);
    super.initState();
  }

  @override
  void dispose() {
    _searchQueryController.removeListener(_onSearchChanged);
    _searchQueryController.dispose();
    super.dispose();
  }

  _onSearchChanged() {
    if (_debounce?.isActive ?? false) _debounce.cancel();
    _debounce = Timer(Duration(milliseconds: _debouncetime), () {
      if (_searchQueryController.text != "") {
        ///here you perform your search
        performSearch(_searchQueryController.text);
      }
    });
  }

//your textfield

TextField(controller: _searchQueryController,
                    autofocus: true,
                    decoration: InputDecoration(
                      hintText: " Search...",
                      border: InputBorder.none,
                    ),
                    style: TextStyle(fontSize: 14.0),
                  )

【讨论】：

他正在使用debounce() 进行搜索

【解决方案2】：

您可以使用flutter_hooks 进行如下操作：

class DebounceTextField extends HookWidget {
  ///
  const DebounceTextField({
    Key? key,
    required this.padding,
    required this.onAnswer,
    required this.child,
    this.initialText,
    this.debounceTime,
  }) : super(key: key);

  ///
  final EdgeInsets padding;

  ///
  final String? initialText;

  ///
  final OnAnswer onAnswer;

  ///
  final TextFormField child;

  ///
  final int? debounceTime;

  @override
  Widget build(BuildContext context) {
    final TextEditingController textController =
        useTextEditingController(text: initialText);

    useEffect(
      () {
        Timer? timer;
        void listener() {
          timer?.cancel();
          timer = Timer(
            Duration(milliseconds: debounceTime ?? 500),
            () => onAnswer(textController.text),
          );
        }

        textController.addListener(listener);
        return () {
          timer?.cancel();
          textController.removeListener(listener);
        };
      },
      <TextEditingController>[textController],
    );

    // child.controller = textController;

    return Padding(
      padding: padding,
      child: TextFormField(
        controller: textController,
        validator: _shortAnswerValidator,
        decoration: const InputDecoration(
          hintText: "Cevabı buraya yazınız...",
        ),
      ),
    );
  }
}

我们得到了这个here的灵感。

【讨论】：