时间戳

首页 > 解决方案 > TextEditingController 与 OnChanged

flutter - TextEditingController 与 OnChanged

问题描述

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

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

我的错误希望是 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 或类似的东西不能管理状态本身并通知所有消费者状态变化？

谢谢。

标签： flutterdart

解决方案

您只是没有同步设置状态而已。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,
        ),
      ],
    );
  }
}

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

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

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

实际上，在我看来，您大部分时间都不需要两者，因为TextFormField + ForminsideStatefulWidget是实现表单页面的非常完整的方式。结帐食谱：https ://flutter.dev/docs/cookbook/forms/validation

推荐阅读