Flutter：TextFormField onchange 值到 Text 小部件答案

【问题标题】：Flutter : TextFormField onchange value to Text widgetFlutter：TextFormField onchange 值到 Text 小部件
【发布时间】：2020-09-18 13:55:39
【问题描述】：

我是新手，我尝试在输入文本字段时执行 onchange 值，该值正在更新 Text 小部件。

我尝试了两种方法，一种是来自 onchanged ，另一种是使用 TextEditingController ，都不起作用。

final txtController = TextEditingController();
String onchangeval = "";

TextFormField(
  onChanged: (value){
    onchangeval = value;
  },
  controller: txtController
),
Text("value_1 : " + onchangeval),
Text("value_2 : " + txtController.text),

注意：当前使用扩展 HookWidget

【问题讨论】：

标签： flutter dart

【解决方案1】：

您需要调用setState()，它会告诉框架小部件的状态已更改，并且应该重绘小部件。

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final txtController = TextEditingController();
  String onchangeval = "";

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        TextFormField(
            onChanged: (value) {
              setState(() {
                onchangeval = value;
              });
            },
            controller: txtController),
        Text("value_1 : " + onchangeval),
        Text("value_2 : " + txtController.text),
      ],
    );
  }
}

【讨论】：

嗨，我使用 extends HookWidget ，有什么想法也可以使用 setstate 吗？
@FeelRightz 我建议您发布另一个问题并发布您的完整代码以便能够正确回答您。 :)

【解决方案2】：

你必须把它放在setstate。文档：https://api.flutter.dev/flutter/widgets/State/setState.html

要使setstate 正常工作，您必须将小部件类型更改为StatefulWidget

final txtController = TextEditingController();
String onchangeval = "";

TextFormField(
  onChanged: (value){
setState(() {
    onchangeval = value;
});
  },
  controller: txtController
),
Text("value_1 : " + onchangeval),
Text("value_2 : " + txtController.text),

每次您想在应用中进行视觉更改时，您都必须处理可以更改的状态。

【讨论】：

【解决方案3】：

你应该使用setState()

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  final txtController = TextEditingController();
  String onchangeval = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextFormField(
                onChanged: (value) {
                  setState(() {
                    onchangeval = value;
                  });
                },
                controller: txtController),
            Text(
              onchangeval,
            ),
          ],
        ),
      ),
    );
  }
}

参考：https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html

【讨论】：

嗨，我使用 extends HookWidget ，有什么想法也可以使用 setstate 吗？