Flutter：关闭软键盘后如何保持TextField值答案

【问题标题】：Flutter: how to maintain TextField value after dismissing the soft KeyboardFlutter：关闭软键盘后如何保持TextField值
【发布时间】：2020-09-26 18:53:25
【问题描述】：

有一个带有底部模式表的简单结构，其中包含一个用于将文本添加到列表中的输入文本字段和一个用于提交值的按钮。

当文本字段获得焦点时，它会自动打开覆盖提交按钮的软键盘。当我关闭键盘以按下按钮时，文本字段中的值仍然可见，但发送的值为空。如果我在不关闭键盘的情况下按下按钮，则正确发送值。

问题是：我怎样才能关闭键盘并在按下提交按钮后仍然能够发送键入的值？

代码如下：

1) 在主屏幕上，浮动操作按钮显示模态底部表单。

return Scaffold(
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        showModalBottomSheet(
            context: context,
            builder: (context) => AddTaskScreen(),               
      },

2) 在 AddTaskScreen 类上，有一个 Column，其中包含容器内模态底部工作表的内容。

Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Text(
            'Add your next Task',
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.lightBlueAccent,
              fontSize: 20,
              fontWeight: FontWeight.w400,
            ),
          ),
          TextField(
            textAlign: TextAlign.center,
            autofocus: true,
            onChanged: (value) {
              newTaskTitle = value;
            },
          ),
          FlatButton(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(
                Radius.circular(10),
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                'ADD',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 25,
                ),
              ),
            ),
            color: Colors.lightBlueAccent,
            onPressed: () {
              print(newTaskTitle);
            },
          ),
        ],
      ),
    ),

在这个简化版本中，TextField 中的值会在按下按钮时打印在控制台中。如果我按下按钮而不隐藏键盘，它可以正常工作；如果我隐藏键盘，它会传递一个空值。

提前感谢您的帮助。

【问题讨论】：

标签： android ios flutter mobile

【解决方案1】：

我遇到了同样的问题，我通过简单地将调用的类转换为扩展 StatefullWidget 而不是 StatelessWidget 来解决它。

在您的情况下，将类 AddTaskScreen() 转换为扩展 StatefullWidget。

【讨论】：

令人惊讶的是，这对我有用。谢谢。

【解决方案2】：

好的，最简单的方法是为子类提供一个 TextEditingController。

因此，对于您的情况，您可以先在父类中创建一个 TextEditingController，然后将其传递给子类。并在子类的 TextField 中设置控制器：你传递的控制器

Parent Class.....
//// other codes ////
TextEditingController textEditingController = TextEditingController();
return Scafold{
  FloatingActionButton(
  onPressed: () {
    showModalBottomSheet(
        context: context,
        builder: (context) => AddTaskScreen(textEditingController),               
  },
};

在子类中

class ChildClass extends StatelessWidget(
final TextEditingController textEditingController;
ChildClass({this.textEditingController});
///then inside build method///
Container(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Text(
        'Add your next Task',
        textAlign: TextAlign.center,
        style: TextStyle(
          color: Colors.lightBlueAccent,
          fontSize: 20,
          fontWeight: FontWeight.w400,
        ),
      ),
      TextField(
        textAlign: TextAlign.center,
        autofocus: true,
        controller: textEditingController, /// here add the controller
        onChanged: (value) {
          newTaskTitle = value;
        },
      ),
      FlatButton(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(10),
          ),
        ),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            'ADD',
            style: TextStyle(
              color: Colors.white,
              fontSize: 25,
            ),
          ),
        ),
        color: Colors.lightBlueAccent,
        onPressed: () {
          print(newTaskTitle);
        },
      ),
    ],
  ),
),

现在您可以通过在这两个类之间的任意位置调用 textEditingController.value.text 来访问 TextField 中写入的内容。

【讨论】：