单击按钮时在同一屏幕上显示 TextField 值答案

【问题标题】：Show TextField value on same screen on button click单击按钮时在同一屏幕上显示 TextField 值
【发布时间】：2020-05-18 10:44:53
【问题描述】：

这是我的屏幕，带有TextField 和Button。当有人点击显示按钮时，我希望它在按钮下方显示名称，如下图所示。

代码如下：


class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  final name = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Row(
              children: [
                Text(
                  'Name'
                ),
                TextField(
                  controller: name,
                )
              ],
            ),
            RaisedButton(
              onPressed: (){

              },
              child: Text('Show'),
            )
          ],
        ),
      ),
    );
  }
}

【问题讨论】：

你能分享一下你做了什么（代码）吗？

标签： flutter dart

【解决方案1】：

这可以作为您问题的基本示例。用户界面与上面显示的不完全一样

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

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

class _QuestionState extends State<Question> {
  String text = '';
  bool shouldDisplay = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Center(
          child: TextField(
            onChanged: (value) {
              setState(() {
                text = value;
              });
            },
          ),
        ),
        FlatButton(onPressed: () {
          setState(() {
            shouldDisplay = !shouldDisplay;
          });
        }, child: Text('Submit')),
        shouldDisplay ? Text(text) : Spacer()
      ],
    );
  }
}

希望这会有所帮助。

【讨论】：

谢谢，这正是我一直在寻找的。span>

【解决方案2】：

初始化两个变量。一个用于TextEditingController，一个用于文本值。

TextEditingController controller = TextEditingController();
String display = '';

给你的 TextField 一个控制器。

TextField(controller:controller);

在您的按钮中，设置 onPressed 以将显示文本更改为控制器文本。

FlatButton(
child: Text("Show"),
onPressed()=> setState((){display = controller.text;});
),

然后在你想显示文本的地方，设置要显示的文本字符串。

Text(display);

【讨论】：

【解决方案3】：

我建议你在问这些问题之前先学习 Flutter 的基础知识。这可以通过使用TextEditingController 和setState() 轻松实现。只需为您的TextField 定义一个控制器，然后在按下按钮时调用setState()。请注意，您必须使用 StatefulWidget，因为调用 setState() 会重建 UI。

在@override Widget 构建上方创建TextEditingController 和字符串：

  String displayName="";
  final myController = TextEditingController();

创建一个TextField 并将控制器分配给它：

TextField(
  controller: myController,
);

按下按钮时调用setState()：

MaterialButton(
child: Text("Show"),
onPressed: (){
 setState(() {
  displayName=myController.text;
 });
})

使用Text 小部件显示它：

Text(displayName);

祝你好运！您可以在此处了解如何使用TextEditingController：https://flutter.dev/docs/cookbook/forms/retrieve-input

更多关于小部件的信息：https://www.youtube.com/playlist?list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG

【讨论】：