如何在提交時將文本字段更改為另一個小部件？

Question

我有一個 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 和計數器變量的原因。

那么我該怎么做才能立即將其轉換為文本小部件。 請隨意指出我在這里可能遺漏的一些基本邏輯，謝謝！

Answer 1

這是因為你沒有調用 setState() 方法。

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

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