如何在提交时将文本字段更改为另一个小部件？答案

【问题标题】：How can I change a Textfield to another widget onSubmitted?如何在提交时将文本字段更改为另一个小部件？
【发布时间】：2020-03-31 20:18:48
【问题描述】：

我有一个 Textfield，在输入之后我想将 Textfield 小部件转换为一个简单的 Textwidget（例如，输入您的姓名 => 显示您的姓名）。

我尝试在下面的代码中使用条件语句来执行此操作（这只是显示问题的快速示例代码，不想发布我的整个代码）：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController hello1 = TextEditingController();

  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            hello1.text == ''
                ? TextField(
                    controller: hello1, onSubmitted: (_) => print(hello1.text))
                : Text(hello1.text),
            RaisedButton(onPressed: () {
              setState(() {
                counter++;
              });
            })
          ],
        ),
      ),
    );
  }
}

所以当我在 Textfield 中输入文本并提交时，小部件不会转换为文本小部件。除非我在屏幕上重新渲染其他内容，否则这就是我添加 RaisedButton 和 counter 变量的原因。

那么我该怎么做才能立即将其转换为文本小部件。请随意指出我可能在这里遗漏的一些基本逻辑，谢谢！

【问题讨论】：

标签： flutter dart conditional-statements

【解决方案1】：

这是因为你没有调用 setState() 方法。

更改 TextEditingController 的值不会重建您的小部件。 SetState() 方法可以。

children: <Widget>[
        hello1.text == ''
            ? TextField(
                controller: hello1,
                onSubmitted: (_) {
                  print(hello1.text);
                  setState(() {});
                },
              )
            : Text(hello1.text),
        RaisedButton(
          onPressed: () {
            setState(() {});
          },
        )
      ],

【讨论】：