TextEditingController与OnChanged [英] TextEditingController vs OnChanged

问题描述

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

I am looking for a better explanation on the benefit of TextEditingController over OnChanged event for a TextField.

我的理解是onChanged的setState会通知所有小部件更改状态变量值。这样，任何小部件（例如Text）都可以简单地使用状态变量，并且会收到状态更改的通知。

My understanding is that onChanged's setState notifies all widgets of the change in state variable value. This way any widget (e.g. Text) can simply use the state variable and it will be notified of its changes.

我的错误希望是TextEditingController会让我变得更简单甚至不需要状态变量。像这样的东西：

My false hopes were TextEditingController would make it even simpler that I won't even need a state variable. Something like below:

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或类似内容无法管理声明自己并通知所有消费者状态改变？

Can anyone explain why TextEditingController or something similar cannot manage the state itself and notifies all consumers of change in state?

谢谢。

推荐答案

那不是假。您只是不同步设置状态而已。这种方法完全可以实现 onChanged ：

That's not false. You are just not setting state synchronously that's all. What onChanged does is exactly possible with this approach:

class _TestFormState extends State<TestForm> {
  TextEditingController controller;

  @override
  void initState() {
    controller = TextEditingController();
    controller.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,
        ),
      ],
    );
  }
}

如您所见，我们有监听器每次都在设置状态控制器状态改变。这正是 onChanged 的作用。

As you see, we have listener that setting state everytime the controller state changes. This is exactly what onChanged does.

编辑：因此，关于收益，您可以使用两种方法实现一切，这是一种主观的方式。但是有些事情很重要：

So, about benefits, you can achieve everything with both approach, it's a subjective way. But there are things matters:

1-如果具有BLoC模式，则可以直接将 Stream 分配为 onChanged 方法。

1 - If you have BLoC pattern, you can directly assign your Stream with onChanged method.

2-使用 TextEditingController 在许多地方使用相同的控制器。您可以使用 onChanged 来实现相同的目的，但是当有人读取您的代码时，它看起来像是变通方法，它看起来像是破碎的代码：）

2 - With TextEditingController you can use same controller in many place. You can achieve same thing with onChanged but it will look like workaround when someone reads your code it will look like broken code :)

3- onChanged 方法对于RegEx断言等也非常可行。与控制器相比，它看起来更加整洁。

3 - onChanged method is also very viable for RegEx assertion etc. It will look much cleaner comparing the controller.

最后，我认为 onChanged 在大多数情况下对于模块化和更简洁的代码更好。正如我所说的，这完全取决于您，这一切我现在都想得到。

At the end in my opinion, onChanged better for modularity and cleaner code in most cases. As I said it's all up to you, that's all come up my mind for now.

这篇关于TextEditingController与OnChanged的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！