Question

有一个简单的结构，它具有一个底部模态表，该模态表包含一个输入TextField和一个用于提交值的按钮，该输入TextField将文本添加到列表中。

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

问题是：如何在按下提交按钮后关闭键盘，仍然能够发送输入的值？

这是代码：

1）在主屏幕上，浮动操作按钮显示模式底部页面。

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

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

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的值。如果我在不隐藏键盘的情况下按下按钮，则效果很好；如果我隐藏键盘，它将传递一个空值。

预先感谢您的帮助。

Answer 1

好的，最简单的方法是向子类提供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中编写的内容。

Answer 2

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

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

颤振：关闭软键盘后如何保持TextField值

2 个答案: