如何在 Flutter 的 TextField 中使用 onKeyUp 事件

Question

我正在使用 flutter 制作一个简单的应用程序。在下面的代码中，当 TextBox changed 事件被触发时，我调用名为 updateTitle() 的方法。

但是我必须调用相同的方法 updateTitle()，当键打开时，就像我们在 javascript 和其他语言中使用的那样。

              TextField(
                controller: titleController,
                style: textStyle,
                onChanged: (value) => updateTitle(),
                decoration: InputDecoration(
                    labelText: "Title",
                    labelStyle: textStyle,
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(5.0),
                    )),
              ),

Answer 1

对于您的用例，onChanged 的工作方式与 onkyeup 的工作方式相同。每次用户在文本字段中点击一个新字符时，它都会被触发。

为了enable/disable一个按钮你应该监听这个事件，做测试看看这个字段是否不为空，修改一个变量来处理按钮状态，然后调用setState().

这只是一个示例代码。未经测试，但应该可以正常工作。

class _SoAnswerState extends State<SoAnswer> {

    bool _buttonActive = false;

    @override
    Widget build(BuildContext context) {

    ...

        TextField(
            controller: titleController,
            style: textStyle,
            onChanged: (value) => updateButtonState(value), // onChanged return the value of the field
            decoration: InputDecoration(
                labelText: "Title",
                labelStyle: textStyle,
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(5.0),
                )
            ),
        ),

    ...
    }

    void updateButtonState(String text){
        // if text field has a value and button is inactive
        if(text != null && text.length > 0 && !_buttonActive){
            setState(() {
                _buttonActive = true;
            }
        }else if((text == null || text.length == 0) && _buttonActive){
            setState(() {
                _buttonActive = false;
            }
        }
    }

编辑：添加有关事件的更多信息

在 JavaScript 中，onkeyup 事件处理程序在用户释放之前按下的键时触发。当用户按下并释放文本字段内的某个键时，文本字段值会发生变化。 Flutter 中的 onChanged 侦听器会在文本字段值更改时触发。在打字界面工作时，用户使用传统键盘，监听文本字段的所有变化不是一个好主意，因为用户可以按住一个键，导致应用程序重复 onchanged 事件太多次，每个字符重复一次。移动界面不是这种情况，用户（通常）无法按住某个键。

如何在 Flutter 的 TextField 中使用 onKeyUp 事件

How to use onKeyUp event in TextField in flutter

dart

flutter

flutter-layout