如何检测用户已停止在 TextField 中输入？答案

【问题标题】：How to detect user has stopped typing in TextField?如何检测用户已停止在 TextField 中输入？
【发布时间】：2023-04-05 00:31:01
【问题描述】：

我正在使用TextField 下的onChanged 函数

我正在调用我的代码，但现在的问题是每次输入或删除新单词时代码都会执行。

我正在寻找的是如何识别用户何时停止输入。

意味着增加一些延迟或类似的东西。

我也尝试使用Future.delayed 函数添加delay，但该函数也会执行n 次。

TextField(
   controller: textController,
   onChanged: (val) {
            if (textController.text.length > 3) {
              Future.delayed(Duration(milliseconds: 450), () {
                 //code here
              });
            }
            setState(() {});
          },
 )

【问题讨论】：

你熟悉 rxdart 吗？还是一般的流？
我看过一些相关的例子，但直到现在还没有使用它。您是否有一些与此用例相关的示例可以分享？
参见pub.dev/packages/stream_transform，并使用debounce 流转换器 - 文档说：“通过丢弃或收集在给定持续时间内发生的值来防止源流过于频繁地发射。”
谢谢@pskink 你知道我在哪里可以找到那个包的例子吗？我想可用的文档太少了。
很简单：StreamController<String> controller = StreamController(); 然后在initState 内部方法：controller.stream.transform(debounce(Duration(seconds: 1))).listen((s) => print('you typed: [$s]')); 并在您的小部件中使用它：TextField(onChanged: controller.add),

标签： flutter dart delay textfield

【解决方案1】：

感谢@pskink

我能够实现我正在寻找的功能。

在pubspec.yaml 中导入 stream_transform 包

stream_transform: ^0.0.19

import 'package:stream_transform/stream_transform.dart';

StreamController<String> streamController = StreamController();

@override
void initState() {
  streamController.stream
    .transform(debounce(Duration(milliseconds: 400)))
    .listen((s) => _validateValues());

  super.initState();
}

//function I am using to perform some logic
_validateValues() {
  if (textController.text.length > 3) {
     // code here
  }else{
     // some other code here
  }
}

文本域代码

TextField(
   controller: textController,
   onChanged: (val) {
        streamController.add(val);
     },
)

【讨论】：

使用Stream.where()方法代替textController.text.length > 3（在调用Stream.listen()之前）
你的意思是这样.where((String val) => userHandleController.text.length > 3 ? true : false)
但是我如何将 true 或 false 传递给 _validateValues 函数，因为我需要在 if 和 else 中执行两个代码
这里的去抖功能是什么意思？它没有定义。 @VickySalunkhe

【解决方案2】：

就我而言，我还需要 Flutter 异步。

//pubspec.yaml
stream_transform: ^2.0.0

import 'dart:async';
import 'package:stream_transform/stream_transform.dart';

StreamController<String> streamController = StreamController();

// In init function
streamController.stream
    .debounce(Duration(seconds: 1))
    .listen((s) => { 
       // your code 
     });

// In build function
TextField(
   style: TextStyle(fontSize: 16),
   controller: messageController,
   onChanged: (val) {
     myMetaRef.child("isTyping").set(true);
     streamController.add(val);
     },
   )

【讨论】：