Flutter - 使用 TextEditingController 检测最后输入的字符信息字段是否与特定字符匹配

Question

我正在尝试构建一个文本字段，它会触发用户输入特定字符的某些事件。例如，如果用户键入“@”符号，它将自动触发一个事件(在我的情况下打开一个警报框)。我创建了一个 TextEditingController (_basicController)，它向该字段添加一个监听器并调用一个函数，该函数查找输入到该字段中的最后一个字符并检测与符号“@”的匹配:

_detectLatestValue() {
  var userInput = _basicController.text;
  if(userInput.characters.last == "@"){
    print("call to action");
    _tagHandleSelect(_basicController.text);
  }
}

它似乎在应该打印(“号召性用语”)时打印(“号召性用语”)，但是当我调用 _tagHandleSelect 函数(打开一个通用对话框)时，它似乎卡在一个循环中，即每次我关闭它打开的警报框时其他。

这是完整的页面代码:

import 'package:flutter/material.dart';
import 'package:characters/characters.dart';

  void main() => runApp(MyApp());

  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Welcome to Flutter',
        home: TextEditingControllerExample(),
      );
    }
  }

  class TextEditingControllerExample extends StatefulWidget {
    @override
    _TextEditingControllerExampleState createState() {
      return _TextEditingControllerExampleState();
    }
  }

  class _TextEditingControllerExampleState extends State<TextEditingControllerExample> {
    final _basicController = TextEditingController();
    @override
    void initState() {
      super.initState();
      _basicController.addListener(detectLatestValue);
    }

    @override
    void dispose() {
      _basicController.dispose();
      super.dispose();
    }

    _detectLatestValue() {
      var userInput = _basicController.text;
      if(userInput.characters.last == "@"){
        print("call to action");
        _tagHandleSelect(_basicController.text);
      }
    }
    Future<void> _tagHandleSelect(text) async {
      return showDialog<void>(
        context: context,
        builder: (context) {
          return AlertDialog(
            content: Text(text),
            actions: <Widget>[
              FlatButton(
                child: Text('Close'),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          );
        },
      );
    }

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              children: <Widget>[
                Form(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    child: TextField(
                        controller: _basicController,
                      ),
                    ],
                  ),
                ),
              ],
            )
          )
        ),
      );
    }
  }```

Answer 1

向 Controller 添加监听器可能有点难以管理。

如果您只想收听特定 TextField 上的更改，你可以这样做:

child: TextField(
    onChanged: (value) {
        if (value.endsWith("@")) {
            print("call to action");
            _tagHandleSelect(value);
        }
    },
),

这样你就知道 onChanged只会触发一次。
TextEditingController的听众每当 Controller 发生变化时都会触发，每次编辑文本时可能会发生多次(例如，当文本聚焦或未聚焦时，它会被触发)。

我希望这可以帮助你，你可以进一步发展你的想法!!