flutter - TextEditingController 与 OnChanged

Question

我正在寻找关于 TextEditingController 相对于 TextField 的 OnChanged 事件的好处的更好解释。

我的理解是onChanged的setState通知所有widget状态变量值的变化。这样，任何小部件(例如文本)都可以简单地使用状态变量，并且它会收到有关其更改的通知。

我的错误希望是 TextEditingController 会让我什至不需要状态变量变得更简单。如下所示:

import "package:flutter/material.dart";

class TestForm extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return TestFormState();
  }
}

class TestFormState extends State<TestForm> {
  //string myStateVariable = "";
  final ctrl = TextEditingController();

  @override
  Widget build(BuildContext context) {

    var tf = TextField(
      controller: ctrl,
    );

    var t = Text("Current value: " + ctrl.text);  // <<<<<<<<<<< false hope! doesnt work!

    var x = Column(children: <Widget>[tf,t],);

    return MaterialApp(home: Material(child: Scaffold(
      appBar: AppBar(title: Text("Test Form"),),
      body: x,
    )));
  }
}

谁能解释为什么 TextEditingController 或类似的东西不能管理状态本身并通知所有消费者状态的变化？

谢谢。

Answer 1

您只是没有同步设置状态而已。 onChanged 的作用完全可以通过这种方法实现:

class _TestFormState extends State<TestForm> {
  late TextEditingController controller;

  @override
  void initState() {
    controller = TextEditingController()
      ..addListener(() {
        setState(() {});
      });
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        Text('Current Value: ${controller.text}'),
        TextField(
          controller: controller,
        ),
      ],
    );
  }
}

如您所见，每次 Controller 状态发生变化时，我们都有设置状态的监听器。这正是 onChanged 所做的。

所以，关于好处，你可以用这两种方法来实现一切，这是一种主观的方式。

关于福利:如果您需要在 Stream 中保存字段值，onChanged 就是您所需要的。在其他情况下，您可以使用 controller。

在我看来，实际上在大多数情况下您不需要两者，因为 StatefulWidget 中的 TextFormField + Form 是实现表单页面的非常完整的方法。结帐食谱:https://flutter.dev/docs/cookbook/forms/validation