dart - (Flutter) 如何在不按 "Done"的情况下自动监听 TextField 中的变化？

Question

I 在对话框中打印来自 TextField 的输入(TextField 和输出都在 AlertDialog 中)。只有当我在键盘上按下“完成”时，输出才会更新。如果我不按“完成”，它会一直显示旧输出。

这是我的源代码:

Future<void> widePopUpCustom() async {
  return showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
            title: Text('Enter Number'),
            content: SingleChildScrollView(
                child: ListBody(children: <Widget>[
              TextField(
                  controller: customRun,
                  decoration: InputDecoration(
                    labelText: 'Number',
                  )),
              Text('${customRun.text}'),
            ])),
            actions: <Widget>[
              FlatButton(
                  child: Text('OK'), onPressed: () => Navigator.pop(context))
            ]);
      });
}

我也声明了 Controller :

  final TextEditingController customRun = TextEditingController();

(进一步说明)这是我的输出，我想在我的 TextField 中输入文本时实时更新，而无需按键盘上的完成键

 Text('${customRun.text}'), 

Answer 1

对于演示，你可以看这里。 Example

1。识别需要重建的文本小部件

首先，我们希望这个小部件中的内容能够根据用户类型进行重建。

Text('${customRun.text}'),

不幸的是，这个小部件驻留在 widePopUpCustom 方法中警报对话框子项

void widePopUpCustom() async {
    await showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('Enter Number'),
          content: SingleChildScrollView(
            child: ListBody(
              children: <Widget>[
                TextField(
                  controller: customRun,
                  decoration: InputDecoration(
                    labelText: 'Number',
                  ),
                ),
                Text('${customRun.text}'), // Needs to be re-rendered
              ],
            ),
          ),
        );
      },
    );
  }

在这种情况下，我们无法触发 AlertDialog 小部件的重建，包括其所有子项、ListBody、TextField 和 Text 小部件。

2。拆分AlertDialog并将其转换为Stateful Widget

我们考虑将AlertDialog移动到AlertWrapper中，并将AlertWrapper定义为Stateful Widget。所以稍后，我们可以使用以下代码触发 AlertWrapper 的重建:

setState((){})

我们可以结束这一步，将 widePopUpCustom() 修改为这个:

Future<void> widePopUpCustom() async {
    return showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AlertWrapper();
      },
    );
  }

Before, AlertDialog will be considered as Stateless that won't be re-rendered unless we close the dialog.

3。覆盖有状态的小部件以附加监听器

通过使用有状态的小部件，我们可以探索 initState 的用法。在这种情况下，我们将 addListener 附加到 customRun TextController。

Please notice changesOnField method. This method will be triggered each time user interacts with keyboard input

class AlertWrapper extends StatefulWidget {
  const AlertWrapper({
    Key key,
  }) : super(key: key);

  @override
  _AlertWrapperState createState() => _AlertWrapperState();
}

class _AlertWrapperState extends State<AlertWrapper> {
  final TextEditingController customRun = TextEditingController();

  changesOnField() { 
    print("Updated Text: ${customRun.text}");
    setState(() {}); // Will re-Trigger Build Method
  }

  @override
  void initState() {
    super.initState();
    customRun.addListener(changesOnField);
  }
}

changesOnField 会触发 build 方法被重新调用，然后我们可以更新 Text widget 中的值

@override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text('Enter Number'),
      content: SingleChildScrollView(
        child: ListBody(
          children: <Widget>[
            TextField(
              controller: customRun,
              decoration: InputDecoration(
                labelText: 'Number',
              ),
            ),
            Text('${customRun.text}'), // Finally re-rendered
          ],
        ),
      ),

完整的工作库

您可以查看此存储库。 Github

更多改进

作为official docs状态，我们需要配置监听器以优化应用程序。

稍后我们可以添加这段代码

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